/* letssaymore.com — base styles
   Design tokens and structural rules. Component styling is inline on the
   elements (carried over from the design); this file holds resets, fonts,
   responsive nav behaviour, and interaction states. */

:root {
  --cream: #faf6ee;
  --panel: #f4eee1;
  --panel-border: #ece3d3;
  --ink: #3c3a30;
  --ink-soft: #6b6857;
  --ink-muted: #9a9583;
  --sage: #94a986;
  --sage-hover: #7f9670;
  --sage-ink: #2f3a28;
  --link: #61703f;
  --link-hover: #4c5931;
  --mustard: #e8d5a6;
  --peach: #e9be9f;
  --footer: #2f2d26;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
em { font-style: italic; }
img { max-width: 100%; }
::selection { background: #e8d3a3; }

:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- navigation ---------- */
.nav-desktop { display: flex; align-items: center; gap: 26px; }
.nav-burger { display: none; }
.nav-mobile-panel { display: none; }

@media (max-width: 860px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .nav-mobile-panel[data-open] { display: flex !important; }
}

/* services dropdown: hover on desktop, plus JS/keyboard support */
.svc-wrap { position: relative; }
.svc-panel { display: none; }
.svc-item { transition: background .18s ease, color .18s ease; }
.svc-item:hover, .svc-item:focus-visible { background: #f0e7d6; color: #4c5931; }
.svc-wrap:hover .svc-panel,
.svc-panel[data-open] { display: flex !important; }

/* Invisible bridge across the gap between the trigger and the panel.
   Without this the panel closes as the pointer crosses the 14px gap. */
.svc-panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
/* Widen the hover target around the trigger itself. */
.svc-wrap > a { padding-block: 8px; }

/* ---------- FAQ accordion ---------- */
[data-action="faq-toggle"] { font: inherit; }
[data-action="faq-toggle"] svg { transition: transform .25s ease; }
[data-action="faq-toggle"][aria-expanded="true"] svg { transform: rotate(180deg) !important; }

/* ---------- early-intervention band ----------
   Two stacked rows: text + rectangular photo, then circular photo + text.
   The arch sits behind the photo and bleeds out to the lower left. */
.ei-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 116px);
}
.ei-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.ei-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #2f4030;
}
.ei-body {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(16.5px, 1.45vw, 21px);
  line-height: 1.6;
  color: #2f4030;
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 30em;
}
.ei-body a { color: #2f4030; text-decoration: underline; text-underline-offset: 3px; }

.ei-media { position: relative; padding: 0 0 clamp(30px, 4vw, 54px) clamp(24px, 4vw, 52px); }
.ei-arch {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(148px, 30%, 258px);
  aspect-ratio: 2 / 1.15;
  border-radius: 999px 999px 0 0;
  background: #f2c39f;
  z-index: 0;
}
.ei-rect {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
}
.ei-circle {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
}
.ei-rect img, .ei-circle img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (min-width: 861px) {
  .ei-row { grid-template-columns: 1.05fr 0.95fr; }
  .ei-row-flip { grid-template-columns: 0.85fr 1.15fr; }
}
@media (max-width: 860px) {
  .ei-circle { margin: 0 auto; }
  .ei-media { padding-left: 30px; }
}

/* ---------- image placeholders ----------
   Marks a spot where the client still needs to supply a photo.
   Delete the element and drop in a real <img> when the asset arrives. */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: repeating-linear-gradient(45deg, #efe7d8, #efe7d8 10px, #e8dfcd 10px, #e8dfcd 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a49a80;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 10px;
}
.img-placeholder::after { content: attr(data-placeholder); }

/* ---------- print ---------- */
@media print {
  header, .nav-burger, [style*="position:fixed"] { display: none !important; }
}