/*
Theme Name: Bionic Festival
Theme URI: https://www.bionicfestival.com/
Author: Bionic Festival
Description: Custom theme for the Bionic Festival — a sustainable, multicultural dance competition uniting dance, music and mobile trees. Light, nature-led design with editions and dancers as custom post types. Built to work with TranslatePress for EN/ES.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bionic
Domain Path: /languages
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --bg:#f7f8f2; --bg-2:#eef2e6; --surface:#ffffff; --line:#e3e8d8;
  --ink:#22301c; --ink-2:#5a6650; --ink-3:#95a086;
  --accent:#5f8a2f; --accent-soft:#eaf1dd; --accent-ink:#ffffff;
  --gold:#c88a34; --gold-soft:#f6ecda;
  --maxw:1180px; --radius:16px;
  --font:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;color:var(--ink);margin:0 0 .5em}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,248,242,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:flex;align-items:center;font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .dot{color:var(--accent)}
.brand-logo,.custom-logo{height:40px;width:auto;display:block}
/* If your uploaded logo is a light/white version, uncomment to force it dark on the light header:
.brand-logo{filter:brightness(0);} */

.primary-menu,.primary-menu .sub-menu{list-style:none;margin:0;padding:0}
.primary-menu{display:flex;align-items:center;gap:1.1rem;font-size:.82rem;letter-spacing:.03em}
.primary-menu > li{position:relative}
.primary-menu a{display:block;color:var(--ink-2);padding:.35rem 0;white-space:nowrap}
.primary-menu a:hover{color:var(--accent)}
.primary-menu .menu-item-has-children > a::after{content:" ▾";color:var(--ink-3)}
.primary-menu .sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.5rem;min-width:200px;display:none;flex-direction:column;box-shadow:0 12px 30px rgba(50,70,30,.1)}
.primary-menu > li:hover > .sub-menu,.primary-menu > li:focus-within > .sub-menu{display:flex}
.primary-menu .sub-menu a{padding:.5rem .7rem;border-radius:9px}
.primary-menu .sub-menu a:hover{background:var(--accent-soft)}
/* Festival year menu: two columns */
.primary-menu .menu-editions .sub-menu{flex-flow:row wrap;min-width:230px}
.primary-menu .menu-editions .sub-menu li{width:calc(50% - .2rem)}
.primary-menu .menu-editions .sub-menu a{text-align:center}

.nav-tools{display:flex;align-items:center;gap:.8rem}
.lang-switch{display:flex;gap:.35rem;align-items:center;border:1px solid var(--line);border-radius:20px;padding:.2rem .5rem;font-size:.75rem;background:var(--surface)}
.lang-switch a{color:var(--ink-3);padding:.1rem .35rem;border-radius:12px}
.lang-switch a.current-lang,.lang-switch a:hover{color:var(--accent)}
.menu-toggle{display:none;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:.4rem .6rem;cursor:pointer;font-size:1rem}

/* ==========================================================================
   Hero (front page video)
   ========================================================================== */
.hero{position:relative;height:calc(100vh - 68px);min-height:520px;overflow:hidden;display:grid;place-items:center;text-align:center}
.hero__video,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__fallback{background:radial-gradient(120% 120% at 50% 10%,#cfe0b4,#7ea24f 60%,#3f6a2a)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,45,20,.28),rgba(30,45,20,.15) 40%,rgba(30,45,20,.42))}
.hero__inner{position:relative;z-index:2;padding:1rem;color:#fff}
.hero__eyebrow{font-size:.72rem;letter-spacing:.36em;color:#e7f2d4;margin-bottom:1.1rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero__title{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:500;line-height:1.02;letter-spacing:.005em;color:#fff;text-shadow:0 2px 22px rgba(20,30,10,.4);margin:0}
.hero__cta{display:flex;gap:.7rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-block;font-family:var(--font);font-size:.85rem;padding:.72rem 1.5rem;border-radius:30px;cursor:pointer;border:1px solid transparent;font-weight:500;letter-spacing:.02em;transition:.15s}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.btn--outline{border-color:var(--accent);color:var(--accent)}
.btn--outline:hover{background:var(--accent);color:#fff}

/* ==========================================================================
   Page structure
   ========================================================================== */
.section{padding:3.6rem 0 4rem}
.page-head{margin-bottom:1.8rem}
.page-head__kicker{font-size:.72rem;letter-spacing:.28em;color:var(--accent);margin-bottom:.6rem}
.page-head__title{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:.01em;margin:0}
.page-head__lead{color:var(--ink-2);max-width:62ch;margin-top:.6rem}
.prose{max-width:68ch}
.prose img{border-radius:12px;margin:1.5rem 0}

/* ==========================================================================
   Filters
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.9rem}
.chip{font-size:.78rem;padding:.42rem 1rem;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{color:var(--accent);border-color:var(--accent)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ==========================================================================
   Card grid (dancers, editions, partners, media)
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1.3rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.2s;box-shadow:0 2px 10px rgba(60,80,40,.04)}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,90,30,.13);border-color:#d3ddc0}
.card__media{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--accent-soft)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__init{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--accent);background:linear-gradient(135deg,#eaf1dd,#dbe7c6)}
.badge{position:absolute;top:.7rem;left:.7rem;font-size:.64rem;font-weight:500;letter-spacing:.04em;padding:.24rem .6rem;border-radius:20px;background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(40,60,20,.2)}
.badge--finalist{background:var(--gold)}
.badge--star{background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line)}
.card__body{padding:.8rem .9rem 1rem}
.card__name{font-size:.95rem;font-weight:500;color:var(--ink);font-family:var(--font)}
.card__role{font-size:.75rem;color:var(--ink-3);margin-top:.2rem}

/* ==========================================================================
   Artist modal (replaces Divi Overlays)
   ========================================================================== */
.artist-modal{border:none;padding:0;max-width:640px;width:calc(100% - 2rem);border-radius:18px;background:var(--surface);box-shadow:0 30px 70px rgba(30,50,15,.28);border-top:5px solid var(--accent);overflow:hidden}
.artist-modal[data-result="finalist"]{border-top-color:var(--gold)}
.artist-modal::backdrop{background:rgba(30,45,20,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.artist-modal__close{position:absolute;top:.4rem;right:.4rem;background:none;border:none;color:var(--ink-3);font-size:1.6rem;cursor:pointer;line-height:1;padding:.5rem .8rem}
.artist-modal__close:hover{color:var(--accent)}
.artist-modal__head{display:flex;gap:1.2rem;padding:1.4rem}
.artist-modal__img{width:138px;height:174px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--accent-soft)}
.artist-modal__name{font-size:1.7rem;font-weight:600;line-height:1.1;margin:0}
.artist-modal__role{font-size:.82rem;color:var(--accent);margin:.35rem 0 .15rem;letter-spacing:.02em}
.artist-modal__year{font-size:.74rem;color:var(--ink-3)}
.artist-modal__body{padding:0 1.4rem 1.6rem;color:var(--ink-2);font-size:.95rem}
.artist-modal__body a{text-decoration:underline}

/* ==========================================================================
   Editions
   ========================================================================== */
.edition-hero{background:linear-gradient(180deg,var(--accent-soft),var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem;margin-bottom:2rem;text-align:center}
.edition-hero__kicker{font-size:.72rem;letter-spacing:.28em;color:var(--accent);margin-bottom:.4rem}
.edition-hero__year{font-size:clamp(3.4rem,11vw,5.6rem);font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--accent);margin:0}
.edition-hero__sub{color:var(--ink-2);margin-top:.5rem}
.roster-label{font-size:.78rem;letter-spacing:.2em;color:var(--ink-3);margin:2rem 0 1rem;text-transform:uppercase}

/* Edition landing: year grid */
.edition-card{display:flex;align-items:flex-end;aspect-ratio:4/3;padding:1.1rem;border-radius:var(--radius);color:#fff;background:linear-gradient(180deg,rgba(30,45,20,0) 40%,rgba(20,35,10,.72)),var(--accent-soft);background-size:cover;background-position:center;font-family:var(--serif);font-size:1.8rem;font-weight:600}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:2.6rem 0;margin-top:2rem;background:var(--bg-2)}
.site-footer__row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.socials{list-style:none;display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-2);margin:0;padding:0}
.socials a{color:var(--ink-2)}
.socials a:hover{color:var(--accent)}
.copy{font-size:.78rem;color:var(--ink-3)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:820px){
  .menu-toggle{display:block}
  .primary-menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--surface);border-bottom:1px solid var(--line);padding:1rem;gap:.4rem;box-shadow:0 20px 30px rgba(50,70,30,.1)}
  .primary-menu.is-open{display:flex}
  .primary-menu .sub-menu{position:static;transform:none;display:flex;border:none;padding-left:1rem;background:none;box-shadow:none;min-width:0}
  .primary-menu .menu-editions .sub-menu li{width:auto}
}