/*
Theme Name: CIM Cars
Theme URI: https://www.cimcars.com
Author: ICT Ready
Description: WordPress-thema op basis van Bootstrap 5 en Bootstrap Icons voor CIM Cars — 1-op-1 herbouw van de originele Webflow-site (kleuren, fonts en layout uit de bronsite). Met Custom Post Type 'auto' en ACF Pro-velden.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cimcars
*/

/* ==== Tokens uit de originele site (Webflow) ==== */
:root{
	--cim-rood:#b30000;        /* firebrick */
	--cim-donker:#161616;      /* grayblack */
	--cim-gains:#e3e3e3;       /* gainsboro — body & nav */
	--cim-zilver:#b7b7b7;
	--cim-alt:#d4d4d4;         /* afwisselende sectie */
	--cim-grijs:#e3e3e3;       /* legacy alias */
}
body{margin:0;font-family:"Montserrat",sans-serif;font-size:16px;line-height:28px;color:#1a1b1f;background:var(--cim-gains)}
h1,h2,h3,h4,h5,h6{font-family:"Roboto",sans-serif}
a{color:var(--cim-rood);text-decoration:none}
a:hover{color:#7f0000}

/* ==== Topbar (fixed, zoals origineel) ==== */
.cim-topbar{position:fixed;top:0;left:0;right:0;z-index:1040;background:var(--cim-donker);box-shadow:0 0 8px rgba(0,0,0,.23);height:35px;display:flex;align-items:center}
.cim-topbar,.cim-topbar a{color:#c9c9c9;font-size:14px;font-weight:300;line-height:16px}
.cim-topbar a:hover{color:#fff}
.cim-topruimte{height:35px}
body.admin-bar .cim-topbar{top:32px}

/* ==== Navigatie: gainsboro, 100px, items gecentreerd ==== */
.navbar-cim{background:var(--cim-gains);box-shadow:0 1px 6px 1px #000;min-height:100px;padding:10px 30px}
.navbar-cim .nav-link{font-family:"Roboto",sans-serif;font-size:18px;font-weight:500;text-transform:uppercase;line-height:20px;color:var(--cim-donker);padding:9px 20px}
.navbar-cim .nav-link:hover,.navbar-cim .nav-link.active,.navbar-cim .current-menu-item>.nav-link{color:var(--cim-rood)}
.navbar-cim .custom-logo-link{display:inline-flex;align-items:center;padding:0}
.navbar-cim img.custom-logo{height:42px !important;width:auto !important;max-width:none}
.navbar-brand-tekst{font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--cim-rood);font-size:1.7rem}
.navbar-brand-tekst:hover{color:#7f0000}
.offcanvas-cim{background:#fff}
.offcanvas-cim .nav-mob{font-family:"Roboto",sans-serif;font-size:18px;font-weight:500;text-transform:uppercase;color:var(--cim-donker);text-align:center;padding:15px 30px;display:block}
.offcanvas-cim .nav-mob:hover{background:#f7f8f9;color:var(--cim-rood)}
.offcanvas-cim .navbar-nav .nav-item{width:100%}
.offcanvas-cim .navbar-nav .nav-link{font-family:"Roboto",sans-serif;font-size:18px;font-weight:500;text-transform:uppercase;color:var(--cim-donker);text-align:center;padding:15px 30px}
.offcanvas-cim .navbar-nav .nav-link:hover{background:#f7f8f9;color:var(--cim-rood)}

/* ==== Knoppen (button-3 uit origineel: hoekig, 4px rand, Roboto 700) ==== */
.btn-cim,.btn-wit-omlijnd{background:var(--cim-rood);border:4px solid var(--cim-rood);color:var(--cim-gains);border-radius:0;font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:9px 15px;box-shadow:4px 4px 9px rgba(0,0,0,.2);transition:color .2s,transform .2s}
.btn-cim:hover,.btn-cim:focus,.btn-wit-omlijnd:hover,.btn-wit-omlijnd:focus{background:var(--cim-rood);border-color:var(--cim-rood);color:var(--cim-zilver);transform:translate(1px,1px)}

/* ==== Hero-slider en paginakoppen ==== */
.cim-hero,.cim-hero .carousel,.cim-hero .carousel-inner,.cim-hero .carousel-item{height:calc(100vh - 135px);min-height:560px}
.cim-hero .carousel-item img.cim-hero-foto,.cim-paginakop .cim-kop-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cim-overlay{position:absolute;inset:0;background:rgba(0,0,0,.22)}
.cim-hero-titel{font-family:"Roboto",sans-serif;font-weight:500;font-size:60px;line-height:70px;color:#fff;text-shadow:0 1px 6px #000;margin:0}
.cim-hero-sub{color:#fff;text-shadow:1px 1px 5px #000;font-size:24px;font-weight:600;margin-bottom:20px}
.cim-paginakop{position:relative;background:var(--cim-donker);color:#fff;overflow:hidden}
.cim-paginakop h1{font-family:"Roboto",sans-serif;font-weight:500;text-shadow:0 1px 6px #000}
.cim-kruimel{font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:#fff;text-shadow:1px 1px 5px #000}

/* ==== Koppen en paragrafen (heading-12 / heading-13 / paragraph-3) ==== */
.cim-kop-groot{font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:5px;font-size:84px;line-height:85px;margin:0}
.cim-kop-sub{font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase;font-size:36px;line-height:50px;margin:0}
.cim-para{font-family:"Roboto",sans-serif;font-size:20px;font-weight:300;line-height:28px;margin:0}
.cim-lijn-l{border-left:3px solid var(--cim-rood)}
.cim-lijn-r{border-right:3px solid var(--cim-rood)}
.cim-sectie{padding:100px 0}
.cim-sectie-alt{background:var(--cim-alt)}

/* ==== Horizontale kaarten homepage (hoz-img) ==== */
.hoz-kaart{flex:1 1 0;min-width:230px;max-width:300px;height:400px;position:relative;overflow:hidden;box-shadow:4px 4px 9px rgba(0,0,0,.45);transition:transform .2s;display:flex;margin-right:0}
.hoz-kaart:hover{transform:scale(1.01)}
.hoz-kaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hoz-overlay{position:relative;background-image:linear-gradient(transparent,rgba(0,0,0,.38));width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 10px 10px}
.hoz-naam{color:#fff;font-family:"Roboto",sans-serif;font-weight:500;font-size:30px;line-height:33px;letter-spacing:3px;margin:0 0 10px}
.plus-box{border:3px solid var(--cim-rood);width:50px;height:40px;flex:0 0 auto;color:var(--cim-rood);font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:background .2s,color .2s}
.hoz-kaart:hover .plus-box{background:var(--cim-rood);color:var(--cim-gains)}

/* ==== Autokaarten (collection-item-2: transparant, hoekig, neumorf hover) ==== */
.cim-kaart{background:transparent;border:none;border-radius:0;transition:transform .2s,box-shadow .2s}
.cim-kaart:hover{transform:scale(1.01);box-shadow:-4px -4px 11px 2px #fff,1px 1px 12px rgba(0,0,0,.75)}
.cim-kaart .card-footer,.cim-kaart .card-body{background:transparent;padding-left:10px;padding-right:10px}
.cim-kaart-titel{font-family:"Roboto",sans-serif;font-weight:700;font-size:20px;line-height:30px}
.cim-kaart-titel a,.cim-kaart h3 a{color:var(--cim-donker)}
.cim-kaart-titel a:hover,.cim-kaart h3 a:hover{color:var(--cim-rood)}
.cim-foto{overflow:hidden;display:block;box-shadow:1px 1px 6px rgba(0,0,0,.35)}
.cim-foto img{transition:transform .35s ease;width:100%;height:100%;object-fit:cover}
.cim-kaart:hover .cim-foto img{transform:scale(1.04)}
.cim-spec{font-size:13px;line-height:20px;color:#4b4b4b}
.cim-spec i{color:var(--cim-rood)}
.cim-prijs{font-family:"Roboto",sans-serif;font-weight:700;color:var(--cim-rood)}
.badge-verkocht{background:var(--cim-rood);color:var(--cim-gains);font-family:"Roboto",sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:0}
.cim-plaats{background:#d0d0d0;color:#8e8e8e}

/* ==== Detailpagina ==== */
.cim-tabel{background:#fff;box-shadow:1px 1px 6px rgba(0,0,0,.2)}
.cim-tabel th{font-family:"Roboto",sans-serif;font-weight:500}

/* ==== Footer (gradient #262626 → #161616) + Webhouse-balk ==== */
.cim-footer{background-color:#262626;background-image:linear-gradient(to bottom,#262626 27%,var(--cim-donker));color:var(--cim-zilver);padding-top:40px}
.cim-footer a{color:var(--cim-zilver);font-weight:300}
.cim-footer a:hover{color:var(--cim-zilver);text-decoration:underline}
.cim-footer h5{color:var(--cim-gains);font-weight:500;font-size:20px;line-height:34px;border-bottom:1px solid #373737;padding-bottom:4px;margin-bottom:12px}
.cim-adres{font-family:"Roboto",sans-serif;font-weight:500;font-size:16px;line-height:26px;color:silver}
.cim-webhouse{background-color:var(--cim-rood);background-image:linear-gradient(149deg,#a30000 23%,#7f0000);box-shadow:inset 0 6px 10px rgba(0,0,0,.24);color:#fff;font-size:16px;line-height:28px;padding:8px 10px;text-align:center}
.cim-webhouse a{color:#fff;text-decoration:underline;display:inline}
.cim-webhouse a:hover{color:#fff}

/* ==== Formulieren ==== */
.form-control{border-radius:0;background:#fff;border:1px solid #ccc}
.form-control:hover{border-color:#e3e6eb}
.form-control:focus{border-color:#43464d;box-shadow:none}
.form-label{font-family:"Roboto",sans-serif;font-weight:500;font-size:15px}
.wpcf7 input:not([type="submit"]),.wpcf7 textarea{width:100%;border-radius:0;background:#fff;border:1px solid #ccc;padding:.375rem .75rem}
.wpcf7 input[type="submit"]{background:var(--cim-rood);border:4px solid var(--cim-rood);color:var(--cim-gains);border-radius:0;font-family:"Roboto",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:9px 15px}

/* ==== Responsief (breakpoints uit origineel) ==== */
@media screen and (max-width:991px){
	.cim-kop-groot{font-size:60px;line-height:62px;text-align:center}
	.cim-lijn-l,.cim-lijn-r{border-left:none !important;border-right:none !important;border-bottom:3px solid var(--cim-rood)}
	.cim-sectie{padding:60px 0}
	.navbar-cim{min-height:80px}
}
@media screen and (max-width:767px){
	.cim-hero-titel{font-size:34px;line-height:38px;letter-spacing:5px}
	.cim-hero-sub{font-size:18px;line-height:22px}
	.cim-kop-groot{font-size:40px;line-height:52px;letter-spacing:2px}
	.cim-kop-sub{font-size:28px;line-height:38px}
	.cim-para{font-size:16px;line-height:22px}
}
@media screen and (max-width:479px){
	.cim-topbar{display:none}
	.cim-topruimte{height:0}
	.cim-hero,.cim-hero .carousel,.cim-hero .carousel-inner,.cim-hero .carousel-item{height:75vh;min-height:480px}
}

/* ==== WordPress basis ==== */
.wp-post-image{height:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}