/*
Theme Name: Nakuru City Festival
Theme URI: https://famousnakuru.co.ke/nakuru-city-festival-theme
Author: Famous Nakuru
Author URI: https://famousnakuru.co.ke
Description: Lively, graphical, animated, mobile-first theme for annual city festivals. Lightweight, accessible, SEO-friendly. Includes Events, Program, Sponsors, Venues; animated homepage, live countdown, editor color palette, and JSON-LD for event SEO.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nakuru-city-festival
Tags: festival, events, culture, responsive, accessibility-ready, custom-colors, custom-logo, custom-menu, block-patterns
*/

/* =========================
   1) DESIGN TOKENS
   ========================= */
:root{
  --nf-pink:#ff3d9a;
  --nf-lightblue:#7cc7ff;
  --nf-green:#26c281;
  --nf-red:#ff4d4f;
  --nf-white:#ffffff;
  --nf-dark:#121417;
  --nf-muted:#f5f7fb;

  --nf-border:#eaeef5;
  --nf-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* =========================
   2) BASE / RESET
   ========================= */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.62;
  color:var(--nf-dark);
  background:var(--nf-white);
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--nf-pink);text-decoration:none}
a:hover{opacity:.9}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--nf-lightblue);outline-offset:2px}
hr{border:0;border-top:1px solid var(--nf-border);margin:2rem 0}

/* WP align helpers */
.alignleft{float:left;margin:.5rem 1rem .5rem 0}
.alignright{float:right;margin:.5rem 0 .5rem 1rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* Containers & Grids */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Chips */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{background:var(--nf-muted);border-radius:999px;padding:.25rem .75rem;font-size:.875rem}

/* Buttons */
.btn{display:inline-block;border-radius:999px;padding:.75rem 1.25rem;font-weight:600;line-height:1}
.btn-primary{background:var(--nf-pink);color:#fff}
.btn-outline{border:2px solid var(--nf-pink);color:var(--nf-pink);background:#fff}
.btn-ghost{color:#fff;background:var(--nf-green)}
.btn:disabled{opacity:.6;pointer-events:none}

/* Cards */
.card{background:#fff;border-radius:1rem;box-shadow:var(--nf-shadow);overflow:hidden}
.card .p{padding:1rem}

/* Headings */
h1,h2,h3{font-weight:800;margin:0 0 .5rem}
h2{
  display:inline-block;
  background:linear-gradient(90deg,var(--nf-pink),var(--nf-lightblue),var(--nf-green),var(--nf-red));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* Sections */
.section{padding:3rem 0}
.section.lead{padding-top:4rem;padding-bottom:2.5rem}

/* =========================
   3) HEADER / NAV / SOCIAL
   ========================= */
.site-header{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid var(--nf-border)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:64px}
.site-branding{display:flex;align-items:center;gap:.75rem}
.site-header .custom-logo,
.site-header .site-branding img{max-height:56px;height:auto;width:auto}
@media (max-width:900px){
  .site-header .custom-logo,
  .site-header .site-branding img{max-height:44px}
}

/* Nav wrapper aligns menu + icons to the right */
.site-nav{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.mobile-nav-toggle{display:none}

/* Ensure fallback page list behaves like .nav */
.site-header nav ul{margin:0;padding:0;list-style:none}

/* Menu list */
.nav{display:flex;gap:1rem;align-items:center}
.nav > li{display:flex;align-items:center}
.nav a{color:var(--nf-dark);font-weight:600;display:block;padding:.5rem .75rem;border-radius:.5rem}
.nav a:hover{background:var(--nf-muted)}
.nav .current-menu-item > a,
.nav .current_page_item > a{color:#fff;background:var(--nf-pink)}

/* Desktop: force horizontal */
@media (min-width:901px){
  .mobile-nav-toggle{display:none}
  .site-header nav > ul,
  .site-header nav .nav{
    display:flex !important;flex-direction:row !important;gap:1rem;align-items:center;
    position:static !important;margin:0;padding:0;list-style:none
  }
}

/* Mobile: collapse menu list only */
@media (max-width:900px){
  .mobile-nav-toggle{display:inline-block}
  .site-header nav .nav{display:none}
  .site-header nav .nav.open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;
    background:#fff;padding:1rem;border-bottom:1px solid var(--nf-border);z-index:60
  }
}

/* Social icons (official) */
.social-links{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.chip-social{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;border-radius:999px;padding:0 .6rem;
  border:1px solid var(--nf-border);background:#fff
}
.chip-social img{display:block;width:18px;height:18px}
.chip-social:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.chip-social.fb{background:#1877F2;border-color:#1877F2}
.chip-social.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);border-color:transparent}
.chip-social.yt{background:#FF0000;border-color:#FF0000}
.chip-social.tt{background:#000;border-color:#000}

/* =========================
   4) HERO / HOMEPAGE
   ========================= */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--nf-lightblue) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 0%, var(--nf-pink) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%,#f7fbff 100%);
}
.hero-inner{padding:6rem 0 4rem}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;background:#fff;
  border:1px solid var(--nf-border);border-radius:999px;padding:.35rem .75rem;font-weight:700
}
.badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--nf-green)}
.hero h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:.5rem 0}
.hero p{font-size:clamp(1rem,2.5vw,1.25rem)}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

/* Floating orbs */
.floating{position:absolute;inset:auto;opacity:.25;filter:blur(.5px);animation:float 12s ease-in-out infinite}
.f1{top:10%;left:-50px;width:180px;height:180px;background:var(--nf-pink);border-radius:40% 60% 60% 40%/40% 40% 60% 60%}
.f2{bottom:5%;right:-60px;width:220px;height:220px;background:var(--nf-lightblue);border-radius:50% 50% 40% 60%/60% 40% 60% 40%;animation-duration:16s}
.f3{top:40%;right:20%;width:120px;height:120px;background:var(--nf-green);border-radius:46% 54% 44% 56%/50% 50% 50% 50%;animation-duration:18s}
@keyframes float{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(8deg)}100%{transform:translateY(0) rotate(0deg)}}

/* Home centering */
.home .hero .container{text-align:center}
.home .hero-cta{justify-content:center}
.home .nf-countdown{margin-left:auto;margin-right:auto}
.home .section h2{text-align:center}
.home #about .container,
.home #program .container,
.home #events .container,
.home #sponsors .container{text-align:center}
.home #program .grid,
.home #events .grid{justify-content:center}
.home .marquee{justify-content:center}
.home .card .p{text-align:center}

/* =========================
   5) COMPONENTS
   ========================= */
/* Sponsors marquee */
.marquee {
  display: flex;
  gap: 2rem;
  overflow: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
}

.marquee img {
  height: 48px;
  object-fit: contain;
  scroll-snap-align: center;
  filter: none;       /* removed grayscale */
  opacity: 1;         /* always full opacity */
  transition: transform .2s ease;
}

.sponsor:hover img {
  transform: scale(1.05); /* subtle hover effect */
}


/* Countdown (STARTS: 26 Nov 2025 • 06:00 EAT — set via data-target on markup) */
.nf-countdown{
  display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;
  background:rgba(255,255,255,.65);backdrop-filter:saturate(160%) blur(6px);
  border:1px solid var(--nf-border);border-radius:1rem;padding:.5rem 1rem;
  box-shadow:var(--nf-shadow);width:max-content;opacity:1; /* keep visible even if JS fails */
}
.nf-countdown .cd-seg{display:flex;flex-direction:column;align-items:center;min-width:70px}
.nf-countdown .num{font-weight:900;font-size:clamp(1.5rem,4vw,2.25rem);line-height:1;color:var(--nf-red)}
.nf-countdown .lab{font-size:.75rem;color:#475569;text-transform:uppercase;letter-spacing:.06em}
.nf-countdown .cd-sep{font-size:clamp(1.25rem,3.5vw,1.75rem);color:#64748b;padding:0 .25rem}
@media (max-width:600px){
  .nf-countdown{gap:.25rem;padding:.35rem .5rem}
  .nf-countdown .cd-seg{min-width:56px}
}

/* Event meta (single event page) */
.event-meta{list-style:none;padding:0;margin:.75rem 0;display:flex;flex-wrap:wrap;gap:1rem}
.event-meta li{background:var(--nf-muted);padding:.35rem .6rem;border-radius:.5rem}
.event-meta strong{color:var(--nf-dark)}

/* Forms */
input,select,textarea{
  font:inherit;border:1px solid var(--nf-border);border-radius:.75rem;padding:.6rem .8rem;width:100%;
  background:#fff;color:var(--nf-dark)
}
button,input[type="submit"]{font:inherit}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{padding:.75rem;border-bottom:1px solid var(--nf-border);text-align:left}
thead th{background:var(--nf-muted)}

/* =========================
   6) FOOTER
   ========================= */
.site-footer{background:#0b0d10;color:#cbd5e1;padding:2rem 0}
.site-footer a{color:#e2e8f0}
.small{font-size:.875rem;color:#64748b}

/* =========================
   7) ANIMATION / ACCESSIBILITY
   ========================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;
  padding:.5rem 1rem;border-radius:.5rem;z-index:999
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .floating{animation:none !important}
  .reveal{transition:none !important;opacity:1 !important;transform:none !important}
}

/* =========================
   8) UTILITIES
   ========================= */
.text-center{text-align:center}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}

/* Guardrail: accidental hero logos large */
.home .hero img.custom-logo,
.home .hero .festival-logo,
.home .hero img[alt*="logo"]{max-width:160px;height:auto}

/* Activities Grid */
.act-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:1rem;
}
.act-cols-3{ grid-template-columns:repeat(3,1fr); }
.act-cols-4{ grid-template-columns:repeat(4,1fr); }

.act-card{
  --r: 20px;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio: 1.1 / 1;
  border-radius: var(--r);
  color:#0b0d10; text-align:center;
  padding:1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.act-card .act-name{
  font-weight:900;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  line-height:1.2;
}
.act-card .act-meta{
  font-size:.85rem; color:#0b0d10b3; margin-top:.35rem;
}

/* Colorful backgrounds (festival palette) */
.act-card.c1{ background:linear-gradient(135deg,#ffe2f1,#ffd4ec 40%,#fff); }
.act-card.c2{ background:linear-gradient(135deg,#dff0ff,#cae7ff 40%,#fff); }
.act-card.c3{ background:linear-gradient(135deg,#d6f8ed,#c0f0e1 40%,#fff); }
.act-card.c4{ background:linear-gradient(135deg,#ffe0e1,#ffd2d3 40%,#fff); }

/* Festive confetti bubbles */
.act-card .act-bubble{
  position:absolute; inset:auto;
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0));
  top:-40px; right:-40px; opacity:.65; pointer-events:none;
  filter: blur(.4px);
}
.act-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* Reveal animation synergy */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s; }
.reveal.is-visible{ opacity:1; transform:none; }

.site-footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 2rem 1rem;
}

.site-footer a {
  color: #ff2d92;
  text-decoration: none;
}

.site-footer .footer-inner {
  max-width: 800px;
  margin: 0 auto;
}

.site-footer .footer-credit {
  margin-bottom: 1rem;
}

.site-footer .footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-nav li {
  display: inline-block;
  margin: 0 .75rem;
}

.site-footer .footer-nav a:hover {
  text-decoration: underline;
}

.hero-bubbles {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-bubbles span {
  position: absolute;
  display: block;
  width: 120px;
  height: 120px;
  background: rgba(255, 45, 146, 0.2);
  border-radius: 50%;
  animation: float 25s infinite;
}

.hero-bubbles span:nth-child(1) { left: 20%; animation-delay: 0s; }
.hero-bubbles span:nth-child(2) { left: 40%; animation-delay: 5s; width: 180px; height: 180px; }
.hero-bubbles span:nth-child(3) { left: 60%; animation-delay: 10s; background: rgba(79, 172, 254, 0.2); }
.hero-bubbles span:nth-child(4) { left: 80%; animation-delay: 15s; width: 150px; height: 150px; background: rgba(67, 233, 123, 0.2); }

@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50%  { opacity: 0.4; }
  100% { transform: translateY(-800px) rotate(360deg); opacity: 0; }
}


.festival-pdf iframe {
  width: 100%;
  height: 700px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.page-program {
  max-width: 960px;
  margin: 0 auto;
}

.festival-schedule {
  margin-top: 2rem;
}

.festival-photobooth {
  text-align: center;
  margin: 2rem auto;
  max-width: 500px;
}

#camera {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 1rem;
}

#photo-canvas {
  display: none;
  width: 100%;
  margin-top: 1rem;
  border-radius: 10px;
}

#capture-btn, #download-btn {
  display: inline-block;
  margin: 1rem .5rem;
  padding: .8rem 1.2rem;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

#capture-btn { background: #ff2d92; color: #fff; }
#download-btn { background: #4caf50; color: #fff; text-decoration: none; }