/* =========================================================
   Tech Guys BBQ — Site Styles
   ---------------------------------------------------------
   To re-theme the site, edit the variables in :root below.
   Everything else reads from them.
   ========================================================= */

/* ---------- Self-hosted fonts (fonts/, SIL Open Font License) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  /* Brand colors */
  --color-bg:        #141110;   /* page background (charcoal) */
  --color-surface:   #1f1a17;   /* cards, header */
  --color-border:    #3a2f29;
  --color-text:      #f3ece6;   /* main text */
  --color-muted:     #b5a89e;   /* secondary text */
  --color-accent:    #e8622c;   /* ember orange */
  --color-accent-2:  #f2a541;   /* flame gold */
  --color-button:    #c4461c;   /* deeper ember for buttons/banner: white text passes 4.5:1 contrast */
  --color-button-hover: #a63a16;

  /* Typography */
  --font-display: "Oswald", "Impact", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --max-width: 1080px;
  --radius: 10px;
  --gutter: 20px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

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

a { color: var(--color-accent-2); }

/* Keyboard focus: one consistent, visible outline */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 3px;
}

/* "Skip to content" link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--color-accent-2); color: #141110;
  font-weight: 700; padding: 8px 14px; border-radius: 6px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
a:hover { color: var(--color-accent); }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Header wordmark: images/logo-wordmark.png (lettering from the team logo) */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 52px; width: auto; }

.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 12px;
  border-radius: 6px;
}
.nav a:hover { color: var(--color-text); background: rgba(255,255,255,0.05); }
.nav a[aria-current="page"] { color: var(--color-accent-2); }

/* ---------- Event banner (js/site.js; hidden unless an event is set) ---------- */
.event-banner {
  background: linear-gradient(90deg, #a63a16, var(--color-button), #a63a16);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 10px var(--gutter);
}
.event-banner p { margin: 0; }
.event-banner a {
  color: #fff; font-weight: 700;
  margin-left: 6px; padding: 2px 10px;
  border: 1px solid rgba(255,255,255,0.8); border-radius: 999px;
  text-decoration: none; white-space: nowrap;
}
.event-banner a:hover { background: #fff; color: var(--color-button); }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(48px, 9vw, 96px) 0 clamp(64px, 10vw, 112px);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(232,98,44,0.45), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(242,165,65,0.18), transparent 70%),
    var(--color-bg);
}
/* Full team logo (images/logo-full.png) */
.hero-logo { margin: 0 auto 28px; max-width: 540px; }
.hero-logo img {
  width: 100%;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
  transform: rotate(-2deg);
}
.hero-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.4em;
}
.hero .tagline { color: var(--color-muted); font-size: 1.2rem; max-width: 520px; margin: 0 auto 2em; }
.hero .accent { color: var(--color-accent); }

/* Page header (subpages) */
.page-header {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--color-border);
  background: radial-gradient(ellipse at 50% 140%, rgba(232,98,44,0.25), transparent 65%);
}
.page-header p { color: var(--color-muted); max-width: 620px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--color-button);
  margin: 4px;
}
.btn-primary { background: var(--color-button); color: #fff; }
.btn-primary:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); color: #fff; }
.btn-outline { color: var(--color-text); }
.btn-outline:hover { background: var(--color-button); color: #fff; }

/* ---------- Sections & Cards ---------- */
.section { padding: 56px 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gutter);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.card .icon { font-size: 1.8rem; margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card .role { color: var(--color-accent-2); font-weight: 600; margin-bottom: 0.5em; }

/* ---------- Awards list ---------- */
.award-year { margin-top: 40px; color: var(--color-accent-2); }
.award-list { list-style: none; padding: 0; margin: 0; }
.award-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.award-list .event { font-weight: 600; }
.award-list .category { color: var(--color-muted); font-size: 0.95rem; }
.badge {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Icon comes from CSS, so the HTML only needs the class name */
.badge::before { font-size: 1.05em; line-height: 1; }

/* 1st place: solid gold with a trophy */
.badge.first {
  background: linear-gradient(135deg, #f7d774, #d4a017);
  border-color: #f7d774;
  color: #2a1d05;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(247,215,116,0.35);
}
.badge.first::before { content: "🏆"; content: "🏆" / ""; }

/* 2nd place: silver */
.badge.second { border-color: #c9ced6; color: #e4e7ec; background: rgba(201,206,214,0.12); }
.badge.second::before { content: "🥈"; content: "🥈" / ""; }

/* 3rd place: bronze */
.badge.third { border-color: #c4834d; color: #e3a677; background: rgba(196,131,77,0.12); }
.badge.third::before { content: "🥉"; content: "🥉" / ""; }

/* Judged, but placed below 3rd */
.badge.participant { border-color: var(--color-accent); color: var(--color-accent-2); }
.badge.participant::before { content: "🔥"; content: "🔥" / ""; }

/* Not judged (charity / community events) */
.badge.charity { border-style: dashed; border-color: var(--color-muted); }
.badge.charity::before { content: "❤️"; content: "❤️" / ""; }

/* ---------- Contact ---------- */
.contact-info { margin: 0 0 28px; }
.contact-info dt { color: var(--color-muted); font-size: 0.9rem; margin-top: 16px; }
.contact-info dd { margin: 0; font-weight: 600; font-size: 1.15rem; }
.contact-info + .btn { margin-left: 0; }

/* ---------- Crew cards with pixel-art avatars ---------- */
.crew-card { text-align: center; }
.crew-avatar {
  width: 144px; height: 144px;
  margin: 0 auto 14px;
  image-rendering: pixelated;
  background: radial-gradient(circle at 50% 80%, rgba(232,98,44,0.45), transparent 70%), var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 12px;
}

/* ---------- Team bios ---------- */
.card .bio { min-height: 4.8em; color: var(--color-muted); }

/* Footer privacy line. Keep it true: the site sets no cookies (see README → Privacy). */
.privacy-note { margin: 6px 0 0; font-size: 0.82rem; color: var(--color-muted); opacity: 0.85; }

/* ---------- Animal trio (cow / pig / chicken from the team logo) ---------- */
.cook-band { text-align: center; padding-bottom: 8px; }
.cook-band h2 { margin-bottom: 52px; }  /* room for the speech bubbles */
.trio { display: flex; justify-content: center; align-items: flex-end; gap: clamp(28px, 8vw, 88px); flex-wrap: wrap; }
.trio figure { margin: 0; }
.trio img { height: 96px; width: auto; margin: 0 auto; transition: transform 0.2s; }
.trio figure:hover img { transform: translateY(-6px) rotate(-3deg); }

/* Clickable animals (easter egg, see js/animal-sounds.js) */
.animal-btn {
  position: relative;
  background: none; border: 0; padding: 0 0 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.animal-btn:focus-visible { outline: 2px dashed var(--color-accent-2); outline-offset: 6px; border-radius: 6px; }
.animal-btn.wiggle img { animation: wiggle 0.45s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-10deg) scale(1.08); }
  45% { transform: rotate(8deg) scale(1.08); }
  70% { transform: rotate(-5deg); }
}
.speech-bubble {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem; letter-spacing: 0.05em;
  color: #141110; background: var(--color-text);
  padding: 4px 10px; border-radius: 4px;
  box-shadow: 3px 3px 0 var(--color-accent);   /* blocky, pixel-style shadow */
  white-space: nowrap; pointer-events: none;
  animation: bubble 1.1s ease forwards;
}
@keyframes bubble {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}
@media (prefers-reduced-motion: reduce) {
  .animal-btn.wiggle img, .speech-bubble { animation: none; }
}
.trio figcaption {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-2);
}

/* Small animal before an award category: class="category pork|beef|poultry" */
.award-list .category.pork, .award-list .category.beef, .award-list .category.poultry {
  display: flex; align-items: center; gap: 8px;
}
.award-list .category.pork::before, .award-list .category.beef::before, .award-list .category.poultry::before {
  content: ""; width: 22px; height: 20px;
  background: center / contain no-repeat;
}
.award-list .category.beef::before    { background-image: url("../images/cow.png"); }
/* Open / any-meat category (Chef's Choice): all three animals */
.award-list .category.any { display: flex; align-items: center; gap: 8px; }
.award-list .category.any::before {
  content: ""; width: 66px; height: 20px;
  background: url("../images/cow.png") 0 50% / 20px auto no-repeat,
              url("../images/pig.png") 23px 50% / 22px auto no-repeat,
              url("../images/chicken.png") 48px 50% / 18px auto no-repeat;
}
.award-list .category.pork::before    { background-image: url("../images/pig.png"); }
.award-list .category.poultry::before { background-image: url("../images/chicken.png"); }

/* ---------- Footer ---------- */
.crew-trio { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }
.crew-trio img { height: 28px; width: auto; opacity: 0.9; transition: transform 0.2s; }
.crew-trio img:hover { transform: translateY(-4px); }
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------- 404 page: "burnt" theme (404.html) ---------- */
body.burnt { background: #0b0807; }
.burnt-main {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 56px 0 72px;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(232,98,44,0.35), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120,30,10,0.35), transparent 70%),
    #0b0807;
}
.burnt-content { position: relative; z-index: 1; }
.burnt-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 22vw, 10rem);
  line-height: 1; margin: 0;
  color: #2a1f1a;
  text-shadow: 0 0 6px #e8622c, 0 0 22px rgba(232,98,44,0.6), 0 0 48px rgba(180,52,22,0.5);
  animation: smoulder 3s ease-in-out infinite;
}
@keyframes smoulder {
  0%, 100% { text-shadow: 0 0 6px #e8622c, 0 0 22px rgba(232,98,44,0.6), 0 0 48px rgba(180,52,22,0.5); }
  50%      { text-shadow: 0 0 3px #b4341a, 0 0 12px rgba(232,98,44,0.35), 0 0 28px rgba(180,52,22,0.3); }
}
.burnt h1 { color: var(--color-muted); margin-top: 8px; }
.burnt-text { color: #9c8d82; max-width: 460px; margin: 0 auto 28px; }

.charred-trio { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 6vw, 56px); margin: 12px 0 36px; flex-wrap: wrap; }
.charred-trio figure { position: relative; margin: 0; padding-top: 70px; }
.charred-trio img { height: 96px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(232,98,44,0.25)); }
.charred-trio figure:nth-child(2) img { transform: rotate(4deg); }
.charred-trio figure:nth-child(3) img { transform: rotate(-5deg); }

/* smoke wisps rising from each animal */
.smoke, .smoke::before, .smoke::after {
  position: absolute; left: 50%; bottom: 80px;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: rgba(140,130,125,0.35);
  filter: blur(6px);
  animation: smoke 3.2s ease-out infinite;
}
.smoke::before, .smoke::after { content: ""; bottom: 0; }
.smoke::before { animation-delay: 1.1s; left: 30%; }
.smoke::after  { animation-delay: 2.1s; left: 70%; }
.charred-trio figure:nth-child(2) .smoke { animation-delay: 0.6s; }
.charred-trio figure:nth-child(3) .smoke { animation-delay: 1.4s; }
@keyframes smoke {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(-80px) translateX(10px) scale(1.8); opacity: 0; }
}

/* drifting embers */
.embers span {
  position: absolute; bottom: -10px;
  width: 4px; height: 4px;
  background: #f2a541; box-shadow: 0 0 6px #e8622c;
  animation: ember 6s linear infinite;
  opacity: 0;
}
.embers span:nth-child(1)  { left: 8%;  animation-delay: 0s;   }
.embers span:nth-child(2)  { left: 18%; animation-delay: 2.4s; animation-duration: 7s; }
.embers span:nth-child(3)  { left: 27%; animation-delay: 4.1s; }
.embers span:nth-child(4)  { left: 38%; animation-delay: 1.2s; animation-duration: 8s; }
.embers span:nth-child(5)  { left: 49%; animation-delay: 3.3s; }
.embers span:nth-child(6)  { left: 58%; animation-delay: 0.7s; animation-duration: 7.5s; }
.embers span:nth-child(7)  { left: 67%; animation-delay: 5s;   }
.embers span:nth-child(8)  { left: 76%; animation-delay: 2s;   animation-duration: 6.5s; }
.embers span:nth-child(9)  { left: 86%; animation-delay: 3.8s; }
.embers span:nth-child(10) { left: 94%; animation-delay: 1.6s; animation-duration: 8.5s; }
@keyframes ember {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(30px, -560px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .burnt-code, .smoke, .smoke::before, .smoke::after, .embers span { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .site-header .container { justify-content: center; }
  .nav { justify-content: center; gap: 0; }
  .nav a { padding: 6px 8px; font-size: 0.9rem; }
  .charred-trio { flex-wrap: nowrap; gap: 14px; }
  .charred-trio img { height: 64px; }
}