/* =====================================================================
   Corenia, LMHC-CST — custom styles layered on top of Tailwind.
   Handles things best done in real CSS: accessible focus, motion
   preferences, skip-link, scroll anchoring, prose, accordions.
   ===================================================================== */

:root {
  --brand-magenta: #9B2D6B;
  --brand-plum: #4A2545;
  --brand-gold: #E0A458;
  --focus-ring: #E085AE;
}

/* ---- Base ---------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Honour anchor jumps under a sticky header */
:target,
[id] { scroll-margin-top: 6rem; }

/* ---- Accessible focus --------------------------------------------- */
/* Visible, high-contrast focus for keyboard users only. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't show the ring for mouse clicks that aren't keyboard focus */
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ----------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--brand-plum);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ---- Screen-reader-only utility ----------------------------------- */
.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;
}
/* Show when focused (e.g. skip-style links) */
.sr-only.focusable:focus,
.sr-only.focusable:focus-within {
  position: static;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* ---- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reveal-on-scroll (progressive enhancement) ------------------- */
/* Elements start hidden ONLY when JS has flagged support, so no-JS
   visitors always see content. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Header scroll state ------------------------------------------ */
/* Header is always a readable frosted bar (legible over dark heroes AND
   light content), and goes more solid + shadowed once the page scrolls. */
.site-header {
  transition: background-color .3s ease, box-shadow .3s ease;
  background-color: rgba(252, 248, 246, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header.is-scrolled {
  background-color: rgba(252, 248, 246, 0.98);
  box-shadow: 0 6px 24px -16px rgba(74, 37, 69, .55);
  border-bottom: 1px solid rgba(74, 37, 69, .06);
}

/* ---- Mobile nav panel --------------------------------------------- */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.mobile-nav.is-open { max-height: 32rem; }

/* ---- Accordion (FAQ) ---------------------------------------------- */
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.accordion-item[data-open="true"] .accordion-panel { max-height: 48rem; }
.accordion-trigger .chevron { transition: transform .3s ease; }
.accordion-item[data-open="true"] .accordion-trigger .chevron { transform: rotate(180deg); }

/* ---- Prose (long-form content) ------------------------------------ */
.prose-custom { color: #2A2230; line-height: 1.75; }
.prose-custom > * + * { margin-top: 1.15em; }
.prose-custom h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.75rem; line-height: 1.2; margin-top: 2em; color: var(--brand-plum); }
.prose-custom h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.3rem; margin-top: 1.5em; color: var(--brand-plum); }
.prose-custom a { color: var(--brand-magenta); text-decoration: underline; text-underline-offset: 3px; }
.prose-custom a:hover { color: var(--brand-plum); }
.prose-custom ul { list-style: disc; padding-left: 1.4em; }
.prose-custom ol { list-style: decimal; padding-left: 1.4em; }
.prose-custom li + li { margin-top: .4em; }
.prose-custom blockquote {
  border-left: 4px solid var(--brand-gold);
  padding-left: 1.1rem; font-style: italic; color: var(--brand-plum);
}

/* ---- Decorative section divider (echoes the * * * of the ref site) - */
.divider-stars {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; color: var(--brand-gold); letter-spacing: .4em;
}
.divider-stars::before,
.divider-stars::after {
  content: ""; height: 1px; width: 3rem;
  background: linear-gradient(to right, transparent, var(--brand-gold));
}
.divider-stars::after { background: linear-gradient(to left, transparent, var(--brand-gold)); }

/* ---- Resource cards / library ------------------------------------- */
.resource-card { transition: transform .2s ease, box-shadow .2s ease; }
.resource-card:hover,
.resource-card:focus-within { transform: translateY(-4px); }
.filter-chip[aria-pressed="true"] {
  background-color: var(--brand-magenta);
  color: #fff;
  border-color: var(--brand-magenta);
}

/* ---- Forms --------------------------------------------------------- */
.field-input {
  width: 100%;
  border: 1.5px solid #D9C7D2;
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--brand-plum);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: #9A8794; }
.field-input:focus {
  border-color: var(--brand-magenta);
  box-shadow: 0 0 0 3px rgba(155,45,107,.18);
  outline: none;
}
.field-input[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.16);
}
.field-error { color: #B23121; font-size: .875rem; margin-top: .35rem; }

/* Print: hide interactive chrome */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
}