/*
 * Design system for Cranberry Psychological Center.
 *
 * The tokens below are the source of truth for colors and type. They came
 * from the client's brand kit, whose website mockup this site reproduces.
 *
 * Mobile-first: base rules are unprefixed, breakpoints layer on top at
 * 768px (tablet) and 1280px (desktop).
 */

/* ---------- Design tokens ---------- */

:root {
  /* Cranberry ramp, verbatim from the kit's :root */
  --cb-900: #2E0712;
  --cb-800: #48101E;
  --cb-700: #641327;
  --cb-600: #7E1A33; /* PRIMARY */
  --cb-500: #9C2A45;
  --cb-400: #BE5267;
  --cb-300: #D88C99;
  --cb-200: #EEC6CD;
  --cb-100: #F8E6EA;
  --cb-50: #FCF4F6;

  /* Warm neutrals */
  --ink: #211B1A;
  --cocoa: #4A3F3C;
  --stone: #7A6D68;
  --mist: #A99E98;
  --sand: #D8CDC4;
  --linen: #EFE8E0;
  --cream: #F7F2EC;
  --paper: #FFFFFF;

  /* Crimson Pro is the free stand-in for Minion, the logo's typeface. */
  --serif: "Crimson Pro", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  --maxw: 1160px;
  /* Header and footer span wider than the reading column so they sit near
     the window edges on large screens instead of floating mid-page. */
  --maxw-chrome: 1440px;
  /* Hero text block width; matches the widest the copy got before it was
     centered, so the headline keeps its two-line wrap. */
  --hero-copy-w: 500px;
  /* Gap between the centered --maxw column and the viewport edge, 0 once the
     viewport is narrower. Media that bleeds to the edge uses it as a
     negative margin. */
  --bleed: max(0px, (100vw - var(--maxw)) / 2);

  /* The kit rounds generously: 18px on content cards, 14px on tiles, 999px on
     buttons and badges. Nothing in the system uses a 4px corner. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Type scale, from the kit's "04 · Typography" scale rows. --size-hero is the
     web hero headline (40px in the mockup), which is deliberately smaller than
     the 54px display sample. Both scale down at narrow widths. */
  --size-hero: 30px;
  --size-h1: 30px;
  --size-h2: 24px;
  --size-h3: 19px;
  --size-body-l: 17px;
  --size-body: 16px;
  --size-body-s: 15px;
  --size-caption: 12px;

  /* Caps tracking. The kit sets 0.18em on every uppercase label; it is the
     single most recognizable detail of the system. */
  --track-caps: 0.18em;

  --space-section: 64px;
}

/* ---------- Reset ---------- */

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

/* Component display rules (e.g. .staff-card's flex) otherwise override
   the UA's [hidden] rule, so JS-hidden elements stay on screen. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* lazy_fade_controller.js adds .is-loading only while bytes are in flight. */
img[data-controller~="lazy-fade"] {
  transition: opacity 0.4s ease;
}

img.is-loading {
  opacity: 0;
}

a {
  color: var(--cb-600);
}

/* A phone number split at a hyphen reads as two fragments. */
a[href^="tel:"] {
  white-space: nowrap;
}

::selection {
  background-color: var(--cb-100);
  color: var(--cb-800);
}

/* One focus treatment for every interactive element. Keyboard users get a
   visible ring; mouse users never see it (:focus-visible, not :focus). */
:focus-visible {
  outline: 2px solid var(--cb-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background-color: var(--cb-600);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus {
  left: 16px;
}

/* ---------- Typography ---------- */

/* The kit sets headings in ink, not cranberry. Cranberry is reserved for the
   mark, links, and buttons; using it on every heading turns the
   accent into wallpaper. */
h1,
h2,
h3,
.display {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.display {
  font-size: var(--size-hero);
  line-height: 1.06;
}

h1 {
  font-size: var(--size-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--size-h2);
  line-height: 1.15;
}

/* H3 breaks the serif rule on purpose: the kit's scale sets it in Hanken
   Semibold 20 so subheads inside body copy stay in the reading voice. */
h3 {
  font-family: var(--sans);
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.body-l {
  font-size: var(--size-body-l);
  color: var(--cocoa);
  max-width: 34em;
}

.caption {
  font-size: var(--size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--stone);
}

.lede {
  color: var(--cocoa);
  font-size: var(--size-body-l);
  max-width: 34em;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--space-section) 0;
}

/* Alternating band. The kit's page surface pairing is cranberry-or-ink on
   cream, so cream is the contrast surface against the white page, not the
   pink tint. cb-100 is a
   fill for badges, not a full-bleed section background. */
.section--alt {
  background-color: var(--cream);
}

.section-head {
  max-width: 680px;
  margin-bottom: 32px;
}

.section-head p:last-child {
  margin-bottom: 0;
}

.section-head:last-child {
  margin-bottom: 0;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--linen);
  background-color: var(--paper);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  max-width: var(--maxw-chrome);
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative; /* anchors the mobile dropdown panel */
}

/* Logo lockup: client circle mark + two-line wordmark, per the kit's
   "horizontal / primary" variation. */
.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cb-600);
  text-decoration: none;
}

/* 48px rather than 40: the mark's thin arcs turn to mush any smaller. */
.lockup__mark {
  flex: none;
  width: 48px;
  height: 48px;
}

.lockup__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Both lines share one style so the name reads as a single, even wordmark.
   18px is the most that fits beside MENU on a 320px phone; 360px and up
   gets the full 21px (see breakpoints). */
.lockup__name,
.lockup__sub {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.lockup__sub {
  margin-top: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* On phones the CTA lives at the bottom of the MENU panel instead (see
   .site-nav__cta), so the header row is just the lockup and the toggle. */
.site-header__actions .btn {
  display: none;
}

.menu-toggle {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--size-body-s);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--cb-600);
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--cb-700);
}

.site-nav {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 4px;
  background-color: var(--paper);
  border-bottom: 1px solid var(--linen);
  padding: 12px 20px 20px;
  box-shadow: 0 12px 24px -8px rgba(72, 16, 30, 0.16);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-nav a {
  font-size: var(--size-body-s);
  font-weight: 500;
  color: var(--cocoa);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--linen);
}

.site-nav a:last-child {
  border-bottom: 0;
}

.site-nav a:hover {
  color: var(--cb-600);
}

.site-nav a[aria-current="page"] {
  color: var(--cb-600);
  font-weight: 600;
}

/* Existing-patient shortcuts: bold so they stand apart from the informational
   links, but not red, which is reserved for the current page. */
.site-nav a.site-nav__link--strong {
  font-weight: 700;
}

/* Overrides the plain .site-nav a treatment so the menu copy of the CTA
   keeps the red pill look. */
.site-nav a.site-nav__cta {
  margin-top: 12px;
  padding: 12px 24px;
  border: 1px solid var(--cb-600);
  color: var(--cream);
  font-weight: 600;
  text-align: center;
}

.site-nav a.site-nav__cta:hover {
  color: var(--cream);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--sand);
  background-color: var(--cream);
  color: var(--cocoa);
  font-size: var(--size-body-s);
}

.site-footer .wrap {
  max-width: var(--maxw-chrome);
  padding-top: 48px;
  padding-bottom: 48px;
}

.site-footer__logo {
  display: block;
  width: 180px;
  height: auto;
}

.site-footer__offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 32px 0;
  padding: 32px 0;
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}

.office__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 4px;
}

.office__address {
  margin: 0 0 4px;
  color: var(--cocoa);
}

/* Keeps phone and fax as one tight contact block; the global 16px paragraph
   gap would split them apart. */
.office > p:not(:last-child) {
  margin-bottom: 4px;
}

.office__phone {
  font-weight: 600;
  text-decoration: none;
}

/* Muted and unlinked: a fax number is secondary to the phone and isn't
   something a browser can act on. */
.office__fax {
  margin: 0;
  color: var(--stone);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--stone);
  font-size: 13px;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* ---------- Breakpoints (foundation) ---------- */

/* Component-level breakpoints live at the bottom of components.css. */

@media (min-width: 360px) {
  .lockup__name,
  .lockup__sub {
    font-size: 21px;
  }
}

/* 600px and up: lockup + MENU + CTA (~525px plus gutters) fit on one row,
   so the CTA moves out of the MENU panel and back into the header. */
@media (min-width: 600px) {
  .site-header__actions .btn {
    display: inline-block;
  }

  .site-nav a.site-nav__cta {
    display: none;
  }

  /* The hidden CTA is still :last-child, so drop the rule under the link
     that is now visually last. */
  .site-nav a:has(+ .site-nav__cta) {
    border-bottom: 0;
  }
}

/* 768px and up: tablet */
@media (min-width: 768px) {
  :root {
    --size-hero: 34px;
    --size-h1: 34px;
    --size-h2: 27px;
    --size-h3: 20px;
    --size-body-l: 18px;
    --space-section: 80px;
  }

  .wrap {
    padding: 0 32px;
  }

  /* Keeps the dropdown's links on the same edge as the lockup. */
  .site-nav {
    padding-left: 32px;
    padding-right: 32px;
  }

  .site-footer__logo {
    width: 220px;
  }

  .site-footer__offices {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
  }
}

/* 1100px and up: lockup + six inline links + CTA need ~1070px in one row;
   any narrower and the CTA wraps under the logo, so MENU stays until here. */
@media (min-width: 1100px) {
  .site-header .wrap {
    column-gap: 24px;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    border-bottom: 0;
    padding: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav a {
    padding: 0;
    border-bottom: 0;
  }

  /* Pages carry no label above the h1, so the inline nav is the wayfinding
     cue. Color alone is a weak signal (and fails for color-blind visitors);
     the underline makes the current page unmistakable. */
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* 1280px and up: desktop */
@media (min-width: 1280px) {
  :root {
    --size-hero: 40px;
    --size-h1: 38px;
    --space-section: 96px;
  }

  .wrap {
    padding: 0 40px;
  }

  .site-footer__offices {
    grid-template-columns: repeat(4, 1fr);
  }
}