/* ==========================================================================
   ERS — CONTENT / EDITORIAL COMPONENTS
   Elk River Sports. Added 2026-09-07.

   Every value here comes from 00-tokens.css. Change a token, every guide,
   hub and landing page follows. Do not hard-code colors or spacing below.

   Components
     .ers-article      article shell + reading rhythm
     .ers-lede         opening paragraph
     .ers-callout      --key / --warn / --reg
     .ers-figure       image + caption
     .ers-table-wrap   scrollable data table
     .ers-shop         commerce band inside editorial
     .ers-cta          conversion panel
     .ers-hub          hub grid + cards
     .ers-sources      citation list
   ========================================================================== */

/* ---------- Article shell ---------- */
.ers-article{
  font-family: var(--ers-body);
  font-size: var(--ers-fs-body);
  line-height: var(--ers-lh-body);
  color: var(--ers-text);
}
.ers-article > p,
.ers-article > ul,
.ers-article > ol{ max-width: var(--ers-measure); }
.ers-article > * + *{ margin-top: var(--ers-space-3); }
.ers-article > h2{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-top: var(--ers-space-6);
  margin-bottom: var(--ers-space-2);
}
.ers-article > h3{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-top: var(--ers-space-5);
  margin-bottom: var(--ers-space-2);
}
.ers-article a{ color: var(--ers-link); }
.ers-article a:hover{ color: var(--ers-link-hover); }

.ers-lede{
  font-size: var(--ers-fs-lede);
  color: var(--ers-text);
  max-width: var(--ers-measure-lede);
}

.ers-kicker{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ers-cta);
  display: block;
  margin-bottom: var(--ers-space-1);
}

/* ---------- Callouts ---------- */
.ers-callout{
  border-left: 4px solid var(--ers-callout-key-edge);
  background: var(--ers-callout-key-bg);
  padding: var(--ers-space-3) var(--ers-space-4);
  margin: var(--ers-space-4) 0;
  border-radius: 0 var(--ers-radius-sm) var(--ers-radius-sm) 0;
  max-width: var(--ers-measure);
}
.ers-callout > :first-child{ margin-top: 0; }
.ers-callout > :last-child{ margin-bottom: 0; }
.ers-callout--warn{
  border-left-color: var(--ers-callout-warn-edge);
  background: var(--ers-callout-warn-bg);
}
.ers-callout--reg{
  border-left-color: var(--ers-callout-reg-edge);
  background: var(--ers-callout-reg-bg);
}

/* ---------- Figures ---------- */
.ers-figure{ margin: var(--ers-space-5) 0; }
.ers-figure img{
  width: 100%;
  /* Constrain the frame so a tall source photo cannot swallow the page.
     Same 16:9 contract as the hub cards, so editorial imagery stays uniform. */
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: var(--ers-radius-sm);
  background: var(--ers-panel);
}
.ers-figure figcaption{
  font-size: var(--ers-fs-small);
  color: var(--ers-muted);
  margin-top: var(--ers-space-2);
  max-width: var(--ers-measure);
}

/* ---------- Data tables ---------- */
.ers-table-wrap{ overflow-x: auto; margin: var(--ers-space-4) 0; }
.ers-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ers-fs-small);
}
.ers-table th,
.ers-table td{
  border: 1px solid var(--ers-border);
  padding: var(--ers-space-2) var(--ers-space-3);
  text-align: left;
  vertical-align: top;
}
.ers-table th{
  background: var(--ers-surface-raised);
  font-family: var(--ers-head);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--ers-fs-kicker);
}
.ers-table tbody tr:hover{ background: rgba(255,255,255,.03); }

/* ---------- Season status pills ----------
   Filled in by ers-season-status.js on any table row carrying data-s / data-e.
   Colors come from the shared pill tokens so they match the rest of the site. */
.ers-pill{
  display: inline-block;
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .2em .6em;
  border-radius: 999px;
  border: 1px solid transparent;
}
.ers-pill--open{ color: var(--ers-green);      border-color: var(--ers-green);      background: rgba(92,184,122,.12); }
.ers-pill--soon{ color: var(--ers-cta);        border-color: var(--ers-cta);        background: rgba(200,168,75,.12); }
.ers-pill--done{ color: var(--ers-text-dim);   border-color: var(--ers-border); }

.ers-nowbox{
  margin: var(--ers-space-4) 0;
  padding: var(--ers-space-3);
  border-left: 3px solid var(--ers-green);
  background: var(--ers-callout-key-bg);
  border-radius: var(--ers-radius-sm);
  max-width: var(--ers-measure);
}
.ers-nowbox__label{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ers-green);
  margin-bottom: var(--ers-space-1);
}

/* ---------- Commerce band inside editorial ---------- */
.ers-shop{
  margin: var(--ers-space-5) 0;
  padding-top: var(--ers-space-3);
  border-top: 1px solid var(--ers-line);
}
.ers-shop__intro{
  color: var(--ers-muted);
  font-size: var(--ers-fs-small);
  max-width: var(--ers-measure);
  margin-bottom: var(--ers-space-3);
}
.ers-shop__more{
  display: inline-block;
  margin-top: var(--ers-space-2);
  font-family: var(--ers-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--ers-fs-kicker);
}

/* ---------- Conversion panel ---------- */
.ers-cta{
  background: var(--ers-panel-warm);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius);
  padding: var(--ers-space-4) var(--ers-space-4);
  margin: var(--ers-space-5) 0;
}
.ers-cta > :first-child{ margin-top: 0; }
.ers-cta > :last-child{ margin-bottom: 0; }
.ers-cta h3{ font-family: var(--ers-head); margin-bottom: var(--ers-space-2); }
.ers-cta--gold{ border-color: var(--ers-cta); }
.ers-cta h2{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-bottom: var(--ers-space-2);
}
.ers-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ers-space-2);
  margin-top: var(--ers-space-3);
}
.ers-cta__more{
  margin-top: var(--ers-space-3);
  font-size: var(--ers-fs-small);
}

/* ---------- Button ----------
   The .ers-btn base and its --primary / --secondary color variants already
   live in 10-base.css. Do not redefine them here; this only adds the layout
   editorial content needs (inline-block + padding), so the colors stay in
   one place. Use: class="ers-btn ers-btn--primary".
   ------------------------------------------------------------------------ */
.ers-btn{
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target */
  font-size: var(--ers-fs-small);
  padding: var(--ers-space-2) var(--ers-space-3);
}
/* Same cascade trap as the hub cards: the theme's `.page-content a` (0,1,1)
   underlines every link and out-specifies a bare `.ers-btn` (0,1,0). */
.ers-cta a.ers-btn,
.ers-article a.ers-btn,
.ers-cta a.ers-btn:hover,
.ers-article a.ers-btn:hover{ text-decoration: none; }

/* ---------- Honeypot ----------
   Off-screen rather than display:none. Bots that skip hidden inputs still see
   this one, and screen readers get a real label telling them to leave it empty. */
.ers-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Guide breadcrumb ---------- */
.ers-crumb{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--ers-space-3);
}
.ers-crumb a{ color: var(--ers-muted); text-decoration: none; }
.ers-crumb a:hover{ color: var(--ers-cta); }

/* ---------- Header navigation ----------
   Seven top-level items plus the logo, account and cart need to share one row.
   Tighten the item padding rather than dropping categories: the nav is the main
   path into 4,000+ products. */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{
  padding-left: 11px;
  padding-right: 11px;
  font-size: 13px;
}
@media (max-width: 1200px){
  .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}
/* Submenus: readable, on-brand, and never clipped.
   Elementor's default sub-item color is near-black, which is invisible on the
   dark panel, and the panel sizes to the parent rather than its own labels. */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown{
  background: var(--ers-panel-2);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  box-shadow: var(--ers-shadow-card);
  width: max-content;
  min-width: 210px;
}
.elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-nav-menu--dropdown a.elementor-sub-item:visited,
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-item:visited{
  color: var(--ers-text);
  font-size: var(--ers-fs-small);
  padding: 11px 20px;
  white-space: nowrap;
}
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  color: var(--ers-cta);
  background: var(--ers-surface-raised);
}

/* Mobile flyout: full width, solid, comfortable tap targets. */
@media (max-width: 1024px){
  .elementor-nav-menu--dropdown{
    width: 100% !important;
    min-width: 0;
  }
  .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-nav-menu--dropdown a.elementor-sub-item{
    min-height: 48px;
    display: flex;
    align-items: center;
    white-space: normal;
  }
}

/* ---------- Category archive hero ----------
   Rendered server-side by mu-plugins/ers-category-hero.php from the real term.
   Replaced a hardcoded JS map that drifted out of sync with the taxonomy. */
.ers-cathero{
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--ers-space-3) 0;
}
.ers-cathero .ers-kicker{ margin-bottom: var(--ers-space-2); }
.ers-cathero__title{
  font-family: var(--ers-head);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  color: var(--ers-text);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.05;
  margin: 0 0 var(--ers-space-2);
}
.ers-cathero__dek{
  color: var(--ers-muted);
  font-size: var(--ers-fs-body);
  line-height: var(--ers-lh-body);
  max-width: 560px;
  margin: 0 auto var(--ers-space-4);
}
.ers-cathero__subs{
  display: flex;
  gap: var(--ers-space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.ers-chip{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;              /* touch target */
  padding: var(--ers-space-2) var(--ers-space-3);
  background: var(--ers-surface-raised);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  font-family: var(--ers-body);
  font-size: var(--ers-fs-small);
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
/* Theme underlines every .page-content a at (0,1,1); out-specify it. */
.ers-cathero a.ers-chip,
.ers-cathero a.ers-chip:hover{
  text-decoration: none;
  color: var(--ers-text);
}
.ers-cathero a.ers-chip:hover{
  background: rgba(200,168,75,.15);
  border-color: var(--ers-cta);
}
.ers-chip__n{
  color: var(--ers-text-dim);
  font-size: var(--ers-fs-kicker);
}

/* ---------- Hub grid ---------- */
.ers-hub{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ers-space-4);
  margin: var(--ers-space-5) 0;
}
.ers-hub__card{
  display: flex;
  flex-direction: column;
  background: var(--ers-panel-2);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--ers-text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ers-hub__card:hover{
  transform: translateY(-3px);
  border-color: var(--ers-cta);
  box-shadow: var(--ers-shadow-card);
}
.ers-hub__media{
  aspect-ratio: 16 / 9;
  background: var(--ers-panel);
  overflow: hidden;
}
.ers-hub__media img{ width:100%; height:100%; object-fit: cover; display:block; }
.ers-hub__body{ padding: var(--ers-space-3); display:flex; flex-direction:column; gap: var(--ers-space-1); }
.ers-hub__title{
  font-family: var(--ers-head);
  font-size: 1.15rem;
  line-height: var(--ers-lh-tight);
  color: var(--ers-text);
}
.ers-hub__dek{ font-size: var(--ers-fs-small); color: var(--ers-muted); }
.ers-hub__meta{
  font-size: var(--ers-fs-kicker);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ers-text-dim);
  margin-top: var(--ers-space-1);
}
.ers-hub__card--soon{ opacity: .55; pointer-events: none; }
.ers-hub__card--soon .ers-hub__meta{ color: var(--ers-cta); }

/* The theme ships `.comments-area a, .page-content a { text-decoration: underline }`
   at specificity (0,1,1), and Elementor's kit sets `.elementor-kit-6 a { color }`
   at the same weight — both out-specify a bare `.ers-hub__card` (0,1,0). An
   ancestor's underline also PROPAGATES into descendants and cannot be switched
   off by the child, so the whole card renders as underlined link text unless the
   card itself wins. `.ers-hub a.ers-hub__card` is (0,2,1) and does. */
.ers-hub a.ers-hub__card,
.ers-hub a.ers-hub__card:hover,
.ers-hub a.ers-hub__card:focus{
  text-decoration: none;
  color: var(--ers-text);
}

/* ---------- Sources ---------- */
.ers-sources{
  margin-top: var(--ers-space-5);
  padding-top: var(--ers-space-3);
  border-top: 1px solid var(--ers-line);
  font-size: var(--ers-fs-small);
  color: var(--ers-muted);
}
.ers-sources h2{ font-size: 1rem; }
.ers-sources ul{ margin: var(--ers-space-2) 0 0; padding-left: 1.1rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ers-hub__card{ transition: none; }
  .ers-hub__card:hover{ transform: none; }
}