/* Homeschool Town — base + components
   "Local magazine meets family scrapbook, with a map." */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  background-image: var(--grad-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
p { text-wrap: pretty; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 60rem) { .container { padding-inline: var(--s-6); } }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.stack > * + * { margin-top: var(--s-4); }

.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;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -3rem; z-index: var(--z-tooltip);
  background: var(--primary); color: var(--on-primary);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  transition: top var(--dur) var(--ease-out-quart);
}
.skip-link:focus { top: var(--s-4); color: var(--on-primary); }

/* ---- Focus ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Eyebrow / kicker (deliberate, sparse — NOT on every section) ---- */
.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-size: var(--t-xs); font-weight: 500;
  color: var(--primary); letter-spacing: 0.01em;
}

/* ---- Page head (interior page intro band) ---- */
.page-head {
  background-image: var(--grad-hero);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
}
.page-head h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; margin-block: var(--s-3) var(--s-4); max-width: 18ch; }
.page-head p { color: var(--muted); font-size: var(--t-lead); max-width: 54ch; line-height: 1.5; }

/* Centered variant — task-flow intros (Share, ClaimBusiness) whose body content below
   is a centered narrow column, so the hero reads as one aligned block instead of a
   left-aligned kicker sitting over a centered form. */
.page-head--center { text-align: center; }
.page-head--center .kicker { justify-content: center; }
.page-head--center h1, .page-head--center p { margin-inline: auto; }

/* ================= Header / Nav ================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: oklch(1 0 0 / 0.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 4.25rem; position: relative;
}
.wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark__pin { color: var(--primary); }

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav__links { display: flex; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
.nav__link {
  display: inline-block; padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast);
}
.nav__link:hover { background: var(--accent-tint); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--primary); }

/* Secondary wayfinding (e.g. "How it works"): same shape as the primary links,
   just quieter at rest, so the map/guides/trading-post trio reads as the main set. */
.nav__link--quiet { color: var(--muted); }
.nav__link--quiet:hover { color: var(--ink); }
.nav__link--quiet[aria-current="page"] { color: var(--primary); }

/* Splits wayfinding links from the Share CTA so the CTA reads as a distinct
   action, not a 5th nav item competing for the same attention. */
.nav__divider { width: 1px; height: 1.25rem; margin: 0 var(--s-1); background: var(--border-strong); list-style: none; }
.nav__cta { margin-left: var(--s-1); }
/* Second divider only matters in the stacked mobile sheet, where it separates the CTA
   from the auth/account cluster below it; the inline desktop bar already has enough
   air there via .nav__cta's own margin and .nav__user's margin-left. */
.nav__divider--mobile-only { display: none; }

/* ---- Messages link + live unread badge ---- */
.nav__messages { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); }
.nav__messages svg { font-size: 1.2rem; }
/* Desktop: the icon carries the meaning, so the text label is hidden and the count floats over
   the icon's corner. Inside the mobile menu (below) the label returns and the badge sits inline. */
.nav__messages-label { display: none; }
.nav__unread {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: -0.15rem; right: -0.35rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}
.nav__unread[hidden] { display: none; }

/* ---- Avatar menu (native <details>/<summary> disclosure) ---- */
.nav__user { position: relative; margin-left: var(--s-1); }
.nav__user-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border-radius: var(--r-pill);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.nav__user-trigger::-webkit-details-marker { display: none; }
.nav__user-trigger::marker { content: ""; }
.nav__user-trigger:hover { background: var(--accent-tint); }
.nav__user-trigger:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.nav__user-name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.nav__user-caret { color: var(--muted); transition: transform var(--dur-fast) var(--ease-out-quart); }
.nav__user[open] .nav__user-caret { transform: rotate(180deg); }

.nav__user-panel {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: var(--z-dropdown);
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 11rem; padding: var(--s-2);
  background: var(--bg); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.nav__user-item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer;
  transition: background var(--dur-fast);
}
.nav__user-item:hover { background: var(--accent-tint); }
.nav__user-item--form { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .nav__user-caret { transition: none; }
}

.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--bg); cursor: pointer; color: var(--ink);
}
.nav__toggle svg { width: 1.5rem; height: 1.5rem; }
.nav__toggle .nav__close { display: none; }
.nav[data-open="true"] .nav__toggle .nav__open { display: none; }
.nav[data-open="true"] .nav__toggle .nav__close { display: block; }

@media (max-width: 64rem) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--s-3) var(--s-5) var(--s-5);
    box-shadow: var(--shadow-md);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur) var(--ease-out-expo);
  }
  .nav[data-open="true"] .nav__links { clip-path: inset(0 0 0 0); }
  .nav__link { padding: var(--s-3); border-radius: var(--r-md); font-size: var(--t-body); }
  .nav__divider { width: 100%; height: 1px; margin: var(--s-2) 0; }
  .nav__divider--mobile-only { display: block; }
  .nav__cta { margin: 0; }

  /* Messages becomes a normal labelled row; the count sits inline after the label. */
  .nav__messages { justify-content: flex-start; }
  .nav__messages-label { display: inline; }
  .nav__unread { position: static; margin-left: auto; }

  /* The panel floats via position:absolute on desktop; inside the mobile sheet that
     would overflow past .nav__links' own box and get clipped by its reveal clip-path,
     so it becomes a plain in-flow block here instead. */
  .nav__user { margin: var(--s-2) 0 0; }
  .nav__user-trigger { width: 100%; padding: var(--s-3); }
  .nav__user-panel {
    position: static; margin-top: var(--s-1);
    border: 0; box-shadow: none; background: none; padding: 0 0 0 var(--s-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__links { transition: none; }
}

/* ================= Buttons ================= */
.btn {
  --_bg: var(--primary); --_fg: var(--on-primary); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; line-height: 1;
  padding: 0.72rem 1.25rem; border-radius: var(--r-md);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur) var(--ease-out-quart), color var(--dur-fast);
}
.btn:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn--ghost { --_bg: transparent; --_fg: var(--primary); --_bd: var(--primary); }
.btn--ghost:hover { --_fg: var(--on-primary); background: var(--primary); border-color: var(--primary); }

.btn--quiet { --_bg: var(--bg); --_fg: var(--ink); --_bd: var(--border-strong); }
.btn--quiet:hover { background: var(--surface-bot); color: var(--ink); border-color: var(--border-strong); }

.btn--lg { font-size: var(--t-body); padding: 0.9rem 1.6rem; }
.btn--block { display: flex; width: 100%; }

.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"] svg { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--_fg); border-right-color: transparent; border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover { transform: none; }
  .btn[aria-busy="true"]::after { animation-duration: 0s; }
}

/* ================= Chips / Tags ================= */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--t-xs); font-weight: 500; line-height: 1;
  padding: 0.42rem 0.72rem; border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  text-decoration: none; white-space: nowrap;
}
.chip svg { width: 1em; height: 1em; }
.chip--accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.chip--clay   { background: var(--clay-tint); color: var(--primary-hover); border-color: transparent; }
/* Time-pressured / not-yet-final state: ending soon, pending sale, expired. */
.chip--soon   { background: var(--warning-tint); color: var(--warning); border-color: transparent; }
/* Always-labeled business marker (Feature 8a) — solid Baked Clay, distinct from Garden
   Green's existing "outdoor category / active filter" meaning. Label only; never resizes
   the card/pin it sits on (anti-takeover guardrail). */
.chip--business { background: var(--primary); color: var(--on-primary); border-color: transparent; }
a.chip, button.chip { cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
a.chip:hover, button.chip:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }

/* ---- Filter chips (shared by any client-filtered browse/grid surface) ---- */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-chip { cursor: pointer; }
/* aria-pressed = button chips (client-side filters); aria-current = link chips
   (server-side filters, e.g. Trading Post's paginated browse). Same active look. */
.filter-chip[aria-pressed="true"], .filter-chip[aria-current="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.filter-chip--more { color: var(--primary); border-color: var(--border-warm); }
.filter-chip--more:hover { background: var(--accent-tint); }

.filter-status { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.filter-count { font-size: var(--t-sm); color: var(--muted); }
.filter-clear {
  font-size: var(--t-sm); font-weight: 500; color: var(--primary);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.filter-clear:hover { color: var(--primary-hover); }

/* ---- More tags popover ---- */
.more-filters {
  position: fixed; inset: 0; margin: auto;
  width: min(28rem, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--bg); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: var(--shadow-lg);
}
.more-filters::backdrop { background: oklch(0.2 0.01 50 / 0.4); }
.more-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.more-filters__head h3 { font-size: var(--t-h3); }
.more-filters__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill);
  background: none; border: 1px solid var(--border-strong); color: var(--ink); cursor: pointer;
}
.more-filters__close:hover { background: var(--surface-bot); }
.more-filters__grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* category label (icon + word) */
.cat {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; color: var(--primary);
}
.cat svg { width: 1.05em; height: 1.05em; }
.cat--park { color: var(--accent); }

/* ---- Success flash (after a write-up is published, or just signed up) ---- */
.flash {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center;
  margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--accent-tint); border: 1px solid var(--accent); border-radius: var(--r-lg);
}
.flash__icon { color: var(--accent); font-size: 1.4rem; line-height: 1; }
.flash p { color: var(--ink); font-weight: 500; line-height: 1.45; }
.flash--page { margin-top: var(--s-6); }

/* Neutral attention, not success — e.g. "you cancelled signing in with Google." */
.flash--warning { background: var(--warning-tint); border-color: var(--warning); }
.flash--warning .flash__icon { color: var(--warning); }

/* ---- Text-styled action (link or button, same look) — resend/skip rows, "Forgot it?" ---- */
.link-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--primary); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--primary-hover); }
.link-btn:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.link-btn--quiet { font-weight: 400; text-decoration: none; }
.link-btn--quiet:hover { text-decoration: underline; }

/* ---- Unverified-email nudge (Feature 7c) — persistent while signed in, never blocking ---- */
.verify-banner { background: var(--warning-tint); border-bottom: 1px solid var(--warning); }
.verify-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-5);
}
.verify-banner__icon { color: var(--warning); flex: none; font-size: 1.1rem; line-height: 1; }
.verify-banner__inner p { flex: 1 1 16rem; min-width: 0; color: var(--ink); font-size: var(--t-sm); line-height: 1.4; margin: 0; }
.verify-banner__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.verify-banner__actions form { display: contents; }

/* ================= Cards ================= */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); color: var(--ink);
  transition: transform var(--dur) var(--ease-out-quart),
              box-shadow var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-warm); }
/* full-bleed invisible link to the article; sits under any interactive child
   (e.g. .card__author) that needs its own click target. */
.card__cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__date { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.cat__guide { color: var(--accent); display: inline-flex; }
.card__title { font-size: var(--t-h3); line-height: 1.12; }
.card__excerpt { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.card__meta { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); margin-top: auto; }
.card__meta strong { color: var(--ink); font-weight: 600; }
.card__author {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: -0.35rem; padding: 0.35rem; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.card__author:hover { background: var(--accent-tint); }
.card__author:hover strong { color: var(--primary); }
.card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* author avatar (initials) */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--r-pill);
  background: var(--clay-tint); color: var(--primary-hover);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
}

.card-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

/* ================= Prose ================= */
.prose { max-width: 65ch; }
.prose h2 { font-size: var(--t-h2); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); line-height: 1.7; }
.prose p + p { margin-top: var(--s-4); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* ================= Footer ================= */
.site-footer {
  margin-top: auto;
  background: var(--grad-surface); border-top: 1px solid var(--border);
  padding-block: var(--s-8) var(--s-6);
}
.site-footer__grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 52rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a { color: var(--ink); text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--primary); }
.site-footer__brand p { color: var(--muted); font-size: var(--t-sm); max-width: 32ch; margin-top: var(--s-3); }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--border);
  font-size: var(--t-xs); color: var(--muted);
}