/* ============================================
   Maccheroni Comedy – Clean Theme (static hero)
   ============================================
   0) CSS Vars
   1) Base
   2) Loader
   3) Navbar & Social (sticky + shrink)
   4) Intro Text Utilities
   5) Home Hero (static image + CTAs)
   6) Performers (split)
   7) Events
   8) Formats
   9) Newsletter / Forms
   10) Gallery / Lightbox
   11) Home Intro (text below hero)
   12) Collaboration (partners)
   13) Events Page (Linktree style)
   ============================================ */


/* ---------- 0) CSS Vars ---------- */
:root{
  --white:#fff;
  --cream:#F8F4E9;
  --cream-50:rgba(248,244,233,.5);
  --red:#CA3433;
  --forest:#2F6620;
  --sage:#B5C1A6;
  --black:#000;
}


/* ---------- 1) Base ---------- */
html,body{overflow-x:hidden;width:100vw;}
body{
  margin:0; padding:0; min-height:100vh;
  opacity:0; animation:fadeIn 1s forwards;
  font-family:'Roboto',sans-serif;

  /* cream bg with green wave */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800" preserveAspectRatio="none"><rect width="100%" height="100%" fill="%23F8F4E9"/><path d="M0,400 C300,350 400,500 800,450 C1200,400 1300,450 1440,420 L1440,800 L0,800 Z" fill="%23B5C1A6"/></svg>');
  background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;
}
@keyframes fadeIn{to{opacity:1}}

.container{background:transparent;}
.title,.subtitle,h1,h2,h3,h4,h5,h6{color:var(--forest)}
h1,h2,h3,h4,h5,h6,.intro-text{font-family:"Dela Gothic One","Quicksand",sans-serif}

/* Decorative assets */
.tomato-design{position:absolute;top:100px;right:20px;width:150px;height:150px;z-index:0;pointer-events:none}
.rucola-design{position:fixed;top:1px;left:-20px;width:150px;height:150px;z-index:0;pointer-events:none;transform:scaleX(-1)}
@media(max-width:768px){.tomato-design{display:none}}


/* ---------- 2) Loader ---------- */
#loader-screen{position:fixed;inset:0;background:var(--white);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .5s}
#loader-image{filter:grayscale(100%);width:100px;height:auto;transition:filter 1s}
#loader-screen.active #loader-image{filter:grayscale(0%)}


/* ================================
   3) NAVBAR & SOCIAL
   ================================ */

/* Shell / palette */
.navbar,.footer { background: var(--cream); }
.navbar-menu { background: var(--cream); }

/* Sticky + shrink */
#mainNav{
  position:fixed; top:0; left:0; right:0; z-index:1002; width:100%;
  background:var(--cream);
  transition:box-shadow .25s ease, background-color .25s ease, padding .25s ease;
}
#mainNav .navbar-item,#mainNav .navbar-link{
  padding-top:.9rem; padding-bottom:.9rem; transition:padding .25s ease;
}
#mainNav .brand-logo{
  height:72px; transform-origin:left center;
  transition:transform .25s ease, height .25s ease, filter .25s ease;
}
#mainNav.navbar--shrunk{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
#mainNav.navbar--shrunk .navbar-item,#mainNav.navbar--shrunk .navbar-link{
  padding-top:.55rem; padding-bottom:.55rem;
}
#mainNav.navbar--shrunk .brand-logo{ height:44px; transform:translateY(-1px); }
body:not(.scrolled) #mainNav{ box-shadow:none; }

/* Items */
.navbar .navbar-item,.navbar .navbar-link{ color:#184b1a; font-weight:600; }
.navbar .navbar-item:hover,.navbar .navbar-link:hover{ color:#184b1a; background:rgba(49,91,34,.08); }
.navbar .navbar-link.is-active,.navbar .navbar-item.is-active{ background:transparent; color:#184b1a; }

/* Custom caret */
.navbar-link::after{content:none!important}
.navbar-item.has-dropdown>.navbar-link{position:relative;padding-right:1.75rem}
.navbar-item.has-dropdown>.navbar-link::after{
  content:""; position:absolute; right:.85rem; top:50%;
  width:8px;height:8px;border-right:2px solid #184b1a;border-bottom:2px solid #184b1a;
  transform:translateY(-55%) rotate(45deg); opacity:.9;
}
.navbar-item.has-dropdown.is-active>.navbar-link::after{transform:translateY(-40%) rotate(-135deg)}
.navbar .navbar-dropdown{
  background:#fff; padding:.4rem; border:1px solid #ece7dc; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12); min-width:220px; z-index:30; margin-top:0;
}
.navbar .navbar-dropdown .navbar-item{white-space:nowrap;border-radius:8px;padding:.55rem .9rem;color:#184b1a}
.navbar .navbar-dropdown .navbar-item:hover{background:rgba(49,91,34,.08);color:#184b1a}

/* Burger */
.navbar-burger{font-size:2rem;color:#184b1a}
.navbar-burger span{background-color:#184b1a}
.navbar-burger:hover{opacity:.8}
@media(max-width:1023px){
  .navbar .navbar-dropdown{display:none;box-shadow:none;border:none;border-radius:0;min-width:0;margin:0;padding:.25rem 0 .5rem;background:#fff}
  .navbar-item.has-dropdown.is-active>.navbar-dropdown{display:block}
}

/* Socials */
.navbar-social{width:150px}
.navbar-social img{max-height:60px;height:auto;width:auto;margin-top:15px}
.social-icon{width:32px;height:32px!important;border-radius:50%;background:transparent;margin-left:10px;display:inline-block;filter:grayscale(100%);transition:transform .2s,filter .2s}
.social-icon:hover{transform:scale(1.1);filter:grayscale(0)}
.navbar-item img{max-height:70px;height:auto;width:auto}

/* Center brand on mobile; burger on right; bigger initial logo */
@media(max-width:1023px){
  #mainNav .navbar-brand{flex:1 1 100%;justify-content:center;position:relative}
  #mainNav .navbar-brand .navbar-burger{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);margin-left:0}
  #mainNav .navbar-brand .brand-logo{height:120px;max-height:none!important}
}
@media(min-width:1024px){
  #mainNav .navbar-brand{justify-content:flex-start}
}


/* ---------- 4) Intro Text Utilities ---------- */
.intro-text{font-size:3rem;font-weight:bold;line-height:1.2;text-align:left}
.intro-text-small{font-size:2rem;line-height:1.2;text-align:left}
@media(max-width:768px){.intro-text{font-size:2.5rem}.intro-text-small{font-size:1.5rem}}
@media(max-width:480px){.intro-text{font-size:1.8rem}.intro-text-small{font-size:1.2rem}}
.highlight{background:var(--red);color:#fff;display:inline-block}


/* ================================
   5) Home Hero (static image + CTAs)
   ================================ */

.home-section{
  padding-top:6rem; /* space under navbar */
  padding-bottom:3rem;
}


/* Full-width hero image (bleeds out of container) */
.home-hero-media{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.home-hero-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain; /* show full photo */
}

/* CTA group below hero */
.home-hero-ctas{
  margin-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

.home-hero-ctas p{
display: none;
}




/* Reuse CTA styling from previous slider */
.intro-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-width:160px;
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  font-family:"Quicksand",sans-serif;
}

/* Primary (red) */
.intro-cta--primary{
  background:var(--red);
  color:#fff;
}
.intro-cta--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.16);
}

/* Secondary (forest) */
.intro-cta--secondary{
  background:var(--forest);
  color:#fff;
}
.intro-cta--secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.16);
}

/* Ghost */
.intro-cta--ghost{
  background:transparent;
  color:var(--forest);
  border:2px solid var(--forest);
}
.intro-cta--ghost:hover{
  background:rgba(47,102,32,.08);
}

/* Smaller screens: tighten spacing */
@media(max-width:768px){
  .home-section{
    padding-top:5rem;
    padding-bottom:2.5rem;
  }
  .home-hero-ctas{
    margin-top:1.25rem;
  }
  .intro-cta{
    min-width:140px;
    font-size:.9rem;
  }
}


/* =========================
   6) Performers — Split Card
   ========================= */
.performers-grid{display:grid;gap:2rem}
@media(min-width:1024px){.performers-grid{grid-template-columns:1fr 1fr}}

.performer-card--split{
  display:grid; grid-template-columns:1.15fr 1fr;
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
@media(max-width:768px){.performer-card--split{grid-template-columns:1fr}}

.performer-split__left{position:relative;min-height:320px;background:#000}
.performer-split__left img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%); transition:filter .35s ease, transform .35s ease;
}
@media(hover:hover) and (pointer:fine){
  .performer-card--split:hover .performer-split__left img{ filter:grayscale(0%) }
}
@media(hover:none),(pointer:coarse){
  .performer-card--split.is-inview .performer-split__left img{ filter:grayscale(0%) }
}
@media(prefers-reduced-motion:reduce){ .performer-split__left img{transition:none} }
.performer-card--split:hover .performer-split__left img{ transform:scale(1.02) }

.performer-name-overlay{
  position:absolute; left:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  font-family:"Dela Gothic One","Quicksand",sans-serif; font-size:clamp(22px,3.2vw,44px);
  line-height:1; color:var(--red); text-shadow:0 2px 10px rgba(0,0,0,.35); pointer-events:none;
}

.performer-split__right{ padding:clamp(18px,3.2vw,44px); display:grid; align-content:start; gap:clamp(10px,1.6vw,18px) }
.performer-quote{ font-weight:800; font-size:clamp(18px,2.2vw,28px); line-height:1.25; color:#111; margin:0 0 .5rem }
.performer-bio{ color:#666; font-size:clamp(14px,1.4vw,18px) }

.performer-socials{display:flex;gap:14px;margin-top:.25rem}
.performer-socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;transition:transform .2s ease, background .2s ease}
.performer-socials a:hover{transform:translateY(-2px);background:rgba(0,0,0,.04)}
.performer-socials img{width:22px;height:22px;object-fit:contain}


/* =========================
   7) Events
   ========================= */
.event-item{
  display:flex; align-items:flex-start; gap:clamp(16px,3vw,28px);
  background:var(--cream); border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.05);
  padding:clamp(16px,2.2vw,24px); margin-bottom:clamp(18px,3vw,28px);
}
.event-image{flex:0 0 40%}
.event-image img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.details-container{flex:1 1 60%}
.event-head{display:flex;align-items:center;gap:14px;margin-bottom:1rem}

.event-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:.45rem .75rem;border:2px solid var(--red);border-radius:10px;color:var(--red);
  font-weight:700;line-height:1;min-width:86px;text-align:center;
}
.event-date__day{font-size:.95rem;letter-spacing:.5px}
.event-date__time{font-size:.9rem}

.event-name{margin:0;font-weight:700;color:var(--forest)}
.event-cta{margin-left:auto;background:var(--red)!important;color:#fff!important;font-weight:600;border:none!important;border-radius:6px;padding:.55rem 1.2rem;transition:background-color .2s ease, transform .2s ease}
.event-cta:hover{background:#a52b2a!important;color:#fff!important;transform:translateY(-2px)}

.event-location{margin:.25rem 0 1rem}
.details-container .content{color:var(--black)}

@media(max-width:768px){
  .event-item{flex-direction:column}
  .event-image{width:100%}
}


/* =======================
   8) Formats – horizontal cards
   ======================= */
#formats .formats-list{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
#formats .format-card{
  display:flex;gap:clamp(16px,2vw,24px);background:var(--cream);border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,.06);
  overflow:hidden;align-items:stretch;
}
#formats .format-image{flex:0 0 32%;max-width:32%;background:#eee}
#formats .format-image figure,#formats .format-image img{display:block;width:100%;height:100%;object-fit:cover}
#formats .format-body{flex:1 1 auto;padding:clamp(16px,2.2vw,28px);display:flex;flex-direction:column}
#formats .format-title{margin:0 0 .25rem;color:var(--forest);font-family:"Dela Gothic One","Quicksand",sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,32px);line-height:1.1}
#formats a.format-cta{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
#formats a.format-cta.format-cta--primary{background:var(--red)!important;color:#fff!important;border:none!important}
#formats a.format-cta.format-cta--primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.16)}
#formats a.format-cta.format-cta--ghost{background:transparent!important;color:var(--forest)!important;border:2px solid var(--forest)!important;box-shadow:none!important}
#formats a.format-cta.format-cta--ghost:hover{background:rgba(47,102,32,.08)!important}
@media(max-width:768px){
  #formats .format-card{flex-direction:column}
  #formats .format-image{flex:0 0 auto;max-width:100%;height:220px}
}
#formats .format-desc{font-family:'Roboto',sans-serif;color:var(--black);font-size:clamp(16px,1.1vw,18px);line-height:1.5}
#formats .format-desc p{margin:0 0 .65rem}
#formats .format-actions{margin-top:auto;display:flex;gap:10px}


/* =======================
   9) Newsletter / Forms
   ======================= */
#mc_embed_signup{width:70%;margin:0 auto}


/* =======================
   10) Gallery / Lightbox
   ======================= */
#gallery-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.album-section{flex:1 1 calc(30% - 20px);min-width:300px;max-width:350px;margin-bottom:2rem;box-sizing:border-box}
.album-section img{width:100%;height:auto;object-fit:cover}
@media(max-width:1024px){.album-section{flex:1 1 calc(45% - 20px)}}
@media(max-width:768px){.album-section{flex:1 1 100%}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem;flex-direction:column}
.lightbox-content{position:relative;max-width:90%;max-height:90%;text-align:center}
.lightbox img{max-height:70vh;max-width:100%;margin:0 auto}
.lightbox-close{position:absolute;top:-2rem;right:-2rem;font-size:2.5rem;color:#fff;background:none;border:none;cursor:pointer}
.lightbox-nav{margin-top:1rem}
.lightbox-arrow{background:none;border:none;font-size:2rem;color:#fff;cursor:pointer;margin:0 1rem}
#lightbox-image{transition:opacity .4s ease;opacity:1}
.spinner{border:4px solid rgba(255,255,255,.3);border-top:4px solid #fff;border-radius:50%;width:40px;height:40px;animation:spin .8s linear infinite;margin:1rem auto}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.is-hidden{display:none!important}


/* =======================
   11) Home Intro (text below hero)
   ======================= */
#home-intro{margin-top:clamp(8px,2.5vh,28px)}
.home-intro{max-width:1100px;margin:0 auto;padding:0 clamp(12px,3vw,24px)}
.intro-text--below{
  color:#2f5e2a;margin:0 auto clamp(16px,3vh,28px);
  font-size:clamp(20px,3.3vw,40px); line-height:1.12; font-weight:700; overflow-wrap:anywhere;
}
@supports (text-wrap: balance){ .intro-text--below{ text-wrap:balance; } }
@media(max-width:768px){ #home-intro{margin-top:clamp(6px,1.8vh,18px)} }


/* =======================
   12) Collaboration (partners)
   ======================= */
#collaboration .title{color:var(--forest);margin-bottom:1.25rem}
.collab-logos{display:flex;justify-content:center;align-items:center;gap:clamp(16px,4vw,36px);flex-wrap:wrap;margin-top:.5rem}
.collab-logo{
  width:clamp(500px,14vw,140px);
  border-radius:1%;
  display:block;
  object-fit:cover;
  transition:transform .2s ease, filter .2s ease;
  filter:grayscale(20%);
  max-width:150px;
}
.collab-logo:hover{transform:translateY(-2px);filter:grayscale(0%)}
@media(max-width:768px){ .collab-logos{flex-direction:column;gap:18px} }


/* ================================
   13) Events Page – Linktree style
   ================================ */
#events-hero{text-align:center;margin:0 auto;padding:clamp(12px,3vw,24px) 0}
#events-hero .events-title{
  font-family:"Dela Gothic One","Quicksand",sans-serif;color:var(--forest);
  font-size:clamp(22px,5.2vw,34px);line-height:1.1;margin:0 0 .4rem;
}
#events-hero .events-subtitle{color:#35423a;opacity:.9;font-size:clamp(14px,3.6vw,18px)}

.events-linktree{padding:2rem 1rem;display:flex;justify-content:center}
.linktree-list{width:100%;max-width:700px;display:flex;flex-direction:column;gap:1rem}
.linktree-item{
  display:flex;align-items:center;gap:1rem;background:#fff;border-radius:12px;padding:1rem;
  text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .2s ease, box-shadow .2s ease;
}
.linktree-item:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.linktree-thumb img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.linktree-text{flex:1;display:flex;flex-direction:column;color:var(--black);font-size:.95rem;line-height:1.3}
.linktree-text .event-name{font-weight:600;color:var(--forest);margin-bottom:.25rem}
.linktree-text .event-meta{font-size:.85rem;color:#555}
.linktree-arrow{font-size:1.5rem;color:#999}

#home.section {
  padding-top: 0;
}

/* container for image plus overlay */
.home-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  height: 300px;

}

/* full width image, keeps ratio, never cropped by object-fit */
.home-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* dark overlay layer */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

/* text and buttons on top */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 20px;

}

.hero-title {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(28px, 4vw, 60px);
  margin-bottom: 20px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.hero-btn {
  background: #CA3433;
  color: #fff;
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}


/* Home hero text block */

.home-section {
  padding-top: clamp(2rem, 6vh, 4rem);
}

.home-hero-text {
  padding: clamp(2rem, 8vh, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 1;
}

.hero-heading {
  font-family: "Dela Gothic One", "Quicksand", sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.05;
  color: var(--forest);
  margin: 0 0 1rem;
}

.hero-highlight {
  padding: 0.1em 0.15em;
}

.hero-subheading {
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.50rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--forest);
  max-width: 58rem;
  margin: 0;
}

/* Underlined CTA words */

.hero-cta-link {
  position: relative;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
  white-space: nowrap;
}

.hero-cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 0.12em;
  background: var(--red);
  pointer-events: none;
}

.hero-cta-link:hover {
  color: #184b1a;
}