/* ==========================================================================
   FESTIVAL FRAME: the 2026 flyer's energy layered on top of the existing
   design (loaded last on every page, so it wins ties). Nothing here moves
   content: it adds the flyer box treatment (thick outline + stacked hard
   shadows) to the site's existing cards, panels and buttons. (The striped
   side rails were tried and removed on 2026-09-25.)

   Shadow colours follow the background so they always read:
     on cream  → yellow, then black       (--fx-light)
     on black  → yellow, then orange      (--fx-dark)
     yellow box→ orange, then black       (--fx-yellow)
   ========================================================================== */
:root{
  --fx-Y:#fff10a; --fx-OR:#fe4901;
  --fx-light:6px 6px 0 var(--fx-Y),10px 10px 0 #000;
  --fx-dark:6px 6px 0 var(--fx-Y),10px 10px 0 var(--fx-OR);
  --fx-yellow:6px 6px 0 var(--fx-OR),10px 10px 0 #000;
  --fx-btn:4px 4px 0 var(--fx-OR);
  --fx-btn-hover:6px 6px 0 var(--fx-OR);
}

/* ---------- Boxes ----------
   Only the homepage "Memories We Made" cards keep the flyer outline. It was
   tried on the Two Days, Road to Dance Èkó, playlist, camping, merch, tickets
   and popup boxes and removed at the owner's request (2026-09-25). */
.mem-sec-card{box-shadow:var(--fx-dark)}
.mem-sec-card:hover{box-shadow:8px 8px 0 var(--fx-Y),13px 13px 0 var(--fx-OR)}
.mem-sec-grid{gap:18px!important}   /* room for the shadow */
/* (fix) the merch name fields could not shrink on narrow phones */
.merch-form input,.merch-form button{min-width:0;max-width:100%}

/* ---------- Buttons ---------- */
.hero-cta,.camp-hero-cta,.nav-cta,.su-form button,.su-modal-submit,.su-submit,
.tier-cta,.road-card-cta:not(.road-card-cta--locked),.playlist-btn:not(.playlist-btn--dim),
.eb-btn,.merch-form button,.tcta-btn,.btn-primary,.contact-form button,.de-form button{
  border:2px solid #000!important;box-shadow:var(--fx-btn)!important;
  transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s,opacity .2s!important;
}
.hero-cta:hover,.camp-hero-cta:hover,.nav-cta:hover,.su-form button:hover,.su-modal-submit:hover,.su-submit:hover,
.tier-cta:hover,.road-card-cta:not(.road-card-cta--locked):hover,.playlist-btn:not(.playlist-btn--dim):hover,
.eb-btn:hover,.merch-form button:hover,.tcta-btn:hover,.btn-primary:hover,.contact-form button:hover,.de-form button:hover{
  transform:translate(-2px,-2px);box-shadow:var(--fx-btn-hover)!important;
}
.hero-cta:active,.camp-hero-cta:active,.nav-cta:active,.su-form button:active,.su-modal-submit:active,.su-submit:active,
.tier-cta:active,.road-card-cta:not(.road-card-cta--locked):active,.playlist-btn:not(.playlist-btn--dim):active,
.eb-btn:active,.merch-form button:active,.tcta-btn:active,.btn-primary:active,.contact-form button:active,.de-form button:active{
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--fx-OR)!important;
}
button:disabled{box-shadow:none!important;transform:none!important}

/* ---------- Signup loader (assets/loader.js) ---------- */
button[aria-busy="true"]{display:inline-flex!important;align-items:center;justify-content:center;cursor:default;opacity:1!important}
.de-loader{height:32px;width:auto;display:block;filter:drop-shadow(0 0 1px rgba(0,0,0,.55))}

/* ---------- Ticket bar: button sits right, next to the × ---------- */
.tcta .tcta-btn{margin-left:auto!important}

/* ===== The 2026 flyer as the end of every page (owner-approved 2026-10-04) =====
   Sky with drifting clouds → Lagos skyline on the hill (assets/flyer/
   skyline-hill.png, its bottom fades into the grass texture) with the danfo
   driving along the rim (svg.danfo, animated by assets/activity.js) → grass
   footer (footer.flyer-foot) with everything centred and the animated silver
   wordmark. On the homepage the signup section is the sky (#signup.flyer-sky).
   Also: one small skyline divider between Days and Road (.sky-divider). */
.ft-sky,#signup.flyer-sky{position:relative;overflow:hidden;background:linear-gradient(#0683ed 0%,#138bec 30%,#2ea3f0 70%,#3ca8e8 100%)!important;background-image:linear-gradient(#0683ed 0%,#138bec 30%,#2ea3f0 70%,#3ca8e8 100%)!important}
.ft-sky{padding-top:60px}
.sky-cloud{position:absolute;background:#fff;border-radius:999px;filter:blur(5px);opacity:.92;animation:skydrift linear infinite;left:-280px;pointer-events:none}
.sky-cloud::before,.sky-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.sky-cloud::before{width:55%;height:170%;left:14%;top:-80%}
.sky-cloud::after{width:42%;height:135%;right:10%;top:-50%}
@keyframes skydrift{to{transform:translateX(calc(100vw + 560px))}}
.sky-c1{width:190px;height:44px;top:6%;animation-duration:80s;animation-delay:-25s}
.sky-c2{width:120px;height:30px;top:26%;animation-duration:105s;animation-delay:-70s;opacity:.7}
.sky-c3{width:230px;height:52px;top:48%;animation-duration:130s;animation-delay:-5s;opacity:.55}
@media(prefers-reduced-motion:reduce){.sky-cloud{animation:none;left:10%}}
.skywrap{position:relative;line-height:0;margin-top:10px;z-index:1}
.skywrap .skyline{display:block;width:100%;height:auto;position:relative;z-index:1}
.skywrap .danfo{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}

/* homepage signup on the sky */
#signup.flyer-sky{padding-bottom:0}
/* the skyline breaks out of the section's side padding so it runs edge to edge */
#signup.flyer-sky .skywrap{margin-left:-40px;margin-right:-40px}
@media(max-width:600px){#signup.flyer-sky .skywrap{margin-left:-20px;margin-right:-20px}}
#signup.flyer-sky .su-inner{padding-bottom:30px}
#signup.flyer-sky .su-eyebrow{color:rgba(255,255,255,.85)}
#signup.flyer-sky .su-title{color:var(--Y);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 var(--OR)}
#signup.flyer-sky .su-sub{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
#signup.flyer-sky .su-form input,#signup.flyer-sky .su-form .phone-row select{background:var(--cream);border:2px solid #000}
#signup.flyer-sky .wa-note{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.35)}
#signup.flyer-sky .su-success h3{color:var(--Y);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 var(--OR)}
#signup.flyer-sky .su-success p{color:#fff}

/* grass footer, everything centred, content pulled up onto the hill */
footer.flyer-foot{position:relative;z-index:2;background:#2f7716 url('flyer/grass-tile.jpg') center top/100% auto repeat-y!important;border:0!important;margin-top:-1px!important;padding:26px 40px 24px!important;color:#fff}
footer.flyer-foot::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 30%,rgba(0,0,0,.38) 100%);pointer-events:none;z-index:-1}
footer.flyer-foot .ft-top{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:26px;margin:-11vw auto 38px!important;max-width:1100px;text-align:center}
@media(min-width:1400px){footer.flyer-foot .ft-top{margin-top:-10vw!important}}
@media(max-width:700px){footer.flyer-foot{padding:22px 20px!important}footer.flyer-foot .ft-top{margin-top:-6vw!important}}
footer.flyer-foot .ft-logo img{display:block;width:min(260px,62vw)!important;height:auto!important;filter:none!important;opacity:1!important}
footer.flyer-foot .ft-nav{display:grid!important;grid-template-columns:repeat(4,auto);justify-content:center;gap:28px 56px}
@media(max-width:700px){footer.flyer-foot .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:30px 16px}}
footer.flyer-foot .ft-col{display:flex;flex-direction:column;align-items:center;gap:10px}
footer.flyer-foot .ft-col-title{font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--Y)!important;-webkit-text-stroke:3px #000;paint-order:stroke fill;margin-bottom:4px}
footer.flyer-foot .ft-col a{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff!important;text-decoration:none;text-shadow:1px 1px 0 #000,0 2px 6px rgba(0,0,0,.5)}
footer.flyer-foot .ft-col a:hover{color:var(--Y)!important}
footer.flyer-foot .ft-bottom{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:18px;border-top:1px solid rgba(255,255,255,.25)!important;max-width:1100px;margin:0 auto}
footer.flyer-foot .ft-copy,footer.flyer-foot .ft-links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)!important;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
footer.flyer-foot .ft-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer.flyer-foot .ft-kvlt{position:relative;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)!important;text-align:center;margin-top:16px;text-shadow:0 1px 3px rgba(0,0,0,.7)}

.sky-divider{background:var(--cream,#fffdf0);text-align:center;line-height:0;padding:8px 20px 0;pointer-events:none;user-select:none}
.sky-divider img{display:inline-block;width:min(560px,92vw);height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}

.sky-cloud{will-change:transform;transform:translateZ(0)}
.day2{background:linear-gradient(#0683ed,#2ea3f0 70%,#3ca8e8)!important;isolation:isolate}
.day2 > .sky-cloud{z-index:-1;opacity:.45}
.day2 .day-num,.day2 .day-vibe,.day2 .day-collab{color:rgba(0,0,0,.82)}
.day2 .day-title{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.sky-cloud{will-change:auto}}

/* Fade the repaired cutout into the existing grass footer. */
.skywrap .skyline{-webkit-mask-image:linear-gradient(#000 86.7%,transparent 100%);mask-image:linear-gradient(#000 86.7%,transparent 100%)}
.skywrap::before{content:'';position:absolute;left:0;right:0;bottom:0;height:14%;background:#2f7716 url('flyer/grass-tile.jpg') center top/100% auto;pointer-events:none}

/* Top header keeps the footer-style blue sky; slide-out menu stays yellow. */
nav{background:linear-gradient(110deg,#0783ed,#2ea3f0 70%,#3ca8e8)!important;isolation:isolate;overflow:hidden}
.nav-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nav-sky .sky-c1{width:145px;height:24px;top:52%;animation-duration:80s;animation-delay:-25s}
.nav-sky .sky-c2{width:105px;height:20px;top:68%;animation-duration:105s;animation-delay:-70s}

/* Header wordmark uses the existing artwork silhouette in festival yellow. */
nav .nav-logo a,nav a.nav-logo{display:block;background:var(--Y,#fff10a);-webkit-mask:url('img/23521e75ec2a5e94.png') center/contain no-repeat;mask:url('img/23521e75ec2a5e94.png') center/contain no-repeat}
nav .nav-logo img{display:block;opacity:0}

/* Mobile navigation wordmark returns to the original black. */
@media(max-width:768px){nav .nav-logo a,nav a.nav-logo{background:#000}}