/* ===========================================================
   Ester Uvaydova, LMFT — therapy for teens & young adults
   Calm, dependency-free stylesheet. No external fonts or
   trackers (better for privacy on a therapy site + fast).
   Edit the color variables below to rebrand the whole site.
   =========================================================== */

:root {
  --bg:        #faf8f4;   /* warm off-white page background */
  --surface:   #ffffff;   /* cards / panels */
  --ink:       #2c3a3f;   /* primary text (soft near-black) */
  --muted:     #5d6b70;   /* secondary text */
  --teal:      #2f5d6b;   /* primary brand (deep sea blue-green) */
  --teal-dark: #244a55;   /* hover */
  --sage:      #8fb8a8;   /* soft accent */
  --sand:      #efe9df;   /* subtle section background */
  --line:      #e3ddd2;   /* hairline borders */
  --maxw:      1080px;
  --radius:    14px;
  --shadow:    0 6px 24px rgba(44, 58, 63, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;

  /* Soft, barely-there wash so pages never feel flat or empty.
     This is the page "background" — no plant graphics. */
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #fbfaf6 0%, var(--bg) 38%);
}

/* Content sits above the floating background shapes */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* Soft floating shapes — blurred organic blobs in brand colors.
   Fixed to the viewport so they drift gently behind the content
   as you scroll. Tune size via the vw values, softness via blur,
   and presence via opacity. */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
}
body::before {
  width: 48vw; height: 48vw;
  top: -14vw; right: -12vw;
  background: var(--sage);
  opacity: 0.34;
}
body::after {
  width: 46vw; height: 46vw;
  bottom: -16vw; left: -12vw;
  background: var(--teal);
  opacity: 0.15;
}

h1, h2, h3 {
  font-family: Georgia, Cambria, "Times New Roman", serif;
  color: var(--ink);
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 0.5em; }
h3 { font-size: 1.2rem; margin: 0 0 0.35em; }

p { margin: 0 0 1.1em; }

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn--ghost:hover { background: var(--teal); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  background: rgba(250, 248, 244, 0.85);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  font-family: Georgia, Cambria, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.brand span { display: block; font-size: 0.78rem; color: var(--muted); font-family: inherit; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.98rem;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a[aria-current="page"] { color: var(--teal); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative;
}
/* gentle glow so the headline + photo feel anchored, not floating */
.hero::before {
  content: "";
  position: absolute;
  top: -8%;
  right: 0;
  width: 560px;
  max-width: 75%;
  height: 440px;
  background: radial-gradient(circle at 70% 30%, rgba(47, 93, 107, 0.10), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.hero p.lead {
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 38ch;
}
.hero .btn { margin-top: 0.5rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sage);
  margin: 0 0 0.8rem;
}

/* ---------- Photo frame ----------
   Holds Ester's real photo. If the image file is missing it
   degrades to a soft panel with the caption text (not ugly). */
.photo {
  background: linear-gradient(135deg, #eef4ef 0%, #e3ece6 100%);
  border: 0;
  border-radius: var(--radius);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  padding: 1.25rem;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Where to crop from. 50% 50% = dead center of the image.
     Ester's face sits slightly right of center in the photo,
     so we shift the crop window right and a touch up. Tune to
     taste: higher first % shifts right, lower second % shifts up. */
  object-position: 42% 35%;
  border-radius: inherit;
}
.photo--round { border-radius: 999px; aspect-ratio: 1 / 1; min-height: 0; }

/* ---------- Sections ---------- */
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; }
.section--sand { background: var(--sand); }
.section--teal { background: var(--teal); color: #f3f6f6; }
.section--teal h2, .section--teal h3 { color: #fff; }
.section--teal a { color: #fff; text-decoration: underline; }
.narrow { max-width: 680px; }
.center { text-align: center; }

/* Gentle non-plant divider — <hr class="soft-divider"> or
   <div class="soft-divider"></div> between sections */
.soft-divider {
  height: 1px;
  width: 90px;
  border: 0;
  margin: 2.25rem auto;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
}

/* Curved "wave" edges on the colored section bands, so the sand
   and teal sections flow into the page instead of hard rectangles.
   The wave is the section's own color spilling into the neighbor. */
.section--sand::before, .section--sand::after,
.section--teal::before, .section--teal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(26px, 4vw, 52px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}
.section--sand::before, .section--teal::before { top: 1px;  transform: translateY(-100%); }
.section--sand::after,  .section--teal::after  { bottom: 1px; transform: translateY(100%) scaleY(-1); }
.section--sand::before, .section--sand::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2030%20C%20240%200%20480%200%20720%2024%20C%20960%2048%201200%2048%201440%2018%20L1440%2060%20L0%2060%20Z'%20fill='%23efe9df'/%3E%3C/svg%3E");
}
.section--teal::before, .section--teal::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2030%20C%20240%200%20480%200%20720%2024%20C%20960%2048%201200%2048%201440%2018%20L1440%2060%20L0%2060%20Z'%20fill='%232f5d6b'/%3E%3C/svg%3E");
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.card h3 { color: var(--teal); }
.card p:last-child { margin-bottom: 0; }

.feeling-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feeling-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  color: var(--muted);
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-band .btn { margin-top: 0.6rem; }

/* ---------- Definition / info rows ---------- */
.info-rows { list-style: none; margin: 0; padding: 0; }
.info-rows li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.info-rows li:last-child { border-bottom: 0; }
.info-rows .label { font-weight: 600; min-width: 170px; }
.info-rows .value { color: var(--muted); flex: 1; }

.notice {
  background: #fff;
  border-left: 4px solid var(--sage);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Reassurance / quote band ---------- */
.quote {
  font-family: Georgia, Cambria, serif;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.5;
  color: var(--teal-dark);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.quote span { color: var(--sage); }

/* ---------- FAQ (pure-CSS accordion) ---------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 1.2rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 1.6rem 1rem 0;
  list-style: none;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--teal);
  font-weight: 700;
  font-size: 1.3rem;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal-dark);
  color: #cdddde;
  padding: 3rem 0;
  font-size: 0.92rem;
}
.site-footer a { color: #fff; }
.footer-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 0.6rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.fineprint {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  color: #9fb6b8;
  font-size: 0.82rem;
}

/* ---------- Skip link & focus (accessibility) ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  background: var(--teal);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .photo { order: -1; min-height: 240px; }
  .info-rows li { flex-direction: column; gap: 0.15rem; }
  .info-rows .label { min-width: 0; }
}