/**
 * Local development overrides
 *
 * 1. Replaces files.latticesemi.com CDN URLs with local images.
 *    (Only needed when the CDN is not accessible in local dev.)
 *
 * 2. Provides missing CSS rules that exist in legacy but were
 *    not included in the shipped lsc.css/lscExternal.css.
 */

/* ---- Drop shadow (6px gradient bar at top of category stripes) ---- */
.dropShadow {
  background-color: transparent;
  height: 6px;
  width: 100%;
  background: url("/images/dropshadow.png") top left repeat-x;
  z-index: 100;
}

/* ---- Missing pageTitle rules (legacy _content.scss / _legacy_template.scss) ---- */
@media only screen and (max-width: 1024px) {
  .pageTitle {
    margin-left: 15px;
  }
}

/* ---- Desktop language selector (above 1024px) ---- */
@media only screen and (min-width: 1025px) {
  /* Show the container (lsc.css @media <=1024 sets display:none, but its global
     duplicate also hides it — this override shows it on desktop) */
  .headerStripe ul.navItems li.languageSelectionContainer {
    display: inline-flex;
  }

  /* Re-hide all flags (lsc.css global rule leaks mobile display:block + padding-left:438px) */
  .headerStripe ul.navItems li.languageSelectionContainer .languageOverlay li {
    display: none;
    position: absolute;
    left: -5000px;
  }

  /* Show current flag via .visibleLanguage class (set by React component) */
  .headerStripe ul.navItems li.languageSelectionContainer .languageOverlay li.visibleLanguage {
    display: inline;
    position: static;
    left: auto;
  }

  /* Hover shows all flags */
  .headerStripe ul.navItems li.languageSelectionContainer .languageOverlay:hover li {
    display: block;
    position: static;
    left: auto;
    padding-left: 0;
  }
}

/* ---- Mobile overrides (1024px and below) ---- */
@media only screen and (max-width: 1024px) {
  .pageTitle {
    margin-left: 0;
  }

  /* Constrain inline-styled images in body content to container width */
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide dropbtn profile icon on mobile (shown via #profile img instead) */
  .headerStripe .dropbtn {
    padding: 0;
    background: none;
  }

  /* Sign-in dropdown: render inline in mobile nav, not as desktop flyout */
  .headerStripe .dropdown {
    display: block;
    width: 100%;
  }

  .headerStripe .dropdown-content {
    position: static;
    background-color: transparent;
    width: 100%;
  }

  .headerStripe .show {
    margin-top: 0;
  }

  /* Mobile hamburger language flag: show current flag
     (overrides lsc.css .stripeContent .hamburgermenu div#language ul li { display: none }) */
  .stripeContent .hamburgermenu div#language ul li[data-locale="en"] {
    display: inline-block !important;
  }
  html[data-lang="ja-JP"] .stripeContent .hamburgermenu div#language ul li[data-locale="en"] {
    display: none !important;
  }
  html[data-lang="ja-JP"] .stripeContent .hamburgermenu div#language ul li[data-locale="ja-JP"] {
    display: inline-block !important;
  }
  html[data-lang="zh-CN"] .stripeContent .hamburgermenu div#language ul li[data-locale="en"] {
    display: none !important;
  }
  html[data-lang="zh-CN"] .stripeContent .hamburgermenu div#language ul li[data-locale="zh-CN"] {
    display: inline-block !important;
  }
}

/* ---- Swiper compat (legacy swiperslider.css used .swiper-container, Swiper 12 CSS uses .swiper) ---- */
/* Production sets --swiper-theme-color:#ffc222 (gold) for active pagination bullets.
   Swiper 12 defaults to #007aff (blue). */
:root {
  --swiper-theme-color: #ffc222;
}

/* Swiper 12 CSS targets .swiper for overflow:hidden, but our legacy HTML uses .swiper-container.
   Swiper JS adds swiper-initialized when active — apply overflow:hidden only then. */
.swiper-container.swiper-initialized {
  overflow: hidden;
  position: relative;
}

/* ---- Home vignette card grid: tablet overrides (≤1024px) ---- */
/* lsc.css sets .botButtons { height: 400px } globally, only overrides to auto at ≤800px.
   Between 800px–1024px, .stripeContent is 100% so cards wrap — need auto height too. */
@media only screen and (max-width: 1024px) {
  .homeVignette .stripeContent .botButtons {
    height: auto;
  }
}

/* ---- Home vignette card grid: 2-column layout (≤800px) ---- */
/* lsc.css global rule .homeVignette .size1of3 .background sets margin-left:0 AFTER
   the 10px rule (same specificity, later source order wins).  Higher specificity here. */
@media only screen and (max-width: 800px) {
  .homeVignette .stripeContent .botButtons .size1of3 {
    width: 47%;
    margin-bottom: 20px;
    margin-right: 8px;
  }

  .homeVignette .stripeContent .botButtons .size1of3 .background {
    margin-left: 10px;
  }

  .homeVignette .stripeContent .botButtons .size1of3 h4 {
    font-size: 14pt;
  }

  .homeVignette .stripeContent #ThirdRowVignetteSectionButton {
    font-size: 16pt;
    margin-top: 10px;
    padding: 5px;
    width: 45%;
  }
}

/* ---- Home vignette card grid: single-column layout (≤668px) ---- */
@media only screen and (max-width: 668px) {
  .homeVignette .stripeContent .botButtons .size1of3 {
    width: 92%;
    margin-bottom: 20px;
  }

  .homeVignette .stripeContent .botButtons .size1of3 .background {
    margin-left: 0;
  }

  #FirstRowVignetteSectionButton,
  #SecondRowVignetteSectionButton,
  #ThirdRowVignetteSectionButton {
    width: 75%;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 14pt;
  }
}

/* ---- List bullet images inside page-content areas (desktop only) ----
   lsc.css hides all bullets on mobile via:
     @media (max-width:1024px) { .stripeContent ul li { list-style-image: none } }
   lscExternal.css restores them on desktop via .line > .page-content ul > li (direct child).
   Our PageBody places .page-content outside .line (sibling), so that rule never matches.
   Wrap in min-width:1025px to keep mobile bullets hidden, matching legacy behaviour. */
@media only screen and (min-width: 1025px) {
  .page-content ul > li {
    list-style-image: url("/images/key_point_bullet.png");
  }
  .page-content ul > li > ul > li {
    list-style-image: url("/images/bullet2nd.png");
  }
}

/* ---- Table row striping (lsc.js: jQuery(".data tbody").find("tr:even").css("background-color","#f3f3f3"))
   jQuery :even is 0-indexed (rows 0,2,4…) = CSS nth-child(odd) (rows 1,3,5…) ---- */
table.data tbody tr:nth-child(odd),
.packages-body tr:nth-child(odd),
.parameters-body tr:nth-child(odd) {
  background-color: #f3f3f3;
}

/* ---- Missing utility classes ---- */
.flushBottom {
  margin-bottom: 0;
}

.flushTop {
  line-height: 12pt;
}

/* ---- Category header backgrounds — desktop only (mirrors legacy: no image on mobile) ---- */

@media only screen and (min-width: 1025px) {
  .supportHeader {
    background: #333 url("/images/supportBackground.png") no-repeat 50% top !important;
  }
}

/* ---- 2x category header images for wide screens (mirrors legacy @media 1370px block) ---- */

@media only screen and (min-width: 1370px) {
  .aboutHeader {
    background: #333 url("/images/aboutBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
  .buyHeader {
    background: #333 url("/images/buyBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
  .productsHeader {
    background: #333 url("/images/productsBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
  .resourcesHeader {
    background: #333 url("/images/resourcesBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
  .solutionsHeader {
    background: #333 url("/images/solutionsBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
  .supportHeader {
    background: #333 url("/images/supportBackground2x.png") no-repeat 50% top / 100% auto !important;
  }
}

/* ---- Solution card logos: prevent stretch when Edge CDN serves unresized images.
   CM resizes via /-/media/ handler; Edge CDN may not → explicit width/height attrs
   force a non-matching aspect ratio. object-fit:contain scales within the box
   without distortion. Only targets botButtons cards (Solutions landing page). ---- */
.botButtons .noBorder > img {
  object-fit: contain;
}

/* ---- Change Password: jsErrorState (legacy inline style from ChangePassword.ascx) ---- */
.jsErrorState {
  border: 2px solid red !important;
}

/* ---- SolutionSearch icon-vignette spacing ----
   Legacy lscSolr.css floats the 48x48 icon with no right margin and leaves
   the `.Icon` span flush against it. Add a left margin so the title/subtitle
   text isn't crammed up against the icon. */
.solutionsearch .iconList .Icon {
  margin-left: 8px;
}

/* ---- SolutionSearch result colored vertical bar ----
   Legacy lscSolr.css rules `.solutionsearch .search-results .line .size2of3 .{x}border`
   require a long ancestor chain that doesn't always materialize in our React
   markup. Apply the colored left-border with a shorter, more reliable
   selector keyed on the result `<li>` class so the legacy mapping is
   preserved regardless of grid-wrapper presence:
     Boards            → yellow   (#ffc222)
     IP Cores          → orange   (#f58220)
     Reference Designs → blue     (#1f9dd8)
     Demos             → green    (#54b948)
     Default fallback  → yellow
*/
.familyMemberListItem .yellowborder,
.familyMemberListItem .blueborder,
.familyMemberListItem .orangeborder,
.familyMemberListItem .greenborder,
.familyMemberListItem .grayborder {
  margin-top: 5px;
  margin-left: 0;
  overflow: auto;
}
.familyMemberListItem .yellowborder { border-left: 3px solid #ffc222; }
.familyMemberListItem .blueborder   { border-left: 3px solid #1f9dd8; }
.familyMemberListItem .orangeborder { border-left: 3px solid #f58220; }
.familyMemberListItem .greenborder  { border-left: 3px solid #54b948; }
.familyMemberListItem .grayborder   { border-left: 3px solid #323232; }

/* Inner content padding so text isn't flush against the colored bar. */
.familyMemberListItem .yellowborder > div,
.familyMemberListItem .blueborder > div,
.familyMemberListItem .orangeborder > div,
.familyMemberListItem .greenborder > div,
.familyMemberListItem .grayborder > div {
  margin-left: 5px;
}


/* ---- reCAPTCHA legal disclosure (registration form) ---- */
.recaptcha-legal {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.5em;
}

/* Hide Google reCAPTCHA v3 badge. Permitted by Google's ToS ONLY because
 * the legal disclosure (`.recaptcha-legal`) is rendered in every form that
 * loads the script. If you ever remove the disclosure, REMOVE this rule too.
 * https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
 */
.grecaptcha-badge {
  visibility: hidden !important;
}

.headerStripe {
  position: relative;
  overflow: visible;
}