/* =========================================================
   Boom Festival 2027 — Ticket Platform
   Implementation of the Figma file "Ticketing Platform UI
   proposta" (frames: Desktop, Desktop Menu open, mobile,
   Menu Mobile, Layer 3 > Color Palette / IU elements).

   The Figma desktop frame is 1920px wide and the mobile
   frame 1080px wide; every size below is expressed as the
   design value converted to a share of that frame width
   (e.g. 33.144px / 1920 = 1.726vw), then clamped so it
   stays usable outside the two reference widths.

   Text sizes are additionally multiplied by --type-scale,
   because the Figma's own type (32px body, 33.5px footer)
   reads as oversized on a real screen. That single variable
   is the place to adjust how large the page feels.
   ========================================================= */

@font-face {
  font-family: "Polygraph-Bold";
  src: url("../fonts/PolygraphW00Bold.woff2") format("woff2"),
       url("../fonts/PolygraphW00Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ---- Color palette (Layer 3 > "COLOR PALETTE BOOM FESTIVAL 2027") ---- */
  /* Kaleidoscope Bloom */
  --coral:          #FF9457;
  --magenta:        #FF41A8;
  --violet:         #8452E0;
  --teal:           #2BD5C5;
  --lime:           #7DD957;
  --azure:          #4C7CFF;
  /* Psychedelic Accents */
  --magenta-light:  #FF61F0;
  --pink:           #FEA9F4;
  --green:          #01D98D;
  --lime-deep:      #01D562;
  --azure-deep:     #0091EF;
  --cyan:           #35D5F5;
  /* Cosmic Indigos */
  --void:           #090716;
  --indigo:         #1A1145;
  --violet-deep:    #2F1660;
  --plum:           #4A1552;
  --orchid:         #5C1A5F;
  --teal-deep:      #123D3F;

  /* ---- Semantic tokens ---- */
  --accent:         var(--magenta);            /* #FF41A8 — buttons, active nav, icons */
  --star:           #FFFF00;                   /* navbar separators */
  --btn-bg:         rgba(0, 0, 0, .26);        /* "Button Normal" fill */
  --btn-hover:      linear-gradient(90deg, var(--magenta) 0%, var(--violet-deep) 100%);
  --page-bg:        var(--void);
  --text-white:     #FFFFFF;
  --rule:           rgba(255, 255, 255, .6);   /* 1px hairlines under nav / above footer */

  /* ---- Geometry (design px -> vw of the 1920 frame) ---- */
  --btn-radius:     clamp(8px, .671vw, 13px);  /* 12.89px */
  --panel-radius:   4.63vw;                    /* 88.89px, menu-open panel bottom corners */
  --content-max:    1273px;                    /* ticketing column */
  --header-max:     1742px;                    /* header row */

  /* ---- Type scale ----
     The Figma is drawn 1:1 for a 1920px frame, where the body copy is
     32px and the footer 33.5px. That reads as oversized on a real
     screen, so the page copy — title, subtitle, intro, menu items and
     footer — is the Figma value multiplied by this one number. Raise it
     towards 1 to get back to the mockup exactly; lower it to shrink the
     whole hierarchy at once. Two things are deliberately excluded: the
     button labels (the Figma already sets those at 14px) and the header
     date/location row (sized against the logo next to it). */
  --type-scale: .62;

  /* The Polygraph headings are the page's hero type and carry more of
     the Figma's character, so they come down less far than body copy. */
  --display-scale: .78;

  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Polygraph-Bold", "Polygraph", var(--font-body);
}

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

html{ scroll-behavior: smooth; }

/* The kaleidoscope artwork, covering the viewport once — no tiling. It
   lives on a fixed pseudo-element rather than on `body` so that `cover`
   is measured against the viewport instead of the full page height, and
   so it stays put while the page scrolls without relying on
   `background-attachment: fixed` (which iOS Safari handles poorly). */
body{
  margin: 0;
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: clamp(14px, calc(1.667vw * var(--type-scale)), calc(32px * var(--type-scale)));
  line-height: 1.4;
  background-color: var(--page-bg);
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/bg-swirl-desktop.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Figma "bg modile": the same artwork rotated 90° clockwise. */
@media (max-width: 700px){
  body::before{ background-image: url("../img/bg-swirl-mobile.webp"); }
}

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

a{ color: inherit; text-decoration: none; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Icons are the vector shapes exported from the Figma file. They are drawn
   as masks so a single asset can be pink (#FF41A8) at rest and white on
   hover, exactly like the "Button Normal" / "Button Hover" pair. */
.icon{
  display: block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.icon--spiral{
  width: clamp(18px, 1.807vw, 35px); height: clamp(18px, 1.797vw, 35px);
  -webkit-mask-image: url("../img/spiral.svg"); mask-image: url("../img/spiral.svg");
}
.icon--arrow{
  width: clamp(14px, 1.339vw, 26px); height: clamp(9px, .809vw, 16px);
  -webkit-mask-image: url("../img/arrow.svg"); mask-image: url("../img/arrow.svg");
}

/* =========================================================
   HEADER
   Figma "Desktop > Header": 1742.5 x 76.9 at y 22.7, i.e. an
   89.4px (4.656vw) gutter each side. No background in the
   closed state — the artwork shows through.
   ========================================================= */
.site-header{
  position: relative;
  z-index: 100;
  background: transparent;
}

/* Figma "Desktop Menu open > menu open bg": the purple artwork, 247.8px
   tall, square at the top and rounded 88.89px at both bottom corners.
   The visible band is rows 46–294 of the 620px-tall source, which is what
   the 12.4% vertical background-position reproduces at any width. */
.site-header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-image: url("../img/menu-background.webp");
  background-size: 100% auto;
  background-position: center 12.4%;
  background-repeat: no-repeat;
  background-color: var(--violet-deep);
  border-bottom-left-radius: var(--panel-radius);
  border-bottom-right-radius: var(--panel-radius);
  opacity: 0;
  transition: opacity .38s ease;
}
.site-header.menu-is-open::before{ opacity: 1; }

.header-bar{
  max-width: var(--header-max);
  margin: 0 auto;
  padding: clamp(12px, 1.182vw, 23px) clamp(16px, 4.656vw, 89px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-bar__side{ display: flex; align-items: center; flex: 0 0 auto; gap: 16px; }
.header-bar__side--right{ justify-content: flex-end; }

/* ---- MENU / BOOM WEBSITE buttons ----
   Figma "IU elements > Menu button normal" & "Button site normal":
   237.6 x 62.4, radius 12.89, fill #000 @ 26%, label Inter ExtraBold 14px
   with no letter-spacing, accent-coloured glyph.
   Hover ("Menu button hover" / "Button Site hover"): magenta -> deep violet
   gradient and a white glyph. */
.menu-toggle,
.header-boom-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 31px);
  min-width: clamp(132px, 12.375vw, 238px);
  min-height: clamp(40px, 3.25vw, 62px);
  padding: 0 clamp(14px, 1.66vw, 32px);
  background: var(--btn-bg);
  color: var(--accent);
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(11px, .729vw, 14px);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, color .35s ease;
}
.menu-toggle .menu-label,
.header-boom-btn{ white-space: nowrap; }
.menu-label{ color: var(--text-white); }
.header-boom-btn{ color: var(--accent); }
.header-boom-btn .btn-label{ color: var(--text-white); }

.menu-toggle:hover,
.header-boom-btn:hover{
  background: var(--btn-hover);
  color: var(--text-white);
}

/* Menu open: the spiral is replaced by a Polygraph "X" in magenta
   (Figma "Desktop Menu open > Menu"). */
.menu-toggle[aria-expanded="true"] .icon--spiral{ display: none; }
.menu-toggle[aria-expanded="true"]::before{
  content: "X";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.804vw, 35px);
  line-height: 1;
  color: var(--accent);
}
.menu-toggle[aria-expanded="true"]:hover::before{ color: var(--text-white); }

/* ---- Centre block: dates ★ full moon ★ logo ★ location ----
   Figma "Desktop > Header > date and location", Polygraph-Bold 33.144px,
   logo 201.7 x 70.3. Kept on a single line; script.js switches to the
   compact layout at the exact width where it would otherwise wrap. */
.header-center{
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  color: var(--text-white);
}
.header-center p{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* Not scaled: this row is a fixed composition in the Figma — the text
     is sized against the 70.3px logo and the 16.5px sparkles beside it,
     so shrinking it alone unbalances the header. */
  font-size: clamp(14px, 1.726vw, 33px);
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: center;
}
.header-center .header-logo{
  display: inline-flex;
  padding: 0 clamp(10px, 1.4vw, 27px);
  flex: 0 0 auto;
  /* Figma drop shadow on the "Logo" group: #000 54%, blur 18, no offset */
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, .54));
}
.boom-logo__svg{ display: block; }
.header-logo.boom-logo--header .boom-logo__svg{
  height: clamp(34px, 3.661vw, 70px);
  width: auto;
}

/* Four-pointed sparkle, #FFFF00, 16.49 x 16.49 with a 17.5px gap each side. */
.nav-star{
  flex: 0 0 auto;
  width: clamp(8px, .859vw, 17px);
  height: clamp(8px, .859vw, 17px);
  margin: 0 clamp(8px, .911vw, 18px);
  background-color: var(--star);
  -webkit-mask: url("../img/star.svg") no-repeat center / contain;
  mask: url("../img/star.svg") no-repeat center / contain;
}

/* =========================================================
   MENU NAVIGATION ALIGNMENT & CENTERED BOOMER AREA
   ========================================================= */
.site-nav {
  position: relative;
  z-index: 101;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height .38s cubic-bezier(.4,0,.2,1),
    padding-bottom .38s cubic-bezier(.4,0,.2,1),
    opacity .28s ease,
    transform .3s ease;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.site-nav.is-open {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding-bottom: clamp(20px, 2.568vw, 49px);
}

/* Use a 3-column Grid to keep "Boomer Area" dead center under the logo */
.site-nav ul {
  width: min(53.48vw, 1027px);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 1.813vw, 35px) 0 0;
  list-style: none;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  position: relative;
  border-bottom: 1px solid var(--rule);
}

/* Position each list item across the grid columns */
.site-nav ul li:nth-child(1) {
  justify-self: start !important;
  text-align: left !important;
}

.site-nav ul li:nth-child(2) {
  justify-self: center !important; /* Locks "Boomer Area" directly under the header logo */
  text-align: center !important;
}

.site-nav ul li:nth-child(3) {
  justify-self: end !important;
  text-align: right !important;
}

.site-nav a {
  display: inline-block;
  position: relative;
  padding-bottom: clamp(8px, .87vw, 17px);
  font-weight: 700;
  font-size: clamp(13px, calc(1.302vw * var(--type-scale)), calc(25px * var(--type-scale)));
  line-height: 1.2;
  color: var(--text-white);
  transition: color .2s ease;
}

.site-nav a:hover { color: var(--accent); }

.site-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 4px;
  background-color: var(--accent);
}

.site-nav .nav-item--mobile { display: none; }

/* =========================================================
   SUB-HEADER + CONTENT
   Figma "Desktop > Sub-header": title at y 266.4 (Polygraph 88.845),
   intro at +132.6 (Inter Regular 32, centred, 1273 wide),
   "Thank You fOr YOUR SuppORT" at +294 (Polygraph 47.385).
   ========================================================= */
.news-page{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(40px, 7.85vw, 151px) clamp(16px, 2vw, 38px) clamp(32px, 2.4vw, 46px);
}

.page-title{
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, calc(4.627vw * var(--display-scale)), calc(88.845px * var(--display-scale)));
  line-height: 1.2;
  letter-spacing: 0;
}

.intro-text{
  max-width: var(--content-max);
  margin: clamp(14px, 1.385vw, 27px) auto 0;
  padding: 0;
  text-align: center;
  color: var(--text-white);
}
.intro-text p{ margin: 0; }

.page-subtitle{
  margin: clamp(16px, 2.2vw, 42px) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, calc(2.468vw * var(--display-scale)), calc(47.385px * var(--display-scale)));
  line-height: 1.2;
}

/* Ticketing column — the Weezevent widget sits where the Figma shows the
   tabs, filters and ticket cards (1273px wide, starting at y 664). */
.capsule{
  border: none;
  background: transparent;
  margin-top: clamp(24px, 2.427vw, 47px);
}
.capsule--full{ width: 100%; }
.capsule-inner{ padding: 0; display: flex; align-items: stretch; }

.widget-placeholder{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  background: transparent;
  color: var(--text-white);
  padding: 0;
  min-height: 340px;
}
.weezevent-wrapper{
  width: 100%;
  max-width: 100%;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}
/* weez.js injects an iframe with an inline width taken from data-width. */
.weezevent-wrapper iframe{
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   FOOTER
   Figma "Desktop > footer": 1292.6 wide, a 1px white rule on top, then
   Inter Bold 33.466 — copyright left, links right. No coloured bar.
   ========================================================= */
.site-footer{
  background: transparent;
  padding: 0 clamp(16px, 2vw, 38px) clamp(24px, 2.41vw, 46px);
}
.footer-bar{
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: clamp(14px, 1.964vw, 38px);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  font-size: clamp(14px, calc(1.743vw * var(--type-scale)), calc(33.466px * var(--type-scale)));
  line-height: 1.2;
  color: var(--text-white);
}
.footer-bar__copyright{ margin: 0; }
.footer-bar__links{ display: flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.footer-bar__links a{ transition: color .2s ease; }
.footer-bar__links a:hover{ color: var(--accent); }

/* =========================================================
   COMPACT / MOBILE
   Figma "mobile" (1080 frame): logo top-left, icon-only menu button
   top-right, no date or location. script.js adds .is-compact-nav as soon
   as the centre block stops fitting on one line.
   ========================================================= */
.site-header.is-compact-nav .header-bar{
  padding: clamp(10px, 6.1vw, 40px) clamp(12px, 5.8vw, 38px);
  flex-wrap: nowrap;
}
.site-header.is-compact-nav .header-bar__side--left{ order: 2; }
.site-header.is-compact-nav .header-bar__side--right{ display: none; }
.site-header.is-compact-nav .header-center{
  order: 1;
  flex: 0 1 auto;
  justify-content: flex-start;
}
.site-header.is-compact-nav .header-center p,
.site-header.is-compact-nav .header-center .nav-star{ display: none; }
.site-header.is-compact-nav .header-logo{ padding: 0; }
/* The compact layout uses the wider lockup from Figma
   "Mobile Menu Header > Logo" — the mark plus the dates, the
   anniversary line and the location, 591.9 x 148.5 in the 1080 frame —
   in place of the plain mark, whether the menu is open or closed.
   Both selectors carry the same specificity as the desktop rule above
   and come after it, so they win without !important. */
.boom-logo__svg--menu{ display: none; }
.site-header.is-compact-nav .header-logo.boom-logo--header .boom-logo__svg--header{
  display: none;
}
.site-header.is-compact-nav .header-logo.boom-logo--header .boom-logo__svg--menu{
  display: block;
  height: clamp(34px, 13.75vw, 66px);           /* 148.5 / 1080 */
}

/* "Menu Button mobile normal": 162.1 x 125.4, icon only, same radius. */
.site-header.is-compact-nav .menu-toggle{
  min-width: clamp(54px, 15vw, 81px);
  min-height: clamp(42px, 11.6vw, 63px);
  padding: 0;
  gap: 0;
}
.site-header.is-compact-nav .menu-toggle .menu-label{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.site-header.is-compact-nav .menu-toggle .icon--spiral{
  width: clamp(26px, 6.45vw, 35px);
  height: clamp(26px, 6.43vw, 35px);
}
.site-header.is-compact-nav .menu-toggle[aria-expanded="true"]::before{
  font-size: clamp(28px, 6.07vw, 33px);
}

/* Figma "Menu Mobile": a panel that slides in from the left (designer
   note: "Suggestion: slide from left"), purple artwork, six links
   stacked. The header logo and the close button stay on top of it.
   Departure from the Figma: the panel spans the full width rather than
   the frame's 93.6%. Only the bottom-right corner is rounded, as in the
   frame — radius 190.4px (17.6vw of the 1080 frame). */
.site-header.is-compact-nav .site-nav{
  position: fixed;
  top: 0; left: 0;
  z-index: 99;
  width: 100%;
  max-height: none;
  height: auto;
  min-height: min(122.3vw, 86vh);
  padding: clamp(96px, 43.6vw, 300px) 0 clamp(40px, 8vw, 70px);
  overflow-y: auto;
  border-bottom-right-radius: 17.6vw;
  background-image: url("../img/menu-background.webp");
  background-size: cover;
  background-position: center;
  background-color: var(--violet-deep);
  box-shadow: 0 0 0 1px #4401A5;
  transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.site-header.is-compact-nav .site-nav.is-open{
  transform: translateX(0);
  padding-bottom: clamp(40px, 8vw, 70px);
}
.site-header.is-compact-nav .site-nav ul{
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 3.2vw, 18px);
  padding: 0 clamp(20px, 7.3vw, 60px);
  border-bottom: 0;
}
/* Inter Bold, not the Polygraph display face: the labels are outlined
   vectors in the Figma, but their stem-to-cap ratio (0.157) and shapes
   are Inter Bold — the same face as the desktop menu row.
   The Figma's own ratio is 5.36vw of the 1080 frame (~21px on a phone),
   but this panel also serves narrow desktop windows up to ~880px, where
   that rate overshoots badly — hence the lower rate and the 20px cap. */
.site-header.is-compact-nav .site-nav a{
  padding-bottom: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1.2;
}
/* The Figma's mobile menu has no active-item underline. */
.site-header.is-compact-nav .site-nav a.active::after{ display: none; }
.site-header.is-compact-nav .site-nav .nav-item--mobile{ display: block; }

/* The compact header must paint above the sliding panel. */
.site-header.is-compact-nav .header-bar{ position: relative; z-index: 100; }
.site-header.is-compact-nav.menu-is-open::before{ opacity: 0; }

/* Safety net when JavaScript is unavailable — script.js adds .js to <html>,
   so this never competes with the measured .is-compact-nav switch above. */
@media (max-width: 700px){
  html:not(.js) .header-bar{ padding: 18px 16px; flex-wrap: nowrap; }
  html:not(.js) .header-bar__side--left{ order: 2; }
  html:not(.js) .header-bar__side--right{ display: none; }
  html:not(.js) .header-center{ order: 1; flex: 0 1 auto; justify-content: flex-start; }
  html:not(.js) .header-center p,
  html:not(.js) .header-center .nav-star{ display: none; }
  html:not(.js) .header-logo.boom-logo--header .boom-logo__svg{ height: 44px; }
  html:not(.js) .site-nav ul{ flex-direction: column; align-items: center; }
}

/* ---- Mobile type scale (Figma "mobile", 1080 frame) ----
   The headings are taken straight from the frame (88.845 and 47.385 of
   1080 = 8.23vw and 4.388vw). The body, menu and footer sizes in that
   frame are the desktop text nodes reused unscaled — at phone widths they
   would land around 10px — so those keep a legible size instead. */
@media (max-width: 700px){
  /* Unscaled: at phone widths the Figma's own ratios (88.845 and 47.385
     of the 1080 frame) already land at a sensible 32px / 17px. The caps
     match the desktop branch's minimums so nothing jumps at 700px. */
  body{ font-size: clamp(14px, 3.7vw, 15px); }
  .page-title{ font-size: clamp(30px, 10.5vw, 48px); }
  .page-subtitle{ font-size: clamp(18px, 5.6vw, 26px); }

  /* The ticketing widget runs edge to edge: the negative margins cancel
     the 18px gutter .news-page keeps for the copy above it. */
  .capsule--full{
    width: auto;
    margin-left: -18px;
    margin-right: -18px;
  }
  .weezevent-wrapper{ border-radius: 0; }
  .news-page{ padding: clamp(28px, 11vw, 80px) 18px clamp(24px, 6vw, 40px); }
  .footer-bar{ font-size: clamp(11px, 2.9vw, 14px); }
}
@media (max-width: 480px){
  .footer-bar{ flex-direction: column; align-items: center; text-align: center; gap: 10px; }
}

#qc-cmp2-persistent-link {
    background: #ff41a8;
}