/* Twin Hills Halloween RC10: clearer participation paths, calmer color balance, and human-facing polish. */

:root{
  --moon-link:#b8c9d2;
  --moon-link-strong:#dde7e8;
  --quiet-gold:#d2b27a;
  --haunt-accent:#ae7bc7;
  --activity-accent:#69aaa6;
}

/* Breadcrumbs should orient the visitor, not compete with the page title. */
.crumbs{
  color:#8799a1!important;
  gap:9px!important;
  letter-spacing:.095em!important;
}
.crumbs a{
  color:var(--moon-link)!important;
  text-decoration:none;
}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--moon-link-strong)!important;}
.crumbs>span:first-of-type{color:#526772!important;}
.app-hero .eyebrow:not(.violet):not(.green):not(.gold){color:var(--quiet-gold);}
.event-live-bar[data-state="active"] .event-live-state b{color:#bfd39d;}

/* Header participation menu. */
.nav-participate{position:relative;align-self:stretch;display:flex;align-items:center;}
.nav-participate summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  height:100%;
  list-style:none;
  color:inherit;
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
}
.nav-participate summary::-webkit-details-marker{display:none;}
.nav-participate summary::after{
  content:'';
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.72;
  transition:transform .18s ease;
}
.nav-participate[open] summary::after{transform:rotate(225deg) translate(-1px,-1px);}
.nav-participate.active summary,
.nav-participate[open] summary{color:var(--cream);}
.nav-participate.active summary::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--quiet-gold),var(--orange2));
}
.nav-participate-menu{
  position:absolute;
  z-index:140;
  top:calc(100% + 12px);
  right:-28px;
  width:min(420px,calc(100vw - 28px));
  padding:13px;
  border:1px solid rgba(207,157,108,.34);
  border-radius:10px;
  background:
    radial-gradient(circle at 90% 0,rgba(104,74,126,.16),transparent 38%),
    linear-gradient(180deg,rgba(10,28,39,.99),rgba(5,17,25,.995));
  box-shadow:0 26px 70px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.035);
}
.nav-participate-menu::before{
  content:'';
  position:absolute;
  top:-7px;
  right:48px;
  width:12px;
  height:12px;
  border-left:1px solid rgba(207,157,108,.34);
  border-top:1px solid rgba(207,157,108,.34);
  background:#0a1b26;
  transform:rotate(45deg);
}
.nav-participate-menu>p{
  margin:2px 7px 10px;
  color:#a7b4b9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav-join-option{
  --join-accent:var(--quiet-gold);
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:62px;
  padding:9px 10px!important;
  border:1px solid transparent;
  border-radius:7px;
  color:var(--cream)!important;
  text-decoration:none;
}
.nav-join-option:hover,.nav-join-option:focus-visible{
  border-color:color-mix(in srgb,var(--join-accent) 42%,transparent);
  background:color-mix(in srgb,var(--join-accent) 9%,transparent);
}
.nav-join-option svg{
  width:31px;
  height:31px;
  padding:6px;
  border:1px solid color-mix(in srgb,var(--join-accent) 48%,transparent);
  border-radius:50%;
  color:var(--join-accent);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.nav-join-option strong{display:block;font:500 17px/1.05 var(--serif);}
.nav-join-option small{display:block;margin-top:4px;color:#93a2a8;font-size:10px;line-height:1.4;}
.nav-join-option[data-join-kind="treats"]{--join-accent:#e28a42;}
.nav-join-option[data-join-kind="decorations"]{--join-accent:#b38ac8;}
.nav-join-option[data-join-kind="haunt"]{--join-accent:#9b70b8;}
.nav-join-option[data-join-kind="activity"]{--join-accent:#75b3ae;}
.nav-participate-all{
  display:block!important;
  margin-top:7px;
  padding:11px 12px!important;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--moon-link)!important;
}
.nav-participate-all strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.nav-participate-all small{display:block;margin-top:3px;color:#7f9098;font-size:10px;}

/* Focused participation choices on the landing page. */
.hero-join-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 16px;
  margin-top:18px;
}
.hero-join-links>span{color:#9ca9ad;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.hero-join-links a{
  position:relative;
  color:#d8dde0;
  font-size:11px;
  text-decoration:none;
}
.hero-join-links a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:.28;}
.hero-join-links a[data-join="treats"]{color:#eda15f;}
.hero-join-links a[data-join="decorations"]{color:#c49bd7;}
.hero-join-links a[data-join="haunt"]{color:#b98bd0;}
.hero-join-links a[data-join="activity"]{color:#8bc4bf;}

/* Registration entry intent. */
.registration-intent{
  --intent-accent:var(--moon-link);
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  margin:0 0 18px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--intent-accent) 38%,transparent);
  border-left:3px solid var(--intent-accent);
  border-radius:7px;
  background:color-mix(in srgb,var(--intent-accent) 7%,rgba(6,18,26,.94));
}
.registration-intent[hidden]{display:none;}
.registration-intent svg{width:30px;height:30px;color:var(--intent-accent);fill:none;stroke:currentColor;stroke-width:1.7;}
.registration-intent strong{display:block;color:var(--cream);font:500 18px/1.1 var(--serif);}
.registration-intent span{display:block;margin-top:4px;color:#9eaaaf;font-size:11px;line-height:1.45;}
.registration-intent a{color:var(--moon-link);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.registration-intent[data-intent="treats"]{--intent-accent:#e28a42;}
.registration-intent[data-intent="decorations"]{--intent-accent:#b38ac8;}
.registration-intent[data-intent="haunt"]{--intent-accent:#a87ac3;}
.registration-intent[data-intent="activity"]{--intent-accent:#75b3ae;}

/* Four straightforward, non-exclusive choices. */
.participation-path-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.participation-path{min-height:190px;}
.participation-path .path-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.haunt-path{--path-accent:var(--haunt-accent);}
.family-activity-path{--path-accent:var(--activity-accent);}
.participation-path b{border-radius:999px;}
.experience-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.experience-detail-card{
  padding:17px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:rgba(4,15,22,.52);
}
.experience-detail-card h4{margin:0 0 5px;color:var(--cream);font:500 21px/1.1 var(--serif);}
.experience-detail-card p{margin:0;color:#97a5aa;font-size:11px;line-height:1.5;}
.experience-schedule{
  margin-top:22px;
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(15,34,46,.86),rgba(6,18,26,.88));
}
.experience-schedule[data-kind="haunt"]{border-left:3px solid var(--haunt-accent);}
.experience-schedule[data-kind="activity"]{border-left:3px solid var(--activity-accent);}
.experience-schedule-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
.experience-schedule-head h3{margin:0;color:var(--cream);font:500 27px/1.05 var(--serif);}
.experience-schedule-head p{margin:6px 0 0;color:#97a5aa;font-size:11px;}
.experience-type-badge{padding:5px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#afbbc0;font-size:8px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}

/* Less orange stacking in forms and helper surfaces. */
.form-stepper .step.active{color:#f4eadc;}
.form-stepper .step.active>span{border-color:#b8c9d2!important;background:#22333e!important;color:#f2eadf!important;box-shadow:0 0 0 4px rgba(133,166,183,.08)!important;}
.form-stepper .step.complete>span{border-color:#8eae79!important;background:#273a2d!important;color:#d7e5ca!important;}
.path-panel-heading>span{color:#c8d4d7!important;border-color:rgba(150,177,189,.28)!important;}
#treat-path-panel .path-panel-heading>span{color:#e5a165!important;border-color:rgba(226,138,66,.36)!important;}
#decoration-path-panel .path-panel-heading>span{color:#c49bd7!important;border-color:rgba(179,138,200,.36)!important;}
#experience-path-panel .path-panel-heading>span{color:#8bc4bf!important;border-color:rgba(117,179,174,.36)!important;}

/* Human-facing notes should feel helpful, not like internal status messages. */
.public-help-note{border-color:rgba(132,165,179,.22)!important;background:rgba(15,35,47,.58)!important;color:#b9c5c9!important;}

@media (max-width:900px){
  .nav-participate{display:block;width:100%;}
  .nav-participate summary{min-height:44px;padding:10px 0;justify-content:space-between;}
  .nav-participate.active summary::before{bottom:4px;}
  .nav-participate-menu{
    position:static;
    width:100%;
    margin:3px 0 8px;
    box-shadow:none;
  }
  .nav-participate-menu::before{display:none;}
  .nav-join-option{min-height:58px!important;}
  .registration-intent{grid-template-columns:36px minmax(0,1fr);}
  .registration-intent>a{grid-column:2;}
  .experience-detail-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .hero-join-links{align-items:flex-start;flex-direction:column;gap:10px;}
  .hero-join-links>span{margin-bottom:2px;}
  .participation-path-grid{grid-template-columns:1fr;}
  .participation-path{min-height:142px;}
  .experience-schedule{padding:18px 15px;}
  .experience-schedule-head{display:block;}
  .experience-type-badge{display:inline-block;margin-top:10px;}
}

/* Keep the non-interactive legend below the live-map toolbar. */
body[data-page="stops"] .map-key{
  top:72px;
  pointer-events:none;
}
@media (max-width:900px){
  body[data-page="stops"] .map-key{top:68px;}
}

/* Keep each registration section visually distinct without turning every selection orange. */
#treat-path-panel .select-card:has(input:checked){
  border-color:rgba(226,138,66,.72)!important;
  background:linear-gradient(135deg,rgba(155,79,28,.19),rgba(10,27,37,.98))!important;
  box-shadow:inset 4px 0 #d97b35,inset 0 0 0 1px rgba(226,138,66,.12)!important;
}
#decoration-path-panel .select-card:has(input:checked){
  border-color:rgba(179,138,200,.72)!important;
  background:linear-gradient(135deg,rgba(93,61,112,.22),rgba(10,27,37,.98))!important;
  box-shadow:inset 4px 0 #a879bf,inset 0 0 0 1px rgba(179,138,200,.12)!important;
}
#experience-path-panel .select-card:has(input:checked){
  border-color:rgba(117,179,174,.72)!important;
  background:linear-gradient(135deg,rgba(48,100,99,.22),rgba(10,27,37,.98))!important;
  box-shadow:inset 4px 0 #65aaa5,inset 0 0 0 1px rgba(117,179,174,.12)!important;
}
#shared-feature-panel .select-card:has(input:checked){
  border-color:rgba(145,173,116,.7)!important;
  background:linear-gradient(135deg,rgba(73,99,57,.22),rgba(10,27,37,.98))!important;
  box-shadow:inset 4px 0 #8fac73,inset 0 0 0 1px rgba(145,173,116,.11)!important;
}
#decoration-path-panel input[type="checkbox"]{accent-color:#a879bf!important;}
#experience-path-panel input[type="checkbox"]{accent-color:#65aaa5!important;}
#shared-feature-panel input[type="checkbox"]{accent-color:#8fac73!important;}
#experience-path-panel::before{background:linear-gradient(var(--activity-accent),transparent)!important;}

@media (max-width:900px){
  .nav-open .main-nav{
    max-height:calc(100dvh - 86px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .nav-participate{align-self:auto!important;}
  .nav-participate summary{height:auto!important;}
}
