/* ============================================================================
   responsive-fix.css  (NEW) - small-screen + accessibility corrections
   Loaded AFTER the existing stylesheets on public pages and the member portal.
   Nothing here changes the layout on desktop; every rule is either a colour
   token, a touch/small-screen media query, or a visually-hidden helper.
   ============================================================================ */

/* 1. Contrast: the brand pink #D92AA8 reaches only 4.33:1 against white (needs 4.5:1
      for normal-size text). #C62299 is ~6% darker, passes everywhere (5.13:1 on white, 4.65:1 on the pale pink tint). */
:root { --M: #C62299; }

/* 2. Visually hidden but still read by screen readers / voice control. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 1000; background: #fff; color: var(--D, #111);
  padding: 0.6rem 1rem; border-radius: 10px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.skip-link:focus { top: 0.75rem; }

/* 3. iPhone/Safari zooms the whole page when a field under 16px gets focus. */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
  select, textarea { font-size: 16px; }
}

/* 4. Public header: at 320-380px the logo + Donate + menu button were ~30px wider than the
      screen, pushing the menu button off the edge. Let the name wrap and tighten spacing. */
@media (max-width: 380px) {
  .site-header .header-inner { padding: 0.6rem 0.7rem; gap: 0.35rem; }
  .site-header .logo { gap: 0.4rem; min-width: 0; flex: 1 1 auto; }
  .site-header .logo-img { height: 32px; width: 32px; flex-shrink: 0; }
  .site-header .logo-text-wrap { min-width: 0; }
  .site-header .logo-text { font-size: 0.8rem; white-space: normal; line-height: 1.15; }
  .site-header .header-cta { gap: 0.25rem; flex-shrink: 0; }
  .site-header .btn-donate { padding: 0.5rem 0.7rem; font-size: 0.75rem; }
}

/* 5. Comfortable tap targets on touch screens (WCAG 2.5.8 / Apple 44pt / Material 48dp). */
@media (pointer: coarse) {
  .mob-nav-toggle { min-width: 44px; min-height: 44px; }
  .portal-nav a { min-height: 44px; min-width: 44px; justify-content: center; }
  .portal-body .btn, .portal-body button, .portal-body .btn-sm { min-height: 44px; }
  .q-nav a { width: 44px !important; height: 44px !important; }
  .portal-brand { min-height: 44px; }
  .portal-body summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .portal-body input:not([type=checkbox]):not([type=radio]), .portal-body select { min-height: 44px; }
  .portal-body input[type=checkbox], .portal-body input[type=radio] { width: 22px; height: 22px; }
}

/* 6. Cookie banner: was ~25% of a small phone screen. */
@media (max-width: 640px) {
  .cookie-consent-banner { padding: 0.7rem 0.85rem; gap: 0.5rem; }
  .cookie-consent-banner p { font-size: 0.8rem; line-height: 1.4; flex-basis: 100%; }
  .cookie-consent-banner .btn { padding: 0.5rem 1.2rem; font-size: 0.85rem; min-height: 40px; }
}
@media (max-height: 500px) { .cookie-consent-banner { max-height: 45vh; overflow-y: auto; } }

/* 6b. Small status tags on the training cards used light green/blue text (2.6:1 / 4.2:1). Same colours, darker. */
.card-tag[style*="var(--G)"] { color: #087f45 !important; }
.card-tag[style*="var(--S)"] { color: #3f5bd9 !important; }

/* 7. Tables inside the member portal scroll in their own box instead of widening the page. */
.af-scroll { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.af-scroll:focus-visible { outline: 3px solid var(--S, #5570F4); outline-offset: 2px; }

/* 7b. Very small phones: the member nav must fit on ONE row (icons only), and an exam gets the whole
       screen height (only the timer stays pinned) instead of a 3-row header plus timer. */
@media (max-width: 360px) { .portal-name-chip, .portal-nav .nav-divider { display: none !important; } }
@media (max-width: 640px) { body:has(.exam-timer-bar) .portal-topbar { position: static; } }

/* 8. Exam page: the timer bar is pinned just under the portal header. The header's real height
      (measured by a11y-fix.js) is used instead of a hard-coded 61px, and the bar is made compact
      on phones so it no longer takes a third of the screen. */
.exam-timer-bar { top: var(--topbar-h, 61px) !important; }
.exam-q-card { scroll-margin-top: calc(var(--topbar-h, 61px) + 120px) !important; }
@media (max-width: 640px) {
  .exam-timer-bar {
    display: grid !important; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem !important;
    padding: 0.5rem 0.8rem !important; border-radius: 12px !important; align-items: center;
  }
  .exam-timer-bar #exam-clock { font-size: 1.25rem !important; }
  .exam-timer-bar .exam-progress-track { grid-column: 1 / -1; grid-row: 2; margin: 0.15rem 0 0 !important; min-width: 0 !important; }
  .exam-timer-bar > div:last-child { grid-column: 2; grid-row: 1; }
}