/* ==========================================================================================
   Event Kit: component CSS

   Tokens (colours, fonts, sizes, spacing) live in theme.json and arrive here as
   --wp--preset--* and --wp--custom--* variables. This file never hardcodes a brand value, so
   a style variation can reskin the whole site from theme.json alone.

   Component names follow the Claude Design "Ticket and menu board" page (2026-11-02) so the
   design file and the theme stay in step.

   Contents
     1. Tokens and roles      8. Podium
     2. Base                  9. Cards
     3. Header               10. Partners
     4. Hero and ticket      11. Signup band
     5. Photo band, winner   12. Footer
     6. Essentials           13. Single posts and pages
     7. Menu list (lineup)

   Breakpoints: 48em (768px) tablet, 64em (1024px) desktop.
   ========================================================================================== */


/* 1. Tokens and roles
   Short names for theme.json values, plus roles (text, rule, surface) that dark sections
   swap in one place. ----------------------------------------------------------------------- */

:root {
  /* Palette */
  --color-brand-red: var(--wp--preset--color--brand-red);
  --color-gold:      var(--wp--preset--color--gold);
  --color-bark:      var(--wp--preset--color--bark);
  --color-ember:     var(--wp--preset--color--ember);
  --color-ink:       var(--wp--preset--color--ink);
  --color-smoke:     var(--wp--preset--color--smoke);
  --color-paper:     var(--wp--preset--color--paper);
  --color-white:     var(--wp--preset--color--white);

  /* Fonts */
  --font-display: var(--wp--preset--font-family--display);
  --font-ui:      var(--wp--preset--font-family--ui);

  /* Roles on a light background */
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-smoke);
  --color-rule:       var(--color-ink);
  --color-surface:    var(--color-white);

  /* Roles on a dark background */
  --color-dark-bg:     var(--color-ember);
  --color-dark-bg-alt: var(--color-bark);
  --color-dark-text:   var(--color-paper);
  --color-dark-accent: var(--color-gold);
  --color-dark-rule:   var(--color-bark);

  /* Type */
  --text-s:          var(--wp--preset--font-size--small);
  --text-date:       var(--wp--preset--font-size--date);
  --tracking-ui:     0.04em;
  --leading-display: 0.92;

  /* Lines, targets, widths (theme.json settings.custom) */
  --rule-strong:     var(--wp--custom--rule);
  --rule-perforation: 2px dashed;
  --tap-min:         var(--wp--custom--tap);
  --width-reading:   var(--wp--custom--reading-width);

  /* Spacing (theme.json slugs: "2xs" becomes "2-xs" in the variable name) */
  --space-3xs: var(--wp--preset--spacing--3-xs);
  --space-2xs: var(--wp--preset--spacing--2-xs);
  --space-xs:  var(--wp--preset--spacing--xs);
  --space-s:   var(--wp--preset--spacing--s);
  --space-m:   var(--wp--preset--spacing--m);
  --space-l:   var(--wp--preset--spacing--l);
  --space-xl:  var(--wp--preset--spacing--xl);
}


/* 2. Base ---------------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

p, li, dd {
  text-wrap: pretty;
}

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

::selection {
  background: var(--color-gold);
  color: var(--color-ink);
}

.wp-block-image img:not([style*="aspect-ratio"]) {
  height: auto;
}

/* Header, main and footer sit flush; sections bring their own padding. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* Small uppercase label above a heading */
.kicker,
.kicker p {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-muted);
}

/* Section heads: reading width, left-aligned inside a constrained (centred) layout */
.section-head {
  max-width: var(--width-reading);
}

.is-layout-constrained > .section-head,
.is-layout-constrained > .menu-list,
.is-layout-constrained > .section-foot {
  margin-left: 0 !important; /* beats core's auto margins on constrained children */
}

.section-head .section-head__link {
  font-family: var(--font-ui);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.section {
  padding-block: var(--wp--preset--spacing--section);
}

.section--ruled {
  border-top: var(--rule-strong) solid var(--color-rule);
}

/* Dark sections: swap the roles, and every component inside follows. */
.site-footer,
.essentials,
.signup {
  --color-text:       var(--color-dark-text);
  --color-text-muted: var(--color-dark-text);
  --color-rule:       var(--color-dark-rule);
  --color-surface:    transparent;
}

:is(.site-footer, .essentials, .signup) a {
  color: var(--color-dark-text);
}

:is(.site-footer, .essentials, .signup) a:hover {
  color: var(--color-dark-accent);
}

:is(.site-footer, .essentials, .signup) .kicker {
  color: var(--color-dark-accent);
}

:is(.site-footer, .essentials, .signup) :focus-visible {
  outline-color: var(--color-dark-accent);
}

/* Buttons (base look is in theme.json styles.elements.button) */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-text);
  border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-text);
  color: var(--color-paper);
}

.btn-lg .wp-block-button__link {
  min-height: 56px;
  font-size: 1.125rem;
}

.btn-block,
.btn-block .wp-block-button__link {
  width: 100%;
  justify-content: space-between;
}

/* Image cropping helpers (core/image with aspectRatio already crops; these set the focus) */
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.focus-top img   { object-position: 50% 22%; }
.focus-upper img { object-position: 50% 35%; }


/* 3. Header -------------------------------------------------------------------------------- */

.site-header {
  background: var(--color-paper);
}

.site-header__bar {
  min-height: 64px;
}

.site-header .wp-block-site-logo img {
  height: 40px;
  width: auto;
}

.site-header .wp-block-navigation {
  font-size: 1rem;
}

.site-header .wp-block-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-header .wp-block-button__link {
  min-height: var(--tap-min);
  padding-inline: var(--space-s);
}

@media (min-width: 64em) {
  .site-header .wp-block-site-logo img {
    height: 48px;
  }
}


/* 4. Hero and ticket ----------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-m) var(--space-l);
}

.hero .hero__wordmark img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.hero__lead {
  max-width: var(--width-reading);
  font-size: var(--wp--preset--font-size--lead);
}

.hero__credits {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

@media (min-width: 64em) {
  .hero {
    padding-top: var(--space-xl);
  }
}

/* The ticket: main part on top, perforated stub below */
.ticket {
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

.ticket__main {
  padding: var(--space-m);
}

.ticket__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-date);
  line-height: var(--leading-display);
  text-transform: uppercase;
}

.ticket__place {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

.ticket__stub {
  padding: var(--space-m);
  border-top: var(--rule-perforation) var(--color-rule);
}

.ticket__price {
  font-family: var(--font-ui);
  font-weight: 600;
}

.ticket__price .muted {
  color: var(--color-text-muted);
}


/* 5. Photo band and winner feature ---------------------------------------------------------- */

/* Winner feature: headline, one photo, a link to the recap. Sits under the hero between events. */
.winner-feature {
  margin-block: var(--space-l);
}

.winner-feature__title {
  max-width: 22ch;
  margin-left: 0 !important; /* left-aligned like section heads, not centred by the constrained layout */
  margin-bottom: var(--space-s);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

.winner-feature__link {
  margin-top: var(--space-s);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
}

@media (max-width: 47.99em) {
  .winner-feature .wp-block-image {
    margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
  }
}

.photo-band {
  margin-block: var(--space-l);
}

/* Phones: bleed past the page gutter to the screen edge */
@media (max-width: 47.99em) {
  .photo-band,
  .photo-band.alignfull {
    margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
  }
}


/* 6. Essentials scoreboard (dark): 2 x 2 on phones, 4 across from tablet ------------------- */

.essentials {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}

.essentials__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Grid cells line up at the top: drop the block-gap margin core adds to every cell after the first */
.essentials__list > * {
  margin-block: 0;
}

.essentials__item {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding: var(--space-m) var(--space-s);
}

.essentials__item:nth-child(n+3) {
  border-top: var(--rule-strong) solid var(--color-dark-bg-alt);
}

.essentials__item:nth-child(odd) {
  border-right: var(--rule-strong) solid var(--color-dark-bg-alt);
}

.essentials__dt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-dark-accent);
}

.essentials__dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.essentials__small {
  font-size: var(--text-s);
  line-height: 1.4;
}

@media (min-width: 48em) {
  .essentials__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .essentials__item {
    border-top: 0 !important; /* undo the 2 x 2 row rule */
    border-right: var(--rule-strong) solid var(--color-dark-bg-alt);
    padding: var(--space-l) var(--space-m);
  }

  .essentials__item:last-child {
    border-right: 0;
  }

  .essentials__dd {
    font-size: 2.25rem;
  }
}


/* 7. Menu list (lineup): name, leader dots, detail. One column on phones, two from tablet. */

ul.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--rule-strong) solid var(--color-rule);
  columns: 1;
  column-gap: var(--space-xl);
}

ul.menu-list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

ul.menu-list li strong {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.3125rem; /* 10% up from 1.1875rem, Melvin 2026-11-03 */
  line-height: 1.2;
}

/* The leader dots fill the space after the name */
ul.menu-list li strong::after {
  content: "";
  flex: 1;
  min-width: var(--space-s);
  border-bottom: 2px dotted var(--color-text-muted);
  transform: translateY(-0.3em);
}

ul.menu-list li em {
  font-style: normal;
  font-size: var(--text-s);
  color: var(--color-text-muted);
  text-align: right;
}

@media (min-width: 48em) {
  ul.menu-list {
    columns: 2;
  }
}


/* 8. Podium -------------------------------------------------------------------------------- */

.podium__body {
  border-top: var(--rule-strong) solid var(--color-rule);
  padding-top: var(--space-s);
}

.podium__award {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--subheading); /* h3 size: one step below the section h2 */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-brand-red);
}

.podium__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
}

.podium__item--first .podium__name {
  font-size: 2.75rem;
}

.podium__meta {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

.podium__item img {
  object-fit: cover;
}


/* 9. Cards (query loop). The whole card is the click target via the title link's ::after. */

.card-grid .wp-block-post-template {
  gap: var(--space-l);
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

.card .wp-block-post-featured-image {
  margin: 0;
  background: var(--color-dark-bg-alt); /* shows while the image loads, or if there is none */
}

.card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--space-s) var(--space-s) var(--space-m);
}

.card__meta {
  font-size: var(--text-s);
}

.card__meta .wp-block-post-terms a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.card__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--subheading);
  line-height: 1.2;
  text-transform: none;
}

.card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:hover .card__title a {
  color: var(--color-brand-red);
  text-decoration: underline;
}

/* Keyboard focus outlines the whole card instead of the hidden title link */
.card:focus-within {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

.card:focus-within :focus-visible {
  outline: none;
}


/* 10. Partners: lead tiers in boxed tiles, supporting tier as a plain logo row ------------- */

.partner-tiers {
  border-top: var(--rule-strong) solid var(--color-rule);
}

.partner-tier {
  padding-block: var(--space-m);
  border-bottom: var(--rule-strong) solid var(--color-rule);
}

.partner-tier__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-muted);
}

.partner-tier__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  margin: 0;
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

/* Single tone: every logo rendered near-black, whatever its own colours */
.partner-logo img {
  max-height: 64px;
  width: auto;
  filter: grayscale(1) brightness(0.25);
}

.partner-logo .logo-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
}

.partner-tier--support .partner-tier__logos {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-s) var(--space-m);
}

.partner-tier--support .partner-logo {
  min-height: 4rem;
  padding: 0;
  justify-content: flex-start;
  background: transparent;
  border: 0;
}

.partner-tier--support .partner-logo img {
  max-height: 36px;
}

@media (min-width: 48em) {
  .partner-logo {
    min-height: 8rem;
  }
}

/* Desktop: tier label on the left, logos on the right */
@media (min-width: 64em) {
  .partner-tier {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-l);
  }
}


/* 11. Signup band (dark) ------------------------------------------------------------------- */

.signup {
  background: var(--color-dark-bg-alt);
  color: var(--color-dark-text);
}

.signup iframe {
  width: 100%;
  max-width: var(--width-reading);
  border: 0;
}

.signup__note {
  font-size: var(--text-s);
}


/* 12. Footer (dark) ------------------------------------------------------------------------ */

.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  padding-block: var(--space-xl) var(--space-l);
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-dark-accent);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: var(--rule-strong) solid var(--color-dark-bg-alt);
  font-size: var(--text-s);
}

@media (min-width: 48em) {
  .site-footer__name {
    font-size: 3rem;
  }
}


/* Instagram feed (Smash Balloon): square tiles, no gaps from the plugin's own padding */
.section-instagram #sb_instagram {
  padding-bottom: 0 !important;
}

/* Embedded forms: tall enough that the form never scrolls inside its own frame */
.signup iframe {
  overflow: hidden;
}

.apply-form {
  display: block;
  height: 1150px; /* Airtable application form, measured at column width */
}

@media (max-width: 47.99em) {
  .apply-form {
    height: 1350px; /* fields stack on phones */
  }
}


/* 13. Single posts and pages --------------------------------------------------------------- */

.entry-header {
  padding-block: var(--space-xl) var(--space-l);
}

/* Inner pages read at article width; the home page uses full sections instead. */
body:not(.home) .entry-content {
  max-width: var(--width-reading);
}

.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
}

.entry-content img {
  height: auto;
}

.entry-meta {
  font-size: var(--text-s);
}

.entry-meta .wp-block-post-terms a {
  text-decoration: none;
}