/*
Theme Name: Airco013
Theme URI: https://airco013.nl
Author: Airco013
Author URI: https://airco013.nl
Description: Maatwerk WordPress-thema voor Airco013, auto-airco specialist in Tilburg. Bevat een reserveringsformulier (verstuurt e-mail via wp_mail) en een interactieve tool die inschat welk koudemiddel (R134a, R1234YF of R744) in een auto zit op basis van bouwjaar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: airco013
*/

:root{
  --ink:#141922;
  --ink-soft:#3a4150;
  --paper:#F4F1EA;
  --paper-dim:#e9e4d8;
  --steel:#8b93a1;
  --steel-line:#d8d2c2;
  --r134a:#3E8FC4;
  --r134a-dim:#e6f0f7;
  --r1234yf:#C23B32;
  --r1234yf-dim:#f8e9e7;
  --r744:#4F7A5B;
  --r744-dim:#e7efe9;
  --radius-s:4px;
  --font-display:'Archivo Expanded', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--steel);
  margin:0 0 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:13px 22px;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:focus-visible{outline:3px solid #F2C94C;outline-offset:2px;}
.btn-primary{background:var(--r1234yf);color:#fff;}
.btn-primary:hover{background:#a83128;}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(244,241,234,.4);}
.btn-ghost:hover{border-color:var(--paper);}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:#262e3d;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,25,34,.96);
  color:var(--paper);
  border-bottom:1px solid rgba(244,241,234,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1120px;margin:0 auto;flex-wrap:wrap;gap:12px;}
.logo{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.01em;text-decoration:none;color:var(--paper);}
.logo span{color:var(--r1234yf);}
.logo--custom{display:flex;align-items:center;}
.logo--custom .custom-logo-link{display:flex;align-items:center;}
.logo--custom img{max-height:44px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:22px;font-size:.92rem;flex-wrap:wrap;}
.nav-links ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap;}
.nav-links a{text-decoration:none;color:var(--paper);}
.nav-links a.tel{font-family:var(--font-mono);}
.nav-links a:hover{color:var(--r1234yf);}

/* Hero */
.hero{
  position:relative;
  color:var(--paper);
  padding:64px 0 56px;
  overflow:hidden;
  background:
    linear-gradient(100deg, rgba(20,25,34,.82) 0%, rgba(20,25,34,.55) 55%, rgba(20,25,34,.35) 100%),
    url('https://images.pexels.com/photos/6130/cold-car-bmw-e46.jpg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:20px;}
.hero h1 em{font-style:normal;color:var(--r1234yf);}
.hero p.lead{font-size:1.08rem;max-width:46ch;color:#cfd3da;}
.hero-ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-facts{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.82rem;color:#9aa2b0;}
.hero-facts b{display:block;font-family:var(--font-display);color:var(--paper);font-size:1.3rem;font-weight:700;}
.gauge-wrap{display:flex;justify-content:center;background:rgba(20,25,34,.35);border-radius:8px;padding:12px;}

.hazard-divider{
  height:8px;
  background:repeating-linear-gradient(45deg, var(--r1234yf) 0 18px, var(--ink) 18px 36px);
}

/* trust strip */
.trust{background:var(--paper-dim);border-bottom:1px solid var(--steel-line);}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;padding:16px 28px;font-size:.86rem;font-family:var(--font-mono);color:var(--ink-soft);justify-content:center;}

section{padding:72px 0;}
.section-head{max-width:640px;margin:0 0 40px;}
.section-head.center{margin:0 auto 44px;text-align:center;}

/* why-grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--steel-line);border:1px solid var(--steel-line);}
.why-card{background:var(--paper);padding:28px 26px;}
.why-card .num{font-family:var(--font-mono);font-size:.8rem;color:var(--steel);}
.why-card h3{margin:10px 0 8px;}
.why-card p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* leak section */
.leak{background:var(--paper-dim);color:var(--ink);border-top:1px solid var(--steel-line);border-bottom:1px solid var(--steel-line);}
.leak .section-head p{color:var(--ink-soft);}
.leak-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.leak-copy p{color:var(--ink-soft);}
.leak-copy .stat{font-family:var(--font-display);font-size:2.6rem;color:var(--r1234yf);line-height:1;}
.leak-copy .stat-label{font-family:var(--font-mono);font-size:.8rem;color:var(--steel);margin-bottom:26px;}
.chart-card{background:#fff;border:1px solid var(--steel-line);padding:22px;border-radius:var(--radius-s);}
.chart-card figcaption{font-family:var(--font-mono);font-size:.75rem;color:var(--steel);margin-top:10px;}

.section-photo{width:100%;height:260px;object-fit:cover;border-radius:var(--radius-s);border:1px solid var(--steel-line);margin-bottom:32px;}

/* gas cards */
.gas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.gas-card{background:#fff;border:1px solid var(--steel-line);border-top:5px solid var(--accent);padding:26px 24px;display:flex;flex-direction:column;gap:10px;}
.gas-card .tag{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);text-transform:none;}
.gas-card h3{font-size:1.5rem;}
.gas-card .era{font-family:var(--font-mono);font-size:.8rem;color:var(--steel);}
.gas-card p{color:var(--ink-soft);font-size:.92rem;margin:0;}
.gas-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.85rem;margin:8px 0;padding:12px 0;border-top:1px solid var(--steel-line);}
.gas-card dt{color:var(--steel);}
.gas-card dd{margin:0;font-family:var(--font-mono);}
.gas-card .price{margin-top:auto;font-family:var(--font-display);font-size:1.1rem;padding-top:10px;}
.r134a{--accent:var(--r134a);} .r134a .tag{background:var(--r134a-dim);}
.r1234yf{--accent:var(--r1234yf);} .r1234yf .tag{background:var(--r1234yf-dim);}
.r744{--accent:var(--r744);} .r744 .tag{background:var(--r744-dim);}
.gas-card .tag{display:inline-block;padding:3px 9px;border-radius:2px;width:fit-content;}

/* checker tool */
.checker{background:var(--paper-dim);}
.checker-box{background:#fff;border:1px solid var(--steel-line);padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.checker-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
.checker-form .field{margin-bottom:18px;}
.checker-form input[type=number],
.checker-form select{
  width:100%;padding:11px 12px;font-family:var(--font-mono);font-size:1rem;
  border:1px solid var(--steel-line);border-radius:var(--radius-s);background:var(--paper);
}
.checker-form select:focus-visible,
.checker-form input:focus-visible{outline:2px solid var(--r1234yf);outline-offset:1px;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-soft);font-weight:400;}
.checkbox-row input{margin-top:3px;}
#calcBtn{width:100%;margin-top:6px;}
.result{display:flex;flex-direction:column;justify-content:center;}
.result-empty{color:var(--steel);font-size:.9rem;}
.bar-row{margin-bottom:16px;}
.bar-row .bar-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.82rem;margin-bottom:5px;}
.bar-track{height:10px;background:var(--paper-dim);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;transition:width .5s ease;}
.result-note{font-size:.82rem;color:var(--steel);margin-top:12px;border-top:1px solid var(--steel-line);padding-top:12px;}

/* reservation */
.reserve-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;}
form.book{background:#fff;border:1px solid var(--steel-line);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
form.book .full{grid-column:1/-1;}
form.book label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
form.book input, form.book select, form.book textarea{
  width:100%;padding:11px 12px;font-family:var(--font-body);font-size:.95rem;
  border:1px solid var(--steel-line);border-radius:var(--radius-s);background:var(--paper);
}
form.book input:focus-visible, form.book select:focus-visible, form.book textarea:focus-visible{outline:2px solid var(--r1234yf);outline-offset:1px;}
form.book textarea{resize:vertical;min-height:90px;}
.req{color:var(--r1234yf);}
.form-msg{grid-column:1/-1;font-size:.88rem;padding:12px 14px;border-radius:var(--radius-s);}
.form-msg.ok{background:var(--r744-dim);color:#2c4a35;border:1px solid var(--r744);}
.form-msg.error{background:var(--r1234yf-dim);color:#7a221b;border:1px solid var(--r1234yf);}

.side-info{display:flex;flex-direction:column;gap:22px;}
.info-card{background:var(--paper-dim);border:1px solid var(--steel-line);padding:22px 24px;}
.info-card h3{margin-bottom:10px;font-size:1rem;}
.info-card p{font-size:.9rem;color:var(--ink-soft);margin:0;}
.info-card a{color:var(--r1234yf);font-weight:600;text-decoration:none;}
.info-card a:hover{text-decoration:underline;}

/* contact/footer */
.contact{background:var(--ink);color:var(--paper);}
.contact .section-head p{color:#c3c8d1;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.98rem;}
.contact dt{font-family:var(--font-mono);color:#9aa2b0;font-size:.8rem;padding-top:3px;}
.contact dd{margin:0;}
.contact dd a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(244,241,234,.4);}
.contact dd a:hover{border-color:var(--paper);}
.map-link{
  display:flex;align-items:center;justify-content:center;
  background:#1c2230;border:1px solid #2c3345;height:100%;min-height:200px;
  text-decoration:none;color:var(--paper);font-family:var(--font-mono);font-size:.9rem;
  padding:24px;text-align:center;gap:8px;flex-direction:column;
}
.map-link:hover{border-color:var(--r1234yf);}

.site-footer{background:#0e1219;color:#8890a0;padding:26px 0;font-size:.82rem;}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* why-card icons */
.why-icon{width:34px;height:34px;margin-bottom:14px;}

/* photo band - real photography */
.photo-band{background:var(--paper);}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.photo-grid figure{margin:0;}
.photo-grid img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius-s);border:1px solid var(--steel-line);}
.photo-grid figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:10px;}
.photo-credit{font-family:var(--font-mono);font-size:.72rem;color:var(--steel);text-align:center;margin:28px 0 0;}

/* -------------------------------------------------------------- */
/* Bookly re-skin: scoped overrides so the booking widget matches  */
/* the rest of the site. Bookly's own markup/classnames can shift  */
/* slightly between versions and add-ons - if something looks off  */
/* after activating, right-click that element in the browser,      */
/* "Inspect", note the class Bookly actually rendered, and add a    */
/* matching rule below inside .airco013-bookly-wrap.                */
/* -------------------------------------------------------------- */
.airco013-bookly-wrap{
  background:#fff;
  border:1px solid var(--steel-line);
  padding:28px;
  font-family:var(--font-body);
}
.airco013-bookly-wrap h1,
.airco013-bookly-wrap h2,
.airco013-bookly-wrap h3{
  font-family:var(--font-display);
  color:var(--ink);
}
.airco013-bookly-wrap .bookly-btn,
.airco013-bookly-wrap button.bookly-btn-primary,
.airco013-bookly-wrap input[type=submit]{
  background:var(--r1234yf) !important;
  border-color:var(--r1234yf) !important;
  color:#fff !important;
  border-radius:var(--radius-s) !important;
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.airco013-bookly-wrap .bookly-btn:hover,
.airco013-bookly-wrap button.bookly-btn-primary:hover{
  background:#a83128 !important;
}
.airco013-bookly-wrap .bookly-btn-secondary,
.airco013-bookly-wrap .bookly-btn-cancel{
  background:transparent !important;
  color:var(--ink) !important;
  border:1px solid var(--steel-line) !important;
}
.airco013-bookly-wrap select,
.airco013-bookly-wrap input[type=text],
.airco013-bookly-wrap input[type=email],
.airco013-bookly-wrap input[type=tel],
.airco013-bookly-wrap textarea{
  border:1px solid var(--steel-line) !important;
  border-radius:var(--radius-s) !important;
  font-family:var(--font-body) !important;
  background:var(--paper) !important;
}
.airco013-bookly-wrap .ui-state-active,
.airco013-bookly-wrap .bookly-table-cell-highlight,
.airco013-bookly-wrap .bookly-day-selected{
  background:var(--r1234yf) !important;
  color:#fff !important;
  border-color:var(--r1234yf) !important;
}
.airco013-bookly-wrap a{
  color:var(--r1234yf);
}

/* basic page/post content (page.php, index.php fallback) */
.page-content{padding:72px 0;max-width:760px;margin:0 auto;}
.page-content h1{font-size:2rem;margin-bottom:24px;}
.page-content img{border-radius:var(--radius-s);margin:20px 0;}
.post-list article{padding:28px 0;border-bottom:1px solid var(--steel-line);}
.post-list h2{font-size:1.4rem;margin-bottom:8px;}
.post-list h2 a{text-decoration:none;color:var(--ink);}
.post-list .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--steel);margin-bottom:10px;}

@media (max-width:860px){
  .hero-grid,.leak-grid,.checker-box,.reserve-grid,.contact-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .gas-grid{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:1fr;}
  form.book{grid-template-columns:1fr;}
  .nav-links ul{gap:14px;}
  .gauge-wrap{order:-1;max-width:260px;margin:0 auto;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .bar-fill{transition:none;}
}