/* ==========================================================================
   National Events landing pages (/national-events/, /ar/national-events/)
   Melodies logo green, faint swords-and-palm emblem, logo-colour accents.
   ========================================================================== */
#nx{--g1:#2a4c0b;--g2:#457716;--g3:#5f9a1c;--lg:#85BB33;--gold:#FFAD27;--ink:#1f2550;--mut:#4a5070;--bg:#f7f9fc;--card:#ffffff;--line:rgba(31,37,80,.09);
  color:var(--ink);background:var(--bg);overflow:hidden;overflow:clip}
html[data-theme="dark"] #nx{--ink:#eef0fa;--mut:#b9c0dc;--bg:#12172f;--card:#1a2045;--line:rgba(255,255,255,.1)}
#nx *{box-sizing:border-box}
#nx section{padding:0;background-image:none;animation:none;text-align:start}
#nx .nx-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
#nx a{color:inherit}
#nx :focus-visible{outline:3px solid #4FB9C2;outline-offset:3px;border-radius:8px}

/* ---------- hero */
#nx .nx-hero{position:relative;isolation:isolate;color:#fff;padding:calc(110px + clamp(30px,6vw,70px)) 0 clamp(70px,9vw,110px);
  background:radial-gradient(620px circle at 0% 0%,rgba(255,255,255,.16),transparent 60%),radial-gradient(560px circle at 100% 100%,rgba(169,219,94,.4),transparent 62%),linear-gradient(135deg,var(--g1),var(--g2) 50%,var(--g3))}
html[data-theme="dark"] #nx .nx-hero{background:radial-gradient(620px circle at 0% 0%,rgba(255,255,255,.08),transparent 60%),radial-gradient(560px circle at 100% 100%,rgba(133,187,51,.28),transparent 62%),linear-gradient(135deg,#16290a,#26440f 55%,#36601a)}
.nx-hero::before{content:'';position:absolute;z-index:-1;top:50%;inset-inline-end:4%;width:min(520px,70vw);aspect-ratio:1;transform:translateY(-50%);
  background:url("/assets/images/home/saudi-emblem.webp") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.09;pointer-events:none}
.nx-hero::after{content:'';position:absolute;z-index:-1;inset:0;opacity:.45;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask:radial-gradient(70% 90% at 30% 40%,#000,transparent 75%);mask:radial-gradient(70% 90% at 30% 40%,#000,transparent 75%)}
.nx-hero .nx-stripes{position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,#85BB33 0 20%,#913791 20% 40%,#E33069 40% 60%,#4FB9C2 60% 80%,#FFAD27 80%)}
.nx-crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;font-size:.88rem;color:rgba(255,255,255,.78)}
.nx-crumbs li+li::before{content:'/';margin-inline-end:6px;opacity:.6}
.nx-crumbs a{text-decoration:none;color:#fff}
.nx-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.nx-hero h1{margin:0 0 16px;max-width:820px;font-size:clamp(32px,5vw,58px);font-weight:800;line-height:1.15;color:#fff}
.nx-hero h1 span{background:linear-gradient(90deg,#e3f5bf,#FFAD27);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nx-lead{max-width:680px;margin:0 0 28px;font-size:clamp(16px,1.6vw,19px);line-height:1.9;color:#eef7df}
.nx-actions{display:flex;flex-wrap:wrap;gap:12px}
.nx-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;text-decoration:none;font-weight:800;font-size:15px;transition:transform .3s,box-shadow .3s}
#nx .nx-btn--wa{color:#fff;background:linear-gradient(135deg,#1faa53,#25D366);box-shadow:0 18px 36px -14px rgba(37,211,102,.7)}
#nx .nx-btn--light{color:var(--g1);background:#fff;box-shadow:0 16px 32px -14px rgba(0,0,0,.4)}
#nx .nx-btn--ghost{color:#fff;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.nx-btn:hover{transform:translateY(-3px)}
.nx-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-110%);animation:nx-shine 3.4s ease-in-out infinite}
.nx-btn--ghost::after{display:none}
@keyframes nx-shine{0%,60%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.nx-facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:42px 0 0;padding:0;max-width:900px}
.nx-facts li{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.nx-facts b{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:800;color:#fff}
.nx-facts span{font-size:13.5px;color:#e1eed0}

/* ---------- generic section */
.nx-sec{padding:clamp(60px,8vw,100px) 0!important}
.nx-sec--alt{background:color-mix(in srgb,var(--lg) 7%,var(--bg))!important}
.nx-head{max-width:760px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.nx-eyebrow{display:table;margin:0 auto 12px;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#355a0b;background:color-mix(in srgb,var(--lg) 14%,transparent);border:1px solid color-mix(in srgb,var(--lg) 35%,transparent)}
html[data-theme="dark"] .nx-eyebrow{color:#c9f08f}
#nx .nx-head h2{position:relative;display:inline-block;margin:0 0 26px;font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.25;color:var(--ink)}
.nx-head p{margin:0;font-size:16.5px;line-height:1.9;color:var(--mut)}

/* ---------- event blocks */
.nx-event{display:grid;grid-template-columns:minmax(240px,32%) 1fr;gap:clamp(24px,4vw,54px);align-items:start;padding:clamp(24px,3.5vw,44px);border-radius:32px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 70px -50px rgba(31,37,80,.5)}
.nx-event + .nx-event{margin-top:28px}
.nx-date{position:sticky;top:110px;border-radius:26px;padding:28px 22px;text-align:center;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 55%),linear-gradient(145deg,var(--d1),var(--d2))}
.nx-date::before{content:'';position:absolute;inset:-20%;z-index:-1;background:url("/assets/images/home/saudi-emblem.webp") center/60% no-repeat;filter:brightness(0) invert(1);opacity:.1}
.nx-date i{font-size:28px;color:var(--d3)}
.nx-date b{display:block;margin:6px 0 0;font-size:clamp(56px,6vw,74px);font-weight:800;line-height:1}
.nx-date span{display:block;font-size:19px;font-weight:700}
.nx-date small{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.nx-event h3{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.3;color:var(--ink)}
.nx-event .nx-sub{margin:0 0 22px;font-size:16px;line-height:1.9;color:var(--mut)}
.nx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.nx-grid li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--lg) 6%,var(--card));border:1px solid var(--line);font-weight:600;font-size:14.5px;line-height:1.5;transition:transform .3s,border-color .3s,box-shadow .3s}
.nx-grid li:hover{transform:translateY(-3px);border-color:var(--lg);box-shadow:0 16px 30px -20px rgba(69,119,22,.6)}
.nx-grid i{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--lg),var(--g2));box-shadow:0 8px 18px -8px rgba(69,119,22,.7)}

/* ---------- steps */
.nx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.nx-steps li{position:relative;padding:26px 22px;border-radius:24px;background:var(--card);border:1px solid var(--line);counter-increment:s}
.nx-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:14px;inset-inline-end:18px;font-size:38px;font-weight:800;color:color-mix(in srgb,var(--c) 45%,transparent)}
.nx-steps i{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;font-size:19px;color:#fff;background:var(--c);box-shadow:0 10px 22px -10px var(--c)}
.nx-steps h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--ink)}
.nx-steps p{margin:0;font-size:14.5px;line-height:1.8;color:var(--mut)}

/* ---------- why */
.nx-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nx-why li{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.nx-why i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.nx-why b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}
.nx-why span{font-size:14px;line-height:1.75;color:var(--mut)}

/* ---------- FAQ */
.nx-faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.nx-faq details{border-radius:18px;background:var(--card);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.nx-faq details[open]{border-color:var(--lg);box-shadow:0 18px 40px -30px rgba(69,119,22,.7)}
.nx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:700;font-size:16px;color:var(--ink)}
.nx-faq summary::-webkit-details-marker{display:none}
.nx-faq summary::after{content:'+';flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 20px/1 Arial,sans-serif;color:#fff;background:linear-gradient(145deg,var(--lg),var(--g2));transition:transform .3s}
.nx-faq details[open] summary::after{transform:rotate(45deg)}
.nx-faq details p{margin:0;padding:0 22px 20px;font-size:15px;line-height:1.9;color:var(--mut)}

/* ---------- final CTA */
.nx-cta{position:relative;isolation:isolate;overflow:hidden;border-radius:34px;padding:clamp(30px,5vw,60px);text-align:center;color:#fff;
  background:radial-gradient(520px circle at 0% 0%,rgba(255,255,255,.16),transparent 60%),linear-gradient(135deg,var(--g1),var(--g2) 50%,var(--g3));box-shadow:0 40px 80px -46px rgba(42,76,11,.9)}
.nx-cta::before{content:'';position:absolute;z-index:-1;inset:0;background:url("/assets/images/home/saudi-emblem.webp") center/auto 120% no-repeat;filter:brightness(0) invert(1);opacity:.07}
#nx .nx-cta h2{margin:0 0 12px;font-size:clamp(26px,3.4vw,40px);font-weight:800;color:#fff}
.nx-cta p{margin:0 auto 26px;max-width:640px;font-size:16.5px;line-height:1.9;color:#eef7df}
.nx-cta .nx-actions{justify-content:center}

/* ---------- reveal */
.nx-rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.nx-rv.is-in{opacity:1;transform:none}

@media (max-width:980px){
  .nx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-why{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nx-event{grid-template-columns:1fr}
  .nx-date{position:relative;top:0}
  .nx-grid,.nx-steps,.nx-why{grid-template-columns:1fr}
  .nx-grid{grid-auto-rows:auto}
}
@media (prefers-reduced-motion:reduce){
  .nx-btn::after{animation:none}
  .nx-rv{opacity:1;transform:none;transition:none}
}

/* hero v2: icon-chip buttons + linked date cards (3 cards, no "24 experiences" stat) */
#nx .nx-actions{gap:14px}
#nx .nx-actions .nx-btn{gap:14px;min-height:60px;padding:7px 28px 7px 7px;padding-inline:7px 26px;font-size:15.5px;border-radius:999px}
#nx .nx-actions .nx-btn i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;position:relative;z-index:1;transition:transform .3s}
#nx .nx-actions .nx-btn span{position:relative;z-index:1}
#nx .nx-btn--wa{background:linear-gradient(135deg,#0f8a46,#25D366);box-shadow:0 18px 36px -14px rgba(37,211,102,.75),inset 0 1px 0 rgba(255,255,255,.35)}
#nx .nx-btn--wa i{background:#fff;color:#0f8a46;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
#nx .nx-btn--light i{background:linear-gradient(135deg,#2fb36a,#0a4a2a);color:#fff;box-shadow:0 6px 14px -6px rgba(10,74,42,.6)}
#nx .nx-btn--ghost{border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);backdrop-filter:blur(8px)}
#nx .nx-btn--ghost i{background:rgba(255,255,255,.2);color:#fff}
#nx .nx-btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
#nx .nx-btn:hover i{transform:scale(1.08)}
#nx .nx-btn--ghost:hover i{transform:translateY(3px)}
#nx .nx-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

#nx .nx-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:840px;margin-top:46px}
#nx .nx-facts li{padding:0;background:none;border:0;backdrop-filter:none}
#nx .nx-facts a{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;height:100%;padding:16px 18px;border-radius:22px;text-decoration:none;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);transition:transform .3s,border-color .3s,box-shadow .3s}
#nx .nx-facts a::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c)}
#nx .nx-facts i{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,#000));box-shadow:0 8px 18px -8px var(--c)}
#nx .nx-fact__t{display:flex;flex-direction:column;gap:2px;min-width:0}
#nx .nx-facts b{font-size:clamp(19px,2vw,24px);line-height:1.25}
#nx .nx-facts .nx-fact__t span{font-size:13.5px;color:#e8f3d8}
#nx .nx-facts a:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 20px 36px -18px rgba(0,0,0,.6)}
#nx .nx-facts a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:760px){
#nx .nx-facts{grid-template-columns:1fr}
}
@media (max-width:560px){
#nx .nx-actions{flex-direction:column;align-items:stretch}
#nx .nx-actions .nx-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){#nx .nx-facts a,#nx .nx-btn i{transition:none}}

/* per-occasion WhatsApp quote button */
#nx .nx-evcta{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:7px 22px 7px 7px;padding-inline:7px 22px;border-radius:999px;font-weight:800;font-size:14.5px;line-height:1.3;text-decoration:none;color:inherit;background:rgba(37,211,102,.12);border:1.5px solid rgba(37,211,102,.55);transition:transform .3s,box-shadow .3s,background .3s}
#nx .nx-evcta i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:#fff;background:linear-gradient(135deg,#0f8a46,#25D366);box-shadow:0 6px 14px -6px rgba(37,211,102,.8);transition:transform .3s}
#nx .nx-evcta:hover{transform:translateY(-2px);background:rgba(37,211,102,.22);box-shadow:0 14px 26px -16px rgba(37,211,102,.9)}
#nx .nx-evcta:hover i{transform:scale(1.1)}
#nx .nx-evcta:focus-visible{outline:3px solid #25D366;outline-offset:3px}
@media (max-width:560px){#nx .nx-evcta{width:100%}}
@media (prefers-reduced-motion:reduce){#nx .nx-evcta,#nx .nx-evcta i{transition:none}}