/* ==========================================================================
   CHROME OVERRIDE v4  —  header, footer, floating actions
   Loaded after kv.css. Only redefines the variables and rules that change,
   so the rest of the design system is untouched.

   Direction: the chrome moves from flat maroon to a deep espresso-black with
   antique gold. Darker chrome makes the cream page feel brighter and the gold
   read as metal rather than yellow — that is what separates "premium" from
   "festival flyer".
   ========================================================================== */

:root {
  /* Chrome (header / footer) */
  --chrome-1:      #1B1008;   /* deep espresso, near-black warm */
  --chrome-2:      #2B1A0E;
  --chrome-3:      #3A2413;
  --chrome-line:   rgba(212,160,23,.28);

  /* Antique gold — richer than flat yellow */
  --gold:          #D4A017;
  --gold-light:    #EBC96B;
  --gold-deep:     #A87C0C;
  --gold-soft:     #FBF3DC;

  --on-dark:       #FDF6EA;
  --on-dark-muted: #C9B79C;
}

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--chrome-1);
  color: var(--on-dark-muted);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .inner { display:flex; justify-content:space-between; align-items:center; height:40px; gap:var(--s5); }
.topbar a { color: var(--on-dark-muted); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover { color: var(--gold-light); }
.tb-left  { display:flex; align-items:center; gap:var(--s6); }   /* gap replaces the separator dot */
.tb-right { display:flex; align-items:center; gap:var(--s5); }
.tb-cred  { display:inline-flex; align-items:center; gap:var(--s3); letter-spacing:.02em; }
.tb-cred i { width:4px; height:4px; border-radius:50%; background:var(--gold); display:inline-block; opacity:.7; }

/* ---------------- Header ---------------- */
.site-header {
  background: linear-gradient(180deg, var(--chrome-2), var(--chrome-1));
  border-bottom: 1px solid var(--chrome-line);
  box-shadow: 0 1px 0 rgba(212,160,23,.35), 0 10px 30px rgba(20,11,4,.28);
  position: sticky; top:0; z-index:100;
}
.site-header .inner { height:78px; }

.logo { font-size:24px; color:var(--on-dark); letter-spacing:.004em; }
.logo span { color:var(--gold-light); }

.nav-link { color:#FFFFFF; font-weight:500; letter-spacing:.005em; padding:var(--s3) var(--s4);
  border-radius:var(--r-sm); position:relative; }
.nav-link:hover, .nav-item:hover > .nav-link { background:rgba(212,160,23,.14); color:var(--gold-light); }

/* underline flourish instead of a plain highlight */
.nav-link::after {
  content:""; position:absolute; left:var(--s4); right:var(--s4); bottom:6px; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:transform .2s ease;
}
.nav-item:hover > .nav-link::after { transform:scaleX(1); }

/* crisp CSS caret — replaces the text arrow character */
.caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.75; margin-left:2px;
  transition:transform .2s ease; display:inline-block; }
.nav-item:hover > .nav-link .caret { transform:rotate(180deg); }

.mega { border-top:3px solid var(--gold); }
.mega h5 { color:var(--gold-deep); }

.hamburger { border-color:rgba(212,160,23,.45); color:var(--gold-light); }

/* ---------------- Footer ---------------- */
.site-footer {
  background: linear-gradient(180deg, var(--chrome-2), var(--chrome-1) 60%);
  color: var(--on-dark-muted);
  border-top: 3px solid var(--gold);
  padding: var(--s8) 0 var(--s5);
}
.site-footer h4 { color: var(--gold-light); }
.site-footer a:hover { color:#fff; }
.site-footer .logo { font-size:22px; }
.f-social a { background:rgba(212,160,23,.14); border:1px solid rgba(212,160,23,.3); color:var(--gold-light); }
.f-social a:hover { background:var(--gold); color:var(--chrome-1); border-color:var(--gold); }
.site-footer .base { border-top:1px solid rgba(212,160,23,.2); }

/* newsletter in footer */
.f-news { display:flex; gap:var(--s2); margin-top:var(--s3); }
.f-news input { min-height:44px; background:rgba(255,255,255,.06); border:1px solid rgba(212,160,23,.3);
  color:#fff; font-size:14px; }
.f-news input::placeholder { color:var(--on-dark-muted); }
.f-news button { min-height:44px; padding:0 var(--s4); border:none; border-radius:var(--r-sm);
  background:var(--gold); color:var(--chrome-1); font-weight:700; cursor:pointer; font-size:15px; }
.f-news button:hover { background:var(--gold-light); }

/* ---------------- Gold buttons pick up the richer gold ---------------- */
.btn-gold { background:linear-gradient(180deg, var(--gold-light), var(--gold)); color:#2A1A00;
  border:1px solid var(--gold-deep); font-weight:700; }
.btn-gold:hover { background:linear-gradient(180deg, #F2DFA0, var(--gold-light));
  box-shadow:0 6px 18px rgba(212,160,23,.35); transform:translateY(-1px); }

/* ---------------- Floating WhatsApp ---------------- */
.wa-float {
  position:fixed; right:18px; bottom:18px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  font-size:26px; text-decoration:none;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform .16s ease;
}
.wa-float:hover { transform:scale(1.07); }
.wa-float::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} }
@media (prefers-reduced-motion:reduce) { .wa-float::after { animation:none; } }

@media (max-width:880px) {
  .nav-list { background:var(--chrome-1); }
  .tb-left { gap:var(--s4); }
  .wa-float { width:52px; height:52px; font-size:24px; right:14px; bottom:14px; }
}

/* ============ Mega menu v2 — 3-column, iconed ============ */
.mega { min-width: 720px; padding: var(--s5) var(--s6); }
.mega-cols { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.mega-col h5 {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
  color: var(--maroon); font-size: 12px; letter-spacing: .06em;
}
.mega-col-icon {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--gold-soft); color: var(--saffron-deep);
  border: 1px solid #F0E2C4;
}
.mega-col-icon svg { width: 15px; height: 15px; }
.mega-col a {
  padding: 6px 0; font-size: 14.5px; color: var(--ink-secondary);
  border-radius: 6px; transition: color .12s, padding .12s;
}
.mega-col a:hover { color: var(--maroon); padding-left: 4px; }

/* promo card sits alongside if present */
.mega-promo { align-self: start; }

@media (max-width: 880px) {
  .mega { min-width: 0; padding: var(--s4); }
  .mega-cols { grid-template-columns: 1fr; gap: var(--s4); }
}