/*
Theme Name: Mal Hall
Theme URI: https://malhall.com
Author: Mal Hall
Author URI: https://malhall.com
Description: Official site theme for comedian Mal Hall — landing page with the special, tour dates, videos, VIP Club, booking, and the LaughShirt store. Nike x Apple aesthetic, black + Creamy Off-White + infrared.
Version: 1.1.13
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: malhall
*/

/* ═══════════════════════════════════════════════════
   MAL HALL — DESIGN SYSTEM
   ═══════════════════════════════════════════════════ */
:root{
  --black:#0C0C0A;
  --near-black:#141310;
  --charcoal:#1C1A16;
  --off-white:#FFFFE4;        /* NEVER pure #FFFFFF */
  --infrared:#FF2247;         /* single pop accent */
  --muted:#9A968C;
  --line:rgba(255,255,228,0.14);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw:1280px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--off-white);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* ─── Kicker / section titles ─── */
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--infrared);margin-bottom:18px;
}
.section-title{
  font-weight:800;letter-spacing:-.02em;line-height:.95;text-transform:uppercase;
  font-size:clamp(34px,6vw,74px);
}
.lead{color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:60ch}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;border:1.5px solid var(--off-white);border-radius:2px;
  transition:.2s ease;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--off-white);color:var(--black)}
.btn--fill{background:var(--infrared);border-color:var(--infrared);color:var(--off-white)}
.btn--fill:hover{background:var(--off-white);border-color:var(--off-white);color:var(--black)}
.btn--sm{padding:11px 20px;font-size:12px}

/* ═══════════════ NAV ═══════════════ */
.topbar{position:relative;z-index:60;flex:none}
.namebar{
  background:var(--off-white);color:var(--black);
  display:flex;justify-content:flex-start;align-items:center;overflow:hidden;
  padding:10px clamp(14px,2.5vw,30px);
}
.namebar h1{
  display:flex;align-items:center;justify-content:flex-start;
  width:100%;
}
.nb-word{
  font-weight:800;letter-spacing:-.02em;line-height:.72;text-transform:uppercase;
  font-size:clamp(74px,20vw,320px);white-space:nowrap;
}
.nb-word:first-of-type{margin-right:-.06em}
.nb-word:last-of-type{margin-right:-.06em}
.namebar__mark{
  height:clamp(30px,10.4vw,166px);width:auto;flex:none;
}
.mainnav{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(12,12,10,.6) 0%,rgba(12,12,10,.28) 55%,rgba(12,12,10,0) 100%);
  padding:16px clamp(20px,5vw,56px) 46px;
}
.mainnav .links{display:flex;justify-content:space-between;flex:1;gap:16px;list-style:none}
.mainnav .links a{
  font-size:26px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  opacity:.96;transition:.18s;position:relative;padding:4px 0;text-shadow:0 1px 14px rgba(0,0,0,.7);
}
.mainnav .links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--infrared);transition:.22s;
}
.mainnav .links a:hover{opacity:1}
.mainnav .links a:hover::after{width:100%}

/* sticky compact nav on scroll */
.stickynav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(12,12,10,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .35s ease;
}
.stickynav.show{transform:translateY(0)}
.stickynav .inner{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px clamp(20px,5vw,56px);
}
.stickynav .logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:20px}
.stickynav .logo-mark{height:38px;width:auto}
.stickynav .links{display:flex;gap:clamp(14px,2vw,34px);list-style:none}
.stickynav .links a{font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;opacity:.85;transition:.18s}
.stickynav .links a:hover{opacity:1;color:var(--infrared)}

/* hamburger */
.burger{display:none;margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:26px;height:2px;background:currentColor;display:block}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:300;background:var(--black);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;
  transform:translateX(100%);transition:transform .3s ease;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-menu .close{position:absolute;top:24px;right:24px;font-size:34px;background:none;border:0;color:inherit;cursor:pointer;line-height:1}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;overflow:hidden;background:#000}
.hero__video{position:relative;width:100%;aspect-ratio:16/9;z-index:1;overflow:hidden;background:#000;cursor:pointer}
.hero__video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%)}
.hero__video::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,10,.22) 0%,rgba(12,12,10,0) 30%,rgba(12,12,10,0) 72%,rgba(12,12,10,.35) 100%);
}
.js-yt{cursor:pointer}
.yt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,34,71,.94);display:flex;align-items:center;justify-content:center;transition:.2s;
}
.hero__play:hover{background:var(--infrared);transform:translate(-50%,-50%) scale(1.06)}
.hero__play span{width:0;height:0;border-left:26px solid var(--off-white);border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:1;background:#000}
/* YouTube lightbox (trailer / video) */
.ytlb{position:fixed;inset:0;z-index:600;background:rgba(8,8,7,.92);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px}
.ytlb.show{display:flex}
.ytlb__frame{position:relative;width:min(1100px,94vw);aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.ytlb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlb__close{position:absolute;top:-46px;right:0;background:none;border:0;color:var(--off-white);font-size:36px;line-height:1;cursor:pointer}
.hero__content{position:relative;z-index:3;width:100%;padding-bottom:clamp(40px,7vh,90px)}
.hero__tag{
  font-size:13px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--off-white);opacity:.85;margin-bottom:16px;
}
.hero__headline{
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(38px,7vw,88px);max-width:16ch;margin-bottom:26px;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* ═══════════════ SPECIAL ═══════════════ */
.special{background:var(--near-black);padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line)}
.special__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.player{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid var(--line);
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.special__meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;align-items:center}
.badge{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ═══════════════ TOUR ═══════════════ */
.tour{padding:clamp(64px,9vw,120px) 0}
.tour__head{margin-bottom:40px}
.date-row{
  display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:24px;
  padding:22px 0;border-top:1px solid var(--line);
}
.date-row:last-child{border-bottom:1px solid var(--line)}
.date-row .date{font-weight:800;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em}
.date-row .date span{display:block;font-size:12px;font-weight:700;color:var(--infrared);letter-spacing:.14em;margin-top:4px}
.date-row .venue{font-size:clamp(16px,1.6vw,20px);font-weight:700}
.date-row .venue small{display:block;color:var(--muted);font-weight:500;font-size:14px;margin-top:3px;letter-spacing:.02em}
.tour__note{margin-top:26px;color:var(--muted);font-size:14px}

/* ═══════════════ VIDEOS ═══════════════ */
.videos{background:var(--near-black);padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:40px}
.vcard{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#000;transition:.25s}
.vcard img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:.3s}
.vcard:hover{transform:translateY(-4px)}
.vcard:hover img{opacity:1}
.vcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vcard .play span{
  width:60px;height:60px;border-radius:50%;background:rgba(255,34,71,.92);
  display:flex;align-items:center;justify-content:center;
}
.vcard .play span::after{content:"";border-left:18px solid var(--off-white);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.vcard .label{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-weight:700;font-size:15px}

/* ═══════════════ ABOUT ═══════════════ */
.about{padding:clamp(64px,9vw,120px) 0}
.about__grid{display:block}
.about__img{border-radius:6px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;margin-bottom:clamp(34px,4vw,56px)}
.about__img img{width:100%;height:100%;object-fit:cover;object-position:center}
.about__copy{text-align:left}
.about p{color:#d9d6ca;margin:0 0 18px;font-size:clamp(16px,1.5vw,18px)}
.about p strong{color:var(--off-white)}

/* ═══════════════ VIP CLUB ═══════════════ */
.vip{
  background:var(--infrared);color:var(--off-white);
  padding:clamp(64px,9vw,120px) 0;text-align:center;
}
.vip .kicker{color:var(--black)}
.vip h2{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(34px,6vw,72px);margin-bottom:20px}
.vip p{max-width:56ch;margin:0 auto 32px;font-size:clamp(15px,1.4vw,18px)}
.vip .btn{border-color:var(--off-white)}
.vip .btn--fill{background:var(--black);border-color:var(--black)}
.vip .btn--fill:hover{background:var(--off-white);color:var(--black);border-color:var(--off-white)}
.vip .perks{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.vip .perks div{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ═══════════════ BOOKING ═══════════════ */
.booking{padding:clamp(64px,9vw,120px) 0}
.booking__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.booking__card{border:1px solid var(--line);border-radius:6px;padding:clamp(26px,3vw,40px);background:var(--near-black)}
.booking__card h3{font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.booking__card p{color:var(--muted);margin-bottom:22px;font-size:15px}
.booking__card a.mail{font-weight:700;color:var(--infrared);letter-spacing:.02em}

/* ═══════════════ SHOP ═══════════════ */
.shop{background:var(--near-black);padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line)}
.shop__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.shop__card{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);min-height:340px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.shop__card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.15))}
.shop__card .inner{position:relative;z-index:2;padding:clamp(24px,3vw,36px)}
.shop__card h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px}
.shop__card p{color:#d9d6ca;font-size:14px;margin-bottom:18px;max-width:34ch}

/* ═══════════════ FOOTER ═══════════════ */
footer{background:var(--black);padding-top:clamp(56px,7vw,90px);overflow:hidden}
.footer__top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;padding-bottom:40px}
.footer__socials{display:flex;flex-direction:column;gap:6px}
.footer__socials a{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;transition:.18s;width:max-content}
.footer__socials a:hover{opacity:1;color:var(--infrared)}
.footer__cta{justify-self:end;text-align:right;max-width:34ch}
.footer__cta p{color:var(--muted);font-size:14px;margin-bottom:16px}
.footer__wordmark{
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.72;
  font-size:clamp(74px,20vw,320px);white-space:nowrap;color:var(--off-white);
  padding:0 clamp(20px,5vw,56px);margin-bottom:-.12em;text-align:right;
}
.footer__legal{
  border-top:1px solid var(--line);margin-top:20px;
  display:flex;gap:28px;flex-wrap:wrap;padding:22px clamp(20px,5vw,56px);
  font-size:12px;letter-spacing:.06em;color:var(--muted);
}
.footer__legal a:hover{color:var(--off-white)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){
  .mainnav .links{display:none}
  .burger{display:flex}
  .stickynav .links{display:none}
  .stickynav .burger{display:flex}
  .about__grid,.booking__grid,.shop__grid,.footer__top{grid-template-columns:1fr}
  .about__img{aspect-ratio:4/5}
  .footer__cta{justify-self:start;text-align:left}
  .date-row{grid-template-columns:90px 1fr;grid-template-areas:"date venue" "date btn";row-gap:14px}
  .date-row .date{grid-area:date}.date-row .venue{grid-area:venue}.date-row .btn{grid-area:btn;justify-self:start}
}
/* ─── mobile hero: fit wordmark + vertical crop ─── */
@media(max-width:760px){
  .hero__video{aspect-ratio:4/5}
  .nb-word{font-size:16vw}
  .mainnav{padding-bottom:26px}
}
/* ═══════════════ VIP POPUP ═══════════════ */
.vip-pop{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,7,.72);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.vip-pop.show{opacity:1;visibility:visible}
.vip-pop__card{position:relative;max-width:440px;width:100%;background:var(--near-black);border:1px solid var(--line);border-radius:6px;padding:clamp(30px,4vw,46px);text-align:center;transform:translateY(14px) scale(.98);transition:transform .3s ease;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.vip-pop.show .vip-pop__card{transform:none}
.vip-pop__close{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--muted);font-size:28px;line-height:1;cursor:pointer;transition:.15s}
.vip-pop__close:hover{color:var(--off-white)}
.vip-pop__kicker{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--infrared);margin-bottom:14px}
.vip-pop__title{font-size:clamp(28px,4vw,38px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin-bottom:14px}
.vip-pop__text{color:#d9d6ca;font-size:15px;max-width:34ch;margin:0 auto 24px}
.vip-pop__cta{width:100%;justify-content:center;margin-bottom:12px}
.vip-pop__no{background:none;border:0;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.15s}
.vip-pop__no:hover{color:var(--off-white)}