/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES (css/responsive.css)
   ==========================================================================
   Scope & Isolation Rules (RULE 7):
   - Strictly isolated to viewport widths < 1024px.
   - Never alter desktop tokens, desktop grid metrics, or >= 1024px layout rules.
   - Contains mobile navigation controls, card stack collapses, and touch targets.
   ========================================================================== */

#site-root {
  display: contents;
}



/* ==========================================================================
   Mobile Navigation Bar & Hamburger Dropdown (< 1024px)
   Desktop/Laptop viewport remains 100% independent and unaffected
   ========================================================================== */
@media (max-width: 1023.98px) {

  /* ==========================================================================
     Standardized Mobile Typography Presets
     Dynamically linked to manual controls in css/typography.css
     ========================================================================== */
  body {
    /* At Aero Type A */
    --type-aero-a-size: var(--type-aero-a-mobile-size, var(--type-aero-a-size-mobile, 34.4px));
    --type-aero-a-line: var(--type-aero-a-mobile-line, var(--type-aero-a-line-mobile, 39.2px));
    --type-aero-a-spacing: var(--type-aero-a-mobile-spacing, var(--type-aero-a-spacing-mobile, -1.6px));

    /* At Aero Type B */
    --type-aero-b-size: var(--type-aero-b-mobile-size, var(--type-aero-b-size-mobile, 24px));
    --type-aero-b-line: var(--type-aero-b-mobile-line, var(--type-aero-b-line-mobile, 28px));
    --type-aero-b-spacing: var(--type-aero-b-mobile-spacing, var(--type-aero-b-spacing-mobile, -0.8px));

    /* At Aero Type C */
    --type-aero-c-size: var(--type-aero-c-mobile-size, var(--type-aero-c-size-mobile, 16px));
    --type-aero-c-line: var(--type-aero-c-mobile-line, var(--type-aero-c-line-mobile, 22px));
    --type-aero-c-spacing: var(--type-aero-c-mobile-spacing, var(--type-aero-c-spacing-mobile, -0.96px));

    /* At Aero Type D */
    --type-aero-d-size: var(--type-aero-d-mobile-size, var(--type-aero-d-size-mobile, 184px));
    --type-aero-d-line: var(--type-aero-d-mobile-line, var(--type-aero-d-line-mobile, 184px));
    --type-aero-d-spacing: var(--type-aero-d-mobile-spacing, var(--type-aero-d-spacing-mobile, -13.6px));

    /* At Aero Type E */
    --type-aero-e-size: var(--type-aero-e-mobile-size, var(--type-aero-e-mobile-size, 11.6px));
    --type-aero-e-line: var(--type-aero-e-mobile-line, var(--type-aero-e-line-mobile, 16px));
    --type-aero-e-spacing: var(--type-aero-e-mobile-spacing, var(--type-aero-e-spacing-mobile, -0.24px));

    /* At Aero Type F */
    --type-aero-f-size: var(--type-aero-f-mobile-size, var(--type-aero-f-size-mobile, 12.8px));
    --type-aero-f-line: var(--type-aero-f-line-mobile, var(--type-aero-f-line-mobile, 17.6px));
    --type-aero-f-spacing: var(--type-aero-f-mobile-spacing, var(--type-aero-f-spacing-mobile, -0.24px));

    /* PP Supply Mono Type A */
    --type-mono-a-size: var(--type-mono-a-mobile-size, var(--type-mono-a-size-mobile, 9.35px));
    --type-mono-a-line: var(--type-mono-a-mobile-line, var(--type-mono-a-line-mobile, 11.05px));
    --type-mono-a-spacing: var(--type-mono-a-mobile-spacing, var(--type-mono-a-spacing-mobile, 0.425px));
    --type-mono-a-weight: 400;
    --type-mono-light-weight: 400;
  }

  .type-aero-a {
    font-size: var(--type-aero-a-size);
    line-height: var(--type-aero-a-line);
    letter-spacing: var(--type-aero-a-spacing);
  }

  .type-aero-b {
    font-size: var(--type-aero-b-size);
    line-height: var(--type-aero-b-line);
    letter-spacing: var(--type-aero-b-spacing);
  }

  .type-aero-c {
    font-size: var(--type-aero-c-size);
    line-height: var(--type-aero-c-line);
    letter-spacing: var(--type-aero-c-spacing);
  }

  .type-aero-d {
    font-size: var(--type-aero-d-size);
    line-height: var(--type-aero-d-line);
    letter-spacing: var(--type-aero-d-spacing);
  }

  .type-aero-e {
    font-size: var(--type-aero-e-size);
    line-height: var(--type-aero-e-line);
    letter-spacing: var(--type-aero-e-spacing);
  }

  .type-aero-f {
    font-size: var(--type-aero-f-size);
    line-height: var(--type-aero-f-line);
    letter-spacing: var(--type-aero-f-spacing);
  }

  .type-mono-a {
    font-size: var(--type-mono-a-size);
    line-height: var(--type-mono-a-line) !important;
    letter-spacing: var(--type-mono-a-spacing);
    font-weight: 400;
  }

  /* Mobile Mono Typography: Enforce Regular weight (400) instead of Light weight (300) across all mono text */
  .type-mono-b,
  [class*="type-mono"],
  .nav-ongoing-badge,
  .nav-dropdown-clock,
  .live-clock,
  .live-clock-gmt,
  .f3-gallery-item-index,
  .f3-gallery-subbar-tag,
  .f3-services-num-badge,
  .f3-services-scope-tag,
  .btn-badge,
  .f3-featured-more-link,
  .pm-meta-year,
  .pm-action-badge {
    font-weight: 400;
  }

  /* Dropdown Menu Typography Exemption: preserve original laptop sizing */
  .nav-dropdown-menu,
  .nav-dropdown-menu * {
    --type-aero-a-size: 43px;
    --type-aero-a-line: 49px;
    --type-aero-a-spacing: -2px;

    --type-aero-b-size: 30px;
    --type-aero-b-line: 38px;
    --type-aero-b-spacing: -1px;

    --type-aero-c-size: 20px;
    --type-aero-c-line: 30px;
    --type-aero-c-spacing: -0.8px;

    --type-aero-d-size: 230px;
    --type-aero-d-line: 230px;
    --type-aero-d-spacing: -17px;

    --type-aero-e-size: 14.5px;
    --type-aero-e-line: 20px;
    --type-aero-e-spacing: -0.3px;

    --type-aero-f-size: 16px;
    --type-aero-f-line: 22px;
    --type-aero-f-spacing: -0.3px;

    --type-mono-a-size: 11px;
    --type-mono-a-line: 13px;
    --type-mono-a-spacing: 0.5px;
    --type-mono-a-weight: 400;
    --type-mono-light-weight: 400;
  }

  .nav-dropdown-menu .type-aero-a {
    font-size: 43px;
    line-height: 49px;
    letter-spacing: -2px;
  }

  .nav-dropdown-menu .type-aero-b {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  .nav-dropdown-menu .type-aero-c {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.8px;
  }

  .nav-dropdown-menu .type-aero-d {
    font-size: 230px;
    line-height: 230px;
    letter-spacing: -17px;
  }

  .nav-dropdown-menu .type-aero-e {
    font-size: 14.5px;
    line-height: 20px;
    letter-spacing: -0.3px;
  }

  .nav-dropdown-menu .type-aero-f {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.3px;
  }

  .nav-dropdown-menu .type-mono-a {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.5px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
  }

  .site-nav-top,
  .hero-top-nav {
    top: 14px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
    will-change: auto;
    transform: none;
  }

  .nav-modular-box,
  .hero-top-nav .nav-modular-box,
  .site-nav-top .nav-modular-box,
  .hero-top-nav.nav-theme-dark .nav-modular-box,
  .hero-top-nav.nav-theme-light .nav-modular-box {
    position: relative;
    z-index: 105;
    left: 0;
    top: 0;
    transform: none;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    box-sizing: border-box;
    pointer-events: auto;
    border: none;
    background: rgba(22, 22, 22, 0.70);
    backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
    -webkit-backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
    border-radius: var(--nav-box-radius, 6px);
    box-shadow: none;
  }

  /* Smaller mobile screens (< 480px): even softer, smaller and more subtle shadow */
  @media (max-width: 480px) {

    .nav-modular-box,
    .hero-top-nav .nav-modular-box,
    .site-nav-top .nav-modular-box,
    .hero-top-nav.nav-theme-dark .nav-modular-box,
    .hero-top-nav.nav-theme-light .nav-modular-box {
      box-shadow: none;
    }
  }

  .nav-box-brand.hero-nav-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .nav-brand-logo,
  .site-nav-top .nav-brand-logo,
  .hero-top-nav .nav-brand-logo {
    width: var(--nav-logo-mobile-width, auto);
    height: var(--nav-logo-mobile-size, 24px);
    max-width: none;
  }

  /* Mobile: remove quote in navbar, keep center empty */
  .nav-status-line {
    display: none;
  }

  body.nav-dropdown-active .hero-top-nav .nav-modular-box,
  body.nav-dropdown-active .hero-top-nav.nav-theme-dark .nav-modular-box,
  body.nav-dropdown-active .hero-top-nav.nav-theme-light .nav-modular-box,
  body.nav-dropdown-active .site-nav-top .nav-modular-box,
  body.nav-dropdown-active .site-nav-top.nav-theme-dark .nav-modular-box,
  body.nav-dropdown-active .site-nav-top.nav-theme-light .nav-modular-box {
    background: rgba(0, 0, 0, 0.50);
    border: none;
    backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
    -webkit-backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
    will-change: auto;
    transform: none;
    transition: background 0.28s ease;
  }

} /* End @media (max-width: 1023.98px) */