/* Where to Race (?pagename=wheretorace). Markup: includes/wheretorace.jsp;
   behaviour: theme_2026/js/wheretorace.js. Loaded for this page only by
   header_2026.jsp.

   Theme tokens only. Sizes are in px, not rem, because the legacy
   nastar_2019.css pins the root font-size at 14px on this host (CLAUDE.md,
   "Shared chrome across the two sites"). */

.wtr {
  --wtr-ink: var(--gray-900, #222);
  --wtr-muted: var(--gray-500, #6f7378);
  --wtr-line: var(--gray-200, #e2e5e9);
  --wtr-bg: var(--gray-100, #f4f6f8);
  --wtr-blue: var(--nastar-blue, #2f6fae);
  --wtr-navy: var(--nastar-blue-dark, #1b417d);
  --wtr-gold: var(--nastar-gold, #eaaf1d);
  /* The logo's red (#eb2e40) a shade darker, so white text on it passes
     WCAG AA contrast (4.9:1; the logo red itself is 4.2:1). */
  --wtr-red: #d9283a;
  --wtr-red-dark: #c8202f;
  --wtr-tap: 48px;   /* a little over the theme's 44px minimum: gloves, cold hands, phones held one-handed */
  font-family: var(--font-body);
  color: var(--wtr-ink);
  max-width: 1180px;
  margin: 0 auto 32px;
  text-align: left;
}
.wtr *, .wtr *::before, .wtr *::after { box-sizing: border-box; font-size: inherit; }
.wtr { font-size: 15px; line-height: 1.45; }
.wtr [hidden] { display: none !important; }
.wtr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wtr-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wtr-ico .wtr-fill { fill: currentColor; stroke: none; }
.wtr:not(.wtr-js) .wtr-q { display: none; }
.wtr:not(.wtr-js) .wtr-par summary { pointer-events: none; }
.wtr :is(a, button, select, summary, input):focus-visible { outline: 3px solid var(--wtr-blue); outline-offset: 2px; }
/* nastar_2019.css sets a colour directly on every element (`* { color }`),
   which beats inheritance, so text that should take its container's colour
   has to ask for it. */
.wtr-week__c > *, .wtr-status > span, .wtr-filtered > span, .wtr-filtered b { color: inherit; }
.wtr-status > .wtr-status__pill { color: #fff; }
.wtr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wtr button, .wtr select, .wtr input { font-family: inherit; font-size: 15px; color: inherit; }

/* Hero */
.wtr-hero { margin: 0 0 16px; }
.wtr-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: 32px !important; line-height: 1.1; margin: 0 0 4px; color: var(--wtr-navy); letter-spacing: -0.01em; }
.wtr-hero__sub { margin: 0; color: var(--gray-700, #46484c); font-size: 16px; }
.wtr-status { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #eef4fb; color: var(--wtr-navy); font-size: 14px; }
.wtr-status:empty { display: none; }
.wtr-status__pill { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--wtr-navy); color: #fff; padding: 3px 8px; border-radius: 999px; margin-top: 1px; }

.wtr-first { margin: 10px 0 0; font-size: 14px; color: var(--gray-700, #46484c); }
.wtr-first a { color: var(--wtr-navy); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }

/* Logged-in personalisation */
.wtr-mine { margin: 0 0 16px; }
.wtr-mine__title { font-family: var(--font-heading); font-size: 18px !important; margin: 0 0 8px; color: var(--wtr-navy); }
.wtr-mine__list { display: grid; gap: 12px; }
.wtr-mine__list .wtr-card { border-color: var(--wtr-gold); box-shadow: inset 4px 0 0 var(--wtr-gold); }

/* Search, filters, map and the floating button need the script; without it
   the page is the plain grouped list. wheretorace.js adds .wtr-js. */
.wtr:not(.wtr-js) .wtr-finder,
.wtr:not(.wtr-js) .wtr-mapwrap,
.wtr:not(.wtr-js) .wtr-fab { display: none !important; }

/* Finder */
.wtr-finder { background: #fff; border: 1px solid var(--wtr-line); border-radius: 12px; padding: 12px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(20,30,50,.06); }
.wtr-finder__top { display: flex; gap: 8px; }
.wtr-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: var(--wtr-tap); padding: 0 12px;
  border: 1px solid var(--gray-300, #c7cbd1); border-radius: 8px; background: #fff; color: var(--wtr-muted); }
.wtr-search:focus-within { border-color: var(--wtr-blue); box-shadow: 0 0 0 3px rgba(47,111,174,.2); }
.wtr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px !important; color: var(--wtr-ink); padding: 0; height: 100%; }
.wtr-near { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--wtr-tap); padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--wtr-blue); background: var(--wtr-blue); color: #fff !important; font-weight: 700; cursor: pointer; }
.wtr-near span, .wtr-near svg { color: #fff !important; }
.wtr-near[aria-pressed="true"] { background: var(--wtr-navy); border-color: var(--wtr-navy); }
.wtr-near[aria-busy="true"] { opacity: .7; }

.wtr-finder { display: flex; flex-direction: column; }
.wtr-finder .wtr-where { margin-top: 10px; }
.wtr-where .wtr-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wtr-finder__bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wtr-ftoggle { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid var(--gray-300, #c7cbd1);
  border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; }
.wtr-ftoggle[aria-expanded="true"] { border-color: var(--wtr-navy); background: #eef4fb; }
.wtr-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--wtr-navy); color: #fff; font-size: 12px !important; }
.wtr-count { margin: 0; font-weight: 700; color: var(--gray-700, #46484c); }
.wtr-viewbtn { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-left: auto; padding: 0 14px; border: 0; border-radius: 8px;
  background: var(--wtr-red); color: #fff !important; font-weight: 700; cursor: pointer; }
.wtr-viewbtn span, .wtr-viewbtn svg { color: #fff !important; }
.wtr-viewbtn:hover { background: var(--wtr-red-dark); }

.wtr-filters { display: none; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wtr-line); }
.wtr-finder.is-open .wtr-filters { display: grid; }
.wtr-field { display: block; margin: 0; }
.wtr-field__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wtr-muted); margin: 0 0 4px; padding: 0; }
.wtr-field select { width: 100%; height: var(--wtr-tap); padding: 0 10px; border: 1px solid var(--gray-300, #c7cbd1); border-radius: 8px; background: #fff; font-size: 16px !important; }
.wtr-days { border: 0; margin: 0; padding: 0; min-width: 0; }
.wtr-days__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wtr-day { height: var(--wtr-tap); border: 1px solid var(--gray-300, #c7cbd1); background: #fff; border-radius: 8px; font-weight: 700; cursor: pointer; padding: 0; }
.wtr-day[aria-pressed="true"] { background: var(--wtr-navy); border-color: var(--wtr-navy); color: #fff; }
.wtr-hint { margin: 6px 0 0; font-size: 13px; color: var(--wtr-muted); }
.wtr-f-done { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.wtr-btn { height: var(--wtr-tap); border: 0; border-radius: 8px; background: var(--wtr-navy); color: #fff; font-weight: 700; cursor: pointer; }
.wtr-btn--ghost { background: #fff; color: var(--wtr-navy); border: 1px solid var(--gray-300, #c7cbd1); }
.wtr-msg { margin: 10px 0 0; font-size: 14px; color: #8a1f11; }

/* "Showing 3 of 69 resorts: North Carolina . Show all 69 resorts" */
.wtr-filtered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; padding: 8px 8px 8px 14px;
  border-radius: 10px; background: #fff8e6; border: 1px solid #f0d58c; color: #4a3605; font-size: 15px; }
.wtr-filtered span { flex: 1 1 220px; }
.wtr-filtered__all { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--wtr-navy); color: #fff !important; font-weight: 700; cursor: pointer; }

/* List */
.wtr-group { scroll-margin-top: 8px; }
.wtr-group:first-child .wtr-state { margin-top: 0; }
.wtr-state { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; padding: 8px 0;
  background: #fff; border-bottom: 2px solid var(--wtr-navy); }
.wtr-state h2 { margin: 0; font-family: var(--font-heading); font-size: 20px !important; color: var(--wtr-navy); }
.wtr-state span { color: var(--wtr-muted); font-size: 14px; }
.wtr-state .wtr-state__home { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #fff3d1; color: #6b4e07; font-size: 13px; font-weight: 700; }
.wtr-grid { display: grid; gap: 12px; }
.wtr-empty { padding: 24px; text-align: center; color: var(--wtr-muted); background: var(--wtr-bg); border-radius: 12px; }
.wtr-flat:not([hidden]) { margin-top: 4px; }
.wtr-empty button { margin-top: 8px; border: 0; background: none; color: var(--wtr-blue); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: var(--wtr-tap); }

/* Card */
.wtr-card { position: relative; background: #fff; border: 1px solid var(--wtr-line); border-radius: 12px; padding: 14px 14px 12px;
  scroll-margin-top: 56px; transition: border-color .15s, box-shadow .15s; }
.wtr-card.is-hot { border-color: var(--wtr-blue); box-shadow: 0 0 0 2px rgba(47,111,174,.25); }
.wtr-card__head { display: flex; gap: 12px; align-items: flex-start; }
.wtr-card__id { flex: 1; min-width: 0; }
.wtr-card__name { color: var(--wtr-navy); margin: 0; font-family: var(--font-heading); font-size: 20px !important; line-height: 1.2; }
.wtr-card__name a { color: inherit !important; font: inherit; font-size: 20px !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.25); }
.wtr-card__name a:hover { text-decoration-color: currentColor; }
.wtr-card__place { margin: 2px 0 0; color: var(--wtr-muted); font-size: 14px; }
.wtr-card__dist { color: var(--wtr-blue); font-weight: 700; }
.wtr-line { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; }
.wtr-line .wtr-ico { margin-top: 1px; }
.wtr-label { margin: 12px 0 2px; font-size: 13px; font-weight: 700; color: var(--wtr-muted); }
.wtr-line--when { margin-top: 0; font-size: 16px; font-weight: 500; }
.wtr-line--when .wtr-ico { color: var(--wtr-blue); }
.wtr-line--when.is-missing { color: var(--wtr-muted); font-weight: 400; font-style: italic; }
.wtr-line--last { font-size: 14px; color: var(--gray-700, #46484c); }
.wtr-line--last .wtr-ico { width: 18px; height: 18px; color: var(--wtr-muted); margin-left: 1px; }
.wtr-line--last b { color: var(--wtr-ink); }
.wtr-line--mine { font-size: 14px; font-weight: 700; color: #6b4e07; }
.wtr-line--mine .wtr-ico { width: 18px; height: 18px; color: var(--wtr-gold); fill: var(--wtr-gold); }

/* Last season's race days by weekday (built by wheretorace.js). One compact
   row; the count sits in the cell, and a day with no races stays blank. */
.wtr-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 0 26px; padding: 0; list-style: none; max-width: 380px; }
.wtr-week__c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 42px; margin: 0;
  border-radius: 6px; background: #fff; border: 1px solid var(--wtr-line); color: var(--wtr-muted); line-height: 1.1; }
.wtr-week__d { font-size: 12px; font-weight: 700; }
.wtr-week__c b { font-size: 15px; min-height: 16px; }
.wtr-week__c[data-l="1"] { background: #dbe8f6; border-color: #dbe8f6; color: #1f4472; }
.wtr-week__c[data-l="2"] { background: #a9c8e8; border-color: #a9c8e8; color: #153a69; }
.wtr-week__c[data-l="3"] { background: var(--wtr-navy); border-color: var(--wtr-navy); color: #fff; }

.wtr-card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 4px 0 0 26px; font-size: 14px; }
.wtr-k { color: var(--wtr-muted); }
.wtr-par summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.wtr-par summary::-webkit-details-marker { display: none; }
.wtr-q { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gray-300, #c7cbd1);
  color: var(--wtr-blue); font-size: 13px !important; font-weight: 700; }
.wtr-par[open] { flex-basis: 100%; }
.wtr-par p { margin: 2px 0 0; padding: 8px 10px; background: var(--wtr-bg); border-radius: 8px; font-size: 14px; color: var(--gray-700, #46484c); }

.wtr-card__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 0; }
.wtr-act { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--wtr-tap); padding: 6px;
  border-radius: 8px; background: var(--wtr-bg); color: var(--wtr-navy) !important; text-decoration: none !important; font-size: 14px; font-weight: 700; text-align: center; }
.wtr-act .wtr-ico { width: 18px; height: 18px; }
.wtr-act:hover, .wtr-act:focus-visible { background: #e3ecf6; }
.wtr-act--primary { background: var(--wtr-navy); color: #fff !important; }
.wtr-act--primary:hover, .wtr-act--primary:focus-visible { background: var(--wtr-blue); }
.wtr-act[aria-disabled="true"] { color: var(--wtr-muted) !important; font-weight: 400; }
.wtr-arrow { margin-left: 6px; }
.wtr-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-top: 4px; }
.wtr-card__phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--gray-700, #46484c) !important; }
.wtr-card__results { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--wtr-blue) !important; }

/* Room under the last card for the floating Map button. */
.wtr-body { padding-bottom: 72px; }

/* Map */
.wtr-mapwrap { display: none; }
.wtr-map { height: 65vh; height: 65svh; min-height: 320px; border-radius: 12px; border: 1px solid var(--wtr-line); z-index: 0; }
.wtr-body[data-view="map"] .wtr-list { display: none; }
.wtr-body[data-view="map"] .wtr-mapwrap { display: block; }
.wtr-pop { font-family: var(--font-body); font-size: 14px; line-height: 1.35; }
.wtr-pop b { display: block; font-size: 15px; color: var(--wtr-navy); }
.wtr-pop span { display: block; color: var(--wtr-muted); margin: 2px 0 6px; }
.wtr-pop button { border: 0; background: var(--wtr-navy); color: #fff; border-radius: 6px; padding: 8px 12px; font-weight: 700; cursor: pointer; min-height: 44px; }

/* Phone/tablet: floating List/Map switch, shown while the results are on screen. */
.wtr-fab { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--wtr-red); color: #fff !important; font-weight: 700; font-size: 16px !important; box-shadow: 0 6px 20px rgba(20,30,50,.35); cursor: pointer; }
.wtr-fab:hover { background: var(--wtr-red-dark); }
.wtr-fab span, .wtr-fab svg { color: #fff !important; }

/* Notes */
.wtr-notes { margin-top: 24px; padding: 16px; background: var(--wtr-bg); border-radius: 12px; font-size: 14px; color: var(--gray-700, #46484c); }
.wtr-notes__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 18px !important; color: var(--wtr-navy); }
.wtr-notes p { margin: 0 0 8px; }
.wtr-notes p:last-child { margin: 0; }

@media (min-width: 700px) {
  .wtr-hero__title { font-size: 40px !important; }
  /* Room for everything: the panel is always open and the phone-only furniture goes. */
  .wtr-ftoggle, .wtr-f-done { display: none !important; }
  /* Search and Location share the first row; Race day and Sort the second;
     the resort count sits last, directly above the results. */
  .wtr-finder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); column-gap: 16px;
    grid-template-areas: "top where" "filters filters" "msg msg" "bar bar"; align-items: end; }
  .wtr-finder__top { grid-area: top; }
  .wtr-finder .wtr-where { grid-area: where; margin: 0; }
  .wtr-where .wtr-field__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .wtr-filters, .wtr-finder.is-open .wtr-filters { grid-area: filters; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); column-gap: 16px; align-items: start; }
  .wtr-msg { grid-area: msg; }
  .wtr-finder__bar { grid-area: bar; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wtr-line); }
  .wtr-grid { grid-template-columns: 1fr 1fr; }
  .wtr-mine__list { grid-template-columns: 1fr 1fr; }
  .wtr-card { display: flex; flex-direction: column; }
  .wtr-card__actions { margin-top: auto; padding-top: 12px; }
}

/* Desktop: list and map side by side; the map stays put while the list scrolls. */
@media (min-width: 1050px) {
  .wtr-fab, .wtr-viewbtn { display: none !important; }
  .wtr-body { padding-bottom: 0; }
  .wtr-body, .wtr-body[data-view="map"] { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .wtr-body[data-view="map"] .wtr-list { display: block; }
  .wtr-mapwrap, .wtr-body[data-view="map"] .wtr-mapwrap { display: block; position: sticky; top: 12px; }
  /* Shaped for the continental US, which is what it shows unfiltered. */
  .wtr-map { height: min(calc(100vh - 24px), 420px); }
  .wtr-grid { grid-template-columns: 1fr; }
}