/* ── Twilight Refined: shared motion + behavior (redesign) ──────────────── */
/* Hero cross-dissolve (Welcome) */
.kb { position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: kbz 26s ease-in-out infinite alternate; }
.kb2 { animation: kbz 26s ease-in-out infinite alternate, xfade 26s ease-in-out infinite; }
@keyframes kbz { from { transform: scale(1.04); } to { transform: scale(1.16); } }
@keyframes xfade { 0%,38% { opacity: 0; } 50%,88% { opacity: 1; } 100% { opacity: 0; } }
/* Trail-cam REC pulse (Cabin) */
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Accordion (data-acc header + next-sibling .acc-body) used across all tabs */
[data-acc] { cursor: pointer; }
[data-acc] .chev { transition: transform .22s; }
[data-acc][data-open="1"] .chev { transform: rotate(180deg); }

/* ── Guest welcome (personalized by guest.js) ─ */
.guest-welcome {
  font-family: var(--font-header);
  font-size: 1.05rem;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

/* ── Cards ───────────────────────────────── */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.card--gold {
  border-color: var(--color-gold);
}

.card--highlight {
  background: linear-gradient(135deg, #102a38 0%, #1f333f 100%);
  border-color: var(--color-gold);
  border-width: 1.5px;
}

.card__label {
  font-family: var(--font-header);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.card__title {
  font-family: var(--font-header);
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.card__body {
  font-size: 0.92rem;
  color: var(--color-cream);
  line-height: 1.65;
}

/* Full-bleed photo at the top of an amenity card (negative margins escape the
   card padding so the image meets the rounded top corners). */
.card--media { overflow: hidden; }
.card__media {
  display: block;
  width: calc(100% + 2 * var(--space-lg));
  height: 170px;
  object-fit: cover;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-lg)) var(--space-md);
  border-bottom: 1px solid rgba(200, 145, 22, 0.45);
}

/* Editorial photo inside an accordion body (Our Story, Dogs, Wildlife). */
.accordion__media {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(200, 145, 22, 0.4);
  margin-bottom: var(--space-md);
}

/* Scene-setting banner at the top of a tab (Explore). */
.section-banner {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(200, 145, 22, 0.5);
  margin-bottom: var(--space-lg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.section-banner img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center 42%;
}

.card__value {
  font-family: var(--font-header);
  font-size: 2rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  display: block;
  margin: var(--space-sm) 0;
}

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px var(--space-lg);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn--cta {
  background: var(--color-cta);
  color: var(--color-black);   /* dark label on amber — WCAG AA (5.75:1); white failed at 2.76:1 */
  width: 100%;
}

.btn--gold {
  background: transparent;
  color: var(--color-gold);
  border: 1.5px solid var(--color-gold);
  width: 100%;
}

.btn--directions {
  background: var(--color-cta);
  color: var(--color-black);   /* dark label on amber — WCAG AA (5.75:1) */
}

.btn--sm {
  padding: 8px var(--space-md);
  font-size: 0.75rem;
}

.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Accordion ───────────────────────────── */
.accordion {
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--color-card);
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  gap: var(--space-sm);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}

.accordion__trigger:active { background: #28414f; }

.accordion__chevron {
  width: 18px;
  height: 18px;
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.accordion.open .accordion__chevron { transform: rotate(180deg); }

.accordion__body {
  display: none;
  padding: var(--space-md);
  background: #16252f;
  font-size: 0.9rem;
  color: var(--color-cream);
  line-height: 1.7;
}

.accordion.open .accordion__body { display: block; }

.accordion__body p + p,
.accordion__body ul + p,
.accordion__body p + ul { margin-top: var(--space-sm); }

.accordion__body strong { color: #ffffff; }

.accordion__subhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.bullet-list {
  list-style: disc;
  padding-left: 1.1rem;
}

.bullet-list li { margin-bottom: 0.3rem; }
.bullet-list li:last-child { margin-bottom: 0; }

/* ── Accordion count badge (Explore type accordions) ── */
.accordion__count {
  color: var(--color-gold);
  opacity: 0.7;
  font-size: 0.78rem;
  font-weight: 400;
}

/* ── Venue card ──────────────────────────── */
.venue-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

/* Optional per-venue thumbnail (left) with text beside it; actions stay below. */
.venue-card__top {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.venue-card__main {
  flex: 1;
  min-width: 0;
}
.venue-card__thumb {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(200, 145, 22, 0.35);
}

.venue-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.venue-card__name {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
}

.venue-card__star {
  color: var(--color-gold);
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1.5;
}

.venue-card__badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: var(--space-sm);
}

.badge--wine     { background: #3d1515; color: #e8a0a0; }
.badge--brew     { background: #1a1505; color: #c8a060; }
.badge--cider    { background: #1a2005; color: #90b860; }
.badge--apple    { background: #1a0f05; color: #d08040; }
.badge--eat      { background: #051520; color: #60a0c8; }
.badge--speakeasy{ background: #100520; color: #c080e0; }
.badge--outdoor  { background: #051a10; color: #60c890; }
.badge--coffee   { background: #1a0f00; color: #c09060; }
.badge--arts     { background: #1a0505; color: #e08080; }

.venue-card__note {
  font-size: 0.86rem;
  color: var(--color-cream);
  opacity: 0.75;
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}

.venue-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Directions takes the full row; contact icons sit in a row beneath it. */
.venue-card__actions .btn--directions {
  flex: 1 1 100%;
  white-space: nowrap;
}

.venue-card__actions .icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* ── Event cards ─────────────────────────── */
.event-date-group { margin-bottom: var(--space-lg); }

.event-date-header {
  font-family: var(--font-header);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: var(--space-sm);
}

.event-card {
  background: var(--color-card);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 6px 6px 0;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}

.event-card__type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 2px;
}

.event-card__name {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 2px;
}

.event-card__meta {
  font-size: 0.78rem;
  color: var(--color-cream);
  opacity: 0.6;
  margin-bottom: var(--space-xs);
}

.event-card__desc {
  font-size: 0.84rem;
  color: var(--color-cream);
  opacity: 0.8;
  line-height: 1.5;
}

.event-card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.event-card__actions .icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* ── Checkout checklist ──────────────────── */
.checklist { list-style: none; }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid #1e1e1e;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.checklist__item:last-child { border-bottom: none; }

.checklist__box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-gold);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  margin-top: 1px;
}

.checklist__item.checked .checklist__box {
  background: var(--color-gold);
}

.checklist__item.checked .checklist__box::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.checklist__text {
  font-size: 0.9rem;
  color: var(--color-cream);
  line-height: 1.45;
  padding-top: 2px;
}

.checklist__item.checked .checklist__text {
  text-decoration: line-through;
  opacity: 0.45;
}

/* ── Step list (amenity instructions) ────── */
.step-list {
  list-style: none;
  counter-reset: steps;
}

.step-list li {
  counter-increment: steps;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  font-size: 0.9rem;
  color: var(--color-cream);
  line-height: 1.5;
  border-bottom: 1px solid #1c1c1c;
}

.step-list li:last-child { border-bottom: none; }

.step-list li::before {
  content: counter(steps);
  min-width: 22px;
  height: 22px;
  background: var(--color-gold);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Info row ────────────────────────────── */
.info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid #1c1c1c;
}

.info-row:last-child { border-bottom: none; }

.info-row__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  flex-shrink: 0;
}

.info-row__value {
  font-size: 0.92rem;
  color: #ffffff;
  text-align: right;
}

/* ── WiFi display ────────────────────────── */
.wifi-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 3px;
}

.wifi-value {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* ── Door code display ───────────────────── */
.door-code-card {
  background: linear-gradient(135deg, #0d1b24 0%, #16303d 100%);
  border: 1.5px solid var(--color-gold);
  border-radius: 10px;
  padding: var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.door-code-card__label {
  font-family: var(--font-header);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-sm);
}

.door-code-card__code {
  font-family: var(--font-header);
  font-size: 3rem;
  letter-spacing: 0.3em;
  color: #ffffff;
  line-height: 1;
}

.door-code-card__note {
  font-size: 0.76rem;
  color: var(--color-cream);
  opacity: 0.55;
  margin-top: var(--space-sm);
}

/* ── Pill toggle (Explore sub-tabs) ──────── */
.pill-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-lg);
  background: #11212b;
  border-radius: 20px;
  padding: 4px;
}

.pill-btn {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-ridge);   /* readable inactive label — WCAG AA (5.7:1); #666 failed */
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pill-btn.active {
  background: var(--color-gold);
  color: #000000;
}

/* ── Events calendar (Task #26) ──────────── */
.pill-toggle--sub {
  margin-bottom: var(--space-md);
}

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.cal-dow span {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-blue-ridge);   /* WCAG AA; creek-stone read at 3.6:1 */
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-cell {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-creek-stone);
  -webkit-tap-highlight-color: transparent;
}

.cal-cell--empty {
  background: transparent;
}

.cal-cell--in {
  background: var(--color-card);
  color: var(--color-cream);
}

.cal-cell--has {
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  cursor: pointer;
  transition: background 0.15s;
}

.cal-cell--has:hover {
  background: var(--color-card);
}

.cal-cell--today {
  box-shadow: inset 0 0 0 2px var(--color-cta);
}

.cal-cell__num {
  line-height: 1;
}

.cal-cell__count {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gold);
}

.cal-cell__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  margin-top: 4px;
}

.cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-md);
  font-size: 0.74rem;
  color: var(--color-blue-ridge);   /* WCAG AA; creek-stone read at 3.6:1 */
}

.cal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-gold);
  -webkit-tap-highlight-color: transparent;
}

.event-empty-day {
  color: var(--color-blue-ridge);   /* WCAG AA; creek-stone read at 3.6:1 */
  font-size: 0.85rem;
  margin: 0 0 var(--space-sm);
}

/* ── Contact card ────────────────────────── */
.contact-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.contact-card__name {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
}

.contact-card__role {
  font-size: 0.76rem;
  color: var(--color-cream);
  opacity: 0.55;
  margin-top: 2px;
}

.contact-card__note {
  font-size: 0.76rem;
  color: var(--color-gold);
  margin-top: 4px;
}

.contact-card__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:active {
  background: var(--color-gold);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-btn:active svg { stroke: #000; }

/* ── Social link card ────────────────────── */
.social-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  text-decoration: none;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.social-link-card:active { border-color: var(--color-gold); }

.social-link-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-link-card__icon svg {
  width: 20px;
  height: 20px;
}

.social-link-card__name {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
}

.social-link-card__handle {
  font-size: 0.78rem;
  color: var(--color-cream);
  opacity: 0.55;
  margin-top: 2px;
}

/* App-share QR — guests show this for family & friends to scan (Task #15). */
.qr-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.qr-share__code {
  width: 200px;
  height: 200px;
  padding: var(--space-sm);
  background: #ffffff;
  border: 1px solid var(--color-gold);
  border-radius: 12px;
}

.qr-share__url {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  text-decoration: none;
}

.qr-share__url:active { text-decoration: underline; }

/* ── Thank You sign-off ──────────────────── */
.signoff {
  font-size: 0.95rem;
  color: var(--color-cream);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.signoff--from {
  font-family: var(--font-header);
  color: var(--color-gold);
  opacity: 0.85;
  margin-bottom: 0;
}

.closing-line {
  font-family: var(--font-header);
  font-size: 1.05rem;
  color: var(--color-gold);
  text-align: center;
  line-height: 1.5;
  margin: var(--space-xl) 0 var(--space-md);
}

/* ── States ──────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-cream);
  opacity: 0.6;   /* WCAG AA; 0.45 read at 3.94:1 */
}

.empty-state__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }

.empty-state__text {
  font-family: var(--font-header);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.loading-spinner::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 2px solid #2a2a2a;
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Our Story (Brand Book Ch 1) ─────────────── */
.ourstory-tagline {
  font-family: var(--font-header);
  font-size: 1.02rem;
  color: var(--color-gold);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.ourstory-closing {
  font-family: var(--font-header);
  font-size: 1rem;
  color: var(--color-gold);
  margin-top: var(--space-md);
}

/* ── FAQ category labels (Brand Book Ch 9) ───── */
.faq-group-label {
  font-family: var(--font-header);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: var(--space-lg) 0 var(--space-sm);
}