/**
 * 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.
 */

/* ---- Legacy clearfix helper ----
   Floated legacy grids such as .familyMemberList rely on this class to reserve
   vertical layout space before following content renders. */
.clearfix::before,
.clearfix::after,
ul.familyMemberList::before,
ul.familyMemberList::after {
  content: "";
  display: table;
}

.clearfix::after,
ul.familyMemberList::after {
  clear: both;
}

/* ---- 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;
  }
}

/*
 * The migrated sensAI source no longer includes the transparent 334x250
 * canvas produced by the legacy media handler. Contain the wide source in
 * the authored canvas so the logo keeps its original proportions.
 */
.page-content .unit.size1of2.lastUnit > img[alt="Lattice sensAI"] {
  width: 334px !important;
  height: 250px !important;
  object-fit: contain;
  object-position: center;
}

/* ---- 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;
}

/* ---- Mobile scrollable-table container: cancel legacy negative margin ----
   lsc.css mobile rule `.outerScroll { width:105%; margin-left:-2.5% }` assumes
   the legacy ASP.NET page wrapper had matching padding to absorb the shift.
   Our PageBody/TabbedContentWidget wrappers don't, so the table's left 2.5%
   gets pushed off-screen and the absolute first column overlaps the first data
   column. Restore the outer-scroll to the container bounds. */
@media only screen and (max-width: 1024px) {
  .outerScroll {
    width: 100%;
    margin-left: 0;
  }
}

/* ---- 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/support.webp") 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/aboutUs2x.webp") no-repeat 50% top / 100% auto !important;
  }
  .buyHeader {
    background: #333 url("/images/buy2x.webp") no-repeat 50% top / 100% auto !important;
  }
  .productsHeader {
    background: #333 url("/images/products2x.webp") no-repeat 50% top / 100% auto !important;
  }
  .resourcesHeader {
    background: #333 url("/images/resources2x.webp") no-repeat 50% top / 100% auto !important;
  }
  .solutionsHeader {
    background: #333 url("/images/markets2x.webp") no-repeat 50% top / 100% auto !important;
  }
  .supportHeader {
    background: #333 url("/images/support2x.webp") 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;
}

/* ---- Sales Locator distributor logos ----
   Edge can return the original media asset when migrated resize params are
   invalid or stripped. Match the legacy `mw=150` behavior: constrain width
   while preserving each asset's natural aspect ratio. Do not impose a height
   cap because square logos such as Altron Arrow legitimately render 150x150. */
.addressBlock img.sales-locator-distributor-logo {
  display: block;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  max-height: none !important;
  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;
}

/* ---- Search pagination: no-shift hover ----
   The global legacy rule `.link:hover,a:hover { border-bottom:1px solid #97ceec }`
   (lsc.css) adds a 1px bottom border to every <a> on hover. The pagination
   buttons (SearchPagination -> .paging a) have no explicit height, so that 1px
   border grows the box on hover, nudging the row and overflowing the page by 1px
   (movement + scrollbar). Drop the border on .paging links in both states; the
   hover color change is retained, so the affordance survives without layout shift.
   Applies to /search, /solutionsearch and /support/partners (all use .paging). */
.paging a,
.paging a:hover {
  border-bottom: 0;
}

/* On very narrow screens, drop the First/Last controls so the truncated number
   pager (first, last, current ±2, ellipsis) stays comfortably on one line.
   Previous/Next + the numbers remain, which is enough to navigate. */
@media only screen and (max-width: 600px) {
  .paging .paging-edge {
    display: none;
  }
}

/* Block Diagram images (TabbedContentWidget DiagramImages field).
   Legacy sized these via the StandardLargeImage control (?mw=600&mh=372); that
   intent now lives in content — the DiagramImages item's Width/Height fields.
   This is the safety net: a diagram whose content dimensions are missing or
   oversized (e.g. the native 4001px source) still never overflows its column. */
.blockDiagramImage {
  max-width: 100%;
  height: auto;
}