@import url('./tokens.css');

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
}

.mobile-nav ul { list-style: none; padding: 14px 0; margin: 0; }
.mobile-nav li { padding: 8px 0; }
.mobile-nav a { font-size: 16px; }

.site-nav .has-about-menu { position: relative; }
.site-nav .about-submenu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
  visibility: hidden;
  pointer-events: none;
}
.site-nav .has-about-menu:hover > .about-submenu,
.site-nav .has-about-menu:focus-within > .about-submenu { visibility: visible; pointer-events: auto; }
.site-nav .about-submenu a { display: block; padding: 10px 12px; }
.site-nav .about-submenu a:hover,
.site-nav .about-submenu a:focus-visible { background: var(--mist); color: var(--brand-blue); }
.mobile-nav .mobile-about-menu > .about-submenu { padding: 4px 0 0 20px; }
@media (max-width: 900px) {
  .mobile-nav:has(.mobile-about-menu):not([hidden]) { display: block; }
}

.site-nav .has-mega { position: relative; }
.site-nav .has-mega > .mega-menu::before {
  content: '';
  position: absolute;
  inset: -24px 0 100%;
}
.mega-menu {
  position: absolute;
  top: calc(100% + 24px);
  left: -18px;
  min-width: 240px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mega-category-list { display: grid; gap: 8px; }
.mega-category { padding: 8px; font-size: 16px; }
.mega-category:hover,
.mega-category:focus-visible,
.mega-category[aria-current="true"] { background: var(--mist); color: var(--brand-blue); }
.aib-editor-empty { padding: 20px; border: 1px dashed var(--line); background: rgba(234,245,251,.5); color: rgba(18,50,74,.65); }

.page-banner { min-height: 480px; display: grid; align-items: end; padding: 72px 0; background: var(--mist) var(--inner-banner-image) center/cover no-repeat; color: #fff; }
.page-banner__overlay { padding: 32px; background: linear-gradient(90deg, rgba(18,50,74,.84), rgba(18,50,74,.18)); }
.page-banner h1 { margin: 8px 0; color: #fff; font-size: clamp(44px, 5vw, 72px); line-height: 1.05; }
.breadcrumbs { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.archive-shell { padding: 0 0 72px; }
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 56px; }
.archive-card { border: 1px solid var(--line); background: #fff; }
.archive-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--mist); }
.archive-card__media img { width: 100%; height: 100%; object-fit: cover; }
.archive-card__body { padding: 18px; }
.archive-card h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.archive-card p { color: rgba(18,50,74,.68); font-size: 15px; }
.pagination { margin-top: 36px; }

@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .archive-grid { grid-template-columns: 1fr; }
  .page-banner { min-height: 480px; padding: 48px 0; background-position: center; }
  .site-header:has(.mobile-nav:not([hidden])) .mobile-nav { display: block; }
}

body.home .fsq-production-line-process__eyebrow,
body.home .fsq-main-products__eyebrow,
body.home .fsq-advantages__heading .section-label,
body.home .fsq-company__eyebrow,
body.home .fsq-about-facts__eyebrow,
body.home .fsq-quality__eyebrow,
body.home .fsq-certificate-showcase__eyebrow,
body.home .fsq-business-news__eyebrow,
body.home .fsq-case-carousel__eyebrow,
body.home .fsq-categories__eyebrow {
  display: none;
}

body.home .fsq-about-facts__metrics {
  display: none;
}

body.home .site-front .btn,
body.home .site-front .fsq-main-products__link,
body.home .site-front .fsq-company__cta,
body.home .site-front .fsq-about-facts__cta,
body.home .site-front .fsq-business-news__learn-more,
body.home .site-front .fsq-case-carousel__feature-link,
body.home .site-front .fsq-case-carousel__card-link,
body.home .site-front .fsq-inquiry__action {
  border-color: #046bd2;
  background: #046bd2;
  color: #fff;
}

body.home .site-front .btn:hover,
body.home .site-front .btn:focus-visible,
body.home .site-front .fsq-main-products__link:hover,
body.home .site-front .fsq-main-products__link:focus-visible,
body.home .site-front .fsq-company__cta:hover,
body.home .site-front .fsq-company__cta:focus-visible,
body.home .site-front .fsq-about-facts__cta:hover,
body.home .site-front .fsq-about-facts__cta:focus-visible,
body.home .site-front .fsq-business-news__learn-more:hover,
body.home .site-front .fsq-business-news__learn-more:focus-visible,
body.home .site-front .fsq-case-carousel__feature-link:hover,
body.home .site-front .fsq-case-carousel__feature-link:focus-visible,
body.home .site-front .fsq-case-carousel__card-link:hover,
body.home .site-front .fsq-case-carousel__card-link:focus-visible,
body.home .site-front .fsq-inquiry__action:hover,
body.home .site-front .fsq-inquiry__action:focus-visible {
  border-color: #046bd2;
  background: #046bd2;
  color: #fff;
}

body.home .site-front .fsq-business-news__learn-more,
body.home .site-front .fsq-case-carousel__card-link {
  align-self: flex-start;
  padding: 12px 18px;
  border-radius: 4px;
  text-decoration: none;
}

/* Responsive revision v8.71: expand the existing navigation, including every dropdown link. */
@media(max-width:900px){
 .site-header:has(.mobile-nav:not([hidden])) .nav-bar{flex-wrap:wrap;padding-bottom:16px}
 .site-header:has(.mobile-nav:not([hidden])) .site-nav{display:block;flex-basis:100%;order:3;margin-left:0}
 .site-header:has(.mobile-nav:not([hidden])) .site-nav>ul{flex-direction:column;align-items:stretch;gap:0}
 .site-header:has(.mobile-nav:not([hidden])) .site-nav>ul>li>a{display:flex;padding:10px 0}
 .site-header:has(.mobile-nav:not([hidden])) .mega-menu{position:static;min-width:0;margin:0;padding:4px 12px;border:0;box-shadow:none;opacity:1;transform:none;pointer-events:auto}
 .site-header:has(.mobile-nav:not([hidden])) .mega-menu::before{display:none}
 .site-header:has(.mobile-nav:not([hidden])) .mega-category-list{gap:0}
 .site-header:has(.mobile-nav:not([hidden])) .mega-category{display:block;white-space:normal}
 .site-header:has(.mobile-nav:not([hidden])) .about-submenu{position:static;min-width:0;padding:0 12px;margin:0;border:0;box-shadow:none;visibility:visible;pointer-events:auto}
 .site-header:has(.mobile-nav:not([hidden])) .header-actions{display:flex;flex-basis:100%;order:4}
 .site-header .mobile-nav:not([hidden]){display:none}
}

/* Small-screen footer replacement; the established laptop/desktop footer stays intact. */
.mobile-bottom-nav{display:none}
@media(max-width:1040px){
 body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
 .site-footer{display:none}
 .mobile-bottom-nav{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(70px + env(safe-area-inset-bottom,0px));padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #eee;background:#fff;box-sizing:border-box;font-family:Outfit,Arial,sans-serif}
 .mobile-bottom-nav a{display:flex;min-width:0;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#252525;font-size:16px;line-height:20px;text-decoration:none}
 .mobile-bottom-nav .xhl-icon{color:#046bd2;font-size:20px;line-height:20px}
 .mobile-bottom-nav a:hover,.mobile-bottom-nav a:focus-visible{color:#d62070}
 .mobile-bottom-nav a:focus-visible{outline:2px solid #d62070;outline-offset:-2px}
}

/* Products/About desktop dropdowns share one position and visual treatment. */
@media(min-width:901px){
 .site-nav :is(.mega-menu,.about-submenu){top:calc(100% + 24px);left:-18px;z-index:30;width:max-content;min-width:220px;margin:0;padding:12px;border:1px solid var(--line);border-radius:4px;background:#fff;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
 .site-nav :is(.has-mega,.has-about-menu):is(:hover,:focus-within)>:is(.mega-menu,.about-submenu){opacity:1;visibility:visible;pointer-events:auto;transform:none}
 .site-nav .has-about-menu>.about-submenu::before{content:'';position:absolute;inset:-24px 0 100%}
 .site-nav .mega-category-list{gap:0}
 .site-nav :is(.mega-category,.about-submenu a){display:block;padding:10px 12px;font-size:16px;font-weight:400;line-height:1.65}
}

/* Header dropdown labels only, desktop and mobile. */
.site-header :is(.mega-category,.about-submenu a){font-size:14px}