/* ============================================================
   Brands Untapped Awards
   ============================================================ */

/* Defaults only. data/theme.json overrides these via the <style id="bu-theme">
   block that index.php prints after this file — edit the design in the site's
   own Design panel rather than changing the values here. */
:root{
  --navy:      #010938;
  --navy-deep: #000722;
  --lime:      #d6de23;
  --charcoal:  #383838;
  --off-white: #fbfbfb;
  --white:     #ffffff;

  --font-heading: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --base-size:     17px;
  --heading-scale: 1;

  --wrap:        1240px;
  --measure:     940px;   /* inner column for text-led sections */
  --section-pad: 100px;
  --radius:      0px;
  --about-measure: 49rem;   /* shared right edge for the About lead + body */
  --pad:         32px;
}

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

/* A class that sets `display` would otherwise beat the browser's default
   [hidden] rule and show elements we've explicitly hidden. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:1.7;
  color:var(--white);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
}

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

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.lime{ color:var(--lime); }
.navy{ color:var(--navy); }
.white{ color:var(--white); }

/* Everything set in the display face */
.logo, .hero-title, .section-title, .section-sub, .about-lead p,
.joinus blockquote, .cat-group-title, .cat-card h4, .partner span,
.partner-logo, .tickets-kicker, .footer-brand{
  font-family:var(--font-heading);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  border-radius:var(--radius);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:17px 36px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-lime{ background:var(--lime); color:var(--navy); }
.btn-lime:hover{ background:var(--white); }

.btn-ghost{ background:transparent; color:var(--white); border-color:var(--white); }
.btn-ghost:hover{ background:var(--white); color:var(--lime); }

.btn-solid-white{
  background:var(--white); color:var(--lime);
  border-color:var(--white); width:100%; font-family:inherit;
}
.btn-solid-white:hover{ background:transparent; color:var(--white); }

/* ---------- Section headings ---------- */
.section-title{
  font-size:calc(clamp(36px, 4.6vw, 60px) * var(--heading-scale));
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 26px;
  text-align:center;
}
.section-title.left{ text-align:left; }

.section-sub{
  max-width:720px;
  margin:0 auto 60px;
  text-align:center;
  font-weight:700;
  font-size:18px;
  line-height:1.6;
}

.rule{
  border:0;
  border-top:1px solid rgba(1,9,56,.25);
  max-width:var(--measure);
  margin:0 auto 60px;
}
.rule.light{ border-top-color:rgba(255,255,255,.55); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--navy);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:76px;
}

/* stacked wordmark logo */
.logo{
  text-decoration:none;
  color:var(--lime);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  display:flex;
  flex-direction:column;
  padding:10px 0;
  flex:none;
}
.logo span{ display:block; font-size:14px; }
/* A definite width matters: this is a shrink-to-fit flex item, and an image
   with width:auto inside one collapses to nothing. */
.logo-img{ display:block; width:112px; height:auto; }
@media (max-width: 700px){
  .logo-img{ width:92px; }
}

.nav ul{
  list-style:none;
  display:flex;
  gap:46px;
  margin:0; padding:0;
}
.nav a{
  text-decoration:none;
  color:var(--white);
  font-size:15px;
  font-weight:500;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav a:hover{ color:var(--lime); }
.nav a.active{ border-bottom-color:var(--lime); }

.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  padding:10px; gap:5px; flex-direction:column;
  align-items:center; justify-content:center;
  min-width:44px; min-height:44px;   /* accessible tap target */
}
.nav-toggle span{
  display:block; width:26px; height:2px; background:var(--lime);
  transition:transform .25s ease, opacity .2s ease;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:var(--charcoal);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  /* Venue photograph, with a gradient over it so the white hero text stays
     legible against the stage lights. Two sizes: the small one saves ~110KB
     on phones, which is where most of this audience will see the site. */
  background-image:
    linear-gradient(100deg, rgba(1,9,56,.88) 0%, rgba(1,9,56,.66) 48%, rgba(1,9,56,.42) 100%),
    url('../assets/uploads/hero.jpg');
  background-size:cover;
  background-position:center 34%;
  background-repeat:no-repeat;
}
@media (max-width: 768px){
  .hero-media{
    background-image:
      linear-gradient(170deg, rgba(1,9,56,.80) 0%, rgba(1,9,56,.74) 55%, rgba(1,9,56,.86) 100%),
      url('../assets/uploads/hero-mobile.jpg');
    background-position:center 30%;
  }
}
.hero-inner{
  position:relative;
  padding-block:calc(var(--section-pad) * 1.3) calc(var(--section-pad) * 1.2);
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-title{
  font-size:calc(clamp(34px, 6.5vw, 76px) * var(--heading-scale));
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0 0 60px;
}
.hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  font-size:16px;
  font-weight:500;
}
.hero-meta-item{
  padding:8px 34px 8px 0;
  border-right:1px solid rgba(255,255,255,.4);
  margin-right:34px;
}
.hero-meta .btn{ margin-left:8px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  background:var(--navy);
  padding-block:var(--section-pad) calc(var(--section-pad) * 1.1);
}
.about .section-title{ margin-bottom:52px; }

.about-grid{
  max-width:var(--measure);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:26px 60px;
  align-items:start;
}
.about-lead{ grid-column:1; grid-row:1; }
.about-lead p{
  margin:0;
  color:var(--lime);
  font-weight:700;
  font-size:22px;
  line-height:1.45;
  /* No cap: the lead runs the full width of its column, up to the divider. */
  max-width:none;
}
.about-when{
  grid-column:2; grid-row:1;
  display:flex;
  align-items:flex-start;
  font-size:16px;
  font-weight:500;
  padding-top:6px;
}
.when-item{
  padding-inline:30px;
  border-left:1px solid rgba(255,255,255,.4);
  white-space:nowrap;
}
.when-item:first-child{ padding-left:30px; }

.about-body{
  grid-column:1 / -1;
  grid-row:2;
  margin-top:22px;
}

/* Rule under the section heading, matching the grid's width. */
.about-rule{
  max-width:var(--measure);
  margin:0 auto 30px;
  border:0;
  border-top:1px solid rgba(255,255,255,.4);
}
.about-para{ margin:0 0 22px; }
.about-para:last-child{ margin-bottom:0; }
.about-body p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  max-width:78ch;
}
.about-body a{ color:var(--white); }
.about-body a:hover{ color:var(--lime); }

/* ============================================================
   JOIN US
   ============================================================ */
.joinus{
  position:relative;
  overflow:hidden;
  background:var(--navy);   /* shown until the photograph loads */
}
/* Champagne reception photograph. The overlay is the brand navy rather than
   plain black, and is heaviest on the left where the quote sits. Set by
   measuring the composited contrast across the whole area the quote covers:
   at these values 95% of it sits at 4.5:1 or better and the very worst pixel
   is 3.0:1 — which the quote still clears, being 21px bold and so "large
   text" under WCAG, where the threshold is 3:1. Going lighter fails. */
.joinus-bg{
  position:absolute; inset:0;
  background-image:url('../assets/uploads/joinus.jpg');
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
}
@media (max-width: 768px){
  .joinus-bg{ background-image:url('../assets/uploads/joinus-mobile.jpg'); }
}
.joinus-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(1,9,56,.56) 0%,
    rgba(1,9,56,.44) 42%,
    rgba(1,9,56,.20) 100%);
}
.joinus-inner{
  position:relative;
  padding-block:calc(var(--section-pad) * 1.1) calc(var(--section-pad) * 1.2);
}
.joinus .section-title{ margin-bottom:36px; }
.joinus blockquote{
  margin:0 0 26px;
  max-width:60ch;
  font-weight:700;
  font-size:21px;
  line-height:1.6;
}
.quote-attr{
  margin:0;
  font-size:16px;
  font-weight:500;
}

/* ============================================================
   AWARDS CATEGORIES
   ============================================================ */
.categories{
  background:var(--navy);
  padding-block:var(--section-pad) calc(var(--section-pad) * 1.16);
}
.cat-groups{
  display:flex;
  flex-direction:column;
  gap:48px;
}
.cat-group-title{
  margin:0 0 18px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.cat-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.cat-card{
  background:var(--off-white);
  border-radius:var(--radius);
  color:#4a4a4a;
  padding:34px 28px 40px;
  min-height:200px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.3);
}
.cat-card h4{
  margin:0 0 16px;
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  color:#2b2b2b;
}
.cat-card p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:#8a8a8a;
}

.cat-sponsor{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #e6e6e6;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.cat-sponsor-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9a9a9a;
}
/* The logo sits in a box with a definite width. Without one, an auto-width
   image inside a shrink-to-fit parent has nothing to resolve against and
   collapses to zero — which hides the logo completely. */
.cat-sponsor-mark{
  width:100%;
  max-width:260px;
}
.cat-sponsor-mark a{ display:block; }
.cat-sponsor-mark img{
  display:block;
  width:auto;
  height:auto;
  max-height:96px;
  max-width:100%;
  object-fit:contain;
}
.cat-sponsor-name{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:800;
  color:var(--navy);
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{
  background:var(--off-white);
  color:var(--navy);
  padding-block:var(--section-pad) calc(var(--section-pad) * 1.06);
  text-align:center;
}
.partner-grid{
  /* Full content width, not the narrower text measure — the logos need it. */
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:64px 48px;
  align-items:center;
  justify-items:center;
}
.partner span{
  font-size:40px;
  font-weight:800;
  letter-spacing:.02em;
  color:#c9c9d4;
  user-select:none;
}
.partner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
}
.partner img{
  display:block;
  width:auto;
  height:auto;
  max-height:150px;
  max-width:100%;
  margin-inline:auto;
  object-fit:contain;
  border-radius:var(--radius);
}
.partner-logo{
  display:inline-flex;
  flex-direction:column;
  color:var(--lime);
  font-weight:800;
  line-height:1.03;
  font-size:34px;
  letter-spacing:-.015em;
  text-align:left;
}

/* ============================================================
   TICKETS
   ============================================================ */
.tickets{
  background:var(--lime);
  color:var(--white);
  padding-block:var(--section-pad) calc(var(--section-pad) * 1.16);
}

.tickets-grid{
  max-width:var(--measure);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.tickets-kicker{
  margin:0 0 34px;
  font-weight:700;
  font-size:24px;
  line-height:1.4;
  max-width:16ch;
}
.subscribe-label{
  margin:0 0 18px;
  font-size:15px;
  font-weight:500;
}
.subscribe input[type=email]{
  width:100%;
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:14px;
  border:1px solid var(--white);
  background:var(--white);
  color:#333;
  font-family:inherit;
  font-size:16px;
}
.subscribe input::placeholder{ color:#a8a8a8; }
.subscribe input:focus{ outline:2px solid var(--navy); outline-offset:1px; }

.form-msg{
  margin:14px 0 0;
  font-size:14px;
  font-weight:500;
  min-height:20px;
}
.form-msg.error{ color:var(--navy); font-weight:700; }

/* ============================================================
   MAP
   ============================================================ */
.map{ line-height:0; background:#e5e3df; }
.map iframe{ display:block; width:100%; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--navy);
  /* Set explicitly, not inherited: this footer is shared with the booking and
     confirmation pages, whose body colour is dark grey for a light background.
     Without this the footer text came out grey on navy. */
  color:var(--white);
  padding-block:72px 46px;
  font-size:15px;
  line-height:1.9;
}
.site-footer a{ color:inherit; }
.site-footer a:hover{ color:var(--lime); }
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1.4fr 1fr 1fr;
  gap:40px;
  align-items:start;
  margin-bottom:46px;
}
.footer-brand{
  font-size:30px;
  font-weight:800;
  line-height:1.1;
}
/* Definite width again — a grid item is shrink-to-fit, and an image with
   width:auto inside one collapses to nothing. */
.footer-logo{ display:block; }
.footer-logo img{ display:block; width:180px; max-width:100%; height:auto; }
.footer-col{ font-style:normal; }
.footer-social{
  display:flex;
  gap:6px;
  align-items:center;
  margin-left:-11px;   /* pulls the padded first icon back into line */
}
.footer-social-item{ display:inline-flex; }
/* The icon stays 22px; the tap area is 44px, the accessible minimum. */
.footer-social a{
  color:var(--white);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  transition:color .2s ease;
}
.footer-social a:hover{ color:var(--lime); }
.footer-social svg{ width:22px; height:22px; }

.footer-rule{
  max-width:none;
  border-top-color:rgba(255,255,255,.35);
  margin-bottom:24px;
}
.copyright{ margin:0; font-size:13px; }
.copyright a{ text-decoration:underline; }
.copyright a:hover{ color:var(--lime); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .cat-row{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  :root{ --pad:24px; }

  .nav-toggle{ display:flex; }

  .nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,.12);
    display:none;
  }
  .nav.open{ display:block; }
  .nav ul{
    flex-direction:column;
    gap:0;
    padding:10px var(--pad) 22px;
  }
  .nav a{
    display:block;
    padding:14px 0;
    font-size:17px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav a.active{ border-bottom-color:var(--lime); }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-inner{ padding-block:88px 80px; min-height:0; }
  .hero-title{ margin-bottom:44px; }
  .hero-meta{ gap:16px; }
  .hero-meta-item{
    border-right:0; margin-right:0; padding-right:0;
    flex-basis:100%;
  }
  .hero-meta .btn{ margin-left:0; }

  .about, .categories, .partners, .tickets{ padding-block:72px 82px; }
  .joinus-inner{ padding-block:80px 88px; }

  .about-grid{ grid-template-columns:1fr; gap:20px; }
  /* grid-row is set explicitly on desktop so the lead can span full width;
     reset it here so the stacked order follows the markup as before. */
  .about-lead, .about-when, .about-body{ grid-column:1; grid-row:auto; }
  .about-when{ padding-top:0; }
  .about-lead p{ max-width:none; }

  .partner-grid{ grid-template-columns:repeat(2, 1fr); gap:44px 32px; }
  .partner img{ max-height:130px; }

  .tickets-grid{ grid-template-columns:1fr; gap:44px; }
  .tickets-kicker{ max-width:none; }

  .map iframe{ height:400px; }

  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

@media (max-width:520px){
  .cat-row{ grid-template-columns:1fr; }
  .cat-card{ min-height:0; }
  /* One column on phones, so the logos can use the full card width. */
  .partner-grid{ grid-template-columns:1fr; gap:40px; }
  .partner img{ max-height:140px; }
  .cat-sponsor-mark{ max-width:100%; }
  .cat-sponsor-mark img{ max-height:110px; }
  .when-item{ padding-inline:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}


/* ---------- Winner button + pop-up ---------- */
/* The gap above the button matches the card's bottom padding, so the button
   sits evenly between the text above it and the edge below it. */
.cat-card.has-winner{ padding-bottom:24px; }
.cat-winner-btn{
  display:inline-block;
  margin-top:24px;
  padding:10px 18px;
  border:1.5px solid var(--navy);
  border-radius:var(--radius);
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-heading);
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.cat-winner-btn:hover,
.cat-winner-btn:focus-visible{
  background:color-mix(in srgb, var(--navy) 78%, #ffffff);
  border-color:color-mix(in srgb, var(--navy) 78%, #ffffff);
}

/* Editor-only: a winner that hasn't been announced yet. */
.cat-winner-btn.is-draft{
  background:transparent;
  color:#8a8a8a;
  border-style:dashed;
  border-color:#c4c4c4;
}
.cat-winner-btn.is-draft:hover{ background:#efefef; border-color:#a8a8a8; }

.winner-modal{
  width:min(520px, calc(100vw - 32px));
  padding:32px 28px 30px;
  border:0;
  border-radius:var(--radius);
  background:#fff;
  color:var(--navy);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.winner-modal::backdrop{ background:rgba(8,14,44,.72); }
/* Fallback for browsers without <dialog> */
.winner-modal.is-fallback{
  position:fixed; inset:auto; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:200; display:block;
}

.winner-modal-close{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border:0; background:transparent;
  color:#8a90a8; font-size:26px; line-height:1;
  cursor:pointer; border-radius:50%;
}
.winner-modal-close:hover{ background:#f2f4f9; color:var(--navy); }

.winner-kicker{
  margin:0 0 6px;
  font-family:var(--font-heading);
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#8a90a8;
}
.winner-modal h3{
  font-family:var(--font-heading);
  margin:0 0 18px; font-size:20px; line-height:1.3; color:var(--navy);
}
.nominee-list{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:1fr; gap:6px;
}
.nominee-list li{
  position:relative;
  padding:9px 12px 9px 26px;
  border-radius:var(--radius);
  font-size:15px; line-height:1.5; color:#2b2b2b;
}
.nominee-list li::before{
  content:''; position:absolute; left:11px; top:1.05em;
  width:6px; height:6px; border-radius:50%; background:var(--lime);
}
.nominee-list li strong{ color:#1d1d1d; }

/* The announced winner: same row, lifted out in the accent colour. */
.nominee-list li.is-winner{
  background:var(--lime);
  color:var(--navy);
  font-weight:700;
  padding-top:11px; padding-bottom:11px;
}
.nominee-list li.is-winner::before{ background:var(--navy); }
.nominee-list li.is-winner strong{ color:var(--navy); }
/* ==accent== markup is lime — invisible on the lime winner row, so flip it. */
.nominee-list li.is-winner .lime{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:rgba(1,9,56,.45);
  text-underline-offset:3px;
}
.winner-badge{
  display:inline-block; margin-left:8px; padding:2px 8px; vertical-align:1px;
  border-radius:999px; background:var(--navy); color:var(--lime);
  font-family:var(--font-heading); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}
.winner-citation{
  display:block; margin-top:6px;
  font-size:14px; font-weight:400; line-height:1.6; color:var(--navy);
}
.winner-extra{ margin:12px 0 0; font-size:16px; font-weight:700; color:var(--navy); }
.winner-pending{ margin:16px 0 0; font-size:14px; line-height:1.6; color:#525a70; }

@media (max-width: 600px){
  .winner-modal{ padding:28px 20px 24px; }
}
/* A long list gets two columns where there is room */
@media (min-width: 560px){
  .winner-modal{ width:min(640px, calc(100vw - 32px)); }
  .nominee-list.is-long{ grid-template-columns:1fr 1fr; }
  .nominee-list.is-long li.is-winner{ grid-column:1 / -1; }
}