/* ==========================================================================
   Bluebell Hospital — design tokens & base
   Palette taken from the logo artwork itself:
     icon tile      #8D87D7   periwinkle
     "Bluebell"     #2F2C85   indigo
     "HOSPITAL"     #00B657   green
   Neutrals are biased toward indigo so they read as part of the family
   rather than as generic greys.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --indigo-900: #281F70;
  --indigo-800: #281F70;
  --indigo:     #454192;   /* primary — the wordmark */
  --indigo-600: #454192;
  --indigo-400: #8D87D6;   /* periwinkle — the icon tile */
  --indigo-200: #CAC8EE;
  --indigo-100: #E8E6F7;
  --indigo-50:  #F4F3FC;

  /* Bright green is the logo value; the darker step is what carries white
     text — #00B657 under white only reaches 2.6:1, which fails AA. */
  --green:      #01BF66;
  --green-700:  #095435;
  --green-800:  #053A24;
  --green-50:   #E5FAF0;

  /* --- neutrals --------------------------------------------------------- */
  --ink:      #343434;
  --ink-2:    #4D4D4D;
  --ink-3:    #6E6E6E;
  --ground:   #FFFFFF;
  --ground-2: #F4F3FC;

  /* Hairlines carry brand colour rather than grey — the structure itself is
     part of the identity. */
  --rule:      rgba(141, 135, 214, .34);
  --rule-soft: rgba(141, 135, 214, .18);
  --rule-firm: rgba(141, 135, 214, .55);

  /* --- type ------------------------------------------------------------- */
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- metrics ---------------------------------------------------------- */
  --container: 1320px;
  --gutter:    32px;

  --masthead-h: 82px;
  --rail-h:     56px;
  --header-h:   138px;

  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(20, 19, 43, .06);
  --shadow-md: 0 1px 2px rgba(20, 19, 43, .05), 0 10px 24px -14px rgba(20, 19, 43, .2);
  --shadow-lg: 0 2px 4px rgba(20, 19, 43, .04), 0 28px 56px -24px rgba(27, 25, 80, .26);

  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* The header is fixed, so the page reserves its full height once. Nothing
     below shifts when the masthead collapses on scroll. */
  padding-top: var(--header-h);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 12px 20px;
  background: var(--indigo);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .2s var(--ease);
}

.skip-link:focus { top: 0; }

@media (max-width: 999px) {
  :root { --header-h: 68px; --gutter: 20px; }

  /* The closed nav panel sits just past the right edge, which otherwise adds
     its width to the scrollable area and drags the whole page sideways.
     `clip` contains it without creating a scroll container, so position:
     sticky keeps working further down the page. */
  body { overflow-x: clip; }
}

@supports not (overflow-x: clip) {
  @media (max-width: 999px) {
    body { overflow-x: hidden; }
  }
}

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