/* GoodVibes Birthday — facts strip + artist line-up.
   Brand tokens with literal fallbacks, same convention as gvs-1bd.css, so the section
   still reads on-brand anywhere the theme variables are not in scope.

   Loaded with a dependency on the `gvs-1bd` handle, so it is emitted AFTER it: where the
   two ever land on equal specificity, this file is meant to win. */

/* ------------------------------------------------------------------ facts strip */

.gvs-facts{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:var(--gvs-space-4,32px) auto var(--gvs-space-5,40px);
  padding:0;
  max-width:var(--gvs-content-width,1200px);
  background:var(--gvs-petrol,#1B4A5A);
  border-radius:var(--gvs-radius,8px);
  overflow:hidden;
}

.gvs-fact{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:var(--gvs-space-3,24px);
  border-inline-start:1px solid rgba(243,233,210,.18);
  color:var(--gvs-paper,#F3E9D2);
}
.gvs-fact:first-child{border-inline-start:0}

.gvs-fact__icon{
  flex:0 0 auto;
  width:26px;height:26px;
  color:var(--gvs-gold,#E8B33C);
  margin-top:2px;
}

.gvs-fact__body{display:flex;flex-direction:column;gap:4px;min-width:0}

.gvs-fact__label{
  font-family:var(--gvs-font-body,"Inter",sans-serif);
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gvs-gold,#E8B33C);
}

.gvs-fact__value{
  font-family:var(--gvs-font-display,"Oswald",sans-serif);
  font-size:1.0625rem;font-weight:600;line-height:1.25;
  color:var(--gvs-paper,#F3E9D2);
  text-wrap:balance;
}

/* .gvs-on-dark a and the theme's link colour both target bare `a` at 0,1,1 — 0,2,0 here
   keeps the fact links reading as the surrounding text rather than as body links. */
.gvs-facts a.gvs-fact__value{
  color:var(--gvs-paper,#F3E9D2);
  text-decoration:none;
  border-bottom:1px solid rgba(232,179,60,.5);
  align-self:flex-start;
}
.gvs-facts a.gvs-fact__value:hover,
.gvs-facts a.gvs-fact__value:focus-visible{
  color:var(--gvs-gold,#E8B33C);
  border-bottom-color:var(--gvs-gold,#E8B33C);
}

.gvs-fact__sub{
  display:block;
  font-family:var(--gvs-font-body,"Inter",sans-serif);
  font-size:.875rem;font-weight:400;
  opacity:.8;
}

@media (max-width:900px){
  .gvs-facts{grid-template-columns:repeat(2,1fr)}
  .gvs-fact:nth-child(3){border-inline-start:0}
  .gvs-fact:nth-child(n+3){border-top:1px solid rgba(243,233,210,.18)}
}
@media (max-width:520px){
  .gvs-facts{grid-template-columns:1fr}
  .gvs-fact{border-inline-start:0}
  .gvs-fact + .gvs-fact{border-top:1px solid rgba(243,233,210,.18)}
}

/* ------------------------------------------------------------------- line-up */

.gvs-lu{
  max-width:var(--gvs-content-width,1200px);
  margin:var(--gvs-space-4,32px) auto 0;
  display:flex;
  flex-direction:column;
  gap:var(--gvs-space-5,40px);
}

.gvs-lu__day{margin:0}

.gvs-lu__dayh{
  font-family:var(--gvs-font-display,"Oswald",sans-serif);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.3rem,3vw,1.75rem);
  line-height:1.1;
  color:var(--gvs-petrol,#1B4A5A);
  margin:0 0 var(--gvs-space-3,24px);
  padding-bottom:10px;
  border-bottom:var(--gvs-photo-keyline,2px) solid var(--gvs-petrol,#1B4A5A);
  text-align:center;
}

/* The slot ribbon — "Outside stage 17:00-22:00", "Friday night". A centred label with a
   rule running out either side, so a second slot inside one evening reads as a divider
   rather than as a new section. */
.gvs-lu__slot{
  display:flex;align-items:center;gap:12px;
  font-family:var(--gvs-font-body,"Inter",sans-serif);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gvs-teal-text,#256A75);
  margin:0 0 var(--gvs-space-3,24px);
}
.gvs-lu__slot::before,.gvs-lu__slot::after{
  content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.3;
}
.gvs-lu__slott{color:var(--gvs-ink-soft,#5E7068);letter-spacing:.1em}

.gvs-lu__grid{
  list-style:none;margin:0 0 var(--gvs-space-4,32px);padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gvs-space-3,24px);
}
.gvs-lu__grid:last-child{margin-bottom:0}

.gvs-dj{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;
  background:var(--gvs-cream,#FAF4E6);
  border:var(--gvs-photo-keyline,2px) solid var(--gvs-petrol,#1B4A5A);
  border-radius:var(--gvs-radius,8px);
  padding:var(--gvs-space-3,24px) var(--gvs-space-2,16px);
}

/* No profile photos: the artists' own pictures are their copyright and hotlinking them
   would break. A monogram disc keeps the grid even and never 404s. */
.gvs-dj__mono{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--gvs-petrol,#1B4A5A);
  color:var(--gvs-gold,#E8B33C);
  font-family:var(--gvs-font-display,"Oswald",sans-serif);
  font-size:1.25rem;font-weight:700;letter-spacing:.06em;
  border:var(--gvs-photo-keyline,2px) solid var(--gvs-gold,#E8B33C);
}

.gvs-dj__name{
  font-family:var(--gvs-font-display,"Oswald",sans-serif);
  font-weight:700;text-transform:uppercase;line-height:1.15;
  font-size:1.0625rem;letter-spacing:.02em;
  color:var(--gvs-petrol,#1B4A5A);
  text-wrap:balance;
}

.gvs-dj__tag{
  font-family:var(--gvs-font-body,"Inter",sans-serif);
  font-size:.8125rem;line-height:1.4;
  color:var(--gvs-ink-soft,#5E7068);
  text-wrap:balance;
}

.gvs-dj__social{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:auto;padding-top:6px;
}

.gvs-lu a.gvs-dj__s{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--gvs-petrol,#1B4A5A);
  background:transparent;
  color:var(--gvs-petrol,#1B4A5A);
  font-family:var(--gvs-font-body,"Inter",sans-serif);
  font-size:.75rem;font-weight:600;line-height:1;
  text-decoration:none;
  /* 44px is the comfortable touch target; the pill is 30px of ink plus this. */
  min-height:32px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.gvs-dj__sicon{width:14px;height:14px;flex:0 0 auto}

.gvs-lu a.gvs-dj__s:hover,
.gvs-lu a.gvs-dj__s:focus-visible{color:#fff}
.gvs-lu a.gvs-dj__s--instagram:hover,
.gvs-lu a.gvs-dj__s--instagram:focus-visible{background:#C13584;border-color:#C13584}
.gvs-lu a.gvs-dj__s--soundcloud:hover,
.gvs-lu a.gvs-dj__s--soundcloud:focus-visible{background:#F50;border-color:#F50}
.gvs-lu a.gvs-dj__s--youtube:hover,
.gvs-lu a.gvs-dj__s--youtube:focus-visible{background:#C4302B;border-color:#C4302B}
.gvs-lu a.gvs-dj__s--web:hover,
.gvs-lu a.gvs-dj__s--web:focus-visible{background:var(--gvs-petrol,#1B4A5A);border-color:var(--gvs-petrol,#1B4A5A)}

.gvs-lu a.gvs-dj__s:focus-visible{outline:2px solid var(--gvs-gold,#E8B33C);outline-offset:2px}

@media (max-width:420px){
  .gvs-lu__grid{grid-template-columns:1fr}
  .gvs-lu__slot{font-size:.6875rem;letter-spacing:.12em}
}

/* ------------------------------------------------------- anchored headings */

/* #tickets is linked from the facts strip. The site header is sticky, so land the heading
   below it rather than under it. */
body.gvs-1bd-page :is(h2,h3)[id]{scroll-margin-top:96px}

/* The hero H1 now really is the H1 (see gvs-1bd-lineup.php::release_post_title), so give it
   the hero size rather than the in-flow heading size it inherited as a demoted H2. */
body.gvs-1bd-page .entry-content > h1{
  font-family:var(--gvs-font-display,"Oswald",sans-serif);
  font-size:clamp(2.1rem,7vw,3.6rem);
  line-height:1.02;
  letter-spacing:.01em;
  margin-block:.2em .1em;
  text-wrap:balance;
}

/* A quiet, centred line for the "secure payment / read the ticket terms" small print. */
.gvs-1bd-smallprint{
  max-width:64ch;margin:var(--gvs-space-3,24px) auto 0;
  font-size:.875rem;line-height:1.55;text-align:center;
  color:var(--gvs-ink-soft,#5E7068);
}

/* ------------------------------------------------- corrections found by looking */
/* Everything below was found by screenshotting the rendered page, not by reading the
   HTML — the markup was correct in every case. */

/* 1. Body copy ran the full 1280px viewport, edge to edge with no gutter.
   gvs-1bd.css sets `max-width:100%` on these paragraphs to undo the parent theme's
   680px LEFT-PINNED reading measure (see the note in that file). That removed the
   left pin, but with it the measure: centred text then stretched the whole column.
   Give it back a real measure and centre it. Same selector and specificity as the
   rule it supersedes (0,3,1); this file is loaded after gvs-1bd, so it wins. */
body.gvs-1bd-page .entry-content > .wp-block-paragraph,
body.gvs-1bd-page .is-measured .wp-block-paragraph{
  max-width:66ch;
  margin-inline:auto;
}
/* .gvs-1bd-smallprint sets its own 64ch at 0,1,0 and would lose to the rule above. */
body.gvs-1bd-page .entry-content > .gvs-1bd-smallprint{max-width:70ch}

/* 2. The "Good to know" list was unstyled and full-bleed: no gutter, markers clipped
   off the left edge of the viewport. */
body.gvs-1bd-page .entry-content > .wp-block-list{
  max-width:62ch;
  margin:var(--gvs-space-3,24px) auto;
  padding-inline-start:1.25em;
  text-align:start;
}
body.gvs-1bd-page .entry-content > .wp-block-list li{
  margin-block:.5em;
  line-height:1.55;
}
body.gvs-1bd-page .entry-content > .wp-block-list li::marker{
  color:var(--gvs-gold,#E8B33C);
}

/* 3. Two DJs in a slot stretched to two half-width cards each. auto-fit with a 1fr max
   fills the row whatever the count; cap the track so a card is a card, and centre the
   row instead of stretching it. */
.gvs-lu__grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,230px));
  justify-content:center;
}

/* 4. gvs-blog.css draws a 40x3 gold bar with `.wp-block-post-content h3::before` for
   article subheadings. The day headings are h3s inside post-content, so each one grew
   an orphan dash pinned to the far left of a centred heading. */
.gvs-lu .gvs-lu__dayh::before{content:none}

/* 5. "FRIDAY 11 SEPTEMBER 2026" broke as "FRIDAY 11 / SEPTEMBER 2026" in the ticket
   cards. Let the browser even the lines out. */
.gvs-1bd-day{text-wrap:balance}

/* ------------------------------------------- second corrective pass, also by looking */
/* Each of these was MEASURED in the browser rather than guessed at: the computed value
   and the winning rule are named in the comment. */

/* 6. The facts strip sat flush at x=0 instead of centred. Computed margin was 0px on all
   four sides — a theme `ul` reset outranks a bare `.gvs-facts` (0,1,0). */
body.gvs-1bd-page .entry-content > .gvs-facts{
  margin:var(--gvs-space-4,32px) auto var(--gvs-space-5,40px);
}

/* 7. The slot ribbon's rules stopped short of the column: the child theme caps EVERY
   bare paragraph with `p{max-width:var(--gvs-container-prose)}` = 680px, and the ribbon
   is a <p>. It never set a max-width of its own, so the 680px stood. */
.gvs-lu .gvs-lu__slot{max-width:none}

/* 8. The ticket cards' day headings are h3s, so they too collect the gvs-blog.css gold
   bar — display:block, margin 0, hanging off the left of a centred heading. Keep the
   decoration, centre it. (The line-up's own day headings drop it entirely, above.) */
.gvs-1bd-card .gvs-1bd-day::before{margin-inline:auto}

/* 9. A DJ with no accounts on file left a tall void under the name, because the social
   row was pushed to the bottom with margin-top:auto. Centre each card's content instead,
   and tighten the pills so Instagram + YouTube fit on one line at this track width. */
.gvs-lu__grid{grid-template-columns:repeat(auto-fit,minmax(200px,250px))}
.gvs-dj{justify-content:center}
.gvs-dj__social{margin-top:0;padding-top:2px}
.gvs-lu a.gvs-dj__s{padding:6px 10px;font-size:.6875rem;gap:5px}

/* 10. The WHERE value is two lines plus a city sub-line, and the link underline ran the
   full width of that block, well past the text. Swap it for an arrow affordance and
   underline only on interaction. */
.gvs-facts a.gvs-fact__value{border-bottom:0;text-decoration:none}
.gvs-facts a.gvs-fact__value::after{content:" ↗";color:var(--gvs-gold,#E8B33C);font-size:.85em}
.gvs-facts a.gvs-fact__value:hover,
.gvs-facts a.gvs-fact__value:focus-visible{
  color:var(--gvs-gold,#E8B33C);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------------------------------------------ third pass, by looking */

/* 11. Centring each card's content (fix 9) traded a void for misaligned rows: the
   monogram discs and names in one row no longer lined up, because a card with a social
   row centres differently from one without. Pin to the top instead, so every avatar and
   every name sits on the same line across the row, and let the spare space fall to the
   bottom of the shorter card, which is how a card grid is supposed to read. */
.gvs-lu__grid{align-items:stretch}
.gvs-dj{justify-content:flex-start}

/* 12. The ↗ affordance was set on the whole link, so in the WHERE cell — whose value is
   two lines plus a block-level city line — it landed alone on a fourth line. Put it after
   the last line of the value instead: the city sub-line where there is one, the link
   itself where there is not. */
.gvs-facts a.gvs-fact__value::after{content:none}
.gvs-facts a.gvs-fact__value .gvs-fact__sub::after,
.gvs-facts a.gvs-fact__value:not(:has(.gvs-fact__sub))::after{
  content:" ↗";
  color:var(--gvs-gold,#E8B33C);
  font-size:.85em;
}

/* 13. The narrow-screen rule above is declared BEFORE the 250px track cap in fix 9, so
   the cap was winning inside the media query too and phone cards sat at 250px in a 390px
   column. Restated here, after it, where it belongs: on a phone a card should fill the
   column, which also gives two social pills room to sit on one line. */
@media (max-width:440px){
  .gvs-lu__grid{grid-template-columns:1fr}
}

/* 14. Facebook, added 2026-09-06 for DJ Masaka. */
.gvs-lu a.gvs-dj__s--facebook:hover,
.gvs-lu a.gvs-dj__s--facebook:focus-visible{background:#1877F2;border-color:#1877F2}