/**
 * ECZA site foundations.
 *
 * The token set is lifted from the index-v4 prototype: Fraunces for display,
 * Inter for text, and a cream/champagne palette rather than the clinical blue
 * a hospital site defaults to.
 *
 * Sections paint their own background and spacing inline, from the style
 * cascade — nothing here should fight that.
 */

:root {
  /* Surfaces */
  --cream-50:  #FDFCFA;
  --cream-100: #F8F5EF;
  --cream-200: #EDE8DE;
  --cream-300: #E2D9CC;
  --linen:     #F3EFE6;

  /* Ink */
  --ink:       #1C2429;
  --ink-soft:  #3D4A54;
  --ink-muted: #626E78;   /* darkened from #6B7882: 4.42 on cream failed AA */

  /*
   * Accent.
   *
   * The prototype's champagne (#A8926F) is 2.92:1 on cream — well under the
   * 4.5 WCAG AA needs, and under 3.0 even for large text. It stays as the
   * decorative tone for icons, rules and fills, where the 3:1 non-text
   * threshold applies; --champagne-text is the darkened value for anything a
   * visitor has to read. On a hospital site the reading colour has to clear
   * AA, so this is deliberately two tokens rather than one compromise.
   */
  --champagne:       #A8926F;
  --champagne-text:  #7D6A4C;   /* 5.07 on cream, 4.53 on linen */
  --champagne-light: #C9B99A;   /* for dark surfaces: 8.16 on ink */
  --umc-red:         #D63A18;

  --border-hairline: rgba(28, 36, 41, 0.08);
  --border-soft:     rgba(28, 36, 41, 0.12);
  --shadow-card:     0 8px 40px -16px rgba(28, 36, 41, 0.08);
  --shadow-luxury:   0 24px 80px -32px rgba(28, 36, 41, 0.12);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --shell: 1200px;
  --radius: 14px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}

/*
 * Text for screen readers only.
 *
 * Used where an icon carries the meaning and a sighted reader does not need the
 * word repeated — the contact rows, the menu button. Clipped rather than
 * display:none, which would remove it from the accessibility tree too.
 */
.ecza-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ sections */

.ecza-section {
  position: relative;
  /* Background and padding arrive inline from the style cascade. */
}

.ecza-section__inner {
  width: min(100% - 3rem, var(--shell));
  margin-inline: auto;
}

.ecza-section__head { margin-bottom: 2.5rem; max-width: var(--measure); }

.ecza-section__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne-text);
}

.ecza-section__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ecza-section__intro { color: var(--ink-soft); }

/* A dark section flips its own type; nothing outside it needs to know. */
.ecza-section.is-dark,
.ecza-section.is-dark .ecza-section__intro,
.ecza-section.is-dark .ecza-prose { color: var(--cream-100); }
.ecza-section.is-dark .ecza-section__eyebrow { color: var(--champagne-light); }

/* Alignment and width, set from registry settings. */
.is-align-center { text-align: center; }
.is-align-center .ecza-section__head,
.is-align-center .ecza-prose { margin-inline: auto; }
.is-align-right { text-align: right; }

.is-width-narrow .ecza-prose { max-width: var(--measure); }
.is-width-wide .ecza-prose { max-width: none; }

/* -------------------------------------------------------------------- prose */

.ecza-prose > :first-child { margin-top: 0; }
.ecza-prose > :last-child { margin-bottom: 0; }
.ecza-prose p { margin: 0 0 1.15em; }

.ecza-prose h2, .ecza-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  margin: 2em 0 0.6em;
}

.ecza-prose a {
  color: var(--ink);
  text-decoration-color: var(--champagne);
  text-underline-offset: 0.2em;
}
.ecza-prose a:hover { color: var(--champagne-text); }

.ecza-prose ul, .ecza-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.ecza-prose li { margin-bottom: 0.4em; }

/* --------------------------------------------------------------------- icon */

.ecza-icon { display: block; color: var(--champagne-text); }
.is-dark .ecza-icon { color: var(--champagne-light); }

/* ------------------------------------------------------------------ preview */

.ecza-preview__banner {
  margin: 0;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--cream-100);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.ecza-preview__empty { padding: 4rem 1rem; text-align: center; color: var(--ink-muted); }

/* --------------------------------------------------------------- reduced motion */

@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;
  }
}

/**
 * The fallback page heading.
 *
 * Rendered only when no hero section claimed the <h1>. Sized to lead the page
 * without competing with a hero that might later replace it.
 */
.ecza-page-heading {
  background: var(--cream-50);
  padding-top: 4.5rem;
  padding-bottom: 2rem;
}

/* ------------------------------------------------------------------ buttons */

.ecza-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream-50);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ecza-button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.ecza-button:disabled { opacity: 0.6; cursor: default; }

/* On a dark surface the solid ink button disappears, so it inverts. */
.ecza-button--light,
.is-dark .ecza-button {
  background: var(--cream-50);
  border-color: var(--cream-50);
  color: var(--ink);
}
.ecza-button--light:hover,
.is-dark .ecza-button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }

.ecza-button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-soft);
}
.ecza-button--ghost:hover { background: transparent; border-color: var(--champagne); color: var(--champagne-text); }
.is-dark .ecza-button--ghost { color: var(--cream-100); border-color: rgba(255, 255, 255, 0.28); }

/*
 * A visible focus ring everywhere, since much of this site is links and forms.
 *
 * Uses the darkened tone: a focus indicator is a UI component under WCAG 1.4.11
 * and must clear 3:1, which the decorative champagne (2.92 on cream) does not.
 */
:where(a, button, input, textarea, select, summary, details):focus-visible {
  outline: 2px solid var(--champagne-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On a dark section the same ring would disappear, so it inverts. */
.is-dark :where(a, button, input, textarea, select, summary, details):focus-visible,
.ecza-footer :where(a, button):focus-visible {
  outline-color: var(--champagne-light);
}