/*
 * 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;
  }

  /* The pseudo-elements below aren't matched by *, so opt them out too. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !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. Any
   larger and MENU wraps under the lockup at 320px; 360px and up gets 64px
   (see breakpoints). */
.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);
}

/* Direct children only: the submenu's last link still needs its rule, since
   Insurance follows it in the MENU panel. */
.site-nav > a:last-child {
  border-bottom: 0;
}

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

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

/* Our Team: a row like the links above, caret at the far edge so it reads
   as expandable in the MENU panel. */
.site-nav__group {
  display: flex;
  flex-direction: column;
}

.site-nav__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linen);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: var(--size-body-s);
  font-weight: 500;
  color: var(--cocoa);
  text-align: left;
  cursor: pointer;
}

/* Chevron drawn from two borders, so it takes the text color for free. */
.site-nav__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.site-nav__trigger[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

.site-nav__submenu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
}

.site-nav__submenu.is-open {
  display: flex;
}

/* 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;
}

/* ---------- Page transitions ---------- */

/* Home has no header CTA (its hero has one), so leaving or returning home
   would shove the nav and MENU sideways. Naming them lets the browser glide
   them to their new spot while the CTA slides in from the right. The rest of
   the page swaps instantly: a whole-page crossfade on every click would feel
   sluggish for a content site. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Named only at the top of the page (see scroll_top_controller.js); when
   scrolled, the header is above the fold and would fly down into place.
   Back is skipped too: Turbo restores the old scroll position, so the header
   would glide and then ride off the top as the page scrolls back down. */
:root[data-at-top]:not([data-turbo-visit-direction="back"]) .menu-toggle {
  view-transition-name: menu-toggle;
}

:root[data-at-top]:not([data-turbo-visit-direction="back"]) .site-header__actions .btn {
  view-transition-name: header-cta;
}

::view-transition-group(site-nav),
::view-transition-group(menu-toggle),
::view-transition-group(header-cta) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* :only-child means the CTA exists on just one side of the navigation, i.e.
   to or from home. Between two pages that both have it, nothing moves. */
::view-transition-new(header-cta):only-child {
  animation: header-cta-in 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Fast and front-loaded: the nav glides into this spot on the way home. */
::view-transition-old(header-cta):only-child {
  animation: header-cta-in 100ms ease-out reverse both;
}

/* Pseudo-element styles match against the incoming page, so this means
   "arriving at a page without the header CTA" (home). The nav and MENU hold
   still until the CTA has faded, instead of sliding across it. */
:root:not(:has(.site-header__actions .btn))::view-transition-group(site-nav),
:root:not(:has(.site-header__actions .btn))::view-transition-group(menu-toggle) {
  animation-delay: 100ms;
}

@keyframes header-cta-in {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

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

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

@media (min-width: 360px) {
  .lockup__mark {
    width: 64px;
    height: 64px;
  }

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

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

  .menu-toggle {
    display: none;
  }

  /* On the home page the actions box holds only the hidden toggle. Left in,
     space-between would center the nav between the lockup and that empty
     box instead of pushing it to the right edge. */
  .site-header__actions:not(:has(.btn)) {
    display: none;
  }

  /* Named only once it's inline; below this it's the MENU dropdown. */
  :root[data-at-top]:not([data-turbo-visit-direction="back"]) .site-nav {
    view-transition-name: site-nav;
  }

  .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"],
  .site-nav__trigger[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  .site-nav__group {
    position: relative;
  }

  .site-nav__trigger {
    justify-content: flex-start;
    gap: 6px;
    border-bottom: 0;
    padding: 0;
  }

  /* A floating panel under the trigger, same surface and fade as the MENU
     panel. Always laid out (display: flex) so the fade can run. */
  .site-nav__submenu {
    display: flex;
    position: absolute;
    top: calc(100% + 16px);
    left: -16px;
    min-width: 220px;
    padding: 4px 16px;
    background-color: var(--paper);
    border: 1px solid var(--linen);
    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__submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  /* Back to list rows; the inline-link reset above stripped them. In a list
     the bold red already marks the current page, so no underline here. */
  .site-nav .site-nav__submenu a {
    padding: 10px 0;
    border-bottom: 1px solid var(--linen);
    text-decoration: none;
  }

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

/* 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);
  }
}