/* ==========================================================================
   Guides — shared styles for /guides/**
   Lives in its own file rather than a per-page <style> block because the
   consent guide is meant to reach fifty state pages; a change to the callout
   or the state table should not need fifty edits.
   ========================================================================== */

/* ---- Alignment -----------------------------------------------------------
   .wrap-tight in the base stylesheet centres its contents, which suits the
   formal legal pages it was written for. A guide is an article and reads
   left-aligned. The bug this fixes is invisible on a phone, where the column
   is narrow enough that centred and left-aligned text look nearly identical,
   and obvious on a laptop. */
.guide-head .wrap-tight,
.guide-body .wrap-tight { text-align: left; }

.guide-head .headrule { margin-inline: 0; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.crumb a { color: var(--moss); text-decoration: none; }
.crumb a:hover { color: var(--gold); }
.crumb span[aria-hidden] { color: var(--gold); }

/* ---- Guide header -------------------------------------------------------- */
.guide-head { padding-block: clamp(2rem, 4.5vw, 3rem) clamp(1.25rem, 3vw, 1.75rem); }

.guide-head h1 { margin-top: 0.9rem; max-width: 22ch; }

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-top: 1.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8rem;
  color: var(--stone);
}

.guide-meta b { font-weight: 500; color: var(--forest); }

/* A review date rather than a publish date: these pages are maintained
   reference, not dated posts, and should not read as stale. */
.guide-reviewed { font-variant-numeric: tabular-nums; }

.guide-standfirst {
  margin-top: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}

/* ---- Body ---------------------------------------------------------------- */
.guide-body { padding-bottom: clamp(3.5rem, 7vw, 5rem); }

.guide-body section + section { margin-top: clamp(2.25rem, 4.5vw, 3rem); }

.guide-body h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 400;
  color: var(--forest);
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}

.guide-body h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest);
  margin: 1.75rem 0 0.7rem;
}

.guide-body p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 1.05rem;
  max-width: 68ch;
}

.guide-body p:last-child { margin-bottom: 0; }

.guide-body strong { font-weight: 600; color: var(--forest); }

.guide-body a { color: var(--moss); text-decoration: underline; text-underline-offset: 2px; }
.guide-body a:hover { color: var(--gold); }

.guide-body ul, .guide-body ol { margin: 0 0 1.05rem; padding: 0; max-width: 68ch; }
.guide-body ul { list-style: none; }
.guide-body ol { padding-left: 1.2rem; }

.guide-body li {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 0.65rem;
}

.guide-body ul li { position: relative; padding-left: 1.15rem; }

.guide-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Statute references, set apart from prose. */
.cite {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--forest);
  background: var(--gold-pale);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ---- Table tools ---------------------------------------------------------
   Fifty-one rows is too many to read, and nobody does. They arrive looking
   for one state, so the table gets a filter, and the legend sits directly
   above it — a reader who scrolls straight to their row still needs the key
   in view to know what the answer means. */
.table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  margin: 1.5rem 0 1.1rem;
}

.state-search {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 15rem;
  max-width: 22rem;
}

.state-search span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.state-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.state-search input::placeholder { color: var(--stone); opacity: 0.75; }

.state-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 42, 0.13);
}

/* Key. Each entry pairs the tag as it appears in the table with the legal
   term, so the table can lead with the action and still be precise. */
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--stone);
  line-height: 1.4;
}

/* ---- Callouts ------------------------------------------------------------ */
.note {
  margin: 1.5rem 0;
  padding: 1.15rem 1.4rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 68ch;
}

.note p { font-size: 0.9rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 0.6rem; }
.note p:last-child { margin-bottom: 0; }

.note-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* Unsettled-law flag. A plain .note is a helpful aside in the house gold; this
   one says the underlying law is not clear and asking is the safer course, so
   it must not read at the same weight. Brick rather than gold, and it sits
   above the short answer instead of below it -- on the one-party states we
   flag, the short answer alone tells a reader they may record freely, which is
   the wrong half of the story to leave sitting on its own at the top. */
.note-flag {
  border-left-color: #9e3520;
  background: #faeae6;
  margin-top: 0;
}

.note-flag .note-label { color: #9e3520; }

/* The not-legal-advice notice. Deliberately plainer than .note so it reads as
   a standing disclaimer rather than a highlighted tip. */
.disclaimer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-soft);
  max-width: 68ch;
}

.disclaimer p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--stone);
  margin-bottom: 0.6rem;
}

.disclaimer p:last-child { margin-bottom: 0; }

/* ---- State index table --------------------------------------------------- */
.state-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.35rem 0;
  font-size: 0.92rem;
}

.state-table caption {
  text-align: left;
  font-size: 0.8rem;
  color: var(--stone);
  padding-bottom: 0.8rem;
}

.state-table th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.state-table td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  line-height: 1.55;
  vertical-align: top;
}

.state-table td:last-child { padding-right: 0; }
.state-table a { color: var(--moss); font-weight: 500; text-decoration: none; }
.state-table a:hover { color: var(--gold); text-decoration: underline; }

.rule-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
  border-radius: 3px;
  white-space: nowrap;
}

.rule-one { background: rgba(74, 124, 89, 0.14); color: var(--forest); }
.rule-all { background: rgba(184, 134, 42, 0.16); color: #8a6320; }
.rule-notice { background: rgba(45, 74, 53, 0.1); color: var(--moss); }

/* Unsettled states carried only an asterisk with the explanation in a title
   attribute, which never appears on touch and is easy to miss on a desktop.
   The three it marks are the rows a reader most needs to slow down on, so the
   warning is a visible tag in the same brick as the .note-flag banner on the
   state pages themselves. */
.rule-unsettled { background: rgba(158, 53, 32, 0.12); color: #9e3520; }

/* The legal term, kept beside the plain-language tag rather than replacing
   it. Precise for anyone who wants it, quiet for everyone else. */
.rule-term {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--stone);
  letter-spacing: 0.02em;
}

/* Shown by the filter when nothing matches. */
.no-match td {
  padding: 1.4rem 0;
  color: var(--stone);
  font-size: 0.9rem;
}

/* ---- Guide index cards --------------------------------------------------- */
.guide-list { margin-top: clamp(2rem, 4vw, 2.75rem); }

.guide-card {
  display: block;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
}

.guide-card:last-child { border-bottom: 1px solid var(--rule-soft); }

.guide-card-topic {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.guide-card h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  font-weight: 400;
  color: var(--forest);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 0.5rem;
}

.guide-card:hover h2 { color: var(--moss); }

.guide-card p {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}

.guide-card-count {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  color: var(--stone);
}

/* ---- Next steps / CTA ---------------------------------------------------- */
.guide-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.6rem, 3.5vw, 2.25rem);
  background: var(--forest);
  border-radius: var(--radius);
}

.guide-cta h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.015em;
  margin-bottom: 0.8rem;
}

.guide-cta p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--on-forest);
  max-width: 62ch;
  margin-bottom: 1.2rem;
}

.guide-cta .btn { margin-top: 0.2rem; }

/* ---- Related ------------------------------------------------------------- */
.related { margin-top: clamp(2.25rem, 4.5vw, 3rem); }

.related p.related-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.related ul { list-style: none; margin: 0; padding: 0; }
.related li { padding: 0.7rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.92rem; }
.related a { color: var(--moss); text-decoration: none; }
.related a:hover { color: var(--gold); text-decoration: underline; }