/* Vanessa Pate Counseling · site styles
   Most layout lives in inline styles carried over from the design canvas.
   This file holds the fonts, brand tokens, the header, shared components
   (forms, FAQ, pills, the phone quick bar) and the responsive layer
   that adapts the 1440px desktop layouts for tablets and phones. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-400.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/newsreader-roman.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-italic.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/work-sans.woff2) format('woff2'); }
@font-face { font-family: 'Mrs Saint Delafield'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/mrs-saint-delafield-400.woff2) format('woff2'); }

:root {
  --ink: #1D1A17;
  --cream: #FBF6EA;
  --paper: #FFFDF7;
  --apricot: #E6A25C;
  --blush: #EEB4AC;
  --butter: #F3CF7F;
  --sage: #A7CAC8;
  --muted: #5A524B;
  --muted-light: #D8CFC3;
  --link-hover: #9A4A17;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
picture { display: contents; }
.btn { flex-shrink: 0; } /* fixed-height cards must never squash their buttons */
[hidden] { display: none !important; }
.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;
}
a { color: var(--ink); }
a:hover { color: var(--link-hover); }
footer a:hover { color: var(--blush) !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
footer :focus-visible, [style*="background: var(--ink)"] :focus-visible { outline-color: var(--cream); }

.page { overflow-x: clip; }
main section[id] { scroll-margin-top: 24px; }

/* ---------- Type details ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
/* Highlight bars hug their own line: as inline-blocks they take the heading's tight
   line height instead of the font's taller box, so they never cover the line above */
h1 span[style*="background"], h2 span[style*="background"] { display: inline-block; }
/* Mrs Saint Delafield draws its apostrophe with wide margins ("you ’ re"); pull it in */
.ap { margin: 0 -0.14em; }
.aq { margin-left: -0.07em; }
footer .btn { justify-content: center; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font: 600 13px/1 'Work Sans', sans-serif; letter-spacing: 0.16em; text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--cream); }

/* ---------- Marquee ---------- */
@keyframes vpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vp-marquee { animation: none !important; }
}

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 30; padding: 20px 24px 0; }
.site-header__bar {
  position: relative; height: 76px; padding: 0 12px 0 36px; border-radius: 999px;
  background: var(--blush); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: baseline; gap: 14px; color: var(--ink); text-decoration: none; }
.brand__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.brand__tag { font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; }
.site-nav {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
}
.site-nav a { display: flex; align-items: center; height: 48px; padding: 0 14px; text-decoration: none; color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav .btn-book { height: 54px; margin-left: 10px; padding: 0 30px; border-radius: 999px; background: var(--sage); }
.site-nav .btn-book:hover { background: var(--ink); color: var(--cream); }
.nav-toggle {
  display: none; width: 52px; height: 48px; border: 0; border-radius: 999px;
  background: var(--sage); color: var(--ink); align-items: center; justify-content: center; cursor: pointer;
}

@media (max-width: 1240px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px;
    background: var(--cream); border: 1.5px solid var(--ink); border-radius: 24px;
    box-shadow: 0 18px 40px rgba(29, 26, 23, 0.12);
  }
  .site-header.open .site-nav { display: flex; }
  .site-nav a { height: 52px; padding: 0 16px; border-radius: 12px; }
  .site-nav a:hover { background: var(--paper); }
  .site-nav .btn-book { margin: 8px 0 0; justify-content: center; }
}
@media (max-width: 520px) {
  .site-header { padding: 12px 12px 0; }
  .site-header__bar { height: 62px; padding: 0 7px 0 22px; }
  .brand { flex-direction: column; gap: 2px; }
  .brand__name { font-size: 26px; }
  .brand__tag { font-size: 9px; }
}

.brand, .site-nav a { white-space: nowrap; }
@media (min-width: 1241px) and (max-width: 1440px) {
  /* laptops: tighten the full menu so it stays on one line in English and Spanish */
  .site-nav { gap: 0; letter-spacing: 0.12em; }
  .site-nav a { padding: 0 11px; }
  .site-nav .btn-book { margin-left: 8px; padding: 0 24px; }
}
.site-nav .lang-link { gap: 8px; }
.site-nav .lang-link::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}

/* ---------- Quote carousel ---------- */
.q-dot { background: transparent; }
[aria-pressed="true"] > .q-dot { background: var(--blush); }

/* ---------- Pills (service shortcuts) ---------- */
.pills { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pill {
  display: flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: 18px; line-height: 1.2; text-decoration: none; color: var(--ink);
}
.pill:hover { background: var(--ink); color: var(--cream); }

/* ---------- Proof strip (credentials under the hero) ---------- */
.proof {
  margin: 0 40px; padding: 18px 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; gap: 4px 24px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
}
.proof li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.proof li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--apricot); }
.proof li:nth-child(4n+2)::before { background: var(--blush); }
.proof li:nth-child(4n+3)::before { background: var(--sage); }
.proof li:nth-child(4n+4)::before { background: var(--butter); }
@media (max-width: 1420px) { .proof { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 56px; } }

/* ---------- "Maybe you're here because" rows ---------- */
.you-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ink); }
.you-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px;
  padding: 20px 0; border-top: 1px solid var(--ink); text-decoration: none; color: var(--ink);
  font-size: 22px; line-height: 1.35;
}
.you-list small { font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; white-space: nowrap; }
.you-list a:hover { color: var(--link-hover); }

/* ---------- Forms ---------- */
.f-label {
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
}
.f-label small { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; }
.f-input {
  width: 100%; min-height: 54px; box-sizing: border-box; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper);
  font-family: Newsreader, Georgia, serif; font-size: 18px; letter-spacing: 0; color: var(--ink);
}
textarea.f-input { padding: 14px 16px; resize: vertical; min-height: 120px; }
select.f-input {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231D1A17' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.f-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.f-note { margin: 0; font-size: 16px; line-height: 1.5; }
.form-status {
  margin: 0; padding: 14px 16px; border-radius: 3px; background: var(--paper);
  border-left: 4px solid var(--ink); font-size: 17px; line-height: 1.45;
}
button[disabled] { opacity: 0.6; cursor: progress !important; }

/* ---------- FAQ ---------- */
.faq { margin: 0; max-width: 980px; }
.faq details { border-top: 1px solid var(--ink); }
.faq details:last-child { border-bottom: 1px solid var(--ink); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 44px; padding: 20px 0; font-size: 23px; font-weight: 500; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Work Sans', sans-serif; font-size: 22px; font-weight: 500;
}
.faq details[open] summary::after { content: '\2212'; background: var(--butter); }
.faq details p { margin: 0 0 24px; max-width: 760px; font-size: 19px; line-height: 1.6; }

/* ---------- Phone quick bar (call / book) ---------- */
.quick-bar { display: none; }
@media (max-width: 640px) {
  .quick-bar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: flex; gap: 6px; padding: 6px; border-radius: 999px;
    background: var(--blush); box-shadow: 0 10px 30px rgba(29, 26, 23, 0.2);
  }
  .quick-bar a {
    flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px;
    font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
    text-decoration: none; color: var(--ink); background: var(--cream);
  }
  .quick-bar .qb-book { background: var(--ink); color: var(--cream); }
  body:has(.quick-bar) footer { padding-bottom: 120px !important; }
  /* main.js reveals the bar once the visitor scrolls, so it never covers the first screen */
  .quick-bar { transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  .quick-bar.is-visible { transform: none; visibility: visible; transition: transform 0.3s ease; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .quick-bar, .quick-bar.is-visible { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .sec { padding-left: 40px !important; padding-right: 40px !important; }
  .stack { gap: 48px !important; }
  .padx { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---------- Phones & small tablets ---------- */
@media (max-width: 900px) {
  .sec { padding: 64px 20px !important; }
  .g { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; }
  .g:not(.sec) { padding-left: 0 !important; padding-right: 0 !important; }
  main li[style*="min-height"] { min-height: 0 !important; }
  .gc { grid-column: auto !important; grid-row: auto !important; }
  .padx { padding: 8px 0 0 !important; }
  .stack { flex-direction: column !important; align-items: stretch !important; gap: 40px !important; }
  .wrap { flex-wrap: wrap; gap: 20px !important; }
  .frow { flex-wrap: wrap; }
  .btn { white-space: nowrap; padding-left: 20px !important; padding-right: 20px !important; }
  .fixh { height: auto !important; }
  .card { padding: 36px 24px !important; }
  .fw { width: 100% !important; }
  .tall { height: min(560px, 115vw) !important; }
  .hide-sm { display: none !important; }
  .blob { transform: scale(0.55); }
  /* corner circles on cards shrink into their corner, clear of the copy */
  .card > .blob[style*="top: -"][style*="right: -"] { transform: scale(0.45); transform-origin: 100% 0; }
  .card > .blob[style*="bottom: -"][style*="right: -"] { transform: scale(0.45); transform-origin: 100% 100%; }
  .q-row { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; justify-content: space-between !important; gap: 12px !important; }
  [data-q-dot] { padding: 0 !important; }
  .q-dot { flex-shrink: 0; }
  /* photo tiles that pair with a service card */
  .ph { min-height: 0 !important; height: 300px !important; }
  /* round badge hangs above the card instead of sitting on the heading */
  .badge { width: 112px; height: 112px; top: -72px !important; right: -8px !important; }
  .q-row > figure { order: -1; flex-basis: 100%; min-height: 0 !important; }
  /* inner wrappers drop their desktop side padding; sections keep the .sec gutter */
  main :not(.sec)[style*="padding: 0 40px"], main :not(.sec)[style*="padding: 0 12px"] { padding-left: 0 !important; padding-right: 0 !important; }
  main [style*="text-align: right"] { text-align: left !important; }
  footer .g { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .faq summary { font-size: 20px; }
  .proof { margin: 0 20px; padding: 12px 0; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; }
  .proof li { min-height: 36px; }
  .you-list a { grid-template-columns: minmax(0, 1fr); font-size: 20px; padding: 18px 0; }
  /* cards that are also grids keep their inner padding (the .g rule above zeroes it) */
  .g.card { padding-left: 24px !important; padding-right: 24px !important; }
  /* stacked price cards: keep the label clear of the large figure */
  .fixh.card { gap: 32px !important; }
}
@media (max-width: 520px) {
  footer .g { grid-template-columns: minmax(0, 1fr) !important; }
}