/* © 2026 Catchment Ltd. All rights reserved.
 * Licensed for use only via the Catchment platform per the Terms & Conditions
 * at https://catchment.co.uk/Terms_and_Conditions.html
 * Open-source attributions: see https://catchment.co.uk/NOTICES.html
 */
/* Catchment — suite-wide mobile-responsive overrides
 * Covers the three patterns that the CX audit (cycle 2) flagged as P0:
 *   1. Step indicators (multi-step wizards) overflow / wrap badly at 380px
 *   2. .form-row / .form-grid 2-col grid stays 2-col on mobile, cramping inputs
 *   3. .calculation-box / 3-col grids break at 380px, producing 1px-wide cells
 * Plus other suite-wide cleanups discovered during the audit.
 *
 * Loaded via <link rel="stylesheet" href="suds-mobile-fixes.css"> in every
 * calculator HTML. Idempotent: safe to import multiple times.
 */

/* === Step indicators (multi-step wizards) === */
@media (max-width: 480px) {
  /* Horizontal-scroll the step bar instead of letting it wrap onto multiple
     lines and pushing later steps off-screen. */
  .step-indicator {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 4px !important;
    /* hide scrollbar but keep functional */
    scrollbar-width: none;
  }
  .step-indicator::-webkit-scrollbar { display: none; }
  /* Step circles: keep 44px touch target but allow proportional sizing */
  .step-indicator .step,
  .step-indicator > div {
    flex: 0 0 auto !important;
    min-width: 88px;
  }
  .step-indicator .step-circle {
    width: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
  }
  .step-indicator .step-label {
    font-size: 11px !important;
    max-width: 90px !important;
    line-height: 1.3 !important;
  }
  /* Disable the connector line — it doesn't make sense when scrolling */
  .step-indicator::before {
    display: none !important;
  }
}

/* === Form rows: collapse 2-col / 3-col grids to single column === */
@media (max-width: 480px) {
  .form-row,
  .form-grid,
  .input-row,
  .row,
  .row2,
  .row3,
  .grid-2,
  .grid-3,
  .form-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* === Calculation / results boxes: auto-fit grid that never collapses too narrow === */
@media (max-width: 768px) {
  .calculation-box,
  .summary-grid,
  .result-grid,
  .results-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
  }
}

/* === Action button rows: stack vertically below 480px === */
@media (max-width: 480px) {
  .button-group,
  .btn-group,
  .action-buttons,
  .form-actions,
  .step-actions,
  .nav-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .button-group > button,
  .button-group > a,
  .btn-group > button,
  .btn-group > a,
  .action-buttons > button,
  .action-buttons > a,
  .form-actions > button,
  .form-actions > a,
  .step-actions > button,
  .step-actions > a,
  .nav-buttons > button,
  .nav-buttons > a {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  /* Keep "Back" first visually if it was in the second slot — natural DOM
     order should be: primary first, secondary second. If existing markup
     puts Back before Next, leave it. */
}

/* === WCAG touch targets: every button at least 44x44 on mobile === */
@media (max-width: 480px) {
  button,
  .btn,
  .action-btn,
  input[type="submit"],
  input[type="button"],
  a.btn,
  a.btn-primary,
  a.btn-secondary {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* === Tables: scroll horizontally on mobile rather than overflow page === */
@media (max-width: 480px) {
  table:not(.no-mobile-scroll):not(.compliance-table) {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* compliance/checks tables benefit from staying laid out — they fit at narrow widths */
  .compliance-table {
    font-size: 12px !important;
  }
  .compliance-table td,
  .compliance-table th {
    padding: 6px 4px !important;
  }
}

/* === Help/info modals: visible close on mobile === */
@media (max-width: 480px) {
  [aria-label="Close"] {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 22px !important;
  }
}

/* === Tool-page top navbar (.qs-navbar): collapse on mobile ===
 * Pre-launch fix (2026-06-13). The per-page inline @media rules target STALE
 * class names (.qs-nav-inner / .qs-nav-back) that no longer exist — the markup
 * was renamed to .qs-nav-container / .qs-nav-cta — so the tool-page navbar
 * never collapsed on phones. The four nav links and the JS-injected
 * "Worked example" trigger rendered off the right edge, and on several pages
 * (Detention, Filter_Strip, Green_Roof, Rainwater, Swale, Privacy, FRA) this
 * produced horizontal page-scroll. Collapse it uniformly here so it matches
 * the hub's responsive behaviour. The brand logo (returns to the hub) and the
 * "Back to Catchment" CTA remain for navigation; the in-page "Why this
 * calculation" accordion remains the mobile educational entry point. */
/* Hamburger toggle (injected by suds-nav.js). Hidden on desktop. */
.qs-nav-burger { display: none; }
.qs-nav-burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--suds-slate-800, #1E293B);
  transition: transform .2s ease, opacity .2s ease;
}

/* === Catchment-rebranded tool navbar (.cat-tool-nav) reveal fix ===
 * The rebranded calculator/tool pages render a page-native hamburger
 * (.cat-nav-burger label → #catNavToggle checkbox) and reveal their menu with
 * the inline rule  #catNavToggle:checked ~ .cat-nav-links { display:flex; }.
 * That menu element ALSO carries the legacy .qs-nav-links class, so the blanket
 * `.qs-nav-links { display:none !important; }` collapse rule below clobbered the
 * inline reveal (no !important on the page side) — the burger toggled the
 * checkbox but the menu never appeared on any phone-width tool page. Restore the
 * checked-state reveal with matching !important so the page-native control works.
 * Scoped to the cat-nav checkbox, so the .qs-navbar/.qs-open path is untouched. */
@media (max-width: 880px) {
  #catNavToggle:checked ~ .qs-nav-links.cat-nav-links { display: flex !important; }
}

/* Legacy #cnav navbar (legal pages: Privacy/Cookie/Terms and any page using the
 * <input id="cnav"> + <div class="qs-nav-links"> pattern). Their inline reveal
 * targets `#cnav:checked ~ .nav-links` but the menu element is .qs-nav-links, so
 * the blanket `.qs-nav-links{display:none!important}` kept the menu shut and the
 * burger did nothing on phones. Reveal the actual menu class with matching
 * !important, scoped to the checked state so it only opens on tap. */
@media (max-width: 880px) {
  #cnav:checked ~ .qs-nav-links { display: flex !important; }
}

@media (max-width: 768px) {
  .qs-nav-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-wrap: wrap !important;
  }
  /* Keep brand + burger together on the top row; brand must not grow. */
  .qs-navbar .qs-nav-brand { flex: 0 0 auto !important; }
  /* High specificity (.qs-navbar .qs-nav-container .qs-nav-burger = 0,3,0) so the
     fixed 44px size beats the page's generic button{width:100%} rule. */
  .qs-navbar .qs-nav-container .qs-nav-burger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 10px !important;
    margin-left: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  /* Collapsed by default: links, CTA and the worked-example trigger are hidden
     until the burger is tapped. The brand logo (→ hub) stays in the bar. */
  .qs-nav-links,
  .qs-nav-cta,
  .qs-nav-container .suds-we-trigger { display: none !important; }

  /* Opened: navbar grows; items stack full-width below the bar. */
  .qs-navbar.qs-open { height: auto !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
  .qs-navbar.qs-open .qs-nav-container { height: auto !important; padding-bottom: 10px !important; }
  .qs-navbar.qs-open .qs-nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-basis: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 6px 0 0 !important;
    border-top: 1px solid var(--suds-slate-200, #E2E8F0);
  }
  .qs-navbar.qs-open .qs-nav-links a {
    padding: 13px 4px !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--suds-slate-100, #F1F5F9);
  }
  .qs-navbar.qs-open .qs-nav-cta {
    display: inline-flex !important;
    flex-basis: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 12px 0 4px !important;
  }
  .qs-navbar.qs-open .qs-nav-container .suds-we-trigger {
    display: inline-flex !important;
    flex-basis: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 0 4px !important;
  }
  /* Burger → X animation when open */
  .qs-navbar.qs-open .qs-nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .qs-navbar.qs-open .qs-nav-burger-bar:nth-child(2) { opacity: 0; }
  .qs-navbar.qs-open .qs-nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* === Horizontal-overflow clamp (phones/tablets) ===
 * Belt-and-braces guard against residual horizontal page-scroll on mobile
 * coming from edge/decorative/fixed elements. Clamps the page root only on
 * small screens; desktop layout is untouched. Vertical scrolling is
 * unaffected. The only sticky element in the suite (Privacy/Cookie .pp-toc)
 * is already switched to position:relative at its own mobile breakpoint, so
 * this does not break sticky positioning. */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    /* 2026-07-16 aesthetic audit: `hidden` turned <body> into a scroll
       container, so the sticky navbar's banner offset (top:Npx) displaced the
       bar INTO the masthead at mobile widths (49px stolen above the H1 on
       Catchment.html/hub). `clip` masks overflow identically but does NOT
       create a scroll container, so position:sticky keeps working against the
       viewport. `hidden` above stays as the fallback for older engines. */
    overflow-x: clip !important;
    max-width: 100% !important;
  }
}

/* === Legal pages (Privacy / Cookie): wrap long TOC + body links === */
@media (max-width: 768px) {
  .pp-layout { max-width: 100% !important; }
  .pp-toc, .pp-body { min-width: 0 !important; max-width: 100% !important; }
  .pp-toc a, .pp-body a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}

/* === Wizard "Steps / One page" view toggle (injected by suds-nav.js) ===
 * Opt-in power-user mode for multi-step calculators. Default (Steps) is
 * unaffected. When body.suds-onepage is set, every .step-content panel is
 * revealed and the step-navigation buttons (goToStep / nextStep / prevStep /
 * showStep) are hidden, while the action buttons (Calculate, Export, etc.)
 * remain. Applies at all widths. */
.suds-viewtoggle {
  display: inline-flex;
  margin: 0 0 16px;
  border: 1px solid var(--suds-slate-200, #E2E8F0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--suds-surface, #FFFFFF);
  -webkit-user-select: none;
  user-select: none;
  /* On some tools the toggle is injected inside `.wizard-steps`, whose
     absolutely-positioned `::before` connector line (z-index:0) was painting
     across the buttons and reading as a strike-through. Lift the toggle above it. */
  position: relative;
  z-index: 1;
}
.suds-viewtoggle button {
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600;
  font-family: inherit;
  color: var(--suds-slate-600, #475569) !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.suds-viewtoggle button + button { border-left: 1px solid var(--suds-slate-200, #E2E8F0) !important; }
.suds-viewtoggle button.active { background: var(--suds-slate-950, #0F172A) !important; color: #FFFFFF !important; }

body.suds-onepage .step-content,
body.suds-onepage .qs-wizard-step,
body.suds-onepage .step-section { display: block !important; margin-bottom: 16px; }
body.suds-onepage button[onclick*="goToStep"],
body.suds-onepage button[onclick*="gotoStep"],
body.suds-onepage button[onclick*="nextStep"],
body.suds-onepage button[onclick*="prevStep"],
body.suds-onepage button[onclick*="showStep"] { display: none !important; }
/* Revealing every panel at once can expose a wide table that was only ever
   shown on its own step; let such tables scroll within their panel. */
body.suds-onepage table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }


/* ================================================================
   WO-260718 B1 — tap targets >=44px at mobile widths (<=880px).
   (The .suds-beta-close 44px rule is mirrored at the end of the
   beta-bar block in suds-catchment.css: that file loads after this
   one and its 28px trio would otherwise win the cascade.)
   ================================================================ */
@media (max-width:880px){
  nav .qs-nav-open{min-height:44px !important;display:inline-flex !important;align-items:center !important}
  /* measured 41px with the WO's 12px pad (13px msg type) — acceptance 7.3 demands
     >=44, so the pad is 14px (acceptance governs; deviation logged) */
  .suds-beta-link{display:inline-block;padding:14px 6px;margin:-14px -6px}
  .suds-beta-bar .suds-beta-close{width:44px !important;max-width:44px !important;height:44px}
  /* (vi) every burger variant is a 44x44 minimum hit; icon/bars keep their size, centred */
  .cx-burger, .cat-nav-burger, .nav-burger, .qs-nav-burger { width:44px; height:44px; min-width:44px; min-height:44px }
  /* (vii) footer legal links: comfortable hits via the padding trick — measured
     41px at the WO's 10px pad, so 12px; .pr-footer-meta joins per the 7.4 tap
     audit (all footers, every template) */
  .cx-footer-bottom a, .qs-foot-bottom a, .footer-inner a, .pr-footer-meta a { display:inline-block; padding:12px 4px; margin:-12px -4px }
}