/* ========================================
   Utility Styles
   MGH ED Patient Hub
   ======================================== */

/* ========================================
   Reduced Motion Preference
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .zone-info-panel {
    transition: none;
  }
}

/* ========================================
   Visually Hidden (Screen reader only)
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   Print Styles
   ======================================== */

/* Print-only provenance line: hidden on screen, stamped by main.js at print
   time so paper copies carry the site name, URL, and print date. */
.print-provenance {
  display: none;
}

@media print {
  /* beforeprint opens every <details> (main.js print support); the reveal
     animations that normally accompany an open must never leave a printed
     page snapshotted mid-fade. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .print-provenance {
    display: block !important;
    font-size: 11px;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }

  .site-header,
  .map-overlay,
  .skip-link,
  #map-btn,
  /* iOS-shell chrome: the fixed dock repeats over content on every printed
     page, and banners/decoration waste ink on discharge/imaging printouts. */
  .ios-dock,
  .footer-skyline,
  .ios-settings-overlay,
  .language-modal-overlay,
  .scroller-arrow,
  #app-update-banner,
  #site-status-banner,
  /* The dock's fade scrim is position: fixed, so print repeats it at the
     foot of EVERY page, greying out whatever line it lands on (measured
     2026-10-07: it faded the "Getting home" tile on the After Your Visit
     printout). */
  .dock-fade,
  .page-transition-ghost,
  /* Buttons do nothing on paper; this one is the "Print or save this page"
     button itself (render.js addPrintButton). */
  .print-page-row,
  .translate-restore-btn,
  /* Google Translate's own widgets. Already hidden on screen
     (components.css); named here so the printout never depends on that. */
  #google_translate_element,
  .skiptranslate,
  .goog-te-banner-frame,
  #goog-gt-tt {
    display: none !important;
  }

  /* Black on white. The app's grey page, tinted cards and pink warning box
     cost ink (or vanish, when "print backgrounds" is off) and can make grey
     text too faint on paper. Scoped to the page content and footer so the
     emergency banner keeps its drawn icon if it is ever printed. */
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  main#main-content,
  main#main-content *,
  .site-footer,
  .site-footer * {
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* The "Return to the ED or call 911 if" box is marked by its fill on
     screen; with the fill gone, a solid border keeps it standing out. */
  .content-card--warning {
    border: 2px solid #000 !important;
  }

  /* A translated page carries the "translated by a computer - ask for an
     interpreter" warning. It is fixed to the top on screen; on paper it
     prints once, in flow, so the caveat travels with the translation. */
  .translate-disclaimer:not([hidden]) {
    position: static !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
    padding: 4px 8px;
    margin-bottom: 12px;
  }

  .translate-disclaimer:not([hidden]) * {
    color: #000 !important;
  }

  /* The hero band prints as a solid color block; flatten it. */
  .ios-section-hero {
    background: none !important;
    color: #000 !important;
  }

  /* Keep each checklist row, tile and card whole across a page break. */
  .ios-checklist-item,
  .ios-tile,
  .content-card,
  .list-card,
  .feature-card,
  .dodont,
  .site-footer {
    break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  .ios-kicker {
    break-after: avoid;
  }

  body {
    font-size: 12pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Only web addresses are worth printing after a link. An in-page link
     prints as "(#getting-home)", which means nothing on paper; phone and
     email links already show the number or address as their own text. */
  a[href^="#"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after,
  a[href^="javascript:"]::after {
    content: none;
  }
}

/* ========================================
   High Contrast Mode
   ======================================== */

@media (forced-colors: active) {
  .zone-card,
  .test-card {
    border: 1px solid ButtonText;
  }
}

/* ========================================
   Reduced Transparency Preference
   Fallback to opaque backgrounds when
   user prefers reduced transparency.
   ======================================== */

@media (prefers-reduced-transparency: reduce) {
  .zone-info-panel,
  .language-modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-bg-opaque);
  }
}

/* ========================================
   Backdrop Filter Fallback
   For browsers that do not support
   backdrop-filter (graceful degradation).
   ======================================== */

@supports not (backdrop-filter: blur(1px)) {
  .zone-info-panel {
    background-color: var(--bg);
  }

  .language-modal {
    background-color: var(--bg);
  }

}