/*
Theme Name: Hall of Wheels White Gold
Theme URI: https://hallofwheels.nl
Author: Hall of Wheels
Description: Luxe wit/goud WordPress-thema voor Hall of Wheels, gebaseerd op de white-gold flyer stijl.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hallofwheels
*/

:root{
  --bg:#fbf7ef;
  --paper:#fffdf8;
  --cream:#f4ead8;
  --cream-2:#ead8b9;
  --ink:#33291e;
  --muted:#786a58;
  --gold:#b98738;
  --gold-dark:#7d531e;
  --gold-light:#f2d58e;
  --line:rgba(125,83,30,.20);
  --line-strong:rgba(185,135,56,.48);
  --shadow:0 24px 70px rgba(84,55,22,.14);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at top left,rgba(242,213,142,.28),transparent 24rem),
    radial-gradient(circle at top right,rgba(185,135,56,.14),transparent 26rem),
    linear-gradient(180deg,#fffdf8 0%,#fbf7ef 40%,#f4ead8 100%);
  line-height:1.6;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(115deg,transparent 0 49%,rgba(185,135,56,.09) 49% 49.15%,transparent 49.15%),
    repeating-linear-gradient(90deg,rgba(125,83,30,.035) 0 1px,transparent 1px 110px),
    repeating-linear-gradient(0deg,rgba(125,83,30,.025) 0 1px,transparent 1px 110px);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.container{width:min(1180px,calc(100% - 42px));margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,253,248,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.admin-bar .site-header{top:32px}
.header-inner{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand img{height:54px;width:auto}
.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850;
}
.main-nav a{
  position:relative;
  padding:34px 0 30px;
  color:#403424;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:23px;
  height:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-dark));
  transform:scaleX(0);
  transform-origin:left;
  transition:.22s ease;
}
.main-nav a:hover::after{transform:scaleX(1)}
.header-ticket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:linear-gradient(135deg,#fff,var(--cream));
  color:var(--gold-dark);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.76rem;
  box-shadow:0 12px 30px rgba(185,135,56,.14);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:0 25px;
  border-radius:0;
  border:1px solid var(--line-strong);
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.78rem;
  font-weight:900;
  box-shadow:0 16px 38px rgba(185,135,56,.20);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.08)}
.btn-light{
  background:rgba(255,255,255,.84);
  color:var(--ink);
  box-shadow:none;
}

.hero{
  position:relative;
  min-height:680px;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,253,248,.99) 0%,rgba(255,253,248,.96) 36%,rgba(255,253,248,.68) 58%,rgba(255,253,248,.16) 100%),
    url("assets/hero-white-gold.jpg") right center / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  inset:26px;
  border:1px solid rgba(185,135,56,.32);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 36%),
    radial-gradient(circle at 76% 80%,rgba(242,213,142,.20),transparent 26rem);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:3;
  max-width:620px;
  padding:104px 0 110px;
}
.kicker{
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:900;
  margin-bottom:18px;
}
.hero h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4rem,8vw,7.2rem);
  line-height:.90;
  letter-spacing:-.055em;
  font-weight:700;
  color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.65);
}
.hero h1 span{
  display:block;
  background:linear-gradient(135deg,#f7df9a 0%,#b98738 45%,#704916 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-subtitle{
  margin:18px 0 20px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-dark);
  font-size:clamp(1.35rem,2.4vw,2rem);
}
.hero p{
  margin:0;
  max-width:470px;
  color:#4f4438;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.hero-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:34px;
  max-width:720px;
}
.info-pill{
  min-height:92px;
  padding:17px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(185,135,56,.28);
  box-shadow:0 16px 38px rgba(84,55,22,.10);
}
.info-pill small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
  font-weight:850;
}
.info-pill strong{
  display:block;
  margin-top:6px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-dark);
  font-size:1.16rem;
  line-height:1.12;
}

.section{
  padding:78px 0;
}
.section-title{
  max-width:760px;
  text-align:center;
  margin:0 auto 34px;
}
.section-title .kicker{margin-bottom:10px}
.section-title h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.4rem,4.6vw,4.3rem);
  line-height:1;
  font-weight:700;
  letter-spacing:-.04em;
}
.section-title p{
  margin:16px auto 0;
  max-width:650px;
  color:var(--muted);
}
.alt{
  background:linear-gradient(180deg,rgba(255,253,248,.72),rgba(244,234,216,.72));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  position:relative;
  overflow:hidden;
  min-height:270px;
  padding:34px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(185,135,56,.22);
  box-shadow:var(--shadow);
}
.card::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(185,135,56,.18);
  pointer-events:none;
}
.card-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:grid;
  place-items:center;
  color:var(--gold-dark);
  font-size:1.5rem;
  background:linear-gradient(135deg,#fff,var(--cream));
}
.card h3{
  margin:0 0 12px;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.card p{
  margin:0;
  text-align:center;
  color:var(--muted);
}

.showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.showcase-card{
  position:relative;
  min-height:480px;
  overflow:hidden;
  border:1px solid rgba(185,135,56,.25);
  box-shadow:var(--shadow);
  background-color:#fff;
}
.showcase-card.black{
  background:url("assets/black-car-luxe.jpg") center center / cover no-repeat;
}
.showcase-card.blue{
  background:url("assets/blue-car-luxe.jpg") center center / cover no-repeat;
}
.showcase-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(40,28,12,.36));
}
.showcase-label{
  position:absolute;
  left:24px;
  top:24px;
  padding:10px 15px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(185,135,56,.30);
  color:var(--gold-dark);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
}
.showcase-copy{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:22px;
  background:rgba(255,253,248,.88);
  border:1px solid rgba(185,135,56,.28);
  backdrop-filter:blur(8px);
}
.showcase-copy h3{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
}
.showcase-copy p{
  margin:0;
  color:var(--muted);
}

.info-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.info-card{
  padding:24px;
  min-height:132px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(185,135,56,.22);
  box-shadow:0 14px 36px rgba(84,55,22,.08);
}
.info-card small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
  font-weight:850;
}
.info-card strong{
  display:block;
  margin-top:8px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-dark);
  font-size:1.45rem;
}

.gallery{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-auto-rows:220px;
  gap:16px;
}
.gallery-tile{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(185,135,56,.20);
  box-shadow:0 14px 40px rgba(84,55,22,.10);
  background-size:cover;
  background-position:center;
}
.gallery-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(55,37,11,.50));
}
.gallery-tile.large{grid-row:span 2}
.g1{background-image:url("assets/hero-white-gold.jpg")}
.g2{background-image:url("assets/black-car-luxe.jpg")}
.g3{background-image:url("assets/blue-car-luxe.jpg")}
.g4{background-image:url("assets/hall-detail-luxe.jpg")}
.g5{background-image:url("assets/hall-of-wheels-poster.jpg")}

.cta{
  margin-top:30px;
  padding:44px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(244,234,216,.82)),
    radial-gradient(circle at top right,rgba(242,213,142,.34),transparent 18rem);
  border:1px solid rgba(185,135,56,.28);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.cta h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,3.8vw,3.6rem);
  line-height:1;
}
.cta p{
  margin:10px 0 0;
  color:var(--muted);
}

.site-footer{
  padding:56px 0 32px;
  background:#f1e2c6;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:30px;
}
.footer-logo img{height:54px;width:auto}
.footer-col h4{
  margin:0 0 14px;
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.78rem;
}
.footer-col p,.footer-col a{
  display:block;
  margin:0 0 8px;
  color:var(--muted);
}
.footer-note{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(125,83,30,.16);
  color:var(--muted);
  text-align:center;
}

@media(max-width:980px){
  .admin-bar .site-header{top:46px}
  .main-nav{display:none}
  .header-inner{height:76px}
  .brand img{height:46px}
  .hero{
    min-height:auto;
    background:
      linear-gradient(180deg,rgba(255,253,248,.98),rgba(255,253,248,.72)),
      url("assets/hero-white-gold.jpg") center bottom / cover no-repeat;
  }
  .hero-content{padding:76px 0 310px}
  .hero-info,
  .cards,
  .showcase,
  .info-strip,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .gallery{
    grid-template-columns:1fr 1fr;
  }
  .gallery-tile.large{grid-row:span 1}
  .cta{
    display:block;
  }
  .cta .btn{margin-top:22px}
}
@media(max-width:560px){
  .container{width:min(100% - 28px,1180px)}
  .hero h1{font-size:3.4rem}
  .hero-content{padding-bottom:250px}
  .section{padding:58px 0}
  .gallery{grid-template-columns:1fr}
  .showcase-card{min-height:340px}
}


/* Complete content sections */
.luxe-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.luxe-box{
  padding:24px;
  min-height:150px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(185,135,56,.22);
  box-shadow:0 14px 36px rgba(84,55,22,.08);
}
.luxe-box small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
  font-weight:850;
}
.luxe-box strong{
  display:block;
  margin-top:8px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-dark);
  font-size:1.35rem;
  line-height:1.15;
}
.luxe-box p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:.95rem;
}
.content-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.content-panel{
  padding:34px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(185,135,56,.22);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.content-panel::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(185,135,56,.14);
  pointer-events:none;
}
.content-panel > *{position:relative}
.content-panel h3{
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.75rem;
  line-height:1.1;
}
.content-panel p{
  color:var(--muted);
  margin:0 0 16px;
}
.luxury-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:11px;
}
.luxury-list li{
  display:flex;
  gap:11px;
  color:#4d4235;
}
.luxury-list li::before{
  content:"✓";
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--cream));
  border:1px solid rgba(185,135,56,.30);
  color:var(--gold-dark);
  font-weight:900;
}
.program{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.program-step{
  padding:24px 18px;
  min-height:170px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(185,135,56,.22);
  box-shadow:0 14px 36px rgba(84,55,22,.08);
}
.program-step .number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#fff;
  font-weight:900;
  margin-bottom:14px;
}
.program-step h3{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.18rem;
}
.program-step p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}
.partner-list{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.partner-item{
  min-height:96px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(185,135,56,.18);
  color:var(--gold-dark);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.76rem;
  box-shadow:0 10px 28px rgba(84,55,22,.06);
}
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.faq-item{
  padding:26px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(185,135,56,.20);
  box-shadow:0 12px 30px rgba(84,55,22,.07);
}
.faq-item h3{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
}
.faq-item p{
  margin:0;
  color:var(--muted);
}
.contact-card{
  padding:42px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(244,234,216,.84)),
    radial-gradient(circle at top right,rgba(242,213,142,.34),transparent 20rem);
  border:1px solid rgba(185,135,56,.28);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:24px;
  align-items:center;
}
.contact-card h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.3rem,4.8vw,4.4rem);
  line-height:1;
}
.contact-card p{
  color:var(--muted);
  margin:14px 0 0;
}
.contact-details{
  display:grid;
  gap:12px;
}
.contact-detail{
  padding:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(185,135,56,.22);
}
.contact-detail small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
  font-weight:850;
}
.contact-detail strong{
  display:block;
  margin-top:6px;
  color:var(--gold-dark);
}
@media(max-width:980px){
  .luxe-grid,
  .content-grid,
  .program,
  .partner-list,
  .faq-grid,
  .contact-card{
    grid-template-columns:1fr;
  }
}