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

/* 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;
}

/* ========================================
   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"] .accordion-header {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .accordion-arrow::before {
  transform: rotate(45deg);
}

[dir="rtl"] .accordion-header[aria-expanded="true"] .accordion-arrow::before {
  transform: rotate(-135deg);
}

[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);
}