/* ============================================================
   HOTEL HARMONY — AUTUMN THEME LAYER  (seasonal overlay)
   ------------------------------------------------------------
   EVERYTHING here is scoped to body.autumn-theme.
   The class is added by js/autumn-theme.js — the ONE switch is
   AUTUMN_FEATURES.enabled in that file. Set it to false (or
   remove the two autumn includes from <head>) to disable every
   seasonal effect with zero other changes anywhere.
   ============================================================ */

/* ---------- 1. AUTUMN TOKENS ---------- */
body.autumn-theme{
  --autumn-brown:#6F4E37;
  --autumn-rust:#A65F3F;
  --autumn-gold:#C99B55;
  --autumn-cream:#F7F1E8;
  --autumn-dark:#3F352E;
  --autumn-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C99B55' fill-opacity='0.75' d='M12 2C16 6.5 20.5 11 18.5 18C13.5 20.5 10.5 20.5 5.5 18C3.5 11 8 6.5 12 2Z'/%3E%3C/svg%3E");
}
body.autumn-theme ::selection{background:rgba(201,155,85,.35)}

/* ---------- 2. HEADER & TRUST BAR ---------- */
body.autumn-theme .header.scrolled{box-shadow:0 2px 24px rgba(111,78,55,.10)}
body.autumn-theme .header__dropdown li a:hover{background:var(--autumn-cream)}
body.autumn-theme .trust-bar{background:var(--autumn-cream)}
body.autumn-theme .trust-pill{border:1px solid rgba(201,155,85,.20);box-shadow:0 1px 4px rgba(111,78,55,.08)}
body.autumn-theme .trust-pill strong{color:var(--autumn-rust)}

/* ---------- 3. HERO / IMAGE WARMTH ---------- */
/* Warm, slightly sepia-toned overlays only — no filters on media (keeps video performant) */
body.autumn-theme .hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(111,78,55,.16) 0%,rgba(165,95,63,.08) 45%,rgba(63,53,46,.28) 100%),
    radial-gradient(120% 60% at 50% 115%,rgba(201,155,85,.16),transparent 60%);
}
body.autumn-theme .page-header::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(111,78,55,.14),rgba(63,53,46,.30));
}
body.autumn-theme .cta-section::before{
  background:linear-gradient(180deg,rgba(63,53,46,.50),rgba(63,53,46,.62));
}

/* Hero eyebrow ("Autumn at Hotel Harmony") — inserted by autumn-theme.js */
.autumn-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:14px;font-size:.7rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:#EDD9B0;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.autumn-eyebrow svg{width:15px;height:15px;fill:currentColor;opacity:.85;flex-shrink:0}
.autumn-eyebrow svg:last-child{transform:scaleX(-1)}

/* Seasonal hero pill ("AUTUMN DEAL — FALL15"). The original "BOOK DIRECT"
   pill stays in the HTML and returns when autumn mode is switched off. */
.autumn-hero-banner{gap:12px}
.autumn-banner-icon{display:inline-flex;align-items:center}
.autumn-banner-icon svg{width:22px;height:22px;fill:var(--autumn-gold,#C99B55)}
.autumn-banner-text{color:#F7F1E8;font-size:1.05rem;font-weight:800;letter-spacing:.8px;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.autumn-banner-badge{background:var(--autumn-gold,#C99B55);color:#2D2418;font-size:.68rem;font-weight:800;padding:5px 12px;border-radius:5px;letter-spacing:.08em;white-space:nowrap}

/* ---------- 4. SECTIONS ---------- */
body.autumn-theme .section--cream{background:linear-gradient(180deg,var(--autumn-cream) 0%,#F3E9DC 100%)}
body.autumn-theme .section__label{color:var(--autumn-rust)}
body.autumn-theme .section__label::before,
body.autumn-theme .section__label::after{
  content:'';display:inline-block;width:16px;height:13px;vertical-align:-1px;
  background:var(--autumn-leaf) center/contain no-repeat;opacity:.55;
}
body.autumn-theme .section__label::before{margin-right:9px}
body.autumn-theme .section__label::after{margin-left:9px;transform:scaleX(-1)}

/* ---------- 5. BUTTONS — warmer hovers + tiny lift ---------- */
body.autumn-theme .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(165,95,63,.32)}
body.autumn-theme .btn-book:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(165,95,63,.30)}
body.autumn-theme .btn-details:hover,
body.autumn-theme .btn-book-now:hover,
body.autumn-theme .btn-request:hover{box-shadow:0 5px 14px rgba(165,95,63,.28)}
body.autumn-theme .btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(165,95,63,.25)}
body.autumn-theme .back-to-top{box-shadow:0 4px 14px rgba(111,78,55,.25)}

/* ---------- 6. CARDS — warm shadows, warm accents ---------- */
body.autumn-theme .room-card{box-shadow:0 2px 16px rgba(111,78,55,.07)}
body.autumn-theme .room-card:hover{box-shadow:0 14px 44px rgba(111,78,55,.16)}
body.autumn-theme .room-card--featured{border-color:var(--autumn-gold)}
body.autumn-theme .room-card__features span{background:var(--autumn-cream)}
body.autumn-theme .amenity-card:hover{box-shadow:0 6px 18px rgba(111,78,55,.10)}
body.autumn-theme .score-card{background:var(--autumn-cream)}
body.autumn-theme .review-card{position:relative;border-left-color:var(--autumn-rust)}
body.autumn-theme .review-card::after{
  content:'';position:absolute;top:14px;right:14px;width:34px;height:28px;
  opacity:.18;background:var(--autumn-leaf) center/contain no-repeat;pointer-events:none;
}
body.autumn-theme .review-card:hover{box-shadow:0 8px 26px rgba(111,78,55,.12)}
body.autumn-theme .faq-highlight:hover{border-color:var(--autumn-rust);box-shadow:0 4px 16px rgba(165,95,63,.10)}
body.autumn-theme .faq-item.open{border-color:var(--autumn-rust);box-shadow:0 4px 20px rgba(165,95,63,.10)}
body.autumn-theme .addon-checkbox:hover{border-color:var(--autumn-gold);box-shadow:0 2px 12px rgba(111,78,55,.08)}

/* ---------- 7. EXPLORE TILES / CTA / OFFERS ---------- */
body.autumn-theme .explore-tile__overlay{
  background:linear-gradient(to top,rgba(63,53,46,.72),rgba(111,78,55,.10));
}
/* Booking CTA — leaf accents flanking the heading */
body.autumn-theme .cta-section h2::before,
body.autumn-theme .cta-section h2::after{
  content:'';display:inline-block;width:26px;height:22px;vertical-align:-2px;
  background:var(--autumn-leaf) center/contain no-repeat;opacity:.6;
}
body.autumn-theme .cta-section h2::before{margin-right:14px}
body.autumn-theme .cta-section h2::after{margin-left:14px;transform:scaleX(-1)}

/* ---------- 8. FOOTER ---------- */
body.autumn-theme .footer{border-top:1px solid rgba(201,155,85,.16)}
body.autumn-theme .footer__social a:hover{background:var(--autumn-rust)}

/* ---------- 9. FALLING LEAVES ---------- */
/* Container + leaves are created by autumn-theme.js (only when
   AUTUMN_FEATURES.leaves && !prefers-reduced-motion).
   GPU-friendly: transform + opacity only. */
.autumn-leaves{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.autumn-leaf{
  position:absolute;top:-40px;left:var(--x,50vw);
  width:var(--size,18px);height:var(--size,18px);
  fill:var(--color,#C99B55);opacity:0;
  animation:autumn-fall var(--dur,18s) linear var(--delay,0s) infinite;
  will-change:transform,opacity;
}
@keyframes autumn-fall{
  0%  {transform:translate3d(0,-6vh,0) rotate(0deg);opacity:0}
  8%  {opacity:var(--op,.5)}
  88% {opacity:var(--op,.5)}
  100%{transform:translate3d(var(--drift,30px),108vh,0) rotate(var(--spin,360deg));opacity:0}
}

/* ---------- 10. AUTUMN PROMO POPUP (FALL15) ---------- */
.autumn-popup{
  position:fixed;inset:0;z-index:20000;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(63,53,46,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.autumn-popup.is-open{opacity:1;visibility:visible}
.autumn-popup__card{
  position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  width:100%;max-width:780px;max-height:calc(100vh - 36px);overflow:auto;
  background:var(--autumn-cream);border:1px solid rgba(201,155,85,.40);
  border-radius:18px;box-shadow:0 34px 90px rgba(31,27,23,.40);
  transform:translateY(18px) scale(.97);transition:transform .45s cubic-bezier(.16,1,.3,1);
  text-align:left;
}
.autumn-popup.is-open .autumn-popup__card{transform:translateY(0) scale(1)}
.autumn-popup__close{
  position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);
  color:var(--autumn-dark);font-size:1rem;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s;
}
.autumn-popup__close:hover{transform:rotate(90deg);background:#fff}
.autumn-popup__media{position:relative;min-height:340px}
.autumn-popup__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.autumn-popup__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(63,53,46,.35),transparent 40%);
}
.autumn-popup__media::before{
  content:attr(data-code);position:absolute;left:18px;bottom:16px;z-index:1;
  background:rgba(255,255,255,.92);color:var(--autumn-dark);
  font-weight:700;letter-spacing:.3em;font-size:.8rem;padding:6px 14px;
  border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.autumn-popup__body{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
.autumn-popup__eyebrow{
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--autumn-rust);
}
.autumn-popup__eyebrow svg{width:13px;height:13px;fill:currentColor;opacity:.8}
.autumn-popup h3{
  font-family:var(--font-heading);font-weight:600;
  font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.15;
  color:var(--autumn-dark);margin-bottom:12px;
}
.autumn-popup__text{font-size:.88rem;line-height:1.65;color:var(--text-light);margin-bottom:20px}
.autumn-popup__code{display:flex;gap:10px;margin-bottom:14px}
.autumn-popup__code-box{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed rgba(166,95,63,.45);background:rgba(255,255,255,.75);
  border-radius:10px;padding:12px 10px;
}
.autumn-popup__code-value{
  font-weight:800;font-size:1.25rem;letter-spacing:.32em;color:var(--autumn-dark);
  user-select:all;-webkit-user-select:all;
}
.autumn-popup__copy{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:0 20px;
  border:none;border-radius:10px;background:var(--autumn-rust);color:#fff;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;
}
.autumn-popup__copy svg{width:15px;height:15px}
.autumn-popup__copy:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(166,95,63,.35);background:#8F4E31}
.autumn-popup__copy:active{transform:scale(.97)}
.autumn-popup__copy.is-copied{background:#6E7F52;box-shadow:0 6px 16px rgba(110,127,82,.35)}
.autumn-popup__copy.is-copied span{animation:copy-pop .35s ease}
@keyframes copy-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.autumn-popup__cta{
  display:block;text-align:center;padding:14px 20px;border-radius:10px;
  background:var(--primary);color:#fff;font-size:.88rem;font-weight:700;letter-spacing:.04em;
  transition:transform .25s,box-shadow .25s,background .25s;margin-bottom:14px;
}
.autumn-popup__cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(111,78,55,.30);background:var(--primary-dark)}
.autumn-popup__validity{
  align-self:center;display:inline-flex;align-items:center;gap:7px;
  margin-bottom:14px;padding:6px 16px;border-radius:20px;
  border:1px solid rgba(201,155,85,.40);background:rgba(201,155,85,.12);
  color:var(--autumn-dark);font-size:.7rem;font-weight:700;letter-spacing:.08em;
  white-space:nowrap;
}
.autumn-popup__validity svg{width:12px;height:12px;flex-shrink:0}
.autumn-popup__fine{font-size:.68rem;color:var(--text-muted);text-align:center;line-height:1.5}
body.autumn-popup-open{overflow:hidden}

/* ---------- 11. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .autumn-leaf{animation:none;display:none}
  .autumn-popup,.autumn-popup__card{transition:none}
}

/* ---------- 12. SMALL SCREENS ---------- */
@media(max-width:640px){
  .autumn-eyebrow{letter-spacing:.24em;gap:7px}
  body.autumn-theme .cta-section h2::before,
  body.autumn-theme .cta-section h2::after{width:18px;height:15px;margin-right:8px;margin-left:8px}
  .autumn-popup__card{grid-template-columns:1fr;max-height:calc(100vh - 24px)}
  .autumn-popup__media{display:none}   /* square image can't fit uncut on mobile — dropped, code stays in body */
  .autumn-popup__body{padding:30px 22px}
  .autumn-popup__code{flex-direction:column}
  .autumn-popup__copy{padding:13px 20px;justify-content:center}
}
@media(max-width:480px){
  .autumn-hero-banner{gap:8px}
  .autumn-banner-icon svg{width:16px;height:16px}
  .autumn-banner-text{font-size:.68rem;letter-spacing:.4px}
  .autumn-banner-badge{font-size:.58rem;padding:3px 8px}
}