/* "Are Airguns Legal in {place}?" static pages.

   Layers on directory/listing-page.css (breadcrumb, back link, sidebar cards)
   and brings the map app's visual language — tier badge, the rule-dimension
   cards with severity meters, the hunting grid — into a standalone page that
   leads with a direct answer to the question. Self-contained: the tier/rank
   colors are declared here so the page doesn't depend on the map stylesheet. */

.legal-detail {
  --tier-1: #B23A1A; --tier-2: #E07024; --tier-3: #E5A53C; --tier-4: #5A8F3A;
  --rank-2: #A8B73A; --rule-c: #E2DBC9; --rule-2c: #EDE7D8;
  --legal-gap: 18px;   /* one consistent rhythm between every major section */
  background: var(--paper, #F4F1EA);
}
/* The global base stylesheet sets `section { padding: var(--section-y,144px) 0 }`.
   Every <section> in this page would inherit that huge vertical padding, which is
   the real source of the big empty bands. Neutralize it so ONLY --legal-gap controls
   the spacing between blocks. */
.legal-detail section,
.legal-detail .legal-glance-sec,
.legal-detail .legal-sec,
.legal-detail .listing-section { padding-top: 0; padding-bottom: 0; }
.legal-detail .listing-section { padding-left: var(--gutter, 24px); padding-right: var(--gutter, 24px); padding-bottom: 56px; }
.legal-detail .listing-inner { max-width: 1060px; }
/* Contiguous flow: every top-level block under the inner column gets the same
   gap, so nothing floats with ad-hoc margins. */
.legal-detail .listing-inner > .legal-glance-sec,
.legal-detail .listing-inner > .legal-warnings,
.legal-detail .listing-inner > .legal-body,
.legal-detail .listing-inner > .legal-sec,
.legal-detail .listing-inner > .legal-disclaimer { margin-top: var(--legal-gap); }
.legal-detail .listing-inner > .dx-back-link { margin-bottom: 16px; }
.legal-detail .listing-inner > .legal-hero { margin-top: 0; }

/* ===== HERO: the question + the answer ===== */
.legal-hero {
  position: relative; padding: 26px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: linear-gradient(160deg, #fff 0%, var(--paper, #F4F1EA) 100%);
  border: 1.5px solid var(--rule-c); border-radius: 18px;
  box-shadow: 0 18px 44px -30px rgba(31, 37, 40, 0.3); overflow: hidden;
}
.legal-hero-main { min-width: 0; }
/* the shape sits in its own centered column but must not inflate hero height:
   cap it to the text block height so there's no dead space below the copy */
.legal-hero-shape { align-self: center; }
.legal-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--tone-color, #A8A39B);
}
.legal-detail[data-tone="yes"]     { --tone-color: var(--tier-4); }
.legal-detail[data-tone="mostly"]  { --tone-color: var(--tier-3); }
.legal-detail[data-tone="caution"] { --tone-color: var(--tier-2); }
.legal-detail[data-tone="no"]      { --tone-color: var(--tier-1); }
.legal-detail[data-tone="unknown"] { --tone-color: #A8A39B; }
.legal-hero-eyebrow { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.legal-hero-q { font: 900 clamp(25px, 3.6vw, 37px) var(--display, 'Archivo', sans-serif); letter-spacing: -0.025em; line-height: 1.06; color: var(--charcoal, #1F2528); margin: 9px 0 13px; max-width: 18ch; }
.legal-hero-answer { font: 800 clamp(17px, 2.2vw, 22px) var(--display, 'Archivo', sans-serif); color: var(--tone-color, #1F2528); margin: 0 0 7px; line-height: 1.25; }
.legal-hero-sub { font: 400 15.5px/1.5 var(--body, 'DM Sans', sans-serif); color: #44504f; margin: 0 0 16px; max-width: 58ch; }
.legal-tier-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tier-color) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--tier-color) 40%, #fff); }
.legal-tier-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier-color); flex-shrink: 0; }
.legal-tier-label { font: 800 12.5px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); letter-spacing: 0.01em; }
.legal-tier-desc { font: 400 13px/1.5 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); margin: 9px 0 0; max-width: 56ch; }

/* ===== hero geographic shape (upper-right) ===== */
.legal-hero-shape {
  flex-shrink: 0; width: clamp(116px, 13vw, 158px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.legal-shape { width: 100%; height: 100%; overflow: visible; }
.legal-shape-path {
  fill: color-mix(in srgb, var(--tone-color, #5A8F3A) 16%, #fff);
  stroke: var(--tone-color, #5A8F3A); stroke-width: 1.4; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--tone-color, #5A8F3A) 30%, transparent));
}
.legal-shape.is-fallback .legal-shape-path { fill: color-mix(in srgb, var(--tone-color, #5A8F3A) 14%, #fff); }
.legal-shape-hole { fill: #fff; }
.legal-shape-name {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font: 800 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em;
  color: var(--muted, #6E7178); text-transform: uppercase;
}

/* ===== AT A GLANCE: the consistent visual summary ===== */
.legal-glance-sec { }
.legal-glance-h { font: 800 17px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); margin: 0 0 5px; }
.legal-glance-note { font: 400 13.5px/1.5 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); margin: 0 0 15px; max-width: 70ch; }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.glance-cell {
  background: #fff; border: 1.5px solid var(--rule-c); border-radius: 13px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden;
}
.glance-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.glance-cell[data-rank="1"]::before { background: var(--tier-4); }
.glance-cell[data-rank="2"]::before { background: var(--rank-2); }
.glance-cell[data-rank="3"]::before { background: var(--tier-3); }
.glance-cell[data-rank="4"]::before { background: var(--tier-1); }
.glance-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid; }
.glance-icon svg { width: 17px; height: 17px; }
.glance-cell[data-rank="1"] .glance-icon { color: #3A6225; background: #EDF3DE; border-color: #C6D8A5; }
.glance-cell[data-rank="2"] .glance-icon { color: #6B7C24; background: #F2F4DC; border-color: #CDD79A; }
.glance-cell[data-rank="3"] .glance-icon { color: #8C5E14; background: #FBF0D8; border-color: #E5C078; }
.glance-cell[data-rank="4"] .glance-icon { color: #7A2812; background: #F8E1D9; border-color: #D9907B; }
.glance-label { font: 700 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #6E7178); }
.glance-status { font: 800 15px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); line-height: 1.15; }

/* shared severity meter (glance + rule cards) */
.rule-meter { display: inline-flex; gap: 3px; }
.meter-seg { width: 22px; height: 5px; border-radius: 2px; background: var(--rule-2c, #EDE7D8); }
.meter-seg.lit { background: var(--seg-color); }

/* ===== warnings ===== */
.legal-warnings { background: rgba(200,71,17,0.06); border: 1.5px solid color-mix(in srgb, var(--orange, #F25C1F) 28%, #fff); border-radius: 14px; padding: 18px 20px; }
.legal-warnings-h { display: block; font: 700 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-deep, #C84711); margin-bottom: 10px; }
.legal-warnings ul { margin: 0; padding-left: 18px; }
.legal-warnings li { font: 500 14px/1.55 var(--body, 'DM Sans', sans-serif); color: #3f474d; margin-bottom: 5px; }

/* ===== body: detailed rules + hunting / sidebar ===== */
.legal-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.legal-main { min-width: 0; display: flex; flex-direction: column; gap: var(--legal-gap, 18px); }
/* Sticky sidebar: stick only when it is shorter than the viewport, and clamp its
   height so a tall sidebar scrolls internally instead of fighting the sticky
   container (the source of the earlier jump/glitch). */
.legal-side { position: sticky; top: 16px; align-self: start;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; }
.legal-side::-webkit-scrollbar { width: 6px; }
.legal-side::-webkit-scrollbar-thumb { background: var(--rule-c); border-radius: 3px; }
.legal-sec { }
.legal-disclaimer { font: 400 12px/1.6 var(--body, 'DM Sans', sans-serif); }

/* rule cards (verbatim visual match to the map app) */
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-card {
  position: relative; background: #fff; border: 1.5px solid var(--rule-c); border-radius: var(--r-md, 12px);
  padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.rule-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.rule-card[data-rank="1"]::before { background: var(--tier-4); }
.rule-card[data-rank="2"]::before { background: var(--rank-2); }
.rule-card[data-rank="3"]::before { background: var(--tier-3); }
.rule-card[data-rank="4"]::before { background: var(--tier-1); }
.rule-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(31,37,40,0.3); }
.rule-head { display: flex; align-items: center; gap: 8px; }
.rule-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid; flex-shrink: 0; }
.rule-icon svg { width: 15px; height: 15px; }
.rule-card[data-rank="1"] .rule-icon { color: #3A6225; background: #EDF3DE; border-color: #C6D8A5; }
.rule-card[data-rank="2"] .rule-icon { color: #6B7C24; background: #F2F4DC; border-color: #CDD79A; }
.rule-card[data-rank="3"] .rule-icon { color: #8C5E14; background: #FBF0D8; border-color: #E5C078; }
.rule-card[data-rank="4"] .rule-icon { color: #7A2812; background: #F8E1D9; border-color: #D9907B; }
.rule-label { font: 700 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6E7178); }
.rule-status { font: 800 16px var(--display, 'Archivo', sans-serif); line-height: 1.15; }
.rule-card[data-rank="1"] .rule-status { color: #3A6225; }
.rule-card[data-rank="2"] .rule-status { color: #5C6E1F; }
.rule-card[data-rank="3"] .rule-status { color: #8C5E14; }
.rule-card[data-rank="4"] .rule-status { color: #7A2812; }
.rule-text { font: 400 13px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; margin-top: 2px; }

/* hunting grid */
.hunt-lead { font: 700 14px var(--body, 'DM Sans', sans-serif); color: var(--charcoal, #1F2528); margin: 0 0 14px; }
.hunt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.hunt-cell { position: relative; background: #fff; border: 1.5px solid var(--rule-c); border-radius: 12px; padding: 13px 15px; overflow: hidden; }
.hunt-cell.full { grid-column: 1 / -1; }
.hunt-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.hunt-cell.s-allowed::before    { background: var(--tier-4); }
.hunt-cell.s-qualified::before  { background: var(--tier-3); }
.hunt-cell.s-prohibited::before { background: var(--tier-1); }
.hunt-cell.s-unresolved::before { background: #A8A39B; }
.hunt-species { display: flex; align-items: center; gap: 7px; font: 800 14px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); }
.hunt-icon { width: 15px; height: 15px; flex-shrink: 0; }
.hunt-icon svg { width: 100%; height: 100%; }
.hunt-cell.s-allowed .hunt-icon { color: #3A6225; }
.hunt-cell.s-qualified .hunt-icon { color: #8C5E14; }
.hunt-cell.s-prohibited .hunt-icon { color: #7A2812; }
.hunt-cell.s-unresolved .hunt-icon { color: #9A958C; }
.hunt-status { font: 700 11.5px var(--body, 'DM Sans', sans-serif); margin: 6px 0 4px; }
.hunt-cell.s-allowed .hunt-status { color: #3A6225; }
.hunt-cell.s-qualified .hunt-status { color: #8C5E14; }
.hunt-cell.s-prohibited .hunt-status { color: #7A2812; }
.hunt-cell.s-unresolved .hunt-status { color: var(--muted, #6E7178); }
.hunt-detail { font: 400 12px/1.5 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); }

/* meta field rows (hunting minimums, world threshold/caliber/travel) */
.hunt-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 12px; }
.field { background: #fff; border: 1.5px solid var(--rule-c); border-radius: 11px; padding: 12px 15px; }
.field-label { font: 700 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #6E7178); margin-bottom: 4px; }
.field-value { font: 400 13.5px/1.55 var(--body, 'DM Sans', sans-serif); color: #3f474d; }

/* local rules */
.local-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 9px; }
.local-row { background: #fff; border: 1.5px solid var(--rule-c); border-radius: 11px; padding: 13px 15px; border-left: 4px solid var(--orange, #F25C1F); }
.local-where { font: 800 13.5px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); margin-bottom: 3px; }
.local-rule { font: 400 13px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; }

/* sidebar: federal baseline */
.legal-fed-card { border-top: 4px solid var(--charcoal, #2D363D); }
.fed-row { padding: 10px 0; border-bottom: 1px dashed var(--rule-c); }
.fed-row:first-of-type { padding-top: 0; }
.fed-k { display: block; font: 700 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep, #C84711); margin-bottom: 4px; }
.fed-v { display: block; font: 400 12.5px/1.5 var(--body, 'DM Sans', sans-serif); color: #4a5258; }
.legal-fed-card .dx-mfr-card-cta { margin-top: 12px; }

/* sidebar: keep exploring */
.legal-tools-card { border-top: 4px solid var(--topo-sage, #5A8F3A); }
.legal-tools-list { display: flex; flex-direction: column; gap: 8px; }
.legal-tool { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule-c); border-radius: 11px; padding: 11px 13px; text-decoration: none; transition: transform 0.14s ease, border-color 0.14s ease; }
.legal-tool:hover { transform: translateY(-2px); border-color: var(--topo-sage, #5A8F3A); }
.legal-tool-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.legal-tool-name { font: 800 13px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); }
.legal-tool-blurb { font: 400 11.5px/1.4 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); }
.legal-tool .dx-related-arrow { flex-shrink: 0; color: var(--topo-sage, #5A8F3A); }

.legal-disclaimer { color: var(--muted, #6E7178); padding-top: 18px; border-top: 1px solid var(--rule-c); max-width: 75ch; }

/* ===== responsive ===== */
@media (max-width: 920px) {
  .legal-body { grid-template-columns: 1fr; gap: var(--legal-gap, 24px); }
  /* on one column the sidebar must not be sticky or height-clamped */
  .legal-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 680px) {
  .legal-detail { --legal-gap: 22px; }
  /* hero: shape moves above the text, smaller, centered */
  .legal-hero { grid-template-columns: 1fr; gap: 6px; padding: 22px 20px; text-align: left; }
  .legal-hero-shape { order: -1; width: 96px; align-self: flex-start; }
  .legal-shape-name { bottom: -4px; }
}
@media (max-width: 600px) {
  .rule-grid { grid-template-columns: 1fr; }
  .hunt-grid { grid-template-columns: 1fr; }
  .glance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .glance-grid { grid-template-columns: 1fr; }
}

/* ===== crawlable per-place link directory injected into the map apps ===== */
.lsl-section { background: var(--paper, #F4F1EA); border-top: 1px solid var(--rule, #E2DBC9); padding: 48px 0 64px; }
.lsl-section .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.lsl-eye { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.lsl-title { font: 900 clamp(22px, 2.6vw, 30px) var(--display, 'Archivo', sans-serif); letter-spacing: -0.02em; color: var(--charcoal, #1F2528); margin: 8px 0 6px; }
.lsl-sub { font: 400 14.5px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; max-width: 64ch; margin: 0 0 24px; }
.lsl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.lsl-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background 0.13s ease; }
.lsl-item:hover { background: #fff; }
.lsl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lsl-name { font: 600 14px var(--body, 'DM Sans', sans-serif); color: #3f474d; }
.lsl-item:hover .lsl-name { color: var(--orange-deep, #C84711); }
@media (max-width: 560px) { .lsl-grid { grid-template-columns: 1fr 1fr; } }


/* ===== spacing polish: pull sections together ===== */
/* the eyebrow section headings reserve too much air above their content */
.legal-main .listing-block-eye { margin: 0 0 12px; }
.legal-sec { margin: 0; }
/* the note under the glance heading + the grid sit tighter */
.legal-glance-sec .legal-glance-note { margin-bottom: 13px; }
/* trim the dead band before the disclaimer (body grid height follows the taller
   column; the disclaimer gap is the rhythm, which is now 18px) */
.legal-disclaimer { margin-top: var(--legal-gap, 18px); padding-top: 16px; }


/* ===== full-width "keep exploring" strip (moved out of the sidebar) ===== */
.legal-tools-strip { }
.legal-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
.legal-tools-strip .legal-tool { background: #fff; }
/* map-card sidebar fallback (world/canada pages with no US federal baseline) */
.legal-map-card { border-top: 4px solid var(--topo-sage, #5A8F3A); }
.legal-map-card p { font: 400 13px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; margin: 0 0 14px; }