/* UK Line Dance Awards — Professional, modern theme */

:root{

  --bg: #0b0f14;

  --panel: rgba(255,255,255,0.06);

  --panel2: rgba(255,255,255,0.04);

  --text: #e8edf5;

  --muted: rgba(232,237,245,0.72);

  --line: rgba(232,237,245,0.14);

  --accent: #c7a24a; /* warm gold */

  --accent2: #9bb7ff; /* cool highlight */

  --shadow: 0 18px 50px rgba(0,0,0,0.55);

  --radius: 18px;

  --max: 1120px;

}



*{box-sizing:border-box}

html,body{height:100%}



body {

  margin: 0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:

    radial-gradient(

      1200px 600px at 50% -200px,

      rgba(255, 200, 90, 0.08),

      transparent 60%

    ),

    linear-gradient(

      to bottom,

      #0b0f14 0%,

      #0c1219 50%,

      #0a0e13 100%

    );

  color: #e6ebf2;

}



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

a:hover{color:var(--text); text-decoration:underline; text-decoration-color: rgba(199,162,74,0.65); text-underline-offset: 4px;}



.container{max-width:var(--max); margin:0 auto; padding:0 20px}



.topbar{

  position:sticky; top:0; z-index:1000;

  /* Solid header so it never blends into the hero artwork */

  background: #0b0f14;

  border-bottom: 1px solid rgba(232,237,245,0.16);

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

}



.nav{

  display:flex; align-items:center; justify-content:space-between;

  padding:14px 0;

  gap:18px;

}



.brand{display:flex; align-items:center; gap:14px; min-width: 240px;}



/* ✅ Logo safety: prevent any accidental blending/filtering */

.brand img{

  height:44px;

  width:auto;

  display:block;

  filter: none !important;

  mix-blend-mode: normal !important;

  opacity: 1 !important;

}



.brand .title{display:flex; flex-direction:column; line-height:1.05}

.brand .title strong{letter-spacing:0.02em}

.brand .title span{font-size:12px; color:var(--muted)}



.menu{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

.menu a{

  padding:10px 12px;

  border-radius:999px;

  color:var(--muted);

  border:1px solid transparent;

}

.menu a[aria-current="page"]{

  color:var(--text);

  background: rgba(255,255,255,0.06);

  border-color: rgba(199,162,74,0.25);

}

.menu a:hover{color:var(--text); background: rgba(255,255,255,0.05); text-decoration:none}



/* ===== Mobile nav (burger) ===== */

.nav-toggle{

  display:none;

  width:44px; height:44px;

  border-radius: 14px;

  border: 1px solid rgba(232,237,245,0.14);

  background: rgba(255,255,255,0.04);

  color: var(--text);

  cursor: pointer;

}

.nav-toggle:hover{ background: rgba(255,255,255,0.06); }



.nav-toggle-bars{

  display:block;

  width:18px;

  height:2px;

  background: rgba(232,237,245,0.9);

  position: relative;

  margin: 0 auto;

  border-radius: 2px;

}

.nav-toggle-bars::before,

.nav-toggle-bars::after{

  content:"";

  position:absolute;

  left:0;

  width:18px;

  height:2px;

  background: rgba(232,237,245,0.9);

  border-radius: 2px;

}

.nav-toggle-bars::before{ top:-6px; }

.nav-toggle-bars::after{ top:6px; }



.hero{

  position:relative;

  isolation:isolate; /* keeps hero overlays from affecting header click/stacking */

  overflow:hidden;

  border-bottom: 1px solid var(--line);

}

.hero::before{

  content:"";

  position:absolute; inset:0;

  background: url("../img/hero-bg.svg") center/cover no-repeat;

  opacity: 1;

  transform: scale(1.02);

  pointer-events:none;

  z-index:0;

}

.hero::after{

  content:"";

  position:absolute; inset:0;

  background: linear-gradient(180deg, rgba(11,15,20,0.25), rgba(11,15,20,0.88));

  pointer-events:none;

  z-index:0;

}

.hero-inner{

  position:relative;

  z-index:1;

  padding: 56px 0 44px;

}

.hero-grid{

  display:grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 26px;

  align-items:end;

}

.kicker{

  color: rgba(199,162,74,0.92);

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 12px;

}

h1{

  margin: 10px 0 10px;

  font-size: clamp(32px, 4.5vw, 54px);

  line-height: 1.05;

  letter-spacing: -0.02em;

}

.lede{color:var(--muted); font-size: 16px; max-width: 62ch}



.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.btn{

  display:inline-flex; align-items:center; gap:10px;

  padding: 12px 16px;

  border-radius: 999px;

  border: 1px solid rgba(232,237,245,0.22);

  background: rgba(255,255,255,0.08);

  color:var(--text);

  text-decoration:none;

  box-shadow: 0 12px 30px rgba(0,0,0,0.35);

}

.btn:hover{background: rgba(255,255,255,0.08); text-decoration:none}

.btn.primary{

  background: linear-gradient(135deg, rgba(199,162,74,0.92), rgba(199,162,74,0.58));

  border-color: rgba(199,162,74,0.35);

  color: #0b0f14;

  font-weight: 650;

}

.btn.primary:hover{filter: brightness(1.03)}

.btn.ghost{

  border-color: rgba(199,162,74,0.28);

}

.hero-card{

  background: rgba(11,15,20,0.48);

  border: 1px solid rgba(232,237,245,0.14);

  border-radius: var(--radius);

  padding: 16px 16px 14px;

  box-shadow: var(--shadow);

}

.hero-card h3{margin:0 0 8px; font-size:14px; color: rgba(232,237,245,0.88); letter-spacing:0.04em; text-transform:uppercase}

.hero-card ul{margin:0; padding:0 0 0 18px; color:var(--muted)}

.hero-card li{margin:6px 0}



.section{padding: 44px 0}

.section h2{margin:0 0 14px; font-size: 26px; letter-spacing: -0.01em}

.section p{color:var(--muted); margin:0}



.grid-3{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

  margin-top: 18px;

}

.card{

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));

  border: 1px solid rgba(232,237,245,0.14);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: 0 16px 40px rgba(0,0,0,0.45);

}

.card h3{margin:0 0 10px; font-size: 16px}

.card p{margin:0; color:var(--muted)}

.card .meta{margin-top:12px; color: rgba(232,237,245,0.64); font-size: 13px}



.card-media{

  margin: -6px -6px 14px;

  border-radius: calc(var(--radius) - 2px);

  overflow: hidden;

  border: 1px solid rgba(232,237,245,0.10);

  background: rgba(0,0,0,0.25);

}

.card-media img{

  display:block;

  width:100%;

  height:140px;

  object-fit:cover;

}



.full-bleed{

  margin-top: 22px;

  border-radius: calc(var(--radius) + 6px);

  border: 1px solid rgba(232,237,245,0.14);

  overflow:hidden;

  background: rgba(255,255,255,0.03);

}

.gallery-head{

  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;

  padding: 20px 20px 14px;

}

.gallery-head p{max-width: 68ch}

.gallery{

  display:grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 10px;

  padding: 0 20px 20px;

}

.tile{

  position:relative;

  border-radius: 14px;

  overflow:hidden;

  border: 1px solid rgba(232,237,245,0.10);

  background: rgba(0,0,0,0.2);

  cursor:pointer;

}

.tile img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform .2s ease}

.tile:hover img{transform: scale(1.06)}

.tile span{

  position:absolute; left:10px; bottom:10px;

  padding:6px 10px;

  border-radius:999px;

  font-size:12px;

  background: rgba(11,15,20,0.7);

  border: 1px solid rgba(199,162,74,0.25);

  color: rgba(232,237,245,0.88);

}



.tile.wide{grid-column: span 6}

.tile.tall{grid-column: span 3; grid-row: span 2}

.tile.square{grid-column: span 3}



.subgrid{

  display:grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 14px;

  margin-top: 18px;

  align-items:start;

}

.list{

  display:flex; flex-direction:column; gap:10px;

}

.pill{

  display:flex; gap:10px; align-items:flex-start;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(232,237,245,0.12);

  background: rgba(255,255,255,0.03);

}

.pill small{display:block; color: rgba(232,237,245,0.62)}

.pill strong{display:block}



.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px}

.iconbtn{

  width:42px; height:42px;

  display:inline-flex; align-items:center; justify-content:center;

  border-radius: 14px;

  border: 1px solid rgba(232,237,245,0.14);

  background: rgba(255,255,255,0.04);

}

.iconbtn:hover{background: rgba(255,255,255,0.06)}

.iconbtn svg{width:20px; height:20px; color: rgba(232,237,245,0.9)}



.news-ticker{

  display:flex; gap:10px; flex-direction:column;

}

.news-item{

  display:flex; align-items:center; justify-content:space-between; gap:14px;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid rgba(232,237,245,0.12);

  background: rgba(255,255,255,0.03);

  white-space:nowrap;

  overflow:hidden;

}

.news-item .title{

  overflow:hidden; text-overflow: ellipsis;

  color: rgba(232,237,245,0.92);

}

.news-item time{color: rgba(232,237,245,0.58); font-size: 12px; flex: 0 0 auto}



.footer{

  margin-top: 46px;

  border-top: 1px solid rgba(232,237,245,0.14);

  background: rgba(0,0,0,0.22);

}

.footer-inner{

  padding: 18px 0;

  display:flex; align-items:center; justify-content:space-between;

  gap: 14px;

  flex-wrap:wrap;

}

.footer small{color: rgba(232,237,245,0.62)}

.footer a{color: rgba(232,237,245,0.72)}

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



.page{

  padding: 28px 0 52px;

}

.prose{

  max-width: 78ch;

}

.prose h2{margin-top: 22px}

.prose ul{color: var(--muted)}

.prose li{margin: 8px 0}

.notice{

  border: 1px dashed rgba(199,162,74,0.35);

  background: rgba(199,162,74,0.07);

  color: rgba(232,237,245,0.84);

  border-radius: 16px;

  padding: 12px 14px;

  margin-top: 14px;

}



.lightbox{

  position:fixed; inset:0;

  background: rgba(0,0,0,0.85);

  display:none;

  align-items:center;

  justify-content:center;

  padding: 18px;

  z-index: 999;

}

.lightbox.open{display:flex}

.lightbox img{

  max-width:min(1100px, 96vw);

  max-height: 86vh;

  border-radius: 18px;

  border: 1px solid rgba(232,237,245,0.14);

  box-shadow: var(--shadow);

  background: rgba(255,255,255,0.03);

}

.lightbox .close{

  position:absolute; top: 16px; right: 16px;

  width: 46px; height: 46px;

  border-radius: 14px;

  border: 1px solid rgba(232,237,245,0.18);

  background: rgba(255,255,255,0.06);

  color: var(--text);

  cursor:pointer;

  font-size: 22px;

}

.lightbox .close:hover{background: rgba(255,255,255,0.08)}



/* Mobile menu + layout */

@media (max-width: 920px){

  .nav{ position:relative; }

  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }



  /* dropdown panel */

  .menu{

    display:none;

    position:absolute;

    top:72px;

    left:0;

    right:0;

    flex-direction:column;

    gap:8px;

    padding:10px;

    border-radius: 18px;

    border: 1px solid rgba(232,237,245,0.14);

    background: rgba(11,15,20,0.92);

    box-shadow: 0 18px 50px rgba(0,0,0,0.55);

    z-index:1100;

  }

  .menu.is-open{ display:flex; }

  .menu a{

    width:100%;

    padding: 12px 14px;

    border-radius: 14px;

  }



  /* existing responsive */

  .hero-grid{grid-template-columns: 1fr}

  .brand{min-width:auto}

  .grid-3{grid-template-columns: 1fr}

  .subgrid{grid-template-columns: 1fr}

  .tile.wide{grid-column: span 12}

  .tile.tall{grid-column: span 6}

  .tile.square{grid-column: span 6}

}



/* prevent scroll when menu open */

body.nav-open{ overflow:hidden; }



@media (prefers-reduced-motion: reduce){

  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}

}