@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --sand:    #FFF8EE;
  --coral:   #FF6B6B;
  --sky:     #5BBCDD;
  --seafoam: #4ECDC4;
  --navy:    #3A7FBF;
  --peach:   #FFB347;
  --cream:   #FFF3D4;
  --white:   #FFFFFF;
  --black:   #1a1a1a;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--black);
  background: var(--sand);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ============================================================
   TITAN ONE — large headings only
   ============================================================ */
h1,
.sec-title,
.hero h1,
.flogo {
  font-family: 'Titan One', cursive;
}

/* ============================================================
   PAGE WRAPPER & BACKGROUND
   ============================================================ */


.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-canvas svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.page-wrapper > *:not(.bg-canvas) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  background: #2a6399;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(58,127,191,0.3);
  /* two rows on mobile: logo then links */
  display: flex;
  flex-direction: column;
}

.page-wrapper {
  position: relative;
  min-height: 100vh;
}

/* Logo row */
.nav-logo {
  font-family: 'Titan One', cursive;
  font-size: 1.1rem; color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  padding: .7rem 1.2rem .3rem;
  display: block;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
}

/* Links row — horizontally scrollable with fade hint */
.nav-links-wrap {
  position: relative;
  width: 100%;
}
/* fade on right edge to hint scrollability */
.nav-links-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  background: linear-gradient(to right, transparent, #2a6399);
  pointer-events: none;
  z-index: 2;
}
.nav-links {
  display: flex;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 .6rem .55rem;
  gap: .25rem;
  width: 100%;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links li { flex-shrink: 0; }
.nav-links li a {
  display: block;
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: .78rem; font-weight: 700;
  padding: .38rem .85rem;
  border-radius: 20px;
  transition: background .2s, color .2s;
  letter-spacing: .03em;
}
.nav-links li a:hover,
.nav-links li a.active { background: var(--coral); color: var(--white); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  text-align: center;
  padding: 4rem 1.5rem 4.5rem;
  position: relative;
}
.hero h1 {
  font-size: clamp(3rem, 12vw, 8rem);
  color: var(--coral);
  line-height: 1.0; margin-bottom: 1.2rem;
  text-shadow: 3px 4px 0 rgba(255,107,107,0.12);
}
.date-pill {
  display: inline-block;
  background: var(--navy); color: var(--white);
  font-size: clamp(.85rem, 2.5vw, 1.1rem);
  font-weight: 700; padding: .55rem 2rem;
  border-radius: 50px; letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(58,127,191,0.3);
}
.date-pill-2027 {
  display: inline-block;
  background: var(--seafoam); color: var(--white);
  font-size: clamp(.72rem, 2vw, .85rem);
  font-weight: 700; padding: .4rem 1.4rem;
  border-radius: 50px; letter-spacing: .04em;
  margin-top: .5rem;
  box-shadow: 0 4px 14px rgba(78,205,196,0.3);
}
.hero-sub {
  margin-top: .7rem;
  font-size: clamp(.85rem, 2vw, 1rem);
  color: var(--navy); font-weight: 700; letter-spacing: .04em;
}
.hero-btns {
  margin-top: 1.8rem;
  display: flex; gap: .75rem;
  justify-content: center; flex-wrap: wrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block; padding: .7rem 1.8rem;
  border-radius: 50px; font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  text-decoration: none; letter-spacing: .04em;
  transition: transform .15s, box-shadow .15s;
  border: none; white-space: nowrap;
}
.btn:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
.btn:active { transform: translateY(0); }
.btn-coral   { background: var(--coral);   color: var(--white); }
.btn-navy    { background: var(--navy);    color: var(--white); }
.btn-seafoam { background: var(--seafoam); color: var(--white); }
.btn-peach   { background: var(--peach);   color: var(--white); }
.btn-outline { background: rgba(255,255,255,.7); border: 2.5px solid var(--navy); color: var(--navy); }
.btn-white   { background: var(--white); color: var(--navy); }

/* ============================================================
   SECTION TITLES  — Titan One only here
   ============================================================ */
.sec-title {
  font-family: 'Titan One', cursive;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--navy);
  display: inline-block; line-height: 1.2;
}
.sec-title::after {
  content: ''; display: block;
  height: 4px; width: 60%;
  background: var(--coral);
  border-radius: 3px; margin-top: 6px;
}
.center-title { display: block; text-align: center; }
.center-title::after { margin-left: auto; margin-right: auto; }

.sec-intro {
  color: #3a3a3a; margin-top: .8rem; margin-bottom: 1.8rem;
  font-size: clamp(.88rem, 2vw, .98rem);
  max-width: 700px; line-height: 1.8;
  font-weight: 500; letter-spacing: .02em;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(4px);
  border-radius: 24px; padding: 2rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: 1100px;
  box-shadow: 0 8px 40px rgba(58,127,191,0.08);
}
.panel-coral   { background: rgba(255,107,107,0.1); }
.panel-seafoam { background: rgba(78,205,196,0.12); }
.panel-peach   { background: rgba(255,179,71,0.13); }
.panel-sky     { background: rgba(91,188,221,0.12); }
.panel-cta     { text-align: center; }
.panel-cta .sec-intro { margin: .8rem auto 1.5rem; text-align: center; }
.btn-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.acard {
  background: rgba(255,255,255,0.88);
  border-radius: 18px; padding: 1.4rem 1rem;
  text-align: center;
  box-shadow: 0 4px 18px rgba(58,127,191,0.09);
  border-top: 4px solid var(--seafoam);
  transition: transform .2s, box-shadow .2s;
}
.acard:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(58,127,191,0.14); }
.acard .icon { font-size: 2.2rem; margin-bottom: .5rem; }
/* Poppins bold for small card headings — NOT Titan One */
.acard h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .95rem; color: var(--navy); margin-bottom: .25rem; }
.acard p  { font-size: .82rem; color: #555; line-height: 1.55; font-weight: 500; }

/* ============================================================
   LINEUP TABLE
   ============================================================ */
.ltable {
  width: 100%; border-collapse: collapse;
  margin-top: 1.2rem; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(58,127,191,0.1);
}
.ltable th {
  background: var(--coral); color: var(--white);
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: .85rem; padding: .8rem 1rem; text-align: left;
  letter-spacing: .03em;
}
.ltable td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(58,127,191,0.07);
  color: var(--black); font-size: .88rem;
  font-weight: 500; background: rgba(255,255,255,0.85);
}
.ltable tr:nth-child(even) td { background: rgba(255,255,255,0.6); }
.ltable tr:hover td { background: rgba(78,205,196,0.08); transition: background .2s; }
/* Time column uses Poppins bold — NOT Titan One */
.tcol { color: var(--coral); font-weight: 800; width: 100px; font-size: .88rem; }
.hline td { background: rgba(255,107,107,0.06) !important; }
.sbadge {
  display: inline-block; font-size: .65rem;
  background: var(--seafoam); color: var(--white);
  padding: .1rem .5rem; border-radius: 10px;
  margin-left: .4rem; vertical-align: middle; font-weight: 700;
}
.lph { color: #bbb; font-style: italic; font-size: .85rem; }
.td-stage-gate { color: #aaa; font-size: .8rem; }
.lineup-note { color: #555; font-size: .85rem; font-weight: 500; }

/* ============================================================
   NOTICE BOX
   ============================================================ */
.notice-box {
  background: rgba(255,255,255,0.82);
  border-radius: 14px; padding: 1.4rem;
  margin-top: 1.8rem;
  border-left: 5px solid var(--seafoam);
  box-shadow: 0 3px 12px rgba(58,127,191,0.07);
}
.notice-box.center    { text-align: center; border-left: none; }
.notice-box .notice-icon { font-size: 1.6rem; margin-bottom: .4rem; }
/* Poppins bold for notice headings */
.notice-box h3        { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--navy); font-size: 1.05rem; margin-bottom: .4rem; }
.notice-box h3.large  { font-size: 1.25rem; }
.notice-box p         { color: #555; font-size: .88rem; font-weight: 500; margin-bottom: 1rem; }
.notice-box p.small   { margin-bottom: 0; }
.notice-box a         { color: var(--coral); font-weight: 700; text-decoration: none; }
.notice-box a:hover   { text-decoration: underline; }
/* buttons inside notice-box must always show white text */
.notice-box a.btn,
.notice-box .btn      { color: #ffffff !important; text-decoration: none !important; }
.notice-box a.btn:hover,
.notice-box .btn:hover { text-decoration: none !important; opacity: 0.92; }

/* ============================================================
   SPONSOR TIERS
   ============================================================ */
.tier-card {
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 5px 20px rgba(58,127,191,0.1);
  margin-bottom: 1.2rem;
}
.tier-hd { padding: 1rem 1.4rem; display: flex; align-items: center; gap: .9rem; }
/* Poppins bold for tier names */
.tier-hd h3    { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.1rem; }
.tier-emoji    { font-size: 1.6rem; flex-shrink: 0; }
.tier-sub      { font-size: .8rem; opacity: .85; font-weight: 500; margin-top: .1rem; }
.tier-bd       { background: rgba(255,255,255,0.92); padding: 1rem 1.4rem; }
.tier-bd p     { color: #555; font-size: .88rem; line-height: 1.6; font-style: italic; font-weight: 500; }
.t-plat   .tier-hd { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: white; }
.t-gold   .tier-hd { background: linear-gradient(135deg, #d97706, #fbbf24); color: white; }
.t-silver .tier-hd { background: linear-gradient(135deg, #6b7280, #d1d5db); color: white; }
.t-bronze .tier-hd { background: linear-gradient(135deg, #92400e, #d97706); color: white; }
.t-friend .tier-hd { background: linear-gradient(135deg, var(--seafoam), #0d9488); color: white; }

.spon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem; margin-top: 1.2rem;
}
.sslot {
  background: rgba(255,255,255,0.8);
  border: 2px dashed rgba(58,127,191,0.22);
  border-radius: 12px; height: 75px;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: .75rem; font-style: italic; font-weight: 600;
}
/* Poppins bold for sponsors subhead */
.sponsors-subhead { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--navy); margin-bottom: .4rem; }
.sponsors-note    { color: #888; font-style: italic; font-size: .85rem; margin-bottom: 1rem; font-weight: 500; }

/* ============================================================
   VOLUNTEER
   ============================================================ */
.roles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem; margin-top: 1.2rem;
}
.rcard {
  background: rgba(255,255,255,0.85);
  border-left: 5px solid var(--coral);
  border-radius: 0 14px 14px 0; padding: 1rem 1.2rem;
  box-shadow: 0 4px 14px rgba(58,127,191,0.08);
}
/* Poppins bold for role card headings */
.rcard h4 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .92rem; color: var(--navy); margin-bottom: .2rem; }
.rcard p  { font-size: .82rem; color: #666; font-style: italic; font-weight: 500; }

.vol-cta {
  background: var(--coral); border-radius: 18px;
  padding: 2rem 1.5rem; margin-top: 1.8rem; max-width: 540px;
  text-align: center; box-shadow: 0 8px 28px rgba(255,107,107,0.3);
}
/* Poppins bold for vol-cta heading */
.vol-cta h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--white); margin-bottom: .5rem; }
.vol-cta p  { font-size: .9rem; color: rgba(255,255,255,0.92); line-height: 1.7; margin-bottom: 1.2rem; font-weight: 500; }

.vols-panel {
  background: rgba(58,127,191,0.07);
  border-radius: 22px; padding: 2rem 1.5rem; margin-top: 2rem;
}
.vol-wall { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.vchip {
  background: rgba(255,255,255,0.85);
  border: 2px solid var(--seafoam);
  color: var(--navy); padding: .35rem .9rem;
  border-radius: 20px; font-size: .82rem; font-weight: 600;
}
/* Poppins for volunteer subheadings */
.vol-subhead      { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--navy); margin-bottom: .4rem; }
.vol-subhead-note { color: #888; font-size: .85rem; font-style: italic; font-weight: 500; margin-bottom: 1rem; }
.vol-thanks-note  { color: #888; font-style: italic; font-size: .82rem; margin-top: 1rem; font-weight: 500; }

/* ============================================================
   STALLS
   ============================================================ */
.stalls-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem; margin-top: 1.4rem;
}
.stcard {
  background: rgba(255,255,255,0.85); border-radius: 18px;
  padding: 1.4rem 1rem;
  box-shadow: 0 5px 18px rgba(58,127,191,0.09);
  border-top: 4px solid var(--seafoam);
  text-align: center; transition: transform .2s;
}
.stcard:hover { transform: translateY(-3px); }
.stcard .sticon { font-size: 2.2rem; margin-bottom: .4rem; }
/* Poppins bold for stall card headings */
.stcard h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .9rem; color: var(--navy); margin-bottom: .2rem; }
.stcard p  { font-size: .8rem; color: #666; font-style: italic; font-weight: 500; }
.stcat {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: var(--cream); color: var(--navy);
  padding: .18rem .6rem; border-radius: 10px;
  margin-bottom: .35rem; letter-spacing: .05em;
}
.stcard-drink  { border-top-color: var(--coral) !important; }
.stcat-drink   { background: var(--coral); color: white; }
.stcard-kids   { border-top-color: var(--peach) !important; }
.stcat-kids    { background: var(--peach); color: white; }
/* Poppins bold for category headings */
.cat-heading { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--navy); margin: 2rem 0 1rem; }

/* ============================================================
   INFO
   ============================================================ */
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem; margin-top: 1.5rem;
}
.icard {
  background: rgba(255,255,255,0.85); border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 5px 18px rgba(58,127,191,0.08);
  border-left: 4px solid var(--seafoam);
}
.icard .iicon { font-size: 1.8rem; margin-bottom: .5rem; }
/* Poppins bold for info card headings */
.icard h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .9rem; color: var(--navy); margin-bottom: .4rem; }
.icard p  { font-size: .85rem; color: #444; line-height: 1.7; font-weight: 500; }
.phtext   { color: #ccc; font-style: italic; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-box {
  background: rgba(255,255,255,0.88); border-radius: 22px;
  padding: 2rem 1.5rem; max-width: 680px;
  box-shadow: 0 8px 32px rgba(58,127,191,0.1);
}
/* Poppins bold for contact box heading */
.contact-box > h3 { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--navy); font-size: 1.2rem; margin-bottom: 1.2rem; }
.ci {
  display: flex; align-items: flex-start; gap: .9rem;
  margin-bottom: .9rem; padding: 1rem 1.1rem;
  background: var(--cream); border-radius: 12px;
  border-left: 4px solid var(--seafoam);
}
.ci .cic { font-size: 1.5rem; flex-shrink: 0; }
.ci .cit { font-size: .88rem; color: #333; line-height: 1.6; font-weight: 500; }
/* Poppins bold for contact item labels */
.ci .cit strong { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--navy); display: block; font-size: .9rem; margin-bottom: .15rem; }
.ci .cit a      { color: var(--coral); font-weight: 700; text-decoration: none; }
.ci .cit a:hover { text-decoration: underline; }
.ci .cit .coming { color: #bbb; font-size: .78rem; font-style: italic; margin-top: .15rem; }
.contact-note   { background: var(--cream); border-radius: 10px; padding: 1rem; margin-top: .5rem; border-left: 4px solid var(--seafoam); }
.contact-note p { font-size: .83rem; color: #555; line-height: 1.6; font-weight: 500; margin-bottom: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--navy); color: rgba(255,255,255,0.75);
  text-align: center; padding: 2.5rem 1.5rem;
  font-size: .82rem; letter-spacing: .03em; margin-top: 2rem;
}
.flogo { font-family: 'Titan One', cursive; color: var(--white); font-size: 1.3rem; margin-bottom: .4rem; }
.footer-sub  { margin-top: .35rem; opacity: .8; }
.footer-copy { margin-top: .9rem; font-size: .7rem; opacity: .4; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.sec-wrap { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem; }

/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* Small phones */
@media (max-width: 480px) {
  .hero { padding: 3rem 1rem 3.5rem; }
  .hero h1 { font-size: clamp(2.8rem, 16vw, 4rem); }
  .panel { padding: 1.5rem 1rem; border-radius: 18px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .stalls-grid { grid-template-columns: repeat(2, 1fr); }
  .roles-grid { grid-template-columns: 1fr; }
  .ltable th, .ltable td { padding: .6rem .7rem; font-size: .8rem; }
  .ltable th:last-child,
  .ltable td:last-child { display: none; } /* hide stage col on tiny screens */
  .btn { padding: .65rem 1.4rem; font-size: .85rem; }
  .date-pill { padding: .5rem 1.4rem; }
}

/* Tablets */
@media (max-width: 768px) {
  .sec-wrap { padding: 2rem .75rem; }
  .panel { border-radius: 18px; padding: 1.6rem 1.1rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn { width: 100%; max-width: 280px; text-align: center; }
  .btn-row { flex-direction: column; align-items: center; }
  .btn-row .btn { width: 100%; max-width: 280px; text-align: center; }
  .vol-cta { max-width: 100%; }
  .contact-box { padding: 1.5rem 1rem; }
}

/* Desktop */
@media (min-width: 769px) {
  .panel { padding: 2.5rem 2rem; }
  .sec-wrap { padding: 3rem 2rem; }

  /* Single row on desktop */
  nav {
    flex-direction: row;
    align-items: center;
    padding: 0 1.5rem;
    height: 60px;
  }
  .nav-logo {
    padding: 0 1rem 0 0;
    flex-shrink: 0;
  }
  .nav-links-wrap { width: auto; flex: 1; }
  .nav-links-wrap::after { display: none; } /* no fade needed on desktop */
  .nav-links {
    padding: 0;
    overflow-x: visible;
    flex-wrap: wrap;
    gap: .1rem;
  }
  .nav-links li { flex-shrink: initial; }
}