/* wesleydonaldtherapy.com — single-practitioner counseling site
   No external font or image requests: every asset here is CSS we own.
   (sites-platform ground rule 7 — nothing ships whose license we can't evidence.) */

:root {
  /* Hermès-inspired: signature orange, chocolate brown, cream parchment.
     Colour only — no Hermès typeface, logo, or imagery, and no affiliation
     is implied. Brown-on-orange is the authentic box printing *and* the
     accessible pairing (~7:1, where white-on-orange fails at ~3:1). */
  --bg:        #fbf7f0;
  --surface:   #ffffff;
  --surface-2: #f6ede0;
  --ink:       #3a2317;
  --muted:     #7a5c46;
  --accent:    #f37021;
  --accent-dk: #a8420e;
  --clay:      #9c6b2f;
  --line:      #e8dbc8;
  --alert-bg:  #3a2317;
  --token-bg:  #fdf1d8;
  --token-ink: #7a5312;
  --token-line:#d9a63c;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 68rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 .75rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
p  { margin: 0 0 1rem; }

a { color: var(--accent-dk); text-underline-offset: 2px; }
a:hover { color: var(--clay); }

/* ---- Fill-me tokens -------------------------------------------------------
   Every fact we cannot verify is marked, never invented. Grep `class="tk"`
   (or the {{BRACES}}) to find everything still outstanding. */
.tk {
  background: var(--token-bg);
  color: var(--token-ink);
  border-bottom: 1px dotted var(--token-line);
  padding: 0 .25em;
  border-radius: 3px;
  font-size: .95em;
  white-space: nowrap;
}

/* ---- Crisis bar — every page, above everything ---------------------------- */
.crisis {
  background: var(--alert-bg);
  color: #f7efe4;
  font-size: .875rem;
  padding: .55rem 0;
}
.crisis .wrap { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: baseline; }
.crisis strong { font-weight: 600; }
.crisis a { color: #fff; text-decoration: underline; }

/* ---- Header --------------------------------------------------------------- */
.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: .9rem;
}
.brand { font-family: var(--serif); font-size: 1.2rem; text-decoration: none; color: var(--ink); line-height: 1.2; }
.brand span { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.nav a { font-size: .95rem; text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-dk); }
.nav a[aria-current="page"] { font-weight: 600; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block; background: var(--accent); color: var(--ink);
  padding: .7rem 1.4rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: .97rem;
  border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn.ghost { background: transparent; color: var(--accent-dk); }
.btn.ghost:hover { background: var(--surface-2); color: var(--accent-dk); }

/* ---- Sections ------------------------------------------------------------- */
section { padding-block: clamp(2.5rem, 6vw, 4rem); }
section.tint { background: var(--surface-2); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 44rem; }

.hero { padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--accent); font-weight: 600; margin-bottom: .6rem; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---- Cards ---------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
/* Card headings are h2 where the card is a top-level item (services) and h3
   where it sits under a section heading (home). Both must render the same. */
.card h2, .card h3 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--accent-dk); }
.card p:last-child { margin-bottom: 0; }

/* ---- Image placeholder ----------------------------------------------------
   Real photography arrives in R2 via sync-media.yml, never committed to git
   (ground rule 6). These boxes mark the slots. */
.ph {
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0 10px, #efe2cd 10px 20px);
  border: 1px dashed #d3bfa2;
  border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: .82rem; padding: 1rem;
  aspect-ratio: 4 / 5;
}
.ph.wide { aspect-ratio: 16 / 9; }

/* ---- Prose / lists -------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .45rem; }

dl.faq dt { font-weight: 600; margin-top: 1.25rem; font-family: var(--serif); font-size: 1.08rem; }
dl.faq dd { margin: .35rem 0 0; color: var(--muted); }

table.rates { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
table.rates th, table.rates td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); }
table.rates th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* ---- Callout -------------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--surface); padding: 1.1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.25rem;
}
.callout.warn { border-left-color: var(--clay); }
.callout :last-child { margin-bottom: 0; }

/* ---- Contact methods ------------------------------------------------------ */
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contact-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.contact-list .label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .15rem; }
.contact-list a { font-size: 1.05rem; }

/* ---- Footer --------------------------------------------------------------- */
.site-foot {
  background: var(--alert-bg); color: #ecdfcd;
  padding-block: 2.5rem; margin-top: 1rem; font-size: .9rem;
}
.site-foot a { color: #fff; }
.site-foot h2 { font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .6rem; color: #f39b5f; font-weight: 600; }
.foot-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .4rem; }
.disclosure {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #5c3a26;
  color: #c9ab8d; font-size: .82rem;
}
.disclosure .tk { background: #5c3a26; color: #fff; border-bottom-color: #9a7554; }

/* ---- Accessibility -------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent-dk); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Portrait -------------------------------------------------------------
   Served from R2 via the /imgs/ mediaPrefix, not from the content bundle.
   The src is RELATIVE so it resolves under the staging path prefix too. */
.portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- Print ----------------------------------------------------------------
   Two pages here are documents that must exist off the site: the Notice of
   Privacy Practices (clients have a listed right to a paper copy) and the
   Good Faith Estimate (the No Surprises Act requires it in writing). Without
   these rules the paper copy is whatever the browser guesses.

   The supervisor disclosure (22 TAC 681.91(m)) prints with the document —
   it is required wherever his name appears, and a printout is a practice
   related document. The crisis line prints too: a client reading this on
   paper should not have to find 988 elsewhere. */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #000; --muted: #222; --line: #999;
    --alert-bg: #fff;
  }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* Screen-only furniture. */
  .skip, .nav, .cta-row, .portrait, .ph { display: none; }

  /* The masthead keeps the name + associate/supervisor line; it is the
     disclosure, not decoration. */
  .site-head { position: static; border-bottom: 1px solid #999; }
  .brand span { color: #000; }

  /* Crisis numbers stay, as plain text rather than a dark bar. */
  .crisis { background: #fff; color: #000; border-bottom: 1px solid #999; }
  .crisis a { color: #000; }

  .site-foot { background: #fff; color: #000; border-top: 1px solid #999; }
  .site-foot a, .site-foot h2 { color: #000; }
  .foot-grid { display: none; }        /* nav duplicates; the disclosure is what matters */
  .disclosure { border-top: none; color: #000; }

  .callout { border-left: 3px solid #000; background: #fff; }

  /* Print the target of external links; tel:/mailto: already read as text. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em; word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid-page; }
  li, .callout { break-inside: avoid; }
  section { padding-block: .5rem; }
}