/*
Theme Name: Hall of Wheels – Industrial Sent Style
Theme URI: https://hallofwheels.nl/
Author: Hall of Wheels / ChatGPT
Description: WordPress-thema in de aangeleverde Industrial & Bold Hall of Wheels stijl. Mei 2027, exacte datum volgt. Standhouder- en sponsorprijzen zijn tijdelijk verborgen.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hall-of-wheels-industrial
*/

:root{
  --how-orange:#ff5a00;
  --how-orange-dark:#b43700;
  --how-black:#050505;
  --how-dark:#0b0b0b;
  --how-panel:#111111;
  --how-panel-2:#171717;
  --how-line:#2a2a2a;
  --how-text:#f1f1ed;
  --how-muted:#aaa49d;
  --how-metal:#d6d5cf;
  --how-max:1180px;
  --how-radius:16px;
  --how-shadow:0 28px 80px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#050505;
  color:var(--how-text);
  font-family:'Rajdhani','Oswald','Arial Narrow',Arial,sans-serif;
  line-height:1.58;
  letter-spacing:.01em;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,90,0,.12), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(255,90,0,.08), transparent 28%),
    linear-gradient(180deg, #070707 0%, #030303 100%);
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.25;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(255,90,0,.07) 27px 29px, transparent 30px 56px);
  background-size:80px 80px,80px 80px,240px 240px;
  mix-blend-mode:screen;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--how-orange)}
img{max-width:100%;height:auto}

.how-wrap{width:min(var(--how-max), calc(100% - 36px)); margin:0 auto}
.how-section{padding:82px 0; position:relative}
.how-section--tight{padding:52px 0}
.how-section--black{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005))}
.how-kicker{color:var(--how-orange); font-weight:900; text-transform:uppercase; letter-spacing:.15em; font-size:.9rem; margin:0 0 10px}
.how-title{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; margin:0 0 20px; font-size:clamp(2.4rem, 6vw, 5.7rem); line-height:.92; letter-spacing:.035em; text-transform:uppercase; color:var(--how-metal); text-shadow:2px 2px 0 #000, 0 0 18px rgba(255,90,0,.18)}
.how-title .orange{color:var(--how-orange)}
.how-lead{font-size:1.2rem; color:#d7d2cb; max-width:720px; margin:0 0 24px}
.how-muted{color:var(--how-muted)}

.how-btn, .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 23px;
  min-height:48px;
  background:linear-gradient(180deg, #ff6a00, #e34a00);
  color:#0a0a0a !important;
  border:1px solid rgba(255,132,42,.75);
  border-radius:4px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
  box-shadow:0 12px 35px rgba(255,90,0,.21);
  transition:.18s ease;
}
.how-btn:hover, .wp-block-button__link:hover{transform:translateY(-2px); color:#000!important; filter:brightness(1.06)}
.how-btn--ghost{
  background:rgba(10,10,10,.56); color:var(--how-text)!important; border:1px solid rgba(255,255,255,.32); box-shadow:none;
}
.how-btn--ghost:hover{border-color:var(--how-orange); color:var(--how-orange)!important; background:rgba(255,90,0,.08)}

/* Header */
.how-site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(3,3,3,.78);
  border-bottom:1px solid rgba(255,90,0,.18);
  backdrop-filter:blur(16px);
}
.how-header-inner{height:86px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.how-brand{display:flex; align-items:center; gap:14px; min-width:230px}
.how-logo-img{width:62px; height:62px; object-fit:contain; display:block; filter:drop-shadow(0 0 18px rgba(255,90,0,.25))}
.how-brand-text{display:flex; flex-direction:column; line-height:1}
.how-brand-title{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:1.62rem; letter-spacing:.055em; color:#f2f2ee; text-transform:uppercase}
.how-brand-sub{font-size:.74rem; font-weight:900; color:var(--how-orange); text-transform:uppercase; letter-spacing:.17em; margin-top:5px}
.how-main-menu{display:flex; align-items:center; gap:24px; list-style:none; padding:0; margin:0}
.how-main-menu a{font-size:.88rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#eee}
.how-main-menu .current-menu-item>a, .how-main-menu a:hover{color:var(--how-orange)}
.how-header-action{display:flex; align-items:center; gap:12px; font-weight:950; color:var(--how-orange); white-space:nowrap}
.how-menu-toggle{display:none; background:transparent; border:1px solid rgba(255,90,0,.55); color:#fff; padding:10px 12px; border-radius:4px; text-transform:uppercase; font-weight:900}

/* Hero in sent-image style */
.how-hero{
  position:relative; min-height:760px; display:flex; align-items:center; overflow:hidden;
  border-bottom:1px solid rgba(255,90,0,.24);
  background:
    linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 42%, rgba(0,0,0,.3) 100%),
    radial-gradient(circle at 20% 72%, rgba(255,90,0,.18), transparent 22%),
    radial-gradient(circle at 82% 65%, rgba(255,90,0,.14), transparent 22%),
    url('assets/img/industrial-texture.jpg') center/cover no-repeat,
    #050505;
}
.how-hero:before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.88)),
    radial-gradient(circle at center, transparent 0 35%, rgba(0,0,0,.52) 78%);
  z-index:0;
}
.how-hero:after{
  content:""; position:absolute; inset:auto 0 0; height:92px;
  background:repeating-linear-gradient(135deg, rgba(255,90,0,.75) 0 18px, transparent 18px 40px);
  opacity:.18; z-index:1;
}
.how-hero .how-wrap{position:relative; z-index:2}
.how-hero-grid{display:grid; grid-template-columns:1fr 330px; gap:42px; align-items:center}
.how-hero-center{text-align:center}
.how-hero-logo{width:120px; height:120px; object-fit:contain; margin:0 auto 14px; filter:drop-shadow(0 0 18px rgba(255,90,0,.35))}
.how-hero-title{
  font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif;
  font-size:clamp(4.6rem, 10.8vw, 11.5rem);
  line-height:.78;
  letter-spacing:.035em;
  text-transform:uppercase;
  margin:0;
  color:#d9d8d1;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,255,255,.1), 0 0 28px rgba(255,90,0,.14);
  filter:contrast(1.08);
}
.how-hero-sub{
  display:block;
  margin:22px auto 26px;
  color:var(--how-orange);
  font-family:'Permanent Marker','Road Rage','Bangers','Arial Black',sans-serif;
  font-style:italic;
  font-size:clamp(1.8rem, 4vw, 4rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  transform:skew(-8deg);
  text-shadow:2px 2px 0 #000;
}
.how-hero-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
.how-side-panel{border:2px solid rgba(255,90,0,.68); background:rgba(0,0,0,.58); padding:22px; box-shadow:var(--how-shadow)}
.how-side-item{display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,90,0,.22)}
.how-side-item:last-child{border-bottom:0}
.how-side-icon{width:54px;height:54px;border:2px solid var(--how-orange);display:grid;place-items:center;color:var(--how-orange);font-size:1.65rem}
.how-side-label{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:1.75rem; text-transform:uppercase; color:#fff; line-height:1.02}
.how-side-small{font-size:.82rem; color:var(--how-muted); font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-top:4px}
.how-update-box{margin-top:24px; border:2px solid var(--how-orange); padding:20px; text-align:center; color:var(--how-orange); font-weight:950; text-transform:uppercase; letter-spacing:.08em; font-size:1.55rem}

.how-event-strip{margin-top:-42px; position:relative; z-index:5}
.how-strip-grid{display:grid; grid-template-columns:repeat(4,1fr); background:rgba(8,8,8,.88); border:1px solid rgba(255,90,0,.5); box-shadow:var(--how-shadow)}
.how-strip-item{display:flex; gap:15px; align-items:center; padding:20px 22px; border-right:1px solid rgba(255,90,0,.28)}
.how-strip-item:last-child{border-right:0}
.how-strip-icon{color:var(--how-orange); font-size:1.8rem; min-width:34px}
.how-strip-title{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:1.45rem; text-transform:uppercase; line-height:1; color:#f4f4ef; letter-spacing:.04em}
.how-strip-text{font-size:.82rem; color:var(--how-muted); text-transform:uppercase; font-weight:800; margin-top:3px}

/* Cards and grids */
.how-grid{display:grid; gap:24px}
.how-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.how-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.how-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.how-card{
  background:linear-gradient(180deg, rgba(20,20,20,.95), rgba(9,9,9,.95));
  border:1px solid rgba(255,90,0,.32);
  border-radius:var(--how-radius);
  padding:28px;
  box-shadow:0 12px 40px rgba(0,0,0,.36);
  position:relative;
  overflow:hidden;
}
.how-card:before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,90,0,.09), transparent 35%); pointer-events:none; opacity:.6}
.how-card > *{position:relative; z-index:1}
.how-card h2,.how-card h3{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; text-transform:uppercase; letter-spacing:.04em; line-height:1; color:#eee; margin:0 0 12px}
.how-card h3{font-size:2rem}
.how-card p{color:#d1ccc5; margin:0 0 14px}
.how-card ul{margin:0; padding:0; list-style:none}
.how-card li{position:relative; padding-left:24px; margin:9px 0; color:#d6d1ca}
.how-card li:before{content:'✓'; position:absolute; left:0; color:var(--how-orange); font-weight:950}
.how-icon-card{text-align:center; padding:34px 22px}
.how-icon{font-size:2.3rem; color:var(--how-orange); margin-bottom:16px}

.how-page-hero{padding:74px 0 58px; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.95)), url('assets/img/industrial-texture.jpg') center/cover no-repeat; border-bottom:1px solid rgba(255,90,0,.25)}
.how-page-hero .how-title{margin-bottom:8px}
.how-breadcrumb{font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--how-muted); font-size:.85rem}
.how-breadcrumb span{color:var(--how-orange)}

/* Standhouder prijzen only used on standhouder page */
.how-price-card{padding:0; border:2px solid rgba(255,90,0,.52)}
.how-price-head{background:linear-gradient(180deg, #ff5a00, #c43d00); padding:14px 20px; text-align:center; color:#111; font-weight:950; text-transform:uppercase; letter-spacing:.08em}
.how-price-body{padding:28px; text-align:center}
.how-price-name{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:2.3rem; text-transform:uppercase; color:#e8e8e2; line-height:1}
.how-price-amount{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:4.2rem; color:var(--how-orange); line-height:.95; margin:8px 0 4px}
.how-price-incl{text-transform:uppercase; color:#ddd; font-weight:900; letter-spacing:.08em; margin-bottom:20px}
.how-price-card ul{text-align:left; margin:18px 0 26px}

.how-rule{display:grid; grid-template-columns:92px 1fr; gap:22px; align-items:center; border:1px solid rgba(255,90,0,.35); background:rgba(10,10,10,.7); padding:22px; border-radius:14px}
.how-rule-icon{font-size:2.6rem; color:var(--how-orange); display:grid; place-items:center; width:70px; height:70px; border:2px solid rgba(255,90,0,.55)}
.how-rule-title{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; font-size:2rem; text-transform:uppercase; color:#eee; line-height:1; margin:0 0 6px}
.how-rule p{margin:0; color:#cfc8be}

.how-form-placeholder{border:1px dashed rgba(255,90,0,.5); background:rgba(255,90,0,.06); padding:22px; color:#ddd; border-radius:12px; margin-top:20px}
.how-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.how-input{padding:14px 16px; border:1px solid rgba(255,90,0,.28); background:#0a0a0a; color:#fff; border-radius:4px; width:100%}
textarea.how-input{min-height:130px; grid-column:1/-1}

/* Footer */
.how-footer{background:#050505; border-top:1px solid rgba(255,90,0,.25); padding:48px 0 18px}
.how-footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.how-footer-logo{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.how-footer-logo img{width:76px;height:76px;object-fit:contain}
.how-footer h4{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; color:#eee; text-transform:uppercase; letter-spacing:.07em; font-size:1.5rem; margin:0 0 16px}
.how-footer ul{list-style:none; padding:0; margin:0}
.how-footer li{margin:7px 0; color:#bfb9b1}
.how-footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:#85817c; font-size:.88rem}
.how-socials{display:flex; gap:12px; align-items:center}
.how-socials a{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,90,0,.38);color:var(--how-orange);border-radius:50%}

/* WP content fallback */
.entry-content > *{max-width:var(--how-max); margin-left:auto; margin-right:auto}
.entry-content{padding:70px 18px}
.entry-content h1,.entry-content h2,.entry-content h3{font-family:'Bebas Neue','Anton','Impact','Arial Black',sans-serif; text-transform:uppercase; color:#eee}

@media(max-width:980px){
  .how-header-inner{height:auto; padding:14px 0; align-items:flex-start}
  .how-menu-toggle{display:block; margin-left:auto}
  .how-nav{display:none; position:absolute; top:84px; left:0; right:0; background:#050505; border-bottom:1px solid rgba(255,90,0,.28); padding:18px}
  .how-nav.is-open{display:block}
  .how-main-menu{display:block}
  .how-main-menu li{margin:14px 0}
  .how-header-action{display:none}
  .how-hero{min-height:auto; padding:70px 0 100px}
  .how-hero-grid{grid-template-columns:1fr}
  .how-side-panel{max-width:500px; margin:0 auto}
  .how-strip-grid,.how-grid-2,.how-grid-3,.how-grid-4,.how-footer-grid{grid-template-columns:1fr}
  .how-strip-item{border-right:0; border-bottom:1px solid rgba(255,90,0,.25)}
  .how-strip-item:last-child{border-bottom:0}
  .how-form-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .how-wrap{width:min(100% - 24px, var(--how-max))}
  .how-brand{min-width:auto}
  .how-brand-title{font-size:1.25rem}
  .how-logo-img{width:52px;height:52px}
  .how-hero-title{font-size:clamp(3.4rem, 17vw, 5rem)}
  .how-hero-sub{font-size:2rem}
  .how-side-panel{padding:14px}
  .how-side-item{grid-template-columns:54px 1fr}
  .how-section{padding:54px 0}
  .how-rule{grid-template-columns:1fr; gap:12px}
  .how-footer-bottom{display:block}
}