/*
Theme Name: Kojo Auto Show
Theme URI: https://kojomotors.com.ng
Author: Kojo Motors Ltd
Author URI: https://kojomotors.com.ng
Description: Custom event microsite theme for Kojo Auto Show 2026, presented by Kojo Motors Ltd — vendor stalls, sponsorship tiers, and registration/ticketing. Built to work standalone or alongside Elementor Theme Builder for header/footer overrides.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kojo-auto-shows
Tags: event, one-page, custom-menu, threaded-comments, translation-ready
*/

:root{
  --asphalt:#101114;
  --panel:#1b1d22;
  --panel-2:#22252b;
  --chrome:#c9cdd3;
  --ivory:#f3efe6;
  --amber:#ffb627;
  --amber-dim:#b8842f;
  --red:#d64545;
  --grey:#7c7f87;
  --line: rgba(201,205,211,0.14);
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  background:var(--asphalt);
  color:var(--ivory);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.95;
}
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.03em; }
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
section{ position:relative; }
.screen-reader-text{ position:absolute !important; left:-9999px; top:-9999px; }

/* ---------- checkered divider ---------- */
.checker{
  height:14px;
  background-image: linear-gradient(45deg, var(--ivory) 25%, transparent 25%),
                     linear-gradient(-45deg, var(--ivory) 25%, transparent 25%),
                     linear-gradient(45deg, transparent 75%, var(--ivory) 75%),
                     linear-gradient(-45deg, transparent 75%, var(--ivory) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  background-color: var(--asphalt);
  opacity:0.9;
}

/* ---------- nav ---------- */
header#site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(16,17,20,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:0.02em;
  display:flex; align-items:baseline; gap:8px;
}
.logo .yr{ color:var(--amber); }
.brand-logo{ height:26px; width:auto; }
.logo-divider{ color:var(--line); font-weight:300; }
.navlinks{ display:flex; gap:32px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.navlinks ul{ list-style:none; display:flex; gap:32px; }
.navlinks a{ opacity:0.8; transition:opacity .2s, color .2s; border-bottom:2px solid transparent; padding-bottom:4px;}
.navlinks a:hover{ opacity:1; color:var(--amber); border-color:var(--amber); }
.navcta{
  background:var(--amber); color:var(--asphalt); font-weight:800; text-transform:uppercase;
  font-size:13px; letter-spacing:0.04em; padding:10px 18px; border-radius:var(--radius);
  transition:transform .15s ease, box-shadow .15s ease;
}
.navcta:hover{ transform:translateY(-1px); box-shadow:0 4px 0 var(--amber-dim); color:var(--asphalt); }
.navtoggle{ display:none; }

/* ---------- hero ---------- */
.hero{
  padding:100px 0 70px;
  background:
    radial-gradient(ellipse 900px 500px at 80% -10%, rgba(255,182,39,0.14), transparent 60%),
    var(--asphalt);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.12em;
  color:var(--amber); text-transform:uppercase; margin-bottom:22px;
}
.eyebrow::before{ content:''; width:8px; height:8px; background:var(--red); border-radius:50%; box-shadow:0 0 0 3px rgba(214,69,69,0.25); }
.hero h1{
  font-size:clamp(48px, 7vw, 92px);
  margin-bottom:20px;
}
.hero h1 .stroke{
  -webkit-text-stroke:1.5px var(--ivory);
  color:transparent;
}
.hero-sub{
  color:var(--chrome); font-size:17px; max-width:480px; margin-bottom:34px;
}
.hero-dateline{
  display:flex; gap:28px; flex-wrap:wrap; margin-bottom:38px;
}
.dl-item{ display:flex; flex-direction:column; gap:4px; }
.dl-item .k{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:0.1em; }
.dl-item .v{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:22px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-note{ margin-top:22px; font-size:12px; color:var(--grey); letter-spacing:0.05em; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 26px; font-weight:800; text-transform:uppercase; font-size:13.5px; letter-spacing:0.04em;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-amber{ background:var(--amber); color:var(--asphalt); }
.btn-amber:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--amber-dim); color:var(--asphalt); }
.btn-ghost{ border-color:var(--line); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }

/* gauge */
.gauge-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.gauge-label{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.15em; color:var(--grey); text-transform:uppercase; text-align:center; }
.gauge-num{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; color:var(--amber); }

/* ---------- marquee ---------- */
.marquee{
  background:var(--panel); border-bottom:1px solid var(--line); border-top:1px solid var(--line);
  padding:14px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{ display:inline-flex; gap:40px; animation:scroll 32s linear infinite; }
.marquee span{
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--chrome);
  display:inline-flex; align-items:center; gap:12px;
}
.marquee span::after{ content:'//'; color:var(--amber); }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- section headers ---------- */
.sec{ padding:96px 0; }
.sec-head{ margin-bottom:52px; max-width:640px; }
.sec-tag{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--amber); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px; display:block;}
.sec-head h2{ font-size:clamp(32px,4.2vw,52px); margin-bottom:16px; }
.sec-head p{ color:var(--chrome); font-size:16px; }

/* ---------- about ---------- */
.about{ border-bottom:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:44px; }
.stat{ border-left:2px solid var(--amber); padding-left:18px; }
.stat .num{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:40px; color:var(--ivory); }
.stat .lbl{ font-size:13px; color:var(--grey); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }
.brand-strip{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line); }
.brand-strip-label{ font-size:11px; color:var(--grey); letter-spacing:0.1em; text-transform:uppercase; }
.brand-strip-names{ display:flex; gap:32px; flex-wrap:wrap; }
.brand-strip-names span{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:20px; color:var(--chrome); text-transform:uppercase; letter-spacing:0.03em; }

/* ---------- vendors ---------- */
.vendors{ background:var(--panel); border-bottom:1px solid var(--line); }
.bay-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.bay{
  background:var(--asphalt); padding:34px 28px; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .2s ease;
  position:relative;
}
.bay:hover{ background:#17181c; }
.bay-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.bay-no{ font-family:'JetBrains Mono', monospace; color:var(--grey); font-size:13px; }
.bay-icon{ width:34px; height:34px; color:var(--amber); }
.bay h3{ font-size:26px; margin:18px 0 8px; }
.bay p{ color:var(--chrome); font-size:14px; margin-bottom:18px; }
.bay-link{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--amber); display:inline-flex; align-items:center; gap:6px; }
.bay-link:hover{ color:var(--ivory); }

/* ---------- sponsorship ---------- */
.podium{ padding-bottom:120px;}
.tier-fine{ max-width:760px; margin:44px auto 0; text-align:center; }

/* ---------- roadmap ---------- */
.roadmap{ border-bottom:1px solid var(--line); }
.timeline{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.tl-row{ display:grid; grid-template-columns:180px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.tl-when{ color:var(--amber); font-size:13.5px; }
.tl-what{ color:var(--chrome); font-size:16px; }
.tl-final .tl-when, .tl-final .tl-what{ color:var(--ivory); font-weight:700; }
.tl-final{ border-bottom:2px solid var(--amber); }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:end; }
.tier{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 26px; display:flex; flex-direction:column; gap:18px; position:relative;
}
.tier.platinum{ border-color:var(--amber); background:linear-gradient(180deg, rgba(255,182,39,0.08), var(--panel) 40%); order:2; padding-top:50px; }
.tier.gold{ order:1; }
.tier.silver{ order:3; }
.tier-rank{ position:absolute; top:-14px; left:26px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; padding:4px 10px; border-radius:2px; text-transform:uppercase; font-weight:700;}
.platinum .tier-rank{ background:var(--amber); color:var(--asphalt); }
.gold .tier-rank{ background:var(--chrome); color:var(--asphalt); }
.silver .tier-rank{ background:var(--grey); color:var(--asphalt); }
.tier-name{ font-size:28px; }
.tier-price{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:38px; color:var(--amber); }
.tier-price small{ font-family:'Inter'; font-weight:600; font-size:13px; color:var(--grey); text-transform:none; letter-spacing:0; }
.tier ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--chrome); }
.tier ul li{ display:flex; gap:10px; align-items:flex-start; }
.tier ul li::before{ content:'—'; color:var(--amber); flex-shrink:0; }
.tier .btn{ width:100%; justify-content:center; margin-top:auto; }

/* ---------- registration ---------- */
.reg{ background:var(--panel); border-bottom:1px solid var(--line); }
.reg-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; }
.tabs{ display:flex; gap:2px; margin-bottom:28px; background:var(--line); border:1px solid var(--line);}
.tab{
  flex:1; text-align:center; padding:14px 10px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--asphalt); color:var(--grey); cursor:pointer; transition:all .15s ease; border:none; font-family:'Inter';
}
.tab.active{ background:var(--amber); color:var(--asphalt); }
form{ display:flex; flex-direction:column; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--grey); font-weight:600; }
.field input, .field select, .field textarea{
  background:var(--asphalt); border:1px solid var(--line); color:var(--ivory);
  padding:13px 14px; font-size:14.5px; font-family:'Inter'; border-radius:var(--radius);
  transition:border-color .15s ease; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); }
.field textarea{ resize:vertical; min-height:80px; }
.radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{
  border:1px solid var(--line); padding:10px 16px; border-radius:20px; font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:all .15s ease;
}
.radio-pill input{ accent-color:var(--amber); }
.radio-pill:has(input:checked){ border-color:var(--amber); background:rgba(255,182,39,0.08); }
.submit-row{ display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap; }
#formMsg{ font-size:13.5px; color:var(--amber); font-family:'JetBrains Mono', monospace; }
.form-notice{ font-size:13.5px; font-family:'JetBrains Mono', monospace; padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; }
.form-notice.success{ background:rgba(255,182,39,0.1); border:1px solid var(--amber); color:var(--amber); }
.form-notice.error{ background:rgba(214,69,69,0.1); border:1px solid var(--red); color:var(--red); }
.fine{ font-size:12.5px; color:var(--grey); margin-top:8px; }

.reg-side .sec-head{ margin-bottom:32px; }
.side-list{ display:flex; flex-direction:column; gap:20px; }
.side-item{ display:flex; gap:14px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.side-item .n{ font-family:'JetBrains Mono', monospace; color:var(--amber); font-size:13px; padding-top:2px;}
.side-item h4{ font-size:15px; text-transform:none; font-weight:700; font-family:'Inter'; margin-bottom:4px; }
.side-item p{ font-size:13.5px; color:var(--grey); }

/* ---------- media ---------- */
.media-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.asset-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.asset-card{ background:var(--panel); border:1px solid var(--line); padding:22px; border-radius:var(--radius); }
.asset-card .ratio{ aspect-ratio:1/1; background:var(--panel-2); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--grey); font-family:'JetBrains Mono'; font-size:12px; overflow:hidden;}
.asset-card .ratio img{ width:100%; height:100%; object-fit:cover; }
.asset-card h4{ font-size:15px; margin-bottom:6px; font-family:'Inter'; font-weight:700; text-transform:none; }
.asset-card p{ font-size:13px; color:var(--grey); }
.media-contact{ background:var(--asphalt); border:1px solid var(--line); padding:28px; border-radius:var(--radius); }
.media-contact h3{ font-size:22px; margin-bottom:14px; }
.media-contact p{ color:var(--chrome); font-size:14px; margin-bottom:18px; }

/* ---------- footer ---------- */
footer#site-footer{ padding:56px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.foot-logo{ font-size:24px; margin-bottom:14px; }
footer p{ color:var(--grey); font-size:14px; }
.foot-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--grey); margin-bottom:14px; font-family:'Inter'; font-weight:700;}
.foot-col ul{ list-style:none; }
.foot-col a{ display:block; font-size:14px; color:var(--chrome); margin-bottom:10px; transition:color .15s ease;}
.foot-col a:hover{ color:var(--amber); }
.foot-bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--grey); }

/* ---------- basic page/content fallback (page.php) ---------- */
.kas-page-content{ padding:120px 0; max-width:760px; }
.kas-page-content h1{ font-size:clamp(32px,5vw,56px); margin-bottom:24px; }
.kas-page-content p{ color:var(--chrome); margin-bottom:16px; font-size:16px; line-height:1.7; }

/* ---------- elementor compatibility ---------- */
.elementor-page .site-content-inner{ padding:0; }

@media (max-width: 860px){
  .navlinks{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .about-grid, .bay-grid, .tier-grid, .reg-grid, .media-grid, .form-row, .asset-cards{ grid-template-columns:1fr; }
  .tl-row{ grid-template-columns:1fr; gap:4px; }
  .tier.platinum{ order:1; padding-top:34px; }
  .tier.gold{ order:2; }
  .tier.silver{ order:3; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}