/*
Theme Name: Marquee — Event Ticket Booking
Theme URI: https://example.com/marquee
Author: Your Studio
Author URI: https://example.com
Description: A self-contained WordPress theme for selling and managing event tickets. Register events with multiple ticket tiers, and let visitors book tickets directly on the event page via AJAX — no plugin required. Includes an admin-side booking ledger with attendee details, quantities and status.
Version: 1.0.0
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: marquee
Tags: events, tickets, booking, custom-post-type, grid-layout, one-column

Design tokens
  Ink        #14171C  primary dark / marquee background
  Paper      #F6F1E4  ticket paper / light background
  Marquee    #E3B23C  gold accent — CTAs, prices, stub notches
  Signal     #C1432E  sold out / urgent state
  Slate      #4B5B5F  body text on paper
  Stub-line  #D8CCA8  dashed perforation
  Display face : 'Bebas Neue' (condensed marquee lettering)
  Body face    : 'Libre Franklin'
  Utility/mono : 'JetBrains Mono' (ticket codes, prices, seat counts)
*/

/* ---------------------------------------------------------------
   0. Reset & tokens
------------------------------------------------------------------ */
:root{
  --ink:#14171C;
  --ink-soft:#1E232B;
  --paper:#F6F1E4;
  --paper-dim:#EFE7D2;
  --marquee:#E3B23C;
  --marquee-dim:#B98A28;
  --signal:#C1432E;
  --slate:#4B5B5F;
  --slate-soft:#7C8A8D;
  --stub-line:#D8CCA8;
  --stub-line-dark:#3A4048;
  --radius:2px;
  --shadow-stub:0 10px 24px rgba(20,23,28,0.14);
  --font-display:'Bebas Neue', 'Oswald', Impact, sans-serif;
  --font-body:'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:0.02em;line-height:1.05;margin:0 0 0.4em;font-weight:400;}
:focus-visible{outline:3px solid var(--marquee);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--marquee-dim);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;
  padding:14px 26px;border:2px solid var(--ink);border-radius:var(--radius);
  background:var(--marquee);color:var(--ink);font-weight:600;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--ink);color:var(--marquee);transform:translateY(-2px);}
.btn.btn-ghost{background:transparent;border-color:var(--paper-dim);color:var(--paper);}
.btn.btn-ghost:hover{background:var(--paper);color:var(--ink);}
.btn.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn.btn-outline:hover{background:var(--ink);color:var(--marquee);}
.btn[disabled]{opacity:0.45;cursor:not-allowed;transform:none;background:var(--slate-soft);border-color:var(--slate-soft);color:var(--paper);}

/* ---------------------------------------------------------------
   1. Site header
------------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--stub-line-dark);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1180px;margin:0 auto;}
.site-branding{display:flex;align-items:center;gap:10px;}
.site-title{font-family:var(--font-display);font-size:1.9rem;letter-spacing:0.03em;color:var(--paper);}
.site-title span{color:var(--marquee);}
.site-description{display:none;}
.primary-nav ul{display:flex;gap:28px;align-items:center;}
.primary-nav a{
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--paper-dim);padding:6px 2px;border-bottom:2px solid transparent;
}
.primary-nav a:hover,.primary-nav .current-menu-item a{border-color:var(--marquee);color:var(--paper);}
.menu-toggle{display:none;background:none;border:1px solid var(--paper-dim);color:var(--paper);padding:8px 12px;border-radius:var(--radius);}
@media (max-width:800px){
  .menu-toggle{display:block;}
  .primary-nav{display:none;width:100%;}
  .primary-nav.is-open{display:block;}
  .primary-nav ul{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 24px 22px;}
  .site-header .wrap{flex-wrap:wrap;}
}

/* ---------------------------------------------------------------
   2. Marquee hero
------------------------------------------------------------------ */
.marquee-hero{background:var(--ink);color:var(--paper);padding:88px 0 96px;position:relative;overflow:hidden;}
.marquee-hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(227,178,60,0.06) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.marquee-hero .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;position:relative;}
.hero-eyebrow{color:var(--marquee);}
.hero-title{font-size:clamp(3rem,6vw,5.4rem);margin:10px 0 18px;}
.hero-title em{font-style:normal;color:var(--marquee);}
.hero-copy{max-width:46ch;color:var(--paper-dim);font-size:1.05rem;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* the signature: a ticket stub */
.ticket-stub{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-stub);position:relative;overflow:visible;
  display:grid;grid-template-columns:1fr auto;
}
.ticket-stub::before,.ticket-stub::after{
  content:"";position:absolute;width:26px;height:26px;background:var(--ink);border-radius:50%;
  top:calc(50% - 13px);
}
.ticket-stub::before{left:calc(70% - 13px);}
.ticket-stub::after{left:calc(70% - 13px);}
.marquee-hero .ticket-stub::before,.marquee-hero .ticket-stub::after{background:var(--ink);}
.ticket-stub .stub-main{padding:26px 22px;}
.ticket-stub .stub-side{
  width:34%;border-left:2px dashed var(--stub-line);padding:26px 16px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;
}
.ticket-stub .stub-kicker{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate-soft);}
.ticket-stub .stub-event{font-family:var(--font-display);font-size:1.7rem;margin:4px 0 10px;line-height:1.02;}
.ticket-stub .stub-meta{font-family:var(--font-mono);font-size:0.82rem;color:var(--slate);display:flex;flex-direction:column;gap:4px;}
.ticket-stub .stub-meta strong{color:var(--ink);}
.ticket-stub .stub-price{font-family:var(--font-mono);font-size:1.6rem;color:var(--ink);}
.ticket-stub .stub-price small{display:block;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-soft);}
@media (max-width:900px){
  .marquee-hero .hero-grid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------
   3. Section scaffolding
------------------------------------------------------------------ */
.section{padding:76px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(2rem,3.4vw,2.9rem);color:var(--ink);}
.section-head .section-note{color:var(--slate-soft);font-family:var(--font-mono);font-size:0.85rem;max-width:40ch;}
.section.on-dark{background:var(--ink);color:var(--paper);}
.section.on-dark .section-head h2{color:var(--paper);}

/* ---------------------------------------------------------------
   4. Event grid / cards
------------------------------------------------------------------ */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
.event-card{
  background:var(--paper);border:1px solid var(--stub-line);border-radius:var(--radius);
  position:relative;transition:transform .18s ease, box-shadow .18s ease;
}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-stub);}
.event-card .card-media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-dim);position:relative;}
.event-card .card-media img{width:100%;height:100%;object-fit:cover;}
.event-card .card-media .no-image{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.4rem;color:var(--stub-line);
}
.event-card .card-date-chip{
  position:absolute;top:12px;left:12px;background:var(--ink);color:var(--marquee);
  font-family:var(--font-mono);font-size:0.72rem;padding:6px 10px;border-radius:var(--radius);
  letter-spacing:0.06em;text-transform:uppercase;
}
.event-card .card-body{padding:20px 20px 22px;border-top:2px dashed var(--stub-line);}
.event-card .card-cat{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--marquee-dim);}
.event-card h3{font-size:1.5rem;color:var(--ink);margin:6px 0 10px;}
.event-card .card-meta{font-family:var(--font-mono);font-size:0.8rem;color:var(--slate-soft);display:flex;flex-direction:column;gap:3px;margin-bottom:14px;}
.event-card .card-foot{display:flex;align-items:center;justify-content:space-between;}
.event-card .card-price{font-family:var(--font-mono);color:var(--ink);font-size:1.05rem;}
.event-card .card-price small{color:var(--slate-soft);font-size:0.7rem;}
.event-card .sold-out-badge{color:var(--signal);font-family:var(--font-mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;}

/* filter bar */
.event-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;align-items:center;}
.event-filters select,.event-filters input[type=search]{
  padding:11px 14px;border:1px solid var(--stub-line);border-radius:var(--radius);background:var(--paper);
  font-family:var(--font-mono);font-size:0.85rem;color:var(--ink);min-width:180px;
}
.event-filters .btn{padding:11px 20px;}

/* ---------------------------------------------------------------
   5. Single event page
------------------------------------------------------------------ */
.event-hero{background:var(--ink);color:var(--paper);padding:52px 0 64px;}
.event-hero .breadcrumb{font-family:var(--font-mono);font-size:0.78rem;color:var(--slate-soft);margin-bottom:16px;}
.event-hero .breadcrumb a{color:var(--marquee);}
.event-hero h1{font-size:clamp(2.6rem,5vw,4.2rem);color:var(--paper);max-width:18ch;}
.event-hero .event-meta-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;font-family:var(--font-mono);font-size:0.88rem;}
.event-hero .event-meta-row .meta-item{display:flex;flex-direction:column;gap:4px;}
.event-hero .event-meta-row .meta-label{color:var(--slate-soft);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;}
.event-hero .event-meta-row .meta-value{color:var(--paper);}

.event-body{padding:64px 0 90px;}
.event-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start;}
.event-content .card-media{border-radius:var(--radius);overflow:hidden;margin-bottom:36px;border:1px solid var(--stub-line);}
.event-content h2{font-size:1.9rem;color:var(--ink);margin-top:0;}
.event-content .about-copy{font-size:1.02rem;color:var(--slate);}
.venue-box{margin-top:36px;padding:22px;border:2px dashed var(--stub-line);border-radius:var(--radius);}
.venue-box h3{font-size:1.3rem;color:var(--ink);}
.venue-box p{margin:4px 0;font-family:var(--font-mono);font-size:0.88rem;}

/* booking panel */
.booking-panel{
  position:sticky;top:100px;background:var(--paper);border:1px solid var(--stub-line);
  border-radius:var(--radius);box-shadow:var(--shadow-stub);
}
.booking-panel .panel-head{padding:22px 24px;border-bottom:2px dashed var(--stub-line);}
.booking-panel .panel-head .eyebrow{margin-bottom:4px;}
.booking-panel .panel-head h3{font-size:1.6rem;color:var(--ink);}
.ticket-tier{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--paper-dim);}
.ticket-tier .tier-name{font-weight:600;color:var(--ink);}
.ticket-tier .tier-remaining{font-family:var(--font-mono);font-size:0.72rem;color:var(--slate-soft);}
.ticket-tier .tier-price{font-family:var(--font-mono);color:var(--ink);text-align:right;}
.qty-control{display:flex;align-items:center;border:1px solid var(--stub-line);border-radius:var(--radius);overflow:hidden;}
.qty-control button{background:var(--paper-dim);border:none;width:30px;height:30px;font-family:var(--font-mono);font-size:1rem;color:var(--ink);}
.qty-control button:hover{background:var(--marquee);}
.qty-control input{width:36px;text-align:center;border:none;background:transparent;font-family:var(--font-mono);}
.tier-sold-out{font-family:var(--font-mono);font-size:0.72rem;color:var(--signal);text-transform:uppercase;letter-spacing:.06em;}

.booking-summary{padding:18px 24px;border-bottom:2px dashed var(--stub-line);font-family:var(--font-mono);font-size:0.9rem;display:flex;justify-content:space-between;}
.booking-summary strong{color:var(--ink);font-size:1.15rem;}
.booking-cta{padding:20px 24px 24px;}
.booking-cta .btn{width:100%;}
.booking-form{padding:0 24px 24px;display:none;flex-direction:column;gap:12px;}
.booking-form.is-open{display:flex;}
.booking-form label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate-soft);}
.booking-form input{padding:12px 14px;border:1px solid var(--stub-line);border-radius:var(--radius);background:#fff;}
.form-msg{font-family:var(--font-mono);font-size:0.82rem;padding:10px 12px;border-radius:var(--radius);display:none;}
.form-msg.is-error{display:block;background:rgba(193,67,46,0.12);color:var(--signal);}
.form-msg.is-success{display:block;background:rgba(227,178,60,0.16);color:var(--marquee-dim);}
.booking-confirmation{padding:24px;display:none;}
.booking-confirmation.is-open{display:block;}
.booking-confirmation .ref-code{font-family:var(--font-mono);font-size:1.3rem;color:var(--ink);background:var(--paper-dim);padding:10px 14px;border-radius:var(--radius);display:inline-block;margin:10px 0;letter-spacing:0.06em;}

@media (max-width:920px){
  .event-layout{grid-template-columns:1fr;}
  .booking-panel{position:static;}
}

/* ---------------------------------------------------------------
   5b. Hero events slider
------------------------------------------------------------------ */
.hero-slider{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;}
.hero-slider.is-static{padding:88px 0 96px;}
.hero-slider.is-static::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(227,178,60,0.06) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.slider-viewport{overflow:hidden;}
.slider-track{display:flex;transition:transform .55s cubic-bezier(.65,0,.35,1);will-change:transform;}
.slide{min-width:100%;position:relative;display:grid;grid-template-columns:1fr;min-height:520px;}
.slide-media{position:absolute;inset:0;}
.slide-media img{width:100%;height:100%;object-fit:cover;}
.slide-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(20,23,28,0.96) 0%, rgba(20,23,28,0.82) 42%, rgba(20,23,28,0.35) 75%, rgba(20,23,28,0.55) 100%);
}
.slide-content{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;height:520px;display:flex;flex-direction:column;justify-content:center;max-width:640px;}
.slide-title{font-size:clamp(2.4rem,5vw,4rem);color:var(--paper);margin:10px 0 16px;max-width:16ch;}
.slide-meta{font-family:var(--font-mono);font-size:0.92rem;color:var(--paper-dim);display:flex;gap:8px;margin-bottom:26px;}
.slide-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.slide-price{font-family:var(--font-mono);color:var(--marquee);font-size:1.2rem;}
.slide-price small{display:block;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-soft);}

.slider-controls-row{display:flex;align-items:center;justify-content:center;gap:22px;position:absolute;bottom:26px;left:0;right:0;}
.slider-arrow{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--paper-dim);background:rgba(20,23,28,0.4);
  color:var(--paper);font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.slider-arrow:hover{background:var(--marquee);color:var(--ink);border-color:var(--marquee);transform:translateY(-1px);}
.slider-dots{display:flex;gap:9px;}
.slider-dot{width:9px;height:9px;border-radius:50%;background:rgba(246,241,228,0.35);border:none;padding:0;}
.slider-dot.is-active{background:var(--marquee);width:26px;border-radius:5px;transition:width .2s ease;}
@media (max-width:760px){
  .slide{min-height:440px;}
  .slide-content{height:440px;max-width:100%;}
  .slider-controls-row{bottom:16px;}
}

/* ---------------------------------------------------------------
   5c. New-events card slider
------------------------------------------------------------------ */
.section-tight{padding:60px 0;}
.card-new-badge{
  position:absolute;top:12px;right:12px;background:var(--marquee);color:var(--ink);
  font-family:var(--font-mono);font-size:0.68rem;padding:5px 9px;border-radius:var(--radius);
  letter-spacing:0.08em;text-transform:uppercase;font-weight:700;
}
.card-slider-wrap{display:flex;align-items:center;gap:14px;}
.card-slider{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:var(--stub-line) transparent;
}
.card-slider::-webkit-scrollbar{height:6px;}
.card-slider::-webkit-scrollbar-thumb{background:var(--stub-line);border-radius:6px;}
.card-slider-item{flex:0 0 300px;scroll-snap-align:start;}
.card-slider-arrow{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--stub-line);background:var(--paper);
  color:var(--ink);font-size:1rem;display:flex;align-items:center;justify-content:center;
}
.card-slider-arrow:hover{background:var(--ink);color:var(--marquee);border-color:var(--ink);}
@media (max-width:600px){.card-slider-arrow{display:none;}}

/* ---------------------------------------------------------------
   5d. Archive CTA banner
------------------------------------------------------------------ */
.archive-banner{background:var(--paper-dim);border-top:2px dashed var(--stub-line);border-bottom:2px dashed var(--stub-line);padding:52px 0;}
.archive-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.archive-banner-inner h2{font-size:2rem;color:var(--ink);margin:6px 0;}
.archive-banner-inner p{margin:0;color:var(--slate);max-width:48ch;}

/* archive pagination */
.archive-pagination{display:flex;justify-content:center;margin-top:48px;}
.archive-pagination ul.page-numbers{display:flex;gap:8px;align-items:center;}
.archive-pagination .page-numbers{
  font-family:var(--font-mono);font-size:0.85rem;color:var(--ink);
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stub-line);border-radius:var(--radius);padding:0 10px;
}
.archive-pagination a.page-numbers:hover{background:var(--ink);color:var(--marquee);border-color:var(--ink);}
.archive-pagination .page-numbers.current{background:var(--marquee);border-color:var(--marquee);color:var(--ink);font-weight:700;}
.archive-pagination .page-numbers.dots{border-color:transparent;}

/* ---------------------------------------------------------------
   6. Footer
------------------------------------------------------------------ */
.site-footer{background:var(--ink);color:var(--paper-dim);padding:56px 0 30px;margin-top:40px;border-top:1px solid var(--stub-line-dark);}
.site-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.site-footer h4{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--marquee);margin-bottom:14px;}
.site-footer .footer-about{max-width:38ch;color:var(--slate-soft);}
.site-footer ul li{margin-bottom:8px;}
.site-footer a:hover{color:var(--marquee);}
.footer-bottom{border-top:1px solid var(--stub-line-dark);padding-top:20px;font-family:var(--font-mono);font-size:0.75rem;color:var(--slate-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:760px){.site-footer .footer-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------
   7. Generic page / archive fallback content
------------------------------------------------------------------ */
.page-hero{background:var(--ink);color:var(--paper);padding:60px 0;}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--paper);}
.entry-content{padding:56px 0;max-width:760px;margin:0 auto;}
.entry-content h2{color:var(--ink);}
.empty-state{padding:80px 24px;text-align:center;color:var(--slate-soft);font-family:var(--font-mono);}