/* ========================================
   Base Styles - Reset & Foundations
   MGH ED Patient Hub
   ======================================== */

/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins */
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote {
  margin: 0;
}

/* Remove default padding on lists */
ul, ol {
  padding: 0;
}

/* ========================================
   Body & Typography
   ======================================== */

html {
  /* The single text-size knob for the whole app. preferences.js puts
     .font-size-medium/.font-size-large on this element and they move
     --font-size-root; every other size token is rem-relative, so the whole UI
     (type, spacing, tiles) scales from here exactly once, in proportion.
     A percentage - not a rem or px value - because it resolves against the
     reader's own browser font-size preference, so a patient who has already
     set large text system-wide keeps it and our control scales on top.
     Do NOT set this from --font-size-base: that token is redefined by those
     same classes on this same element, so consuming it here applied the
     setting twice (body text landed at 25px against an intended 20px, and the
     spacing and type tokens inflated 25% inside a fixed-width column). */
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: 100%;
  /* Keep keyboard focus clear of the fixed chrome (WCAG 2.4.11 Focus Not
     Obscured): without scroll padding, tabbing forward scrolls the focused
     element to the viewport's bottom edge - behind the floating dock - and
     Shift+Tab tucks it under the sticky top bar. These compose with the
     per-element scroll-margin rules in ios.css (both apply; the overshoot
     direction is safe). */
  scroll-padding-top: calc(4rem + var(--translate-banner-h, 0px));
  scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* A single long word must break rather than push the page sideways.
   This is not hypothetical: the app column is a fixed width, the display
   headings are uppercase Montserrat 800, and the text-size control multiplies
   them - so "PRESCRIPTIONS" at the largest setting rendered ~100px wider than
   its own box and put the whole page into horizontal scrolling. The heading
   *box* fit perfectly, which is why it is easy to miss: only the text spilled.
   `break-word` only ever acts on a word that genuinely cannot fit, so normal
   copy is untouched. Long medical terms and German/Tamil translations hit this
   same edge, so it belongs on the base elements rather than one component. */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, figcaption, blockquote, summary {
  overflow-wrap: break-word;
}

/* -------- Hyphenate the narrow measures, and only those --------

   break-word above is a last resort: it slices the word at whatever letter
   runs out of room and prints no hyphen, so the German for "support programs"
   rendered "UNTERSTUTZUNGSPROG / RAMME" - a typo, not a line break. Adding
   `hyphens: auto` makes that break land on a syllable and be marked.

   Scoped to a list rather than applied to every text element, deliberately.
   `hyphens: auto` does not only rescue words that cannot fit; it also
   hyphenates ordinary prose to even out a ragged edge, which would change how
   English body copy reads for the majority of patients. The translation sweep
   of 2026-08-07 measured where breaks actually happen, and it is only ever
   the fixed narrow measures: tile titles in the two-column grid, the stat
   labels, the dock cells. Prose in a full-width card has room and never hits
   break-word at all. So these get hyphens and paragraphs do not.

   `.ios-section-hero__title` carries its own copy of this (see ios.css) and
   predates the sweep.

   `<html lang>` is kept in step with the translation target by translate.js,
   so the correct hyphen dictionary is selected. Headless Chromium ships no
   dictionaries at all, so this is invisible in our screenshots and only pays
   off on a real phone.

   The list is the measured one, not a guessed one: every selector here was
   observed breaking a word mid-syllable in the sweep. `.ios-hero__title` and
   `.ios-section-hero__title` are the two display headings, which run out of
   room first because they are uppercase Montserrat 800. */
.ios-hero__title,
.ios-tile__title,
.ios-tile__subtitle,
.ios-feedback__title,
.feature-card__title,
.feature-card__stat-label,
.feature-card__stat-num,
.team-tile__title,
.test-tile__title,
.list-card__title,
.ios-dock__link span {
  hyphens: auto;
  /* Rescue hatch only, not edge-evening. Unlimited, `hyphens: auto` also
     splits short words purely to even the ragged edge - the After grid tile
     rendered "fam-ily doctor" (Alvin, 2026-08-15). A word under 10 letters
     now never hyphenates, and a longer one must keep at least 5 letters on
     each side, so English labels stay whole while a 23-letter translated
     compound still breaks on a marked syllable instead of overflowing.
     Chrome/Edge read the standard property, Safari the -webkit pair (its
     before/after limits imply the same 10-letter minimum); Firefox supports
     neither and keeps the old behaviour. */
  hyphenate-limit-chars: 10 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
}

/* ========================================
   Headings
   ======================================== */

/* Brand headings: Montserrat (web realization of Gotham). Display levels
   (h1/h2) use the tehn.ca signature - weight 800, UPPERCASE, slight
   positive tracking. Deeper levels (h3/h4) stay sentence case at 700:
   they carry long question-style headings (FAQ, accordions) where
   all-caps would hurt readability for a grade 6-8 audience. */
h1, h2, h3, h4 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  color: var(--text);
}

h1, h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* First heading inside accordion body should not have top margin */
.accordion-body > h3:first-child {
  margin-top: 0;
}

/* ========================================
   Paragraphs & Text
   ======================================== */

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

em {
  color: var(--text-muted);
}

/* ========================================
   Links
   ======================================== */

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-hover);
}

abbr[title] {
  text-decoration: none;
  cursor: default;
}

a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

/* External link indicator */
/* Removed: .external-link::after - no element carries .external-link. */

/* Inline link buttons (styled as links but are buttons) */
.inline-link {
  display: inline;
  background: none;
  border: none;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.inline-link:hover {
  color: var(--link-hover);
}

.inline-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

/* ========================================
   Lists
   ======================================== */

ul, ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}

li {
  margin-bottom: var(--space-xs);
}

li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
li > ul,
li > ol {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* ========================================
   Layout Container
   ======================================== */

.site-header,
main,
.site-footer {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

@media (min-width: 481px) {
  .site-header,
  main,
  .site-footer {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ========================================
   Focus Styles (Accessibility)
   ======================================== */

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Remove outline for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Skip Link (Accessibility)
   ======================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  /* Primary lime + charcoal: the brand CTA pairing (white-on-green fails AA) */
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: var(--space-sm);
  border-radius: var(--border-radius-sm);
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  min-height: var(--min-touch-target);
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  top: var(--space-xs);
}

/* ========================================
   Images
   ======================================== */

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   Selection
   ======================================== */

::selection {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
}

/* ========================================
   RTL (Right-to-Left) Support
   Activated by Google Translate for Arabic, Urdu, etc.
   ======================================== */

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-left: 0;
  padding-right: var(--space-md);
}

[dir="rtl"] .skip-link {
  left: auto;
  right: var(--space-sm);
}

[dir="rtl"] .subsection summary {
  flex-direction: row-reverse;
}

[dir="rtl"] .subsection .details-chevron {
  margin-left: 0;
  margin-right: var(--space-sm);
}

[dir="rtl"] .faq-item summary {
  flex-direction: row-reverse;
}

[dir="rtl"] .faq-item .details-chevron {
  margin-left: 0;
  margin-right: var(--space-sm);
}

[dir="rtl"] .flow-step summary {
  flex-direction: row-reverse;
}

[dir="rtl"] .flow-step .details-chevron {
  margin-left: 0;
  margin-right: var(--space-sm);
}

[dir="rtl"] .inline-details .details-chevron {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .flow-step summary h3,
[dir="rtl"] .subsection summary :is(h2, h3),
[dir="rtl"] .details-summary-label {
  text-align: right;
}

[dir="rtl"] .zone-btn {
  border-left: 1px solid var(--border);
  border-right: 4px solid var(--zone-color, var(--border));
  text-align: right;
}

[dir="rtl"] .zone-btn.active {
  border-right-width: 6px;
}

[dir="rtl"] .zone-btn-arrow {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .zone-info-close {
  left: var(--space-xs);
  right: auto;
}

[dir="rtl"] .zone-info-title {
  padding-right: 0;
  padding-left: var(--min-touch-target);
}