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

/* ── Theme custom properties ──────────────────────────────────────────────── */

/* Option A — Dark Desert (rich dark warm-brown, fire at night) */
: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:     rgba(20,9,0,.08);
  --footer-bg:    rgba(20,9,0,.08);
  --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: #2e1e0a;
  --shadow:       rgba(0,0,0,.55);
}

/* Option B — Sandy Desert (warm tan/sand, golden hour) */
[data-theme="light"] {
  --bg:           #f2e8d4;
  --bg2:          #e8dcc4;
  --nav-bg:       rgba(242,232,212,.96);
  --nav-bg-mobile:rgba(242,232,212,.99);
  --nav-text:     #2a1806;
  --text:         #2a1806;
  --muted:        #7a5c35;
  --border:       rgba(140,95,35,.18);
  --input-bg:     #fffaf2;
  --footer-bg:    #e0d2b8;
  --accent:       #c87a0a;
  --accent-hover: #e08c10;
  --accent-dark:  #9a5e06;
  --link:         #a06008;
  --card-bg:      #fdf6ec;
  --secondary-border: rgba(42,24,6,.30);
  --secondary-text:   #2a1806;
  --success-bg:   rgba(60,130,60,.10);
  --success-border: rgba(60,130,60,.35);
  --error-bg:     rgba(180,56,56,.10);
  --error-border: rgba(180,56,56,.35);
  --input-bg-solid: #fffaf2;
  --shadow:       rgba(80,40,8,.18);
}

/* Option C — Desert Dusk (warm dark midtone, long afternoon shadows) */
[data-theme="dark"] {
  --bg:           #2e1c08;
  --bg2:          #3d2610;
  --nav-bg:       rgba(36,18,4,.95);
  --nav-bg-mobile:rgba(36,18,4,.99);
  --nav-text:     #f0ddb0;
  --text:         #f0ddb0;
  --muted:        #c49a60;
  --border:       rgba(200,160,80,.18);
  --input-bg:     rgba(60,38,16,.40);
  --footer-bg:    rgba(20,10,2,.30);
  --accent:       #f4c542;
  --accent-hover: #ffd967;
  --accent-dark:  #c8960e;
  --link:         #e0a830;
  --card-bg:      #3d2610;
  --secondary-border: rgba(240,220,176,.35);
  --secondary-text:   #f0ddb0;
  --success-bg:   rgba(60,150,60,.16);
  --success-border: rgba(60,150,60,.35);
  --error-bg:     rgba(180,56,56,.16);
  --error-border: rgba(180,56,56,.35);
  --input-bg-solid: #3a220a;
  --shadow:       rgba(0,0,0,.55);
}

/* ── 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-logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:#0c0c10;
  color:#f4c542;
  font-family:'Bebas Neue',sans-serif;
  font-size:19px;
  font-weight:900;
  border-radius:6px;
  letter-spacing:.04em;
  line-height:1;
  flex-shrink:0;
  border:1px solid rgba(244,197,66,.25);
}
.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,#1c1205 50%,#f4c542 50%); } /* Dark Desert */
.swatch-light { background:linear-gradient(135deg,#f2e8d4 50%,#c87a0a 50%); } /* Sandy Desert */
.swatch-dark  { background:linear-gradient(135deg,#2e1c08 50%,#f4c542 50%); } /* Desert Dusk */

/* ── Avatar / user dropdown ───────────────────────────────────────────────── */
.fn-avatar-wrap{
  position:relative;
}
.fn-avatar-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid rgba(244,197,66,.35);
  background:rgba(244,197,66,.12);
  cursor:pointer;
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s;
  flex-shrink:0;
}
.fn-avatar-btn:hover{ border-color:#f4c542; background:rgba(244,197,66,.22); }
.fn-avatar-btn img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.fn-avatar-initials{
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;
  color:#f4c542;
  line-height:1;
  user-select:none;
  pointer-events:none;
}
.fn-user-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:172px;
  background:var(--nav-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 0 8px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  z-index:1100;
}
.fn-user-menu.open{ display:block; }
.fn-user-name{
  padding:9px 16px 10px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  border-bottom:1px solid var(--border);
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fn-user-menu a{
  display:block;
  padding:8px 16px;
  font-size:13px;
  color:var(--nav-text);
  text-decoration:none;
  transition:background .15s, color .15s;
}
.fn-user-menu a:hover{ background:rgba(128,128,128,.12); color:var(--text); }
.fn-user-menu .fn-um-logout{
  color:var(--muted);
  border-top:1px solid var(--border);
  margin-top:5px;
  padding-top:10px;
}
.fn-user-menu .fn-um-logout:hover{ color:var(--text); }
/* Hide text auth links from desktop nav (avatar handles it) */
.floating-nav .fn-links .fn-auth-text{ display:none; }
@media(max-width:860px){
  /* On mobile show text links in hamburger, hide avatar */
  .fn-avatar-wrap{ display:none; }
  .floating-nav .fn-links .fn-auth-text{ display:flex; }
}

/* ── 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; }

/* ── Site footer (public 2027 pages) ─────────────────────────────────────── */
.site-footer{
  margin-top:64px;
  padding:32px 0 48px;
  border-top:1px solid var(--border);
  text-align:center;
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}
.site-footer p{ margin:0 0 4px; }
.site-footer a{ color:var(--muted); text-decoration:none; }
.site-footer a:hover{ color:var(--accent); }

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; }

/* ── Page Hero (inner pages — photo + gradient overlay) ───────────────── */
.page-hero{
  position:relative;
  min-height:max(340px,40vh);
  display:flex;
  align-items:flex-end;
  padding:0 20px 44px;
  background-size:cover;
  background-position:center 30%;
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.82) 100%);
}
.page-hero-content{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  width:100%;
  text-align:center;
}
.page-hero h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(42px,9vw,76px);
  line-height:1;
  margin:0 0 10px;
  color:#fff;
  letter-spacing:.02em;
}
.page-hero .page-hero-sub{
  color:rgba(255,255,255,.72);
  font-size:16px;
  margin:0;
}
/* ── Gradient Hero (utility pages — CSS gradient, no photo) ─────────── */
.gradient-hero{
  background:linear-gradient(160deg,rgba(244,197,66,.13) 0%,rgba(0,0,0,0) 60%);
  padding:52px 20px 40px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.gradient-hero h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(38px,8vw,68px);
  line-height:1;
  margin:0 0 10px;
  color:var(--text);
  letter-spacing:.02em;
}
.gradient-hero .gradient-hero-sub{
  color:var(--muted);
  font-size:16px;
  margin:0;
}

/* ── CTA buttons (standalone — used in register.php, register-confirm.php) ── */
.cta-btn{
  display:inline-block;
  font-weight:700;
  font-size:15px;
  padding:13px 28px;
  border-radius:8px;
  text-decoration:none;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.cta-btn-primary{
  background:var(--accent);
  color:#0d0600;
  box-shadow:0 4px 20px rgba(244,197,66,.3);
}
.cta-btn-primary:visited{ color:#0d0600; }
.cta-btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(244,197,66,.45);
}
.cta-btn-outline{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
}
.cta-btn-outline:visited{ color:var(--accent); }
.cta-btn-outline:hover{
  background:rgba(244,197,66,.1);
  transform:translateY(-2px);
}

/* ── 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; }
}