/* Areas to Explore (homepage) v4 (10-09) - v3 minus the pop-ups: every area links to /areas/<slug>.
   Each big label is its own link with an invisible hit box (.ae-hit) drawn above all the zones.
   Based on hotsprings.org's "Areas to Explore" section.
   Needs Google Fonts: Barlow Condensed 400/500/600/700 + Poppins 400/600 (see the <link> in <head>).
   All map classes start with ae- ; the write-up under the map keeps its ag- rules at the end of this file. */
.ae {
  --ae-band: #338a98;
  --ae-land: #dfebd0;
  --ae-green: #4c9a42;
  --ae-ink: #3a3f47;
  --ae-navy: #072f49;
  --ae-teal: #0f766e;
  --ae-cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --ae-body: Poppins, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  margin: 28px 0 0;
  padding: 70px 60px 40px;
  background: var(--ae-band);
  color: #fff;
  text-align: center;
  font-family: var(--ae-body);
  overflow: hidden;
}
.ae *, .ae *::before, .ae *::after { box-sizing: border-box; }
.ae-inner { max-width: 1320px; margin: 0 auto; }
.ae-title {
  margin: 0;
  color: #fff;
  font-family: var(--ae-cond);
  font-size: 62px;
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ae-title b { font-weight: 700; }
.ae-sub { margin: 22px 0 0; color: #fff; font-size: 16px; line-height: 1.5; }

/* ---- the map ---- */
.ae-map { margin: 20px auto 0; padding: 0; }
.ae-svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.ae-credit { margin: 10px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 12px; line-height: 1.4; }
.ae-credit a { color: inherit; }
.ae-art, .ae-over, .ae-land { pointer-events: none; }

.ae-svg text { font-family: var(--ae-cond); text-transform: uppercase; }
.ae-sm { fill: var(--ae-ink); font-weight: 500; letter-spacing: 0.02em; }
.ae-state .ae-sm { fill: #5d6b63; letter-spacing: 0.35em; }
.ae-dot, .ae-arrow { fill: var(--ae-ink); }
.ae-shield path, .ae-shield circle, .ae-shield rect { fill: #fff; stroke: var(--ae-ink); stroke-width: 1.06px; }
.ae-shield text { fill: var(--ae-ink); font-weight: 500; text-anchor: middle; }

/* big area names: land-coloured halo keeps them clean over any line; hover turns them white (like theirs) */
.ae-name {
  fill: var(--ae-green);
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: -0.005em;
  paint-order: stroke;
  stroke: var(--ae-land);
  stroke-width: 5px;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}
.ae-name.is-hot, .ae-name.is-focus { fill: #fff; stroke: var(--ae-c); }
/* each label is its own link to its own area, above every zone: the invisible box catches taps on and between the letters */
.ae-label { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ae-hit { fill: transparent; stroke: none; pointer-events: all; }
@media (hover: hover) and (pointer: fine) {
  .ae-label:hover .ae-name { fill: #fff; stroke: var(--ae-c); }
}

/* clickable areas: the whole area fills with its colour on hover, like theirs.
   The invisible 2px edge makes neighbouring areas overlap a hair, so there is no dead line between them. */
.ae-zone { cursor: pointer; outline: none; }
.ae-fill { fill: var(--ae-land); stroke: transparent; stroke-width: 2px; stroke-linejoin: round; pointer-events: all; transition: fill 0.15s; }
.ae-zone.is-hot .ae-fill, .ae-zone.is-focus .ae-fill { fill: var(--ae-c); stroke: var(--ae-c); }
@media (hover: hover) and (pointer: fine) {
  .ae-zone:hover .ae-fill { fill: var(--ae-c); stroke: var(--ae-c); }
}
.ae-zone.is-focus .ae-fill { stroke: #fff; stroke-width: 4px; }
/* without the script: plain keyboard focus ring */
.ae:not(.ae-js) .ae-zone:focus-visible .ae-fill { fill: var(--ae-c); stroke: #fff; stroke-width: 4px; }

/* ---- tablets ---- */
@media (max-width: 1100px) {
  .ae { padding: 60px 32px 36px; }
}

/* ---- phones ---- */
@media (max-width: 640px) {
  .ae { padding: 44px 15px 28px; margin-top: 20px; }
  .ae-title { font-size: 40px; }
  .ae-sub { margin-top: 14px; font-size: 14px; }
  .ae-map { margin-top: 16px; }
  /* the map is ~360px wide: fewer, bigger labels */
  .ae-sm-hide { display: none; }
  .ae-lbl.ae-keep, .ae-lbl.ae-edge { transform: scale(2.7); }
  .ae-shield { transform: scale(1.7); }
  /* names (text + hit box) grow in place; same numbers as PHONE_SCALE in build/build_map3.py */
  .ae-name { stroke-width: 8px; }
  .ae-nm[data-area="ouachita"] { transform: scale(1.08); }
  .ae-nm[data-area="broken-bow-lake"] { transform: scale(1.3); }
  .ae-nm[data-area="hochatown"] { transform: scale(1.2); }
  .ae-nm[data-area="beavers-bend-state-park"] { transform: scale(1.35); }
  .ae-nm[data-area="mountain-fork-river"] { transform: scale(1.12); }
  .ae-nm[data-area="broken-bow"] { transform: scale(1.2); }
  .ae-nm[data-area="idabel"] { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .ae-fill, .ae-name { transition: none; }
}

/* About-the-area write-up under the map (homepage). Classes start with ag-
   Copied unchanged from area-map.css so the old file can be dropped. */
.ag { box-sizing: border-box; width: calc(100% - 32px); max-width: 1180px; margin: 24px auto 0; padding: 40px 30px 44px;
  border: 1px solid rgba(15,23,42,.1); border-radius: 28px; background: #fff; box-shadow: 0 10px 34px rgba(23,33,43,.07);
  color: #2f3a37; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.ag *, .ag *::before, .ag *::after { box-sizing: border-box; }
.ag-inner { max-width: 760px; margin: 0 auto; }
.ag-kicker { margin: 0 0 8px; color: #0f766e; font-size: 13px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.ag-title { margin: 0 0 16px; color: #072f49; font-size: clamp(30px, 4vw, 46px); font-weight: 950; line-height: .98; letter-spacing: -.05em; }
.ag-lead p { font-size: 18.5px; line-height: 1.6; margin: 0 0 14px; color: #24302d; }
.ag-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; padding: 18px 0 0; border-top: 1px solid #e3e9e1; }
.ag-toc a { background: #eef3e4; color: #072f49; font-weight: 800; font-size: 14px; border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.ag-toc a:hover, .ag-toc a:focus-visible { background: #0f766e; color: #fff; }
.ag-sec { padding-top: 30px; margin-top: 30px; border-top: 1px solid #e3e9e1; scroll-margin-top: 80px; }
.ag-sec h2 { margin: 0 0 12px; color: #072f49; font-size: clamp(24px, 3vw, 32px); font-weight: 950; line-height: 1.05; letter-spacing: -.035em; }
.ag-sec h3 { margin: 22px 0 6px; color: #0f766e; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.ag-sec p, .ag-sec li { font-size: 17px; line-height: 1.65; }
.ag-sec p { margin: 0 0 12px; }
.ag-sec ul { margin: 0 0 14px; padding-left: 22px; }
.ag-sec li { margin: 0 0 6px; }
.ag a { color: #0f766e; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ag-toc a { text-decoration: none; }
@media (max-width: 640px) {
  .ag { padding: 28px 18px 32px; border-radius: 22px; }
  .ag-lead p { font-size: 17px; }
  .ag-sec p, .ag-sec li { font-size: 16.5px; }
}

/* 10-11 Adam: "make it smaller... hard to see the whole map on the computer screen" -
   on computer screens the map is capped to the screen height so the whole map fits without scrolling. */
@media (min-width: 1101px) {
  .ae-map { max-width: min(100%, calc(100vh - 150px)); }
}

/* 10-11 side panel: computer screens get the map on the left and a hover panel on the right (area-panel.js).
   Phones and tablets keep the single centered map. */
.ae-panel { display: none; }
@media (min-width: 1101px) {
  .ae-inner { display: grid; grid-template-columns: minmax(0, calc(100vh - 150px)) minmax(340px, 1fr); column-gap: 48px; align-items: center; }
  .ae-title, .ae-sub { grid-column: 1 / -1; }
  .ae-map { max-width: none; width: 100%; }
  .ae-panel { display: block; text-align: left; align-self: center; margin-top: 20px; }
}
.ae-pv { display: none; background: #fff; color: var(--ae-ink); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(7, 47, 73, .25); }
.ae-panel.has-area .ae-pv { display: block; }
.ae-panel.has-area .ae-pick-hint { display: none; }
.ae-pv-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ae-land); }
.ae-pv-body { padding: 22px 26px 26px; }
.ae-pv-kicker { margin: 0; color: var(--ae-teal); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ae-pv-name { margin: 6px 0 10px; color: var(--ae-c, var(--ae-green)); font-family: var(--ae-cond); font-size: 48px; font-weight: 700; line-height: .95; text-transform: uppercase; }
.ae-pv-text { margin: 0; font-size: 15px; line-height: 1.6; }
.ae-pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ae-pv-chips span { padding: 6px 12px; border-radius: 999px; background: #eef6f4; color: var(--ae-navy); font-size: 13px; font-weight: 600; }
.ae-pv-go { display: inline-block; margin-top: 18px; padding: 12px 20px; border-radius: 12px; background: var(--ae-navy); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.ae-pv-go:hover { background: var(--ae-teal); }
.ae-pick { margin: 0; }
.ae-pick-hint { margin: 0 0 14px; color: #fff; font-family: var(--ae-cond); font-size: 34px; font-weight: 600; text-transform: uppercase; line-height: 1; }
.ae-pick-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ae-panel.has-area .ae-pick-list { margin-top: 16px; }
.ae-pick-list a { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.ae-pick-list a:hover, .ae-pick-list a.is-on { background: #fff; color: var(--ae-navy); }
/* 10-11 v2: map never moves (top-aligned), panel fits beside it, hint stays */
@media (min-width: 1101px) {
  .ae-inner { align-items: start; }
  .ae-panel { margin-top: 20px; }
}
.ae-pv-img { aspect-ratio: auto; height: clamp(130px, 22vh, 230px); }
.ae-pv-body { padding: 18px 24px 22px; }
.ae-pv-name { font-size: 40px; margin: 4px 0 8px; }
.ae-pv-text { font-size: 14px; line-height: 1.55; }
.ae-pv-chips { margin-top: 12px; }
.ae-pv-go { margin-top: 14px; }
.ae-panel.has-area .ae-pick-hint { display: block; }
.ae-pick-hint { margin: 18px 0 10px; font-size: 22px; }
.ae-panel.has-area .ae-pick-list { margin-top: 0; }
/* 10-11 v3: the SELECTED area (clicked) stays lit */
.ae-name.is-pin { fill: #fff; stroke: var(--ae-c); }
.ae-zone.is-pin .ae-fill { fill: var(--ae-c); stroke: var(--ae-c); }
.ae-sub-pc { display: none; }
@media (min-width: 1101px) { .ae-sub-mob { display: none; } .ae-sub-pc { display: inline; } }