/* ============================================================================
   Randolph Clinic — design tokens, self-hosted fonts, base typography.
   Loaded AFTER tailwind.min.css so tokens and type rules win.
   Built by Auroinfo, LLC.
   ========================================================================== */

/* ---- Self-hosted fonts ---------------------------------------------------
   Fonts are served from our own origin. Google Fonts is never hotlinked. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/eb-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/eb-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/eb-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/eb-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens -------------------------------------------------------
   Sampled from the client's logo file. */
:root {
  --navy: #0d385a;
  --navy-light: #1b4e77;
  --yellow: #fbdd03;
  --yellow-soft: #fef3c0;
  --cream: #fdfcf8;
  --white: #ffffff;
  --text: #1f2933;
  --text-muted: #4c5865;

  --blue-depth: #7faed0;
  --blue-mid: #b9d8ec;
  --blue-mist: #d9eaf6;
  --blue-wash: #c5dff0;
  --blue-sky: #a7cbe2;

  --font-heading: 'Cormorant Garamond', Georgia, Cambria, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-accent: 'Cinzel', Georgia, 'Times New Roman', serif;

  --header-height: 4.5rem;
  --site-header-height: 7rem;
}

/* ---- Base ---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px floor */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* CIPR accent family; keep Randolph's established sizes and emphasis. */
.eyebrow, .btn, .btn-yellow, .btn-navy, .btn-outline, .btn-outline-light {
  font-family: var(--font-accent);
}

/* ---- Blue layered gradient system ---------------------------------------- */
.site-surface {
  background-color: var(--cream);
  background-image: linear-gradient(180deg, var(--blue-wash) 0%, var(--cream) 42%, var(--blue-mist) 100%);
  color: var(--text);
  min-height: 100vh;
}

.surface-section {
  background-color: var(--blue-mist);
  background-image: linear-gradient(180deg, var(--blue-mid) 0%, var(--blue-wash) 48%, var(--white) 100%);
}

/* First body section under a hero: carries the hero's deepest blue down into
   the lighter blue the rest of the page sits on. */
.section-transition-blue {
  background-color: var(--blue-mist);
  background-image: linear-gradient(180deg, var(--blue-depth) 0%, var(--blue-mid) 52%, var(--blue-mist) 100%);
}

/* The mirror image: starts white and settles into blue underneath. */
.section-transition-white-to-blue {
  background-color: var(--blue-mid);
  background-image: linear-gradient(180deg, var(--white) 0%, var(--blue-wash) 48%, var(--blue-mid) 100%);
}

/* Flat surfaces that break up the gradient runs. */
.section-white {
  background-color: var(--white);
  background-image: none;
}

.section-light-blue {
  background-color: var(--blue-wash);
  background-image: none;
}

/* ---- Cross-section colour flow ------------------------------------------
   The client asked for continuity rather than per-section colour: the light
   and blue content sections of a page have to read as one uninterrupted run.
   Every such section carries exactly one of the four steps below, and the
   steps advance in a fixed order so each section opens on the colour the
   section above it closed on:

       white -> blue   (gradient)
       blue            (solid)
       blue -> white   (gradient)
       white           (solid)

   The hero already opens white and settles on the deepest blue, so it is the
   first step of the run; a page with no hero starts under the white header
   and so opens on the solid-white step instead. Both endpoints are pinned at
   0% and 100% so neighbouring sections meet on exactly the same colour.

   The five surface classes above belong to the earlier round. They are kept
   here for reference and are no longer applied to any rendered section. */
.section-flow-white-to-blue {
  background-image: linear-gradient(180deg, var(--white) 0%, var(--blue-depth) 100%);
}

.section-flow-blue {
  background-color: var(--blue-depth);
  background-image: none;
}

.section-flow-blue-to-white {
  background-image: linear-gradient(180deg, var(--blue-depth) 0%, var(--white) 100%);
}

.section-flow-white {
  background-color: var(--white);
  background-image: none;
}

/* Muted utility copy now crosses the deep end of the run, exactly as it does
   in the hero. Use the full body-text value there so contrast stays stable at
   every content reflow. */
.section-flow-white-to-blue .text-ink-muted,
.section-flow-blue .text-ink-muted,
.section-flow-blue-to-white .text-ink-muted {
  color: var(--text);
}

/* Standardized patient-reviews band — solid yellow, always the last content
   section above the dark navy CTA or footer. */
.section-reviews {
  background-color: var(--yellow-soft);
  background-image: none;
}

.hero-gradient {
  background-color: var(--blue-mist);
  background-image: linear-gradient(180deg, var(--white) 0%, var(--blue-mist) 30%, var(--blue-mid) 66%, var(--blue-depth) 100%);
  border-bottom-width: 0;
}

/* Keep small section labels legible on the continuous blue surface. */
.section-flow-blue .eyebrow {
  color: var(--navy);
}

/* Muted utility copy can cross the darkest part of the responsive hero.
   Use the full body-text value there so contrast remains stable at every
   content reflow, including narrow stacked layouts. */
.hero-gradient .text-ink-muted {
  color: var(--text);
}

/* Keep the homepage introduction as the complete first view on roomier
   screens. The hero grows to the available space and leaves the translator
   band resting at the viewport edge; content remains naturally taller on
   compact screens rather than being cropped. */
.home-opening {
  display: flex;
  min-height: calc(100svh - var(--site-header-height));
  flex-direction: column;
}

.home-hero {
  display: flex;
  flex: 1;
}

.home-hero > .wrap {
  flex: 1;
}

/* ---- Headings ------------------------------------------------------------
   Colour is left to utility classes so headings can sit on light or navy
   sections without fighting these rules. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.35rem;
  line-height: 1.35;
}

h4 {
  font-size: 1.15rem;
  line-height: 1.4;
}

p {
  text-wrap: pretty;
}

/* ---- Focus visibility ----------------------------------------------------
   Never removed. Navy ring by default; yellow ring on dark surfaces. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-navy :focus-visible,
.bg-navy :focus-visible {
  outline-color: var(--yellow);
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100%;
  z-index: 100;
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background-color: var(--navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
  transition: top 0.15s ease-in-out;
}

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

/* ---- Sticky header shadow (toggled by main.js past 40px) ----------------- */
.site-header {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px -4px rgba(13, 56, 90, 0.18);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--navy);
  text-decoration: none;
}

.site-brand-mark {
  width: clamp(2.25rem, 10vw, 3.75rem);
  height: auto;
  flex: none;
}

.site-brand-name {
  max-width: 5.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 5.7vw, 1.75rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 0.01em;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
}

/* Telephone numbers need lining, tabular figures so Cormorant's digits share
   a cap-height baseline with their parentheses and phone columns stay even. */
a[href^='tel:'] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

@media (min-width: 640px) {
  .site-brand {
    gap: 0.65rem;
  }

  .site-brand-name {
    max-width: none;
    font-size: 1.8rem;
    line-height: 1;
    white-space: nowrap;
  }
}

.contact-detail-row {
  display: grid;
  grid-template-columns: minmax(5.75rem, auto) minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
}

.contact-detail-row > dd {
  min-width: 0;
}

.cta-inline-link {
  color: var(--white);
  font: inherit;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.28em;
}

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

/* ---- Desktop dropdown navigation ---------------------------------------- */
.nav-dropdown > .nav-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-dropdown:hover > .nav-panel,
.nav-dropdown:focus-within > .nav-panel,
.nav-dropdown > .nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Header search, social links, and language switcher ------------------ */
.header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 0.55rem;
  min-height: 2.75rem;
}

.site-search-form {
  display: flex;
  width: clamp(10rem, 24vw, 18rem);
  height: 2.25rem;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(13, 56, 90, 0.28);
  border-radius: 0.5rem;
  background: var(--white);
}

.site-search-form:focus-within {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.site-search-input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.65rem;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
}

.site-search-input:focus,
.site-search-submit:focus {
  outline: none;
}

.site-search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.site-search-submit {
  display: inline-flex;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid rgba(13, 56, 90, 0.16);
  background: var(--yellow-soft);
  color: var(--navy);
  cursor: pointer;
}

.site-search-submit:hover {
  background: var(--yellow);
}

@media (max-width: 520px) {
  .header-utility {
    flex-wrap: wrap;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .site-search-form {
    order: 1;
    width: 100%;
  }

  .utility-social {
    order: 2;
    margin-left: auto;
  }

  .utility-languages {
    order: 3;
  }
}

.lang-option[aria-disabled='true'] {
  color: var(--text-muted);
  opacity: 0.65;
  cursor: not-allowed;
  text-decoration: none;
}

/* ---- Photography --------------------------------------------------------
   Client-supplied photographs are framed rather than bled to the edge: a soft
   yellow (or white) mat with rounded corners, matching the annotated layouts.
   Cropping is done with object-fit/object-position so the delivered files are
   never altered. */
.photo-frame {
  display: block;
  overflow: hidden;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background-color: var(--yellow-soft);
  box-shadow: 0 1px 2px rgba(13, 56, 90, 0.04), 0 8px 24px -12px rgba(13, 56, 90, 0.18);
}

.photo-frame-white {
  background-color: var(--white);
  border: 1px solid rgba(13, 56, 90, 0.1);
}

.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.85rem;
  object-fit: cover;
}

/* Service hero photographs keep a consistent landscape frame across the six
   pages even though the supplied files differ in aspect ratio. */
.photo-frame-hero > img {
  aspect-ratio: 4 / 3;
  object-position: center 42%;
}

@media (min-width: 1024px) {
  .photo-frame-hero > img {
    aspect-ratio: 5 / 4;
  }
}

/* Portrait-oriented clinic photography (provider portrait, clinic sign). */
.photo-frame-portrait > img {
  aspect-ratio: 3 / 4;
  object-position: center top;
}

/* Clinic photography set beside body copy on About and Mission & Vision.
   A gentle landscape band while the column is full width, relaxing back to
   the delivered portrait proportion once the photo sits next to its text. */
.photo-frame-feature > img {
  aspect-ratio: 4 / 3;
  object-position: center 42%;
}

@media (min-width: 1024px) {
  .photo-frame-feature > img {
    aspect-ratio: 3 / 4;
  }
}

/* ---- Decorative yellow rule under a section heading ---------------------- */
.rule-yellow::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 0.9rem;
  border-radius: 2px;
  background-color: var(--yellow);
}

.rule-yellow.rule-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Numbered step markers ---------------------------------------------- */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 9999px;
  background-color: var(--yellow);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* ---- Checklist bullets --------------------------------------------------- */
.list-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-check > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
}

.list-check > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
  transform: rotate(-45deg) translateY(-0.15em);
  border-radius: 1px;
}

.on-navy .list-check > li::before {
  border-color: var(--yellow);
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}