﻿/* Copied unchanged from the Contentful block 4MmYBQbMORC3tKZ0ZcnkKk on Nov 13 2026. Do not edit in place: upload a new version. */
/* ═════════════════════════════════════════════════════════════
     SEASON HOLD - UNIVERSAL   v1.3
     Link once per page that may show an empty camp picker.
     Same entry on PDX, Bay, Seattle. Pair it with a
     "Season Hold - <page>" block that supplies the copy.

     What it does, at runtime:
       1. Watches the page's camp picker (the Angular <directory-widget>
          or the #tcm directory) for up to ~14s.
       2. If the picker has real sessions, the hold panel stays hidden
          and nothing else changes - the page behaves as before.
       3. If the picker is empty ("No results" / "No Trackers Earth
          programs..."), it hides the empty picker, reveals the hold
          panel, and relabels every #get-camp button so no one is
          promised a registration that isn't there.

     Self-healing: when the season's directory goes live the picker
     fills, the panel stays hidden and the buttons say Register again.
     No content edit needed to switch back.

     v1.2: phones count as full too. On narrow screens #tcm draws
     cards (.tcm-card-name) instead of rows, which v1.1 missed, so
     phones kept the hold panel and Get Notified buttons after launch.

     v1.3: the panel is hidden by CSS until the script decides the
     directory is empty. Before this it painted on page load and sat
     under the picker's loading state for several seconds on live
     seasons, so families saw "dates aren't posted yet" flash on a
     page that had dates.

     Markup contract for the companion block:
       <section class="tc-hold" data-notify-form="klaviyo-form-XXXXXX">
     ═════════════════════════════════════════════════════════════ */

.tc-hold{
  --hold-ink:#2f2a24; --hold-soft:#6b6257; --hold-line:#e3ddd2;
  --hold-green:var(--g-forest,#2d5730); --hold-gold:var(--gold-light,#ffc107);
  display:block; margin:0 0 2.5rem; padding:0 1rem;
  font-family:inherit; color:var(--hold-ink);
}
/* v1.3: stay out of sight until the script confirms an empty directory */
.tc-hold:not([data-hold-show]){display:none !important;}
.tc-hold[hidden]{display:none !important;}
.tc-hold .hold-inner{
  max-width:780px; margin:0 auto; padding:2.4rem 1.9rem 2.1rem;
  background:#fdfbf7; border:1px solid var(--hold-line);
  border-top:5px solid var(--hold-green); border-radius:10px;
  box-shadow:0 2px 14px rgba(47,42,36,.07); text-align:center;
}
.tc-hold .hold-eyebrow{
  display:inline-block; margin:0 0 .85rem; padding:.3rem .8rem;
  background:#efebe1; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--hold-soft);
}
.tc-hold .hold-title{
  margin:0 0 .7rem; font-size:1.72rem; line-height:1.22; font-weight:800;
  color:var(--hold-green);
}
.tc-hold .hold-lede{
  margin:0 auto 1.5rem; max-width:52ch; font-size:1.04rem; line-height:1.6;
  color:var(--hold-soft);
}
.tc-hold .hold-cta{
  display:inline-block; padding:.82rem 1.9rem;
  background:var(--hold-gold); color:#2f2a24 !important;
  border:none; border-radius:6px; cursor:pointer;
  font-size:1.03rem; font-weight:800; letter-spacing:.01em; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tc-hold .hold-cta:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(47,42,36,.18); text-decoration:none;}
.tc-hold .hold-form{max-width:460px; margin:1.4rem auto 0; text-align:left;}
.tc-hold .hold-form:empty{display:none;}
.tc-hold .hold-open{margin:1.9rem auto 0; padding-top:1.4rem; border-top:1px solid var(--hold-line);}
.tc-hold .hold-open-label{
  display:block; margin-bottom:.8rem;
  font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--hold-soft);
}
.tc-hold .hold-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.tc-hold .hold-links li{margin:0;}
.tc-hold .hold-links a{
  display:inline-block; padding:.52rem 1.1rem;
  border:2px solid var(--hold-green); border-radius:6px;
  color:var(--hold-green) !important; font-weight:700; font-size:.95rem; text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.tc-hold .hold-links a:hover{background:var(--hold-green); color:#fff !important; text-decoration:none;}
@media (max-width:640px){
  .tc-hold .hold-inner{padding:1.9rem 1.2rem 1.7rem;}
  .tc-hold .hold-title{font-size:1.38rem;}
  .tc-hold .hold-lede{font-size:.99rem;}
  .tc-hold .hold-links{flex-direction:column;}
  .tc-hold .hold-links a{display:block;}
}
