/* ==========================================================================
   AcmaCorp Responsive Fixes v1.0
   --------------------------------------------------------------------------
   Measured across 320 / 375 / 480 / 768 / 1024 / 1280 / 1920 / 2560 / 3840.
   Load order: after ui-polish.css.
   Evidence for each block: /docs/responsive-changes.md
   ========================================================================== */

/* ==========================================================================
   1. MOBILE MENU
   The menu was dead site-wide: form-loader.js and scripts.min.js are
   byte-identical, both were loaded, so the toggle handler bound twice and
   every click ran toggleClass() twice — on then straight back off. The
   duplicate <script> is removed in footer.php; this modernises what it opens.

   Was: auto-height panel on a vivid #FF7F1F gradient, background still
   scrollable behind it, 30x19 burger, no keyboard or screen-reader support.
   ========================================================================== */

@media (max-width: 1023px) {

  /* --- the panel --- */
  header .header-right-main.mobile-nav-bg {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 420px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Design-system ink instead of the vivid orange gradient: white nav text
       measured ~2.5:1 on the old orange, and 18.8:1 on this. */
    background: var(--ds-ink, #001427);
    background-image: none;
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .55);
    padding-bottom: var(--ds-space-8, 48px);
    z-index: 10000;
  }

  /* slide in from the right */
  header .header-right-main {
    transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
  }
  header .header-right-main.mobile-nav-bg { transform: translateX(0); }

  /* backdrop, injected by ui-enhancements.js */
  .acma-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 12, 24, .55);
    /* Safari only dropped the prefix in 18. The rgba ground above means an
       engine without either still dims the page, so this is the polish
       rather than the mechanism. */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 240ms cubic-bezier(.4, 0, .2, 1);
  }
  .acma-nav-backdrop.is-open { opacity: 1; }

  /* <header> sets z-index:999 + position:absolute, which creates a stacking
     context — so the panel's z-index:10000 is scoped inside it and the
     body-level backdrop (9998) painted straight over the menu. Lift the whole
     header above the backdrop, but only while the menu is open. */
  body.acma-nav-open header { z-index: 10001; }

  /* stop the page scrolling behind the open panel */
  body.acma-nav-open { overflow: hidden; touch-action: none; }

  /* --- rows --- */
  header .header-right-main.mobile-nav-bg .main-menu a,
  header .header-right-main.mobile-nav-bg .menu-super-nav-container a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-block: var(--ds-space-2, 8px);
    font-size: var(--ds-text-sm, 1rem);
    letter-spacing: var(--ds-tracking-normal);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  header .header-right-main.mobile-nav-bg .main-menu a:hover,
  header .header-right-main.mobile-nav-bg .main-menu a:focus-visible {
    color: var(--ds-primary-vivid, #FF7F1F);   /* decorative on dark: 6.9:1 */
  }

  /* --- header row inside the panel --- */
  header .header-right-main.mobile-nav-bg .menu-dropdown-head {
    padding: var(--ds-space-5, 24px) var(--ds-space-5, 24px) var(--ds-space-4, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    position: sticky;
    top: 0;
    background: var(--ds-ink, #001427);
    z-index: 1;
  }
}

/* --- toggles: 44px tap targets ---
   Scoped to <=1023px on purpose. The theme hides the burger on desktop with
   display:none; setting display here unscoped overrode that and made the
   burger appear at 1024px and above. */
/* Both toggles are <button> elements. They were <a> with no href; the UA gives
   a button a background, border, padding and its own font, none of which this
   control wants, so those are reset here rather than in nine places. */
.menu-toggle-open,
.menu-toggle-close {
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 1023px) {
  .menu-toggle-open,
  .menu-toggle-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
}
/* The close X is two 30px bars pinned to left:-2px and right:0 inside the
   original 28px box. Widening the hit area to 44px pulled them apart into a
   chevron, so re-centre both bars on the new box. */
.menu-dropdown-head .menu-toggle-close::before,
.menu-dropdown-head .menu-toggle-close::after {
  left: 50%;
  right: auto;
  margin-left: -15px;
}

.menu-toggle-open:focus-visible,
.menu-toggle-close:focus-visible {
  outline: 2px solid var(--ds-white, #fff);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm, 4px);
}
.banner .wrapper .banner-left h1,
.banner h1 {
  font-size: var(--ds-display-2);
  line-height: var(--ds-leading-tight);
}
.banner .banner-left p {
  font-size: var(--ds-lede-size);
  line-height: var(--ds-leading-normal);
}

/* Section headings scale too, within the design-system scale.
   Written in :where() for the same reason the h3/h4 pair in ui-polish.css is:
   this is the default for a section heading that has no opinion of its own,
   not a decision about any component that does. At (0,1,1) it beat every
   component class, so .acma-post-card__title -- whose own rule asks for
   --ds-display-6 -- rendered at 40px the moment a listing template passed
   heading_level 2 to the card, which is exactly the prop that is supposed to
   change the level without changing the type. :where() drops it to (0,0,1). */
main :where(section, .section) :where(h2) {
  font-size: var(--ds-display-3);
}

/* ==========================================================================
   3. MOBILE DENSITY
   Section padding is generous by desktop design. Below 768 it wasted a large
   share of a small viewport, pushing content below the fold.
   ========================================================================== */

@media (max-width: 767px) {
  main > section,
  main > .section {
    padding-top: var(--ds-space-7, 40px);
    padding-bottom: var(--ds-space-7, 40px);
  }
}

@media (max-width: 479px) {
  main > section,
  main > .section {
    padding-top: var(--ds-space-6, 32px);
    padding-bottom: var(--ds-space-6, 32px);
  }
}

/* ==========================================================================
   4. GRID STACKING
   Guarantees a sane column count at each step for grid/flex card rows that
   relied on fixed flex-basis values.
   ========================================================================== */

@media (max-width: 1023px) {
  .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Flex card rows: allow wrapping and shrinking rather than overflowing. */
@media (max-width: 1023px) {
  [class*="-cards"], [class*="card-row"], [class*="-grid"] { flex-wrap: wrap; }
  [class*="-cards"] > *, [class*="card-row"] > * { min-width: 0; }
}

/* ==========================================================================
   5. TAP TARGETS
   Scoped to navigation, footer and list links. Inline links inside running
   prose are deliberately excluded — a 44px line box would break paragraphs.
   ========================================================================== */

@media (max-width: 1023px) {
  .site-footer a:not([class*="social"]),
  .menu li > a,
  .main-menu a,
  .sub-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .explore-btn,
  .content-card a,
  .icon-text-card a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .social-links a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop utility bar and language links measured 22-23px tall — just under
   the WCAG 2.2 AA target-size minimum of 24px. The assistant widget's close
   button was 11x18. These are AA, not the 44px mobile guideline. */
.supernav-link,
.header-right-supernav a,
[class^="language_"],
[class*=" language_"],
button[class*="aw5-"],
.site-footer .menu-item > a {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
button[class*="aw5-"] { justify-content: center; }

/* ==========================================================================
   6. MINIMUM LEGIBLE TEXT
   The embedded assistant widget rendered 10-11px labels at every width.
   12px is the practical floor for body-adjacent UI text.
   ========================================================================== */

body [class*="aw5-"] .aw5-wcd,
body [class*="aw5-"] span,
body [class*="aw5-"] small,
body .aw5-wcd { font-size: max(12px, 0.75rem); }

/* ==========================================================================
   7. VERY LARGE SCREENS
   Content is capped at 1616px by the container, so beyond ~1900px the layout
   simply centres. This keeps the hero from becoming a letterbox strip and
   holds a comfortable measure on 4K.
   ========================================================================== */

@media (min-width: 1920px) { .banner { max-height: 900px; }
  .banner .banner-left p { max-width: calc(68 * var(--ds-ch)); }
}

@media (prefers-reduced-motion: reduce) {
  header .header-right-main,
  .acma-nav-backdrop { transition: none !important; }
}