/* VOLTARC — global layout, header, footer, nav. Requires tokens.css */

/* ─────────── Base ─────────── */
*,*::before,*::after{box-sizing:border-box}

html{font-size:16px;scroll-behavior:smooth}

body{
  background:var(--vx-ink);
  color:var(--vx-cloud);
  font-family:var(--vx-font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{max-width:100%;height:auto;display:block}

a{color:var(--vx-volt);text-decoration:none;transition:color var(--vx-dur) var(--vx-ease)}
a:hover{color:var(--vx-cyan)}
a:focus-visible{outline:2px solid var(--vx-volt);outline-offset:3px;border-radius:4px}

/* ─────────── Typography scale ─────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--vx-font-display);
  font-weight:700;
  line-height:1.15;
  color:var(--vx-white);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.25rem,5vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.5vw,2.75rem)}
h3{font-size:clamp(1.375rem,2.5vw,2rem)}
h4{font-size:1.25rem}
h5{font-size:1.125rem}
h6{font-size:1rem}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Gradient headline utility */
.vx-headline-grad{
  background:var(--vx-arc-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* ─────────── Layout container ─────────── */
.vx-container{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem);
}

/* ─────────── Skip link (WCAG 2.2) ─────────── */
.vx-skip-link{
  position:absolute;
  top:-100%;
  left:1rem;
  background:var(--vx-volt);
  color:var(--vx-ink);
  font-weight:700;
  padding:.5rem 1rem;
  border-radius:0 0 var(--vx-radius) var(--vx-radius);
  z-index:9999;
  transition:top .1s;
}
.vx-skip-link:focus{top:0}

/* ─────────── Site Header — Blocksy uses #header ─────────── */
#header,
#masthead,
.site-header,
header.header,
header[id="header"]{
  position:sticky !important;
  top:0 !important;
  z-index:900 !important;
  background:rgba(11,15,20,.95) !important;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid rgba(200,255,43,.08) !important;
  transition:background var(--vx-dur) var(--vx-ease),
             box-shadow var(--vx-dur) var(--vx-ease);
}

/* Blocksy inner header rows */
.header-desktop-items,
.header-row,
[data-row="top"],
[data-row="main"],
[data-row="bottom"]{
  background:transparent !important;
}

/* Blocksy nav links */
.ct-menu > li > a,
.ct-main-nav > li > a{
  color:var(--vx-cloud) !important;
  font-family:var(--vx-font-display) !important;
  font-weight:600 !important;
  font-size:.9rem !important;
  transition:color var(--vx-dur) var(--vx-ease) !important;
}
.ct-menu > li > a:hover,
.ct-main-nav > li > a:hover,
.ct-menu > li.current-menu-item > a{
  color:var(--vx-volt) !important;
}

/* Site title (wordmark) */
.site-title,.ct-logo .site-title a,.site-branding a{
  color:var(--vx-white) !important;
  font-family:var(--vx-font-display) !important;
  font-weight:700 !important;
}

.site-header__inner,
.header-inner{
  display:flex;
  align-items:center;
  gap:2rem;
  padding-block:.875rem;
}

/* Logo */
.site-logo img,
.custom-logo{
  height:36px;
  width:auto;
}

/* Wordmark fallback */
.site-title,
.site-header .site-title{
  font-family:var(--vx-font-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--vx-white);
  text-decoration:none;
}
.site-title span{color:var(--vx-volt)}

/* ─────────── Primary navigation ─────────── */
.main-navigation ul,
nav.primary-navigation ul{
  display:flex;
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
}

.main-navigation ul li a,
nav.primary-navigation ul li a{
  display:block;
  padding:.5rem .875rem;
  font-family:var(--vx-font-display);
  font-size:.875rem;
  font-weight:600;
  color:var(--vx-cloud);
  border-radius:var(--vx-radius);
  transition:color var(--vx-dur) var(--vx-ease),
             background var(--vx-dur) var(--vx-ease);
}
.main-navigation ul li a:hover,
nav.primary-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{
  color:var(--vx-volt);
  background:rgba(200,255,43,.08);
}

/* Dropdown */
.main-navigation ul ul{
  position:absolute;
  background:var(--vx-surface);
  border:1px solid rgba(200,255,43,.12);
  border-radius:var(--vx-radius-lg);
  padding:.5rem;
  min-width:220px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  z-index:100;
}

/* Header right: search + cart + hamburger */
.header-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:auto;
}

/* Cart icon widget */
.header-cart-link{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .875rem;
  background:rgba(200,255,43,.1);
  border:1px solid rgba(200,255,43,.2);
  border-radius:var(--vx-radius);
  font-weight:700;
  font-size:.875rem;
  color:var(--vx-volt);
  transition:background var(--vx-dur) var(--vx-ease),
             border-color var(--vx-dur) var(--vx-ease);
}
.header-cart-link:hover{
  background:rgba(200,255,43,.18);
  border-color:var(--vx-volt);
  color:var(--vx-volt);
}

/* ─────────── Off-road legal banner ─────────── */
.vx-offroad-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .625rem;
  background:rgba(229,72,77,.15);
  border:1px solid var(--vx-danger);
  border-radius:.375rem;
  font-size:.75rem;
  font-weight:700;
  color:var(--vx-danger);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ─────────── Section utilities ─────────── */
.vx-section{padding-block:clamp(3rem,8vw,6rem)}
.vx-section--sm{padding-block:clamp(2rem,5vw,3.5rem)}

.vx-section-title{
  text-align:center;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.vx-section-title h2{margin-bottom:.5rem}
.vx-section-title p{
  color:var(--vx-slate);
  font-size:1.125rem;
  max-width:52ch;
  margin-inline:auto;
}

/* ─────────── Buttons ─────────── */
.vx-btn,
.button,
button[type=submit],
input[type=submit],
.wc-block-components-button,
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  font-family:var(--vx-font-display);
  font-size:.9375rem;
  font-weight:700;
  line-height:1;
  border-radius:var(--vx-radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:all var(--vx-dur) var(--vx-ease);
  text-decoration:none;
  white-space:nowrap;
}

/* Primary: volt fill */
.vx-btn,
.vx-btn--primary,
.woocommerce .button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background:var(--vx-volt);
  color:var(--vx-ink) !important;
  border-color:var(--vx-volt);
}
.vx-btn:hover,
.vx-btn--primary:hover,
.woocommerce .button.alt:hover{
  background:var(--vx-cyan);
  border-color:var(--vx-cyan);
  color:var(--vx-ink) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,229,255,.3);
}

/* Ghost: outline volt */
.vx-btn--ghost{
  background:transparent;
  color:var(--vx-volt) !important;
  border-color:var(--vx-volt);
}
.vx-btn--ghost:hover{
  background:rgba(200,255,43,.1);
}

/* Large CTA */
.vx-btn--lg{padding:1rem 2rem;font-size:1.0625rem;border-radius:var(--vx-radius-lg)}

/* Focus state (WCAG 2.2 §2.4.11 min 3px) */
.vx-btn:focus-visible,
.button:focus-visible,
button:focus-visible{
  outline:3px solid var(--vx-volt);
  outline-offset:3px;
}

/* ─────────── Badges / chips ─────────── */
.vx-badge{
  display:inline-block;
  padding:.2rem .6rem;
  border-radius:.375rem;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.vx-badge--new{background:var(--vx-volt);color:var(--vx-ink)}
.vx-badge--sale{background:var(--vx-danger);color:#fff}
.vx-badge--eapc{background:rgba(22,163,74,.2);border:1px solid var(--vx-success);color:var(--vx-success)}
.vx-badge--offroad{background:rgba(229,72,77,.15);border:1px solid var(--vx-danger);color:var(--vx-danger)}

/* ─────────── Trust bar ─────────── */
.vx-trust-bar{
  background:var(--vx-surface);
  border-block:1px solid rgba(200,255,43,.08);
  padding:1rem 0;
}
.vx-trust-bar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,3vw,2.5rem);
}
.vx-trust-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  font-weight:600;
  color:var(--vx-cloud);
  white-space:nowrap;
}
.vx-trust-item svg,.vx-trust-item .dashicons{
  color:var(--vx-volt);
  flex-shrink:0;
}

/* ─────────── Site footer ─────────── */
.site-footer,
footer.footer{
  background:var(--vx-surface);
  border-top:1px solid rgba(200,255,43,.08);
  padding-top:3.5rem;
}

.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.site-footer__brand p{
  color:var(--vx-slate);
  font-size:.875rem;
  margin-top:.75rem;
  max-width:26ch;
}

.site-footer__col h4{
  font-family:var(--vx-font-display);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--vx-slate);
  margin-bottom:1rem;
}

.site-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.625rem}
.site-footer__col ul li a{font-size:.875rem;color:var(--vx-cloud);transition:color var(--vx-dur) var(--vx-ease)}
.site-footer__col ul li a:hover{color:var(--vx-volt)}

.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1.25rem;
  font-size:.8125rem;
  color:var(--vx-slate);
}
.site-footer__bottom a{color:var(--vx-slate)}
.site-footer__bottom a:hover{color:var(--vx-volt)}

/* EAPC disclaimer in footer */
.vx-legal-note{
  font-size:.75rem;
  color:var(--vx-slate);
  line-height:1.5;
  margin-top:1rem;
  padding:.75rem;
  background:rgba(255,255,255,.03);
  border-radius:var(--vx-radius);
  border:1px solid rgba(255,255,255,.05);
}

/* ─────────── Responsive ─────────── */
@media (max-width:768px){
  .main-navigation{display:none}
  .main-navigation.is-open{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0;
    background:rgba(11,15,20,.97);
    z-index:800;
    padding:5rem 2rem 2rem;
  }
  .main-navigation.is-open ul{flex-direction:column;gap:.25rem}
  .main-navigation.is-open ul li a{font-size:1.25rem;padding:.875rem 1rem}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .site-footer__grid{grid-template-columns:1fr}
}

/* ─────────── Blocksy page / content area overrides ─────────── */

/* Force dark background on all Blocksy content wrappers */
.ct-container,
.ct-section,
#primary,
.site-main,
main[id="primary"],
.page-template-default .ct-main,
body .site,
#page{
  background:var(--vx-ink) !important;
  color:var(--vx-cloud) !important;
}

/* Blocksy "Coming soon" chip — hide it */
.ct-store-notice,
[data-id="woocommerce-store-notice"]{display:none !important}

/* Blocksy blog/post cards — dark skin */
article.post,
.ct-post-card,
.ct-card,
.type-post{
  background:var(--vx-surface) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:var(--vx-radius-lg) !important;
  color:var(--vx-cloud) !important;
}
article.post h2,
article.post h3,
.ct-post-card .entry-title,
.ct-card .entry-title{
  color:var(--vx-white) !important;
  font-family:var(--vx-font-display) !important;
}
article.post .entry-meta,
article.post .entry-content,
.ct-post-card .entry-meta{
  color:var(--vx-slate) !important;
}

/* Blocksy WooCommerce page wrapper */
.woocommerce-shop .page-title,
.woocommerce h1.page-title,
.woocommerce-page h1{
  color:var(--vx-white) !important;
  font-family:var(--vx-font-display) !important;
}

/* Content text */
.entry-content,
.page-content,
.wp-block-paragraph{
  color:var(--vx-cloud) !important;
}

/* ─────────── Blocksy footer ─────────── */
#footer,
.ct-footer,
footer.site-footer{
  background:var(--vx-surface) !important;
  border-top:1px solid rgba(200,255,43,.08) !important;
  color:var(--vx-slate) !important;
}
#footer a,
.ct-footer a{color:var(--vx-slate) !important}
#footer a:hover,
.ct-footer a:hover{color:var(--vx-volt) !important}

/* ─────────── WooCommerce shop page (empty state) ─────────── */
.woocommerce-info.woocommerce-no-products-found{
  background:var(--vx-surface) !important;
  border-top-color:var(--vx-volt) !important;
  color:var(--vx-cloud) !important;
}