/* Avalon Wellness & Recovery — shared page styles.
   Complements the design-system tokens (_ds/.../styles.css).
   Ported verbatim from the approved Claude Design build, plus small
   static-site helpers (nav toggle, FAQ accordion, form states). */

html { scroll-behavior: smooth }
* { box-sizing: border-box }
body { margin: 0; background: var(--cream-100) }
.lucide { width: 1em; height: 1em; flex-shrink: 0 }
a { color: var(--link); text-decoration: none }
a:hover { color: var(--link-hover) }
@keyframes avFade { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.av-article { font-size: 16.5px; line-height: 1.78; color: var(--ink-700) }
.av-article h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; font-size: 26px; color: var(--ink-900); margin: 34px 0 12px }
.av-article h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; font-size: 20px; color: var(--ink-900); margin: 26px 0 8px }
.av-article p { margin: 0 0 16px }
.av-article ul { margin: 0 0 16px; padding-left: 22px }
.av-article li { margin-bottom: 8px }
.av-article strong { color: var(--ink-900) }
.av-article a { color: var(--link) }
.av-article a:hover { color: var(--link-hover) }

.av-burger { display: none; background: none; border: none; cursor: pointer; color: var(--sage-700); padding: 6px; font-size: 26px; line-height: 0 }
.av-navlinks a { white-space: nowrap }

/* Static-site helpers */
.av-btn:hover { filter: brightness(0.96); transform: translateY(-1px) }
button.av-btn:hover { filter: brightness(0.96); transform: translateY(-1px) }
.av-faq-q { user-select: none }
.av-faq-q .lucide, .av-faq-q i { transition: transform var(--dur-fast, .15s) ease }
.av-faq-item.open .av-faq-q .lucide, .av-faq-item.open .av-faq-q i { transform: rotate(180deg) }
.av-faq-a { display: none }
.av-faq-item.open .av-faq-a { display: block }
[hidden] { display: none !important }

@media (max-width: 960px) {
  .av-cards { grid-template-columns: 1fr 1fr !important }
}
@media (max-width: 1024px) {
  .av-burger { display: inline-flex }
  .av-navlinks { position: absolute !important; top: 100%; left: 0; right: 0; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; background: var(--cream-100); border-bottom: 1px solid var(--border-warm); padding: 10px 22px 20px !important; box-shadow: var(--shadow-lg); display: none !important }
  .av-navlinks.open { display: flex !important }
  .av-navlinks a { padding: 13px 2px !important; border-bottom: 1px solid var(--border-warm); font-size: 16px !important }
  .av-navlinks a[href^="tel"] { border-bottom: none }
  .av-navlinks > *:last-child { margin-top: 12px }
}
@media (max-width: 820px) {
  .av-2, .av-hero { grid-template-columns: 1fr !important }
  .av-hero { text-align: center; justify-items: center }
  .av-hero .av-hero-media { order: -1; max-width: 420px; margin: 0 auto }
  .av-foot { grid-template-columns: 1fr 1fr !important }
}
@media (max-width: 640px) {
  .av-cards { grid-template-columns: 1fr !important }
  .av-panel { padding: 44px 24px !important }
  .av-root section { padding-top: 52px !important; padding-bottom: 52px !important }
  .av-root h1 { font-size: 38px !important; line-height: 1.1 !important }
  .av-root h2 { font-size: 29px !important }
  .av-pad { padding-left: 22px !important; padding-right: 22px !important }
}
@media (max-width: 520px) {
  .av-2b { grid-template-columns: 1fr !important }
  .av-foot { grid-template-columns: 1fr !important }
}