/* ===========================================================
   COL Cookoff League — shared stylesheet
   Styled after VisionAI (a1.gallery/website/visionai): near-black
   ground, a serif display headline (EB Garamond) with tight
   negative tracking, Inter medium for UI text (also tightly
   tracked), minimal chrome, and a soft blurred accent glow behind
   the hero. Adapted here to COL's grey/gold palette instead of
   the reference's purple. The crest is isolated to a transparent
   PNG (col-mark-white.png) so it can sit on the glow/background
   freely, at any size, with no background-matching trick needed.
   =========================================================== */

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

:root{
  --charcoal:      #17181b;
  --charcoal-2:    #101113;
  --panel:         #1e2024;
  --panel-2:       #282a2f;
  --border:        rgba(255,255,255,.08);
  --cream:         #f6f4ef;
  --cream-dim:     rgba(246,244,239,.55);
  --gold:          #cda86f;
  --gold-dim:      #ad8c54;
  --gold-bright:   #e4c894;
  --ember:         #a6674d;
  --good:          #7ea883;
  --bad:           #c1584a;
  --glow:          rgba(205,168,111,.32);
  --radius:        18px;
  --radius-sm:     10px;
  --radius-pill:   999px;
  --shadow:        0 16px 40px rgba(0,0,0,.35);
  --font-head:     'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--charcoal);
  color:var(--cream);
  font-family:var(--font-body);
  letter-spacing:-.01em;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 .5rem;
  color:#fff;
}
h1{ font-size:2.6rem; }
h2{ font-size:1.7rem; }
h3{ font-size:1.3rem; color:var(--gold); }

p{ line-height:1.6; color:var(--cream-dim); margin:0 0 1rem; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-bright); text-decoration:underline; }

.eyebrow{
  display:block; font-family:var(--font-body); text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; font-weight:600; color:var(--gold);
}

.container{
  max-width:880px;
  margin:0 auto;
  padding:0 20px 60px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 20px;
  max-width:880px;
  margin:0 auto;
  border-bottom:1px solid var(--border);
}
.topbar img.crest{ height:26px; width:auto; object-fit:contain; }
.topbar .brand{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  color:#fff;
  letter-spacing:-.01em;
}
.topbar nav{ margin-left:auto; display:flex; gap:26px; font-size:.9rem; }
.topbar nav a{ color:var(--cream-dim); font-weight:500; letter-spacing:-.01em; }
.topbar nav a:hover{ color:var(--gold); }

/* ---------- hero (compact, used on inner pages) ---------- */
.hero{ text-align:center; padding:30px 0 10px; }
.hero img.crest-lg{ width:140px; margin:0 auto 18px; }
.hero p.tag{ font-size:1.05rem; max-width:520px; margin:0 auto 22px; }
.hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- hero-full (homepage — huge centered crest over a soft glow,
   mobile-first). The crest is the transparent col-mark-white.png, so it
   can sit directly over the glow/background with no seam to manage. ---- */
.hero-full{
  position:relative;
  min-height:calc(100svh - 71px);
  min-height:calc(100vh - 71px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px 60px;
  overflow:hidden;
}
.hero-full::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:min(900px, 140vw);
  height:min(900px, 140vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--glow), rgba(205,168,111,.08) 55%, transparent 75%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
.hero-full > *{ position:relative; z-index:1; }
.hero-full img.crest-huge{
  width:clamp(230px, 66vw, 460px);
  margin:0 auto 30px;
}
.hero-full .eyebrow{ margin-bottom:14px; }
.hero-full h1{
  font-size:clamp(2.1rem, 6.5vw, 3.4rem);
  max-width:600px;
}
.hero-full p.tag{
  font-size:1rem;
  color:var(--cream-dim);
  max-width:440px;
  margin:10px auto 30px;
}
.hero-full .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- cards / panels ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.card, .card-head{ text-align:left; }
.card + .card{ margin-top:18px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); letter-spacing:-.01em;
  font-size:.92rem; font-weight:500;
  padding:13px 26px; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer;
  transition:transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn:hover{ filter:brightness(1.08); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:var(--gold); color:#232326; }
.btn-primary:hover{ background:var(--gold-bright); }
.btn-ember{ background:var(--ember); color:#fff; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); filter:none; }
.btn-danger{ background:transparent; border-color:var(--bad); color:var(--bad); }
.btn-danger:hover{ background:var(--bad); color:#fff; }
.btn-sm{ padding:8px 14px; font-size:.75rem; }
.btn-block{ width:100%; }

/* ---------- forms ---------- */
label{ display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--cream-dim); margin-bottom:6px; }
input[type=text], input[type=number], input[type=email], input[type=password], select, textarea{
  width:100%;
  background:var(--charcoal-2);
  border:1px solid var(--border);
  color:var(--cream);
  border-radius:var(--radius-sm);
  padding:11px 12px;
  font-size:.95rem;
  font-family:var(--font-body);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold); }
.field{ margin-bottom:16px; }
.row-inline{ display:flex; gap:10px; align-items:flex-end; }
.row-inline > *{ flex:1; }
.hint{ font-size:.78rem; color:var(--cream-dim); margin-top:4px; }

/* dynamic list rows (chefs / courses in admin) */
.list-row{
  display:flex; gap:10px; align-items:center; margin-bottom:8px;
}
.list-row input{ flex:1; }
.list-row .remove{
  background:none; border:none; color:var(--bad); font-size:1.2rem; cursor:pointer;
  width:34px; height:34px; border-radius:8px; flex:none;
}
.list-row .remove:hover{ background:rgba(217,99,90,.15); }

/* chef blocks (admin editor) — each chef is its own nested card holding
   the chef-name row plus that chef's own dish rows underneath */
.chef-block{
  background:var(--charcoal-2);
  padding:16px; margin-bottom:14px;
}
.chef-block .chef-name{ font-weight:600; }
.dish-list{ margin:10px 0 10px 4px; padding-left:14px; border-left:2px solid var(--border); }
.dish-row{ margin-bottom:12px; }
.dish-row .dish-points{ max-width:80px; flex:none; }
.dish-row .dish-desc{ font-size:.85rem; margin-top:6px; }

/* ---------- badges / status ---------- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.badge-draft{ background:var(--panel-2); color:var(--cream); }
.badge-open{ background:rgba(126,168,131,.16); color:var(--good); border:1px solid var(--good); }
.badge-closed{ background:rgba(201,167,104,.15); color:var(--gold); border:1px solid var(--gold); }

/* ---------- tables ---------- */
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th, td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); }
th{ text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; color:var(--cream-dim); }
tr:last-child td{ border-bottom:none; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--charcoal-2);
  font-family:var(--font-head); font-size:.8rem; color:var(--cream-dim);
}
.rank-1{ background:var(--gold); color:#232326; }
.rank-2{ background:#c9c9cf; color:#232326; }
.rank-3{ background:#b98459; color:#232326; }

/* ---------- misc ---------- */
.muted{ color:var(--cream-dim); }
.center{ text-align:center; }
.spacer{ height:20px; }
.divider{ border:none; border-top:1px solid var(--border); margin:20px 0; }
.notice{
  background:rgba(224,171,60,.1); border:1px solid var(--gold);
  color:var(--cream); padding:12px 16px; border-radius:var(--radius-sm);
  font-size:.88rem; margin-bottom:16px;
}
.notice-bad{ background:rgba(193,88,74,.1); border-color:var(--bad); }
.notice-good{ background:rgba(126,168,131,.1); border-color:var(--good); }
.loading{ text-align:center; padding:40px 0; color:var(--cream-dim); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }

/* voting ballot grid */
.ballot-chef{ margin-bottom:22px; }
.ballot-chef h3{ margin-bottom:10px; }
.ballot-course-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; border-bottom:1px solid var(--border);
}
.ballot-course-row:last-child{ border-bottom:none; }
.ballot-dish-info{ flex:1; min-width:0; }
.ballot-course-row label{ display:block; margin:0; text-transform:none; font-size:.9rem; color:var(--cream); font-weight:500; }
.dish-description{ margin:3px 0 0; font-size:.8rem; color:var(--cream-dim); line-height:1.4; }
.ballot-course-row input{ width:80px; flex:none; text-align:center; }

.qr-box{ background:#fff; padding:14px; border-radius:var(--radius-sm); display:inline-block; }
.link-box{
  background:var(--charcoal-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:.85rem; word-break:break-all; color:var(--gold);
}

footer.site{
  text-align:center; padding:30px 20px; color:var(--cream-dim); font-size:.78rem;
}

/* ===========================================================
   Event landing pages (e.g. the Holiday Classic) — a photo hero
   instead of the crest-only hero-full, plus supporting sections.
   Reuses all the tokens/classes above; nothing here should
   diverge from the base COL look.
   =========================================================== */

.evt-hero{
  position:relative;
  min-height:min(640px, 92vh);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.evt-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,17,19,.55) 0%, rgba(16,17,19,.35) 40%, rgba(16,17,19,.92) 100%);
  z-index:0;
}
.evt-hero > *{ position:relative; z-index:1; }
.evt-hero .eyebrow{ margin-bottom:12px; }
.evt-hero h1{
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  max-width:680px;
  color:#fff;
}
.evt-hero p.tag{
  font-size:1.05rem;
  max-width:520px;
  margin:12px auto 24px;
  color:var(--cream);
}
.evt-hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.evt-hero .evt-meta{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  font-size:.85rem; color:var(--cream-dim); letter-spacing:.01em;
}
.evt-hero .evt-meta strong{ color:var(--cream); font-weight:600; }

.evt-section{ padding:50px 0 10px; }
.evt-section h2{ text-align:center; margin-bottom:8px; }
.evt-section .evt-lede{ text-align:center; max-width:560px; margin:0 auto 30px; }

.evt-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:720px){ .evt-facts{ grid-template-columns:repeat(2,1fr); } }
.evt-fact{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 14px; text-align:center;
}
.evt-fact .num{ font-family:var(--font-head); font-size:1.5rem; color:var(--gold); display:block; margin-bottom:4px; }
.evt-fact .label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cream-dim); }

.evt-timeline{ max-width:640px; margin:0 auto; }
.evt-timeline .evt-row{
  display:flex; gap:18px; padding:12px 0; border-bottom:1px solid var(--border);
}
.evt-timeline .evt-row:last-child{ border-bottom:none; }
.evt-timeline .evt-time{
  flex:none; width:110px; font-family:var(--font-head); color:var(--gold); font-size:.95rem;
}
.evt-timeline .evt-what{ color:var(--cream); }
.evt-timeline .evt-what .muted{ display:block; font-size:.8rem; margin-top:2px; }

.evt-includes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:720px){ .evt-includes{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .evt-includes{ grid-template-columns:1fr; } }
.evt-includes .card{ text-align:center; margin-bottom:0; }

.evt-ticket-box{ max-width:440px; margin:0 auto; text-align:center; }
.evt-ticket-box .evt-price{ font-family:var(--font-head); font-size:3rem; color:var(--gold); line-height:1; margin-bottom:4px; }
.evt-ticket-box .evt-price sup{ font-size:1.1rem; top:-1.2em; }
.evt-remaining{ font-size:.9rem; color:var(--cream-dim); margin-bottom:18px; }
.evt-remaining strong{ color:var(--gold-bright); }
.evt-progress{
  height:8px; border-radius:999px; background:var(--charcoal-2); overflow:hidden; margin:8px 0 18px;
}
.evt-progress > div{ height:100%; background:var(--gold); }

.evt-map-link{ font-size:.9rem; }

.evt-faq details{
  border-bottom:1px solid var(--border); padding:14px 0;
}
.evt-faq details:last-child{ border-bottom:none; }
.evt-faq summary{ cursor:pointer; font-weight:600; color:var(--cream); list-style:none; }
.evt-faq summary::-webkit-details-marker{ display:none; }
.evt-faq summary::before{ content:"+ "; color:var(--gold); }
.evt-faq details[open] summary::before{ content:"– "; }
.evt-faq p{ margin-top:8px; }