/* Exhale Psychiatry shared stylesheet. Every page links it after the fonts link.
   Page-only rules stay in a small inline style block on the page, after this file. */

:root {
  /* Core palette, v19 design tokens */
  --slate: #4A6274;
  --slate-deep: #3d5260;
  --slate-darkest: #2d3d46;
  --sage: #7A9E7E;
  --sage-s: rgba(122,158,126,0.10);
  --sage-bg: rgba(122,158,126,0.04);
  --sage-band: rgba(122,158,126,0.14);
  --sage-soft: #9AB59E;
  --sage-text: #557458; /* sage for text and meaningful icons, passes AA on white, cream and linen */
  --euc: #6B8F7E;
  --deep: #5A7A6E;

  /* Warm / stone family (v19) */
  --warm: #D4D0CB;
  --warm-d: #A8A095;
  --warm-l: #C5BFB6;
  --warm-lr: #E8E4DF;
  --warm-p: #F5F3F0;
  --warm-text: #93897C; /* warm stone for large text */

  /* Legacy aliases mapped to v19 tokens */
  --warm-taupe: #A8A095;
  --stone: #E8E4DF;
  --stone-light: #F5F3F0;
  --linen: #F5F3F0;
  --cream: #FAFAF8;
  --white: #ffffff;

  /* Text scale (v19) */
  --text-primary: #2D3436;
  --text-secondary: #636E72;
  --text-tertiary: #667074;
  --text-quaternary: #B0B6B9;

  /* Success / change (unified with sage) */
  --green-up: #7A9E7E;
  --green-bg: rgba(122,158,126,0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

/* ---- SKIP LINK AND FOCUS ---- */
.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(45, 52, 54, 0.18);
  text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--slate); outline-offset: 2px; }

/* ---- NAV ---- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--warm-lr);
  transition: padding 0.4s ease, box-shadow 0.4s ease;
}
nav.scrolled {
  padding: 0.85rem 2.5rem;
  box-shadow: 0 1px 14px rgba(45, 52, 54, 0.04);
}

.logo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--slate);
  text-transform: lowercase;
  text-decoration: none;
  margin-right: auto;
}
.logo span { font-weight: 600; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}
.nav-link {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}
.nav-link:hover { color: var(--slate); }

.nav-cta {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--slate);
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav-cta:hover {
  background: var(--slate-deep);
}
nav .nav-cta { margin-left: 2.2rem; }

/* Menu button, shown at 1080px and under when scripts run */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  margin: -0.5rem -11px -0.5rem 0;
  padding: 0;
  color: var(--slate);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.nav-toggle svg { display: block; }

/* ---- BUTTONS ---- */
.btn-primary {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--slate);
  padding: 0.95rem 2rem;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: var(--slate-deep);
}

.btn-ghost {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 0.85rem 0.75rem;
  transition: color 0.2s ease;
}
.btn-ghost:hover { color: var(--slate); }
.btn-ghost .arr {
  margin-left: 0.35rem;
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.85em;
}
.btn-ghost:hover .arr { transform: translateX(3px); }

.btn-white {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--deep);
  padding: 1.1rem 2rem;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
.btn-white:hover {
  background: var(--slate);
}

/* ---- SECTION LABEL ---- */
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 1.25rem;
}

/* ---- FOOTER ---- */
footer {
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
.crisis-notice {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--warm-lr);
  border-bottom: 1px solid var(--warm-lr);
}
.crisis-notice .crisis-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.crisis-notice p {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.crisis-notice strong {
  font-weight: 600;
  color: var(--text-primary);
}
.crisis-notice a {
  color: var(--slate);
  text-decoration: underline;
  text-decoration-color: var(--warm);
  text-underline-offset: 2px;
}
.crisis-notice a:hover {
  text-decoration-color: var(--slate);
}
.footer-seal { margin: 0 auto 1.5rem; }
.footer-seal img { height: 64px; width: auto; display: inline-block; }
footer p {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-tertiary);
}
footer a {
  color: var(--text-tertiary);
  text-decoration: none;
}
footer a:hover { color: var(--slate); }
footer .footer-links { margin-bottom: 0.9rem; line-height: 2; }

/* ---- INNER PAGES (evaluation, pricing, telehealth, bio) ---- */
.page-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 9rem 2.5rem 0.5rem;
}
.page-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.page-lede {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
}
.page-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2.5rem 0;
}
.page-wide {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 2.5rem 0;
}
.page-section h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.page-section h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 2rem 0 0.6rem;
}
.page-section p,
.page-list li {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
}
.page-section p + p,
.page-section ul + p,
.page-section p + ul { margin-top: 1rem; }
.page-list { list-style: none; }
.page-list li {
  position: relative;
  padding-left: 1.4rem;
}
.page-list li + li { margin-top: 0.6rem; }
.page-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.78em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.page-hero p a,
.page-section p a,
.page-section li a {
  color: var(--slate);
  text-decoration: underline;
  text-decoration-color: var(--warm-text);
  text-underline-offset: 2px;
}
.page-hero p a:hover,
.page-section p a:hover,
.page-section li a:hover { text-decoration-color: var(--slate); }
.page-section strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* Numbered items */
.step-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.step-item {
  background: var(--white);
  border: 1px solid var(--warm-lr);
  border-radius: 14px;
  padding: 2rem;
}
.step-item .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--sage-text);
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
}
.page-section .step-item .step-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
}
.page-section .step-item .step-body {
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

/* Closing band with the Book button */
.page-cta {
  margin-top: 5rem;
  padding: 4.5rem 2.5rem;
  background: var(--slate);
  text-align: center;
}
.page-cta :focus-visible { outline-color: var(--white); }
/* The band is slate, so the button's usual slate hover would vanish into it */
.page-cta .btn-white:hover { background: var(--slate-deep); }

@media (max-width: 768px) {
  .page-hero { padding: 7rem 1.5rem 0.25rem; }
  .page-section { padding: 2.5rem 1.5rem 0; }
  .page-wide { padding: 1.5rem 1.5rem 0; }
  .step-grid { grid-template-columns: 1fr; }
  .step-item { padding: 1.5rem; }
  .page-cta { margin-top: 3.5rem; padding: 3.5rem 1.5rem; }
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardFloat {
  from { opacity: 0; transform: translateY(30px) rotate(0.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
/* The hidden starting state applies only when scripts run (html gets the js class in head) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- RESPONSIVE ---- */
/* Six links and the Book button need about 1000px of bar, so the menu button takes over
   at 1080px and under, which leaves room if a fallback font runs wider */
@media (max-width: 1080px) {
  .nav-link { display: none; }
  .logo, nav .nav-cta { white-space: nowrap; }
  nav .nav-cta { margin-left: 0; }

  /* Menu: the same links in the same order as a full-width panel under the bar */
  .js .nav-toggle { display: inline-flex; order: 3; }
  .js .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 2.5rem 0.75rem;
    background: var(--white);
    border-bottom: 1px solid var(--warm-lr);
    box-shadow: 0 14px 24px rgba(45, 52, 54, 0.08);
    /* short screens: the panel scrolls inside what is left under the bar */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .nav-links.open { display: flex; }
  .js .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--warm-p);
  }
  .js .nav-link:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  nav.scrolled { padding: 0.85rem 1.5rem; }
  .js .nav-links { padding: 0.25rem 1.5rem 0.75rem; }
}

/* A bar with the Book button cannot hold the wordmark, the button and the menu button
   at today's sizes under about 430px, so the wordmark and the button get slightly smaller
   in steps and the bar's side padding drops to 1rem on the narrowest phones */
@media (max-width: 430px) {
  nav:has(.nav-cta) .logo { font-size: 1.1rem; }
  nav .nav-cta { padding: 0.6rem 0.75rem; }
}
@media (max-width: 389px) {
  nav:has(.nav-cta) .logo { font-size: 1rem; }
  nav .nav-cta { font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.55rem 0.625rem; }
}
@media (max-width: 359px) {
  nav:has(.nav-cta), nav.scrolled:has(.nav-cta) { padding-left: 1rem; padding-right: 1rem; }
  nav:has(.nav-cta) .logo { font-size: 0.95rem; }
  nav .nav-cta { font-size: 0.72rem; letter-spacing: 0; padding: 0.5rem; }
}
/* Browsers without :has() get the same steps on every page so the bar still fits */
@supports not selector(:has(a)) {
  @media (max-width: 430px) { .logo { font-size: 1.1rem; } }
  @media (max-width: 389px) { .logo { font-size: 1rem; } }
  @media (max-width: 359px) { nav, nav.scrolled { padding-left: 1rem; padding-right: 1rem; } .logo { font-size: 0.95rem; } }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}