@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

/* ── Theme custom properties ──────────────────────────────────────────────── */
:root,
[data-theme="desert"] {
  --bg:           #1c1205;
  --bg2:          #271a08;
  --nav-bg:       rgba(24,14,4,0.95);
  --nav-bg-mobile:rgba(24,14,4,0.99);
  --nav-text:     #f5e6c8;
  --text:         #f5e6c8;
  --muted:        #b89a6a;
  --border:       rgba(180,140,80,.18);
  --input-bg:     #14090014;
  --footer-bg:    #14090014;
  --accent:       #f4c542;
  --accent-hover: #ffd967;
  --accent-dark:  #c8960e;
  --link:         #d4a843;
  --card-bg:      #271a08;
  --secondary-border: rgba(245,230,200,.35);
  --secondary-text:   #f5e6c8;
  --success-bg:   rgba(49,162,76,.16);
  --success-border: rgba(49,162,76,.35);
  --error-bg:     rgba(180,56,56,.16);
  --error-border: rgba(180,56,56,.35);
  --input-bg-solid: #14090014;
  --shadow:       rgba(0,0,0,.55);
}

[data-theme="light"] {
  --bg:           #f0e8d8;
  --bg2:          #e4d9c4;
  --nav-bg:       rgba(235,225,205,0.97);
  --nav-bg-mobile:rgba(235,225,205,0.99);
  --nav-text:     #1a1008;
  --text:         #1a1008;
  --muted:        #6b5a3e;
  --border:       rgba(0,0,0,.12);
  --input-bg:     #fff;
  --footer-bg:    #ddd4c0;
  --accent:       #c8960e;
  --accent-hover: #b07a08;
  --accent-dark:  #8a5e06;
  --link:         #8a5e06;
  --card-bg:      #fff;
  --secondary-border: rgba(26,16,8,.3);
  --secondary-text:   #1a1008;
  --success-bg:   rgba(49,162,76,.12);
  --success-border: rgba(49,162,76,.4);
  --error-bg:     rgba(180,56,56,.1);
  --error-border: rgba(180,56,56,.4);
  --input-bg-solid: #fff;
  --shadow:       rgba(0,0,0,.18);
}

[data-theme="dark"] {
  --bg:           #0c0c10;
  --bg2:          #14141a;
  --nav-bg:       rgba(12,12,16,0.92);
  --nav-bg-mobile:rgba(12,12,16,0.98);
  --nav-text:     #ffffff;
  --text:         #ffffff;
  --muted:        #aaaaaa;
  --border:       rgba(255,255,255,.08);
  --input-bg:     #0f0f13;
  --footer-bg:    #111111;
  --accent:       #f4c542;
  --accent-hover: #ffd967;
  --accent-dark:  #c8960e;
  --link:         #6bcb77;
  --card-bg:      #14141a;
  --secondary-border: rgba(255,255,255,.4);
  --secondary-text:   #ffffff;
  --success-bg:   rgba(49,162,76,.16);
  --success-border: rgba(49,162,76,.35);
  --error-bg:     rgba(180,56,56,.16);
  --error-border: rgba(180,56,56,.35);
  --input-bg-solid: #0f0f13;
  --shadow:       rgba(0,0,0,.5);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body{
  margin:0;
  font-family:'Inter', Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  transition:background .25s, color .25s;
}
h1,h2{
  font-family:'Bebas Neue', Impact, Arial Narrow, sans-serif;
  letter-spacing:.04em;
}

/* ── Floating nav ─────────────────────────────────────────────────────────── */
.floating-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px;
  background:var(--nav-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px var(--shadow);
}
.floating-nav .fn-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.floating-nav .fn-logo img{
  height:36px;
  width:36px;
  object-fit:contain;
  border-radius:6px;
}
.fn-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.floating-nav .fn-links{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.fn-toggle{
  display:none;
  background:var(--accent);
  color:#000;
  border:none;
  border-radius:6px;
  padding:6px 12px;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  line-height:1;
}
.floating-nav .fn-links a{
  color:var(--nav-text);
  text-decoration:none;
  font-size:13px;
  padding:5px 10px;
  border-radius:6px;
  border:1px solid var(--border);
  transition:background .2s, border-color .2s;
}
.floating-nav .fn-links a:visited{
  color:var(--nav-text);
}
.floating-nav .fn-links a:hover{
  background:rgba(128,128,128,.15);
  border-color:var(--muted);
}
.floating-nav .fn-links a.active{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
}
.floating-nav .fn-links a.active:visited{
  color:#000;
}
body.has-floating-nav{
  padding-top:56px;
}

/* ── Theme swatch picker (shared with surveys & gallery) ──────────────────── */
.fn-themes{
  display:flex;
  align-items:center;
  gap:6px;
}
.theme-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  transition:transform .15s, border-color .15s;
  flex-shrink:0;
}
.theme-swatch:hover{ transform:scale(1.2); }
.theme-swatch.active{ border-color:var(--text); transform:scale(1.1); }
.swatch-desert{ background:linear-gradient(135deg,#c4941a 50%,#b85c1a 50%); }
.swatch-light { background:linear-gradient(135deg,#f0e8d8 50%,#c8960e 50%); }
.swatch-dark  { background:linear-gradient(135deg,#1a1a24 50%,#444 50%); }

/* ── Global ───────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
img{ max-width:100%; }

.container{
  max-width:1100px;
  margin:auto;
  padding:30px 20px;
}

.llk-logo{
  max-width:450px;
  width:90%;
  margin-top:20px;
}

.presents{
  font-size:28px;
  margin-top:10px;
  margin-bottom:20px;
  color:var(--muted);
}

.hero-image{
  width:100%;
  max-width:700px;
  border-radius:10px;
  box-shadow:0 25px 60px var(--shadow);
}

.buttons{
  margin-top:35px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.button{
  padding:16px 30px;
  border-radius:8px;
  font-size:18px;
  font-weight:bold;
  text-decoration:none;
  transition:.2s;
}

.primary{
  background:var(--accent);
  color:#000;
}
.primary:hover{ background:var(--accent-hover); }

.secondary{
  border:2px solid var(--secondary-border);
  color:var(--secondary-text);
}
.secondary:hover{ background:rgba(128,128,128,.12); }

.section{
  margin-top:60px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.section.center{ text-align:center; }
.section.left{ text-align:left; }
.section h1{ font-size:42px; margin-bottom:15px; }
.section h2{ font-size:32px; margin-bottom:15px; }
.section p{ color:var(--muted); font-size:18px; line-height:1.7; }

.info-grid,
.stats,
.contact-cards,
.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  margin-top:30px;
}

.info-card,
.stat-card,
.contact-card,
.sponsor-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  text-align:left;
}

.info-card h3,
.stat-card h3,
.contact-card h3,
.sponsor-card h3{
  margin-top:0;
  margin-bottom:10px;
  color:var(--accent);
}

.stat-card h3{
  font-size:32px;
  margin-bottom:8px;
}

.info-card p,
.stat-card p,
.contact-card p,
.sponsor-card p{
  margin:0;
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
}

.schedule{
  margin-top:25px;
  display:grid;
  gap:18px;
}

.schedule-item{
  background:var(--card-bg);
  border-left:4px solid var(--accent);
  padding:20px;
  border-radius:10px;
  text-align:left;
}
.schedule-item h3{ margin:0 0 10px 0; font-size:22px; }
.schedule-item p{ margin:0; font-size:17px; color:var(--muted); }

.tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  margin-top:25px;
}

.tier{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  text-align:left;
}
.tier h3{ margin-top:0; color:var(--accent); font-size:24px; }
.tier ul{ color:var(--muted); line-height:1.7; padding-left:20px; margin-bottom:0; }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin-top:35px;
}

.gallery-item{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 25px var(--shadow);
}
.gallery-item a{ display:block; text-decoration:none; color:inherit; }
.gallery-item img{ width:100%; height:240px; object-fit:cover; display:block; }
.gallery-caption{ padding:14px; color:var(--muted); font-size:15px; }

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:92vw;
  max-height:90vh;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute;
  top:18px; right:20px;
  background:var(--accent);
  color:#000;
  border:none;
  border-radius:999px;
  width:42px; height:42px;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
}

.contact-wrap{
  max-width:1000px;
  margin:60px auto 0;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:24px;
  align-items:start;
}

.form-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px;
  text-align:left;
  box-shadow:0 14px 35px var(--shadow);
}
.form-card h2{ margin-top:0; margin-bottom:14px; font-size:28px; }

.form-help,
.success-message,
.error-message,
.form-note{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.contact-form{ display:grid; gap:16px; margin-top:10px; }

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group label{ font-size:15px; font-weight:bold; color:var(--text); }

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:var(--input-bg-solid);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:14px;
  font-size:16px;
  font-family:Arial, Helvetica, sans-serif;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(244,197,66,.18);
}
.form-group select option{ background:var(--bg2); color:var(--text); }
.form-group textarea{ min-height:180px; resize:vertical; }

.form-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
}

.submit-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:16px 28px;
  border-radius:8px;
  font-size:18px;
  font-weight:bold;
  background:var(--accent);
  color:#000;
  transition:.2s;
}
.submit-btn:hover{ background:var(--accent-hover); }

.reset-btn{
  display:inline-block;
  padding:14px 24px;
  border-radius:8px;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  border:2px solid var(--secondary-border);
  color:var(--secondary-text);
  background:transparent;
  cursor:pointer;
  transition:.2s;
}
.reset-btn:hover{ background:rgba(128,128,128,.12); }

.success-message,
.error-message{
  display:none;
  border-radius:10px;
  padding:14px 16px;
  margin-top:8px;
}
.success-message{ background:var(--success-bg); border:1px solid var(--success-border); }
.error-message  { background:var(--error-bg);   border:1px solid var(--error-border); }

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.footer{
  margin-top:80px;
  padding:30px;
  background:var(--footer-bg);
  color:var(--muted);
  font-size:14px;
}
.footer a{ color:var(--text); text-decoration:none; }

a{ color:var(--link); }
a:visited{ color:var(--link); }
.button,
.button:visited,
.gallery-item a,
.gallery-item a:visited,
.footer a,
.footer a:visited{
  color:inherit;
}

/* ── Back-to-top ──────────────────────────────────────────────────────────── */
#back-to-top{
  position:fixed;
  bottom:28px; right:24px;
  z-index:900;
  background:var(--accent);
  color:#000;
  border:none;
  border-radius:50%;
  width:44px; height:44px;
  font-size:22px;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
#back-to-top.visible{ opacity:1; pointer-events:auto; }
#back-to-top:hover{ background:var(--accent-hover); }

/* ── Character counter ────────────────────────────────────────────────────── */
.char-counter{ font-size:13px; color:var(--muted); text-align:right; margin-top:4px; }
.char-counter.warn{ color:var(--accent); }
.char-counter.over{ color:#e05252; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .contact-wrap,
  .form-row{
    grid-template-columns:1fr;
  }
  .section h1{ font-size:34px; }
  .section h2{ font-size:28px; }

  .fn-toggle{ display:block; }

  .floating-nav .fn-links{
    display:none;
    position:absolute;
    top:52px;
    left:0; right:0;
    flex-direction:column;
    background:var(--nav-bg-mobile);
    padding:12px 20px 16px;
    border-bottom:1px solid var(--border);
    gap:8px;
    flex-wrap:nowrap;
  }
  .floating-nav .fn-links.open{ display:flex; }
  .floating-nav .fn-links a{ width:100%; text-align:center; }
}