/*
Theme Name: YB Daily Wash
Theme URI: https://www.ybdailywash.nl
Author: YB Daily Wash
Author URI: https://www.ybdailywash.nl
Description: Op maat gemaakt eenpagina-thema voor YB Daily Wash, mobiele auto-detailing in Tilburg. Bevat de servicebon-tarievensectie, servicegebied-visualisatie en contactblok.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: yb-daily-wash
*/

@font-face{
  font-family:'Bebas Neue';
  src: url('assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'Inter';
  src: url('assets/fonts/Inter-var.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-var.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

  :root{
    --navy: #0D3A8A;
    --navy-ink: #071d3f;
    --navy-deep: #050f24;
    --cream: #F4EFE4;
    --paper: #ffffff;
    --sky: #4f8ef7;
    --charcoal: #14213d;
    --muted: #6b7280;
    --line: #e5e0d3;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--cream);
    color:var(--charcoal);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .display{font-family:'Bebas Neue', sans-serif; letter-spacing:0.5px;}
  .mono{font-family:'JetBrains Mono', monospace;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
  section{position:relative;}

  /* ============ HEADER ============ */
  header{
    position:fixed; top:0; left:0; width:100%; z-index:100;
    padding:18px 0;
    transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
  }
  header.scrolled{
    background: rgba(5,15,36,0.92);
    backdrop-filter: blur(8px);
    padding:10px 0;
    box-shadow: 0 2px 24px rgba(0,0,0,0.25);
  }
  header .wrap{display:flex; align-items:center; justify-content:space-between;}
  .logo-mark{display:flex; align-items:center; gap:10px;}
  .logo-mark img{height:42px; width:auto;}
  .main-nav{ flex:1; display:flex; justify-content:center; }
  .nav-menu{
    display:flex; align-items:center; gap:34px; list-style:none;
  }
  .nav-menu li a{
    color:#dbe4f6; font-size:14px; font-weight:600; letter-spacing:0.2px;
    text-decoration:none; transition:color 0.2s ease; position:relative; padding:4px 0;
  }
  .nav-menu li a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--sky);
    transition:width 0.25s ease;
  }
  .nav-menu li a:hover{ color:#fff; }
  .nav-menu li a:hover::after{ width:100%; }
  .header-cta{display:flex; align-items:center; gap:18px;}
  .menu-toggle{
    display:none; flex-direction:column; justify-content:space-between;
    width:24px; height:17px; background:none; border:none; padding:0; cursor:pointer;
    flex-shrink:0;
  }
  .menu-toggle span{
    display:block; width:100%; height:2px; background:#fff; border-radius:2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .menu-toggle.is-active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2){ opacity:0; }
  .menu-toggle.is-active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .header-cta .tel{
    color:#e7edfa; font-size:14px; font-weight:600; letter-spacing:0.2px;
    display:flex; align-items:center; gap:7px;
  }
  .header-cta .tel svg{width:16px; height:16px; stroke:var(--sky); flex-shrink:0;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--sky); color:#071227; font-weight:700; font-size:14px;
    padding:11px 22px; border-radius:999px; text-decoration:none;
    border:none; cursor:pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 6px 18px rgba(79,142,247,0.35);
  }
  .btn:hover{ transform:translateY(-2px); box-shadow: 0 10px 26px rgba(79,142,247,0.5); }
  .btn.ghost{
    background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4);
    box-shadow:none;
  }
  .btn.ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }

  /* ============ HERO ============ */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    overflow:hidden;
  }
  .hero .bgphoto{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 60% 40%;
  }
  .hero .overlay{
    position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(3,7,18,0.94) 0%, rgba(3,7,18,0.86) 32%, rgba(3,7,18,0.5) 62%, rgba(3,7,18,0.22) 100%);
  }
  .hero .content{ position:relative; z-index:2; padding-top:90px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    color:var(--sky); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
    margin-bottom:22px;
  }
  .hero h1{
    color:#fff; font-size:clamp(52px, 9vw, 108px); line-height:0.94; font-weight:400;
    text-shadow: 0 4px 30px rgba(0,0,0,0.35);
  }
  .hero h1 .accent{ color:var(--sky); }
  .hero p.lede{
    color:#dfe6f5; font-size:clamp(16px,2vw,20px); max-width:560px; margin:26px 0 40px;
    font-weight:400; line-height:1.55;
  }
  .hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .scroll-cue{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,0.6); font-size:11px; letter-spacing:2px; text-transform:uppercase;
    animation: bob 2.2s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(#fff, transparent); }

  /* ============ SECTION HEADERS ============ */
  .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .section-head .eyebrow{ color:var(--navy); justify-content:center; }
  .section-head h2{
    font-family:'Bebas Neue', sans-serif; font-size:clamp(36px,5vw,54px);
    color:var(--charcoal); letter-spacing:0.5px; line-height:1.02;
  }
  .section-head p{ color:var(--muted); font-size:16px; margin-top:14px; line-height:1.6; }

  /* ============ REVEAL ============ */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ============ TICKETS (signature pricing) ============ */
  .tickets-section{ padding:130px 0 110px; background:var(--cream); }
  .tickets{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
    align-items:start;
  }
  .ticket{
    position:relative;
    background:var(--paper);
    border-radius:6px;
    box-shadow: 0 1px 2px rgba(20,33,61,0.04), 0 20px 40px -18px rgba(20,33,61,0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .ticket:hover{ transform:translateY(-8px); box-shadow: 0 1px 2px rgba(20,33,61,0.05), 0 30px 50px -18px rgba(20,33,61,0.28); }
  .ticket.featured{ transform:translateY(-14px); border:2px solid var(--navy); }
  .ticket.featured:hover{ transform:translateY(-20px); }
  .ticket-head{
    padding:26px 26px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  }
  .ticket-no{ font-size:11px; letter-spacing:1.5px; color:var(--muted); }
  .ticket-title{ font-family:'Bebas Neue', sans-serif; font-size:26px; color:var(--charcoal); letter-spacing:0.3px; margin-top:4px; }
  .stamp{
    position:absolute; top:-16px; right:22px; z-index:3;
    background:var(--navy); color:#fff; font-size:11px; font-weight:700;
    letter-spacing:1px; padding:7px 14px; border-radius:3px;
    transform:rotate(4deg);
    box-shadow: 0 6px 14px rgba(13,58,138,0.4);
  }
  .stamp::after{
    content:''; position:absolute; inset:2px; border:1px dashed rgba(255,255,255,0.5); border-radius:2px;
  }
  /* perforation */
  .perf{
    position:relative; height:0; border-top:2px dashed var(--line); margin:0 22px;
  }
  .perf::before, .perf::after{
    content:''; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%;
    background:var(--cream);
  }
  .perf::before{ left:-31px; }
  .perf::after{ right:-31px; }
  .ticket-body{ padding:22px 26px 8px; }
  .check-list{ list-style:none; }
  .check-list li{
    display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:#333; line-height:1.5;
    padding:6px 0;
  }
  .check-list li svg{ width:15px; height:15px; flex-shrink:0; margin-top:3px; stroke:var(--navy); }
  .check-list li.strong{ font-weight:700; color:var(--navy-ink); }
  .ticket-foot{ padding:16px 26px 26px; }
  .toeslagen{ font-size:12.5px; color:var(--muted); margin-bottom:16px; display:flex; flex-direction:column; gap:4px;}
  .toeslagen b{ color:var(--charcoal); }
  .price-row{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; }
  .price-row .from{ font-size:11px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; }
  .price-row .amt{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:32px; color:var(--navy); }
  .wax-note{
    margin:0 26px 22px; background:#eef3fc; border-radius:6px; padding:14px 16px;
    font-size:13px; color:#3a4a63; display:flex; gap:10px; line-height:1.5;
  }
  .wax-note svg{ width:17px; height:17px; stroke:var(--navy); flex-shrink:0; margin-top:2px; }

  /* ============ SERVICE AREA ============ */
  .area-section{ padding:100px 0; background:var(--navy-deep); color:#fff; overflow:hidden; }
  .area-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:70px; align-items:center; }
  .area-grid h2{ font-family:'Bebas Neue', sans-serif; font-size:clamp(34px,4.5vw,50px); line-height:1.05; margin-bottom:20px; }
  .area-grid p{ color:#b7c2dc; font-size:16px; line-height:1.7; max-width:480px; }
  .area-grid .eyebrow{ color:var(--sky); }
  .radius-viz{ position:relative; aspect-ratio:1; max-width:400px; margin:0 auto; }
  .ring{
    position:absolute; border-radius:50%; border:1px solid rgba(79,142,247,0.25);
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
  .ring.r1{ width:100%; height:100%; }
  .ring.r2{ width:70%; height:70%; }
  .ring.r3{ width:40%; height:40%; }
  .ring-pulse{
    position:absolute; border-radius:50%; border:1px solid var(--sky);
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:40%; height:40%; opacity:0;
    animation: pulse 3.6s ease-out infinite;
  }
  @keyframes pulse{
    0%{ width:40%; height:40%; opacity:0.7; }
    100%{ width:100%; height:100%; opacity:0; }
  }
  .pin{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
  }
  .pin .dot{ width:14px; height:14px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 6px rgba(79,142,247,0.18); }
  .pin span{ font-size:12px; letter-spacing:2px; color:#fff; font-weight:700; }
  .radius-label{
    position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--sky);
    background:rgba(5,15,36,0.7); padding:5px 12px; border-radius:999px; border:1px solid rgba(79,142,247,0.3);
  }

  /* ============ TRUST STRIP ============ */
  .trust-section{ padding:90px 0; background:var(--cream); }
  .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
  .trust-item{ text-align:center; padding:0 30px; position:relative; }
  .trust-item + .trust-item::before{
    content:''; position:absolute; left:0; top:10%; height:80%; width:1px; background:var(--line);
  }
  .trust-item .icon{
    width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  }
  .trust-item .icon svg{ width:24px; height:24px; }
  .trust-item h3{ font-family:'Bebas Neue', sans-serif; font-size:20px; letter-spacing:0.5px; margin-bottom:8px; }
  .trust-item p{ color:var(--muted); font-size:14.5px; line-height:1.55; }

  /* ============ CTA BAND ============ */
  .cta-band{
    background:var(--navy); color:#fff; padding:70px 0; text-align:center;
  }
  .cta-band h2{ font-family:'Bebas Neue', sans-serif; font-size:clamp(30px,4vw,44px); margin-bottom:14px; }
  .cta-band p{ color:#cddaf5; margin-bottom:30px; }
  .cta-band .cta-row{ justify-content:center; }

  /* ============ FOOTER ============ */
  footer{ background:var(--navy-deep); color:#a9b6d1; padding:64px 0 30px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; margin-bottom:44px; }
  .footer-brand img{ height:52px; margin-bottom:14px; }
  .footer-brand p{ max-width:320px; font-size:14px; line-height:1.6; color:#8b9ab8; }
  .footer-tagline{
    font-family:'Bebas Neue', sans-serif; font-size:clamp(20px,2.6vw,28px); color:#fff;
    letter-spacing:0.3px; max-width:420px; line-height:1.15; text-align:right;
  }
  .footer-contact{ display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,0.08); }
  .footer-contact a{ display:flex; align-items:center; gap:9px; font-size:14px; text-decoration:none; color:#c3cee5; transition:color 0.2s; }
  .footer-contact a:hover{ color:#fff; }
  .footer-contact svg{ width:16px; height:16px; stroke:var(--sky); flex-shrink:0; }
  .footer-bottom{ margin-top:34px; font-size:12.5px; color:#5f6f92; text-align:center; }

  /* ============ AFSPRAAK PAGINA ============ */
  .booking-hero{
    background: var(--navy-deep); color:#fff; padding:150px 0 70px; text-align:center;
  }
  .booking-hero .eyebrow{ justify-content:center; color:var(--sky); }
  .booking-hero h1{
    font-family:'Bebas Neue', sans-serif; font-size:clamp(38px,5.5vw,60px); letter-spacing:0.5px; margin-top:6px;
  }
  .booking-hero p{ color:#b7c2dc; max-width:520px; margin:16px auto 0; line-height:1.6; }

  .booking-section{ background:var(--cream); padding:70px 0 110px; }
  .booking-wrap{ max-width:640px; margin:0 auto; }

  .form-card{
    background:var(--paper); border-radius:8px; padding:40px 40px 36px;
    box-shadow: 0 1px 2px rgba(20,33,61,0.04), 0 20px 40px -18px rgba(20,33,61,0.18);
  }
  .form-notice{
    border-radius:6px; padding:16px 20px; margin-bottom:26px; font-size:14.5px; line-height:1.55;
  }
  .form-notice.success{ background:#e7f6ec; color:#175c34; border:1px solid #b8e6c6; }
  .form-notice.error{ background:#fdeceb; color:#8a2b21; border:1px solid #f3c2bd; }

  .field{ margin-bottom:20px; }
  .field label{
    display:block; font-size:13px; font-weight:700; color:var(--charcoal); margin-bottom:7px;
    letter-spacing:0.2px;
  }
  .field .required{ color:var(--sky); }
  .field .optional{ color:var(--muted); font-weight:400; font-size:12px; text-transform:none; letter-spacing:0; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field select,
  .field textarea{
    width:100%; padding:12px 14px; font-family:'Inter', sans-serif; font-size:15px;
    border:1.5px solid var(--line); border-radius:6px; background:#fff; color:var(--charcoal);
    transition: border-color 0.2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--navy);
  }
  .field textarea{ resize:vertical; min-height:100px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; }
  .radio-group{ display:flex; gap:14px; flex-wrap:wrap; }
  .radio-option{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    border:1.5px solid var(--line); border-radius:8px; padding:12px 16px;
    flex:1; min-width:220px; font-size:14.5px; color:var(--charcoal);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .radio-option:has(input:checked){ border-color:var(--navy); background:#eef3fc; }
  .radio-option input[type="radio"]{ accent-color:var(--navy); width:17px; height:17px; flex-shrink:0; }
  .radio-option em{ font-style:normal; color:var(--muted); font-size:13px; display:block; }

  .slot-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:6px;
  }
  .slot-btn{
    font-family:'Inter', sans-serif; font-size:14px; font-weight:600; color:var(--charcoal);
    background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:12px 8px;
    cursor:pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .slot-btn:hover:not(:disabled){ border-color:var(--navy); }
  .slot-btn-selected{ border-color:var(--navy); background:var(--navy); color:#fff; }
  .slot-btn-taken{
    background:#f4f2ee; color:#b9b4a8; border-color:#e8e4da; text-decoration:line-through;
    cursor:not-allowed;
  }
  .slot-hint{ font-size:13px; color:var(--muted); margin-top:10px; }
  @media (max-width:600px){
    .slot-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  .form-submit{
    width:100%; justify-content:center; font-size:15px; padding:14px 22px; margin-top:6px;
    border:none;
  }

  .booking-alt{
    text-align:center; margin-top:28px; font-size:14px; color:var(--muted);
  }
  .booking-alt a{ color:var(--navy); font-weight:700; text-decoration:none; }
  .booking-alt a:hover{ text-decoration:underline; }

  /* ============ ABOUT PAGE ============ */
  .about-section{ background:var(--cream); padding:90px 0 100px; }
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:32px;
  }
  .about-block{
    background:#fff; border-radius:14px; border:1px solid var(--line);
    padding:34px 30px; box-shadow: 0 20px 40px -28px rgba(20,33,61,0.18);
  }
  .about-icon{
    width:48px; height:48px; border-radius:50%; background:var(--navy);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .about-icon svg{ width:23px; height:23px; }
  .about-block h2{
    font-family:'Bebas Neue', sans-serif; font-size:23px; letter-spacing:0.3px;
    color:var(--charcoal); margin-bottom:10px;
  }
  .about-block p{ color:#454f60; font-size:15px; line-height:1.65; }
  .about-cta{
    text-align:center; margin-top:64px; padding-top:56px; border-top:1px solid var(--line);
  }
  .about-cta h2{ font-size:clamp(26px,3.5vw,38px); color:var(--charcoal); margin-bottom:24px; }
  @media (max-width:860px){
    .about-grid{ grid-template-columns:1fr; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 860px){
    .menu-toggle{ display:flex; }
    .main-nav{
      display:block; position:absolute; top:100%; left:0; width:100%;
      background:rgba(5,15,36,0.98); backdrop-filter:blur(8px);
      max-height:0; overflow:hidden; transition:max-height 0.3s ease;
    }
    .main-nav.is-open{ max-height:320px; }
    .nav-menu{ flex-direction:column; align-items:stretch; gap:0; padding:6px 28px 20px; }
    .nav-menu li a{ display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
    .nav-menu li a::after{ display:none; }
    .tickets{ grid-template-columns:1fr; }
    .ticket.featured{ transform:none; }
    .ticket.featured:hover{ transform:translateY(-8px); }
    .area-grid{ grid-template-columns:1fr; gap:50px; }
    .footer-tagline{ text-align:left; }
    .footer-top{ flex-direction:column; }
    .field-row{ grid-template-columns:1fr; gap:0; }
    .form-card{ padding:30px 24px 26px; }
  }
  @media (max-width: 600px){
    .trust-grid{ grid-template-columns:1fr; gap:36px; }
    .trust-item + .trust-item::before{ display:none; }
    .header-cta .tel{ display:none; }
    .footer-contact{ justify-content:center; text-align:center; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  :focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }