/* HATD public website. Palette matches the admin (src/client/styles.css): copper, rust, cream, espresso. */
:root {
  --cream: #fdf8f0;
  --sand: #f5c99f;
  --caramel: #cd824c;
  --copper: #ac6231;
  --rust: #773613;
  --espresso: #331b0f;
  --text: #3e2b20;
  --muted: #6b5546;
  --line: #eadccd;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.65 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3 { letter-spacing: -.015em; }
a { color: var(--rust); text-underline-offset: 2px; }
a:hover { color: var(--copper); }
.wrap { width: min(100% - 2rem, 60rem); margin-inline: auto; }

.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: .85rem; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 40px; width: auto; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.site-header nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--rust); }

main { flex: 1; padding-block: 2.5rem 3.5rem; }
h1, h2, h3 { color: var(--espresso); line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.prose { max-width: 46rem; }
.prose li { margin-block: .35rem; }
.meta { color: var(--muted); margin-top: 0; }
address { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
mark.placeholder { background: #fff1c2; color: #6b4a00; border-radius: 4px; padding: 0 .25em; }

.hero { padding-block: .5rem 2.5rem; max-width: 42rem; }

/* Home banner slider (layout.mjs renderSlider, assets/slider.js) */
.slider { background: linear-gradient(115deg, #f9e7d5 0%, var(--sand) 45%, #e4a774 100%); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide-inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem; padding-block: 2.5rem 1rem; }
.slide-text .eyebrow { color: var(--rust); }
.slide-text h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; margin: .35rem 0 .7rem; }
.slide-text p { margin: 0 0 1.4rem; font-size: 1.08rem; max-width: 30rem; }
.slide img { width: 100%; max-width: 460px; height: auto; justify-self: end; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-block: .25rem 1.4rem; }
.slider:not(.is-ready) .slider-controls { display: none; }
.slider-arrow {
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; cursor: pointer; padding: 0 0 .15rem;
  background: rgb(255 255 255 / .75); color: var(--rust); font-family: inherit; font-size: 1.7rem; font-weight: 700; line-height: 1;
}
.slider-arrow:hover { background: #fff; }
.slider-dots { display: flex; gap: .5rem; }
.slider-dots button { width: .65rem; height: .65rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgb(119 54 19 / .3); transition: width .25s, background .25s; }
.slider-dots button[aria-current] { width: 1.8rem; background: var(--rust); }
.slider button:focus-visible, .slides:focus-visible, .button:focus-visible { outline: 3px solid var(--espresso); outline-offset: 2px; }
@media (max-width: 720px) {
  .slide-inner { grid-template-columns: 1fr; gap: .5rem; padding-top: 1.5rem; }
  .slide img { order: -1; max-width: 300px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .slider-dots button { transition: none; } }
.eyebrow { color: var(--copper); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0; }
.lead { font-size: 1.15rem; color: var(--muted); }
.button {
  display: inline-block; background: var(--rust); color: #fff; text-decoration: none; font-weight: 700;
  padding: .8rem 1.4rem; border-radius: 10px;
}
.button:hover { background: var(--copper); color: #fff; }
/* FAQ (pages/faq.mjs): native <details> accordions grouped in cards */
.faq-group h2 { margin: 2rem 0 .7rem; }
.faq-list { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 1.3rem; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--espresso);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--copper); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--rust); }
.faq-item summary:focus-visible { outline: 3px solid var(--espresso); outline-offset: 2px; border-radius: 4px; }
.faq-answer p { margin: 0 0 1rem; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1rem; }
.cards article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; }
.cards h2 { margin-top: .2rem; color: var(--rust); }

.site-footer { border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.2rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.site-footer a { color: var(--muted); }