/* Shared mobile shell: compact navigation and overflow-safe footer. */
.mobile-nav-static,
.mobile-nav-toggle { display: none; }

@media (max-width: 820px) {
  :root { --mobile-header-height: 68px; }

  html { scroll-padding-top: 80px !important; }

  body { padding-top: 0 !important; overflow-x: clip; }

  /* Keep the navigation reachable while the page scrolls.  Homepage headers
     are direct children of .site; detail-page headers wrap their .topbar. */
  .site-header,
  .site > .topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 100 !important;
  }

  /* Do not fix the nested bar a second time on detail pages. */
  .site-header > .topbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
  }

  .site-header {
    height: auto !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 3px 14px rgba(28, 53, 93, .08) !important;
    backdrop-filter: blur(14px);
  }

  .topbar {
    width: 100% !important;
    min-height: 68px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    gap: 10px !important;
    border-bottom: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
  }

  /* Reserve the fixed header's space so neither hero content nor anchors are
     obscured after a scroll or a deep-link jump. */
  .site > .topbar + main,
  .site-header + main {
    padding-top: var(--mobile-header-height) !important;
  }

  /* Overview pages already reserve the fixed header height in their own
     layout. Avoid applying that offset a second time above their hero. */
  .platform-overview .site-header + .overview-main {
    padding-top: 0 !important;
  }

  .topbar > .brand,
  .topbar > .nav-actions,
  .topbar > .nav-cta {
    min-height: 68px;
    display: inline-flex !important;
    align-items: center;
  }

  .topbar > .brand { flex: 1 1 auto; min-width: 0; }
  .topbar > .nav-actions { flex: 0 0 auto; }
  .topbar > .nav-cta { display: none !important; }
  .brand-logo { max-width: min(142px, 43vw) !important; height: 27px !important; }

  /* Primary destinations are kept behind a single, reachable menu trigger. */
  .topbar > .nav,
  .topbar > .top-links {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 16px !important;
    left: 16px !important;
    display: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: visible !important;
    border: 1px solid #dce6f4 !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 18px 36px rgba(25,54,100,.16) !important;
    backdrop-filter: blur(14px);
  }

  .topbar > .nav.open,
  .topbar > .top-links.is-mobile-open { display: flex !important; }

  .topbar > .nav > a,
  .topbar > .top-links > a,
  .topbar > .nav .nav-trigger,
  .topbar > .top-links summary {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #3e516f !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none;
    white-space: nowrap;
  }

  .topbar > .nav > a[aria-current="page"],
  .topbar > .top-links > a[aria-current="page"],
  .topbar > .nav .nav-trigger[aria-expanded="true"],
  .topbar > .top-links details[open] > summary {
    color: #245bdc !important;
    background: #eff4ff !important;
    box-shadow: none !important;
  }

  .topbar > .nav .nav-dropdown,
  .topbar > .top-links .product-switcher {
    position: static !important;
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Make the product switcher a full-row target, matching the other mobile
     navigation destinations instead of limiting taps to the label itself. */
  .topbar > .nav .nav-dropdown,
  .topbar > .top-links .product-switcher,
  .topbar > .nav .nav-trigger,
  .topbar > .top-links .product-switcher > summary {
    width: 100% !important;
  }

  .topbar > .top-links .product-switcher > summary {
    box-sizing: border-box;
    cursor: pointer;
  }

  .topbar > .nav .product-menu,
  .topbar > .top-links .product-switcher-menu {
    position: fixed !important;
    z-index: 110 !important;
    top: 76px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-height: min(356px, calc(100dvh - 132px));
    overflow-y: auto;
    border-radius: 12px !important;
    box-shadow: 0 16px 34px rgba(24, 52, 98, .18) !important;
  }

  .topbar > .nav .product-menu a,
  .topbar > .top-links .product-switcher-menu a {
    min-height: 48px;
    white-space: normal;
  }

  .topbar .menu,
  .topbar .mobile-nav-toggle {
    display: grid !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-left: auto;
    padding: 0 !important;
    border: 1px solid #d7e2f4 !important;
    border-radius: 10px !important;
    color: #25436d !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(29,61,112,.06);
  }

  .topbar .menu::before,
  .topbar .menu::after,
  .topbar .mobile-nav-toggle::before,
  .topbar .mobile-nav-toggle::after {
    width: 17px;
    height: 2px;
    content: "";
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor;
    transform: translateY(-3px);
  }

  .topbar .menu::after,
  .topbar .mobile-nav-toggle::after { display: none; }
  .topbar .menu { font-size: 0 !important; }
  /* Homepage action buttons collapse into the dedicated, always-visible menu control. */
  .topbar > .nav-actions { display: none !important; }
  .topbar .nav-actions .btn,
  .topbar .nav-actions .text-btn { display: none !important; }
  .page-main { padding-top: 0 !important; }
}

@media (max-width: 820px) {
  footer.site-footer,
  .site-footer { overflow-x: clip !important; }

  .site-footer .footer-inner,
  .site-footer .footer-columns,
  .site-footer .footer-column,
  .site-footer .footer-contact { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

  /* The contact column is a third content group, never an off-canvas desktop column. */
  .site-footer .footer-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 30px !important;
  }

  .site-footer .footer-column,
  .site-footer .footer-contact {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-footer .footer-contact h2,
  .site-footer .footer-contact p,
  .site-footer .footer-contact a {
    display: block !important;
    visibility: visible !important;
  }

  .site-footer .footer-contact p,
  .site-footer .footer-contact a,
  .site-footer .footer-column p,
  .site-footer .footer-column a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .site-footer .footer-bottom { flex-wrap: wrap !important; min-width: 0 !important; }
}