/*
Theme Name: Dakman Ontruimingen
Theme URI: https://example.com/
Author: Dakman
Author URI: https://example.com/
Description: Klassiek WordPress-thema voor Dakman Ontruimingen (geen Elementor / geen block builder nodig).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dakman-ontruimingen
*/

/* =========================
   VARIABELEN
   ========================= */
:root{
  --dk-bg:#0b1320;
  --dk-surface:#0f1c2f;
  --dk-surface2:#13243d;
  --dk-text:#eaf0ff;
  --dk-muted:#b7c3dd;

  /* LOGO-ORANJE (1 bron van waarheid) */
  --dk-accent:#ff6a00;
  --dk-accent2:#ff9a2a;

  --dk-line:rgba(255,255,255,.08);
  --dk-shadow:0 10px 30px rgba(0,0,0,.35);
  --dk-max:1160px;
}

/* =========================
   BASIS / RESET
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: var(--dk-bg); /* vlek weg */
  color:var(--dk-text);
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}

.container{width:min(var(--dk-max), calc(100% - 36px)); margin:0 auto}
.small{font-size:.95rem}
.muted{color:var(--dk-muted)}
.hr{height:1px;background:var(--dk-line); margin:28px 0}

/* =========================
   HOEKEN: SECTIES RECHT, FLOATING KNOPPEN ROND
   ========================= */
.hero-card,
.hero-media,
.card,
.section,
.section-inner,
.badge,
.site-footer,
.mobile-nav,
.primary-nav a{
  border-radius: 0 !important;
}

/* =========================
   BADGE
   ========================= */
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border:1px solid rgba(255,106,0,.30);
  background:rgba(255,106,0,.06);
  color:var(--dk-text);
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px; /* buttons mogen rond blijven */
  text-decoration:none;
  border:1px solid var(--dk-line);
  background:rgba(255,255,255,.04);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  font-weight:650;
}

/* GEEN BLAUWE HOVER MEER */
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,106,0,.16);
  border-color:rgba(255,106,0,.55);
  color:var(--dk-text);
}

.btn.primary{
  background:linear-gradient(90deg, var(--dk-accent), var(--dk-accent2));
  border:0;
  color:#0b1320;
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.ghost{background:transparent}

/* =========================
   GRID
   ========================= */
.grid{display:grid; gap:18px}
@media (min-width: 920px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
}

/* =========================
   HEADER
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(11,19,32,.82);
  border-bottom:1px solid var(--dk-line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; gap:16px; /* dunner */
}

/* jouw logo in header */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{
  height:72px; /* groter */
  width:auto;
  display:block;
}

/* hamburger: alleen streepjes (geen rand) */
.nav-toggle{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 2px !important;
  color: #ffffff !important;
  -webkit-tap-highlight-color: transparent;
  font-size: 28px;
  line-height: 1;
}

.primary-nav{display:none}
.header-cta{display:none} /* mail + bel direct uit header */

@media (min-width: 920px){
  .nav-toggle{display:none}
  .primary-nav{display:flex}
}

/* =========================
   NAV
   ========================= */
.primary-nav ul{list-style:none; display:flex; gap:14px; margin:0; padding:0; align-items:center}
.primary-nav a{
  padding:6px 8px;
  text-decoration:none;
  color:var(--dk-muted);
  white-space:nowrap; /* "Over ons" blijft 1 regel */
}
.primary-nav a:hover{color:var(--dk-text); background:rgba(255,255,255,.04)}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color:var(--dk-text);
  background:rgba(255,255,255,.08);
}

.mobile-nav{display:none; border-top:1px solid var(--dk-line)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none; margin:0; padding:12px 0}
.mobile-nav a{
  display:block; padding:12px 8px; text-decoration:none;
  color:var(--dk-muted);
  white-space:nowrap;
}
.mobile-nav a:hover{color:var(--dk-text); background:rgba(255,255,255,.04)}

/* =========================
   HERO
   ========================= */
.hero{padding:46px 0 22px;}
.hero-card{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--dk-shadow);
  overflow:hidden;
}
.hero-inner{display:grid; gap:22px; padding:22px}
@media (min-width: 920px){
  .hero-inner{grid-template-columns:1.1fr .9fr; align-items:center; padding:28px}
}
.h1{font-size:2rem; line-height:1.15; margin:0}
@media (min-width: 920px){ .h1{font-size:2.6rem} }
.lead{font-size:1.05rem; color:var(--dk-muted); margin:10px 0 0}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;
  justify-content:flex-end; /* knoppen rechts */
}

.hero-media{
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

/* =========================
   SECTIES / KAARTEN
   ========================= */
.section{padding:26px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px}
.section-title h2{margin:0; font-size:1.45rem}

/* subtiel oranje accent onder titel */
.section-title h2::after{
  content:'';
  display:block;
  width:48px;
  height:3px;
  background:rgba(255,106,0,.85);
  margin-top:8px;
}

/* cards */
.card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:18px;
  overflow:hidden;
}
.card h3{margin:0 0 8px; font-size:1.1rem}

/* “Zo werken wij” / service cards iets meer oranje leven */
.section .card{
  border-top:2px solid rgba(255,106,0,.75);
}
.section .card:hover{
  box-shadow: 0 0 0 1px rgba(255,106,0,.35);
}

/* icons/vinkjes oranje */
.icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  background:rgba(255,106,0,.14);
  border:1px solid rgba(255,106,0,.35);
  margin-bottom:10px;
  color: var(--dk-accent);
}

/* =========================
   STAPPEN NUMMERS WEG (geen 1 1 1)
   ========================= */
.step:before{ display:none !important; content:none !important; }
.step{ padding-left:0 !important; }

/* =========================
   CALLOUT / SPOED BLOK
   ========================= */
.callout{
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  border-top:1px solid var(--dk-line);
  margin-top:28px;
  padding:26px 0 34px;
  color:var(--dk-muted)
}
.footer-grid{display:grid; gap:18px}
@media (min-width: 920px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr} }
.footer-grid a{color:var(--dk-muted); text-decoration:none}
.footer-grid a:hover{color:var(--dk-text)}

/* =========================
   FLOATING BEL + WHATSAPP (rond, oranje, wit, lager op mobiel)
   ========================= */
.floating-call{
  position:fixed;
  right:16px;
  bottom:34px;
  z-index:1200;
  display:flex;
  gap:12px;
  flex-direction:row; /* zoals je wilde */
}
.fab{
  width:56px;
  height:56px;
  border-radius:999px !important;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:var(--dk-shadow);
  border:0;
  text-decoration:none;
  background:linear-gradient(180deg, var(--dk-accent), var(--dk-accent2));
  color:#fff;
  font-size:22px;
  line-height:1;
}
.fab svg{
  width:31px;
  height:31px;
  fill:#fff;
  stroke:#fff;
}


/* labels (optioneel, jij had ze eerder) */
.fab::after{
  content: attr(data-label);
  position:absolute;
  right:100%;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:rgba(11,19,32,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:650;
  font-size:13px;
  padding:10px 12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.fab:hover::after,
.fab:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

@media (max-width:768px){
  .floating-call{
    right:12px;
    bottom: calc(28px + env(safe-area-inset-bottom)); /* iets lager */
  }
}

/* =========================
   “LEES MEER” MOBIEL FIX + RECHTHOEKJE WEG (placeholder blijft!)
   (jouw HTML: <a class="card"> ... <span class="btn">Lees meer</span></a>)
   ========================= */
a.card{
  display:block;
  position:relative;
  overflow:hidden;
}
a.card > img{
  width:100%;
  height:auto;
  margin:0 0 12px 0;
  border:0;
  background:transparent;
}

/* dit is DE belangrijkste selector */
a.card span.btn{
  display:flex !important;
  width:100% !important;
  max-width:100% !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  margin-top:12px !important;
}

/* kill het “rechthoekje” (pseudo/overlay) */
a.card::before,
a.card::after,
a.card span.btn::before,
a.card span.btn::after{
  content:none !important;
  display:none !important;
}

/* =========================
   RESPONSIVE FIXES (behoud layout)
   ========================= */
.container, .wrap, .site, .site-wrap, .page-wrap, main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 980px){
  .hero, .hero-grid, .grid, .cards, .two-col, .split { display:block !important; }
  .site-header, header { width:100%; }
  nav ul { flex-wrap:wrap; gap:10px; }
}

@media (max-width: 680px){
  .btn, .button, .wp-block-button__link { width:100%; justify-content:center; }
  .card, .panel, .hero-card { padding:16px !important; }
  h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.1; }
  h2 { font-size: clamp(20px, 5vw, 28px); }
}

/* hero mobiel verfijning (zoals jij al goed vond) */
@media (max-width: 768px){
  .hero{ padding: 20px 0 12px; }
  .hero-inner{ gap: 14px; padding: 16px; }
  .hero .badge{ font-size: .85rem; padding: 6px 10px; margin-bottom: 4px; }
  .hero .h1{ font-size: 1.9rem; line-height: 1.15; }
  .hero .lead{ font-size: .95rem; line-height: 1.45; }
  .hero-actions{ gap: 10px; justify-content: stretch; }
  .hero-actions .btn{ padding: 12px 14px; font-size: .95rem; }
  .hero-media{ min-height: 180px; margin-top: 8px; }
}
/* ================================
   WPForms – Dakman Offerte Styling
   ================================ */

/* Form container */
.wpforms-container {
  color: #d6dbe1;
  font-family: inherit;
}

/* Labels */
.wpforms-container label,
.wpforms-container .wpforms-field-label {
  color: #cfd6de !important;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Required ster */
.wpforms-container .wpforms-required-label {
  color: #ff7a18;
}

/* Inputs / textarea / select */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="date"],
.wpforms-container select,
.wpforms-container textarea {
  background: #ffffff;
  color: #111;
  border-radius: 10px;
  border: none;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Placeholder tekst */
.wpforms-container ::placeholder {
  color: #9aa3ad;
}

/* Focus state */
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,122,24,.35);
}

/* Naam (First / Last) netjes onder elkaar mobiel */
.wpforms-container .wpforms-field-name .wpforms-field-row {
  display: flex;
  gap: 10px;
}

@media (max-width: 600px) {
  .wpforms-container .wpforms-field-name .wpforms-field-row {
    flex-direction: column;
  }
}

/* Submit knop */
.wpforms-container .wpforms-submit-container {
  margin-top: 20px;
}

.wpforms-container button.wpforms-submit {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

.wpforms-container button.wpforms-submit:hover {
  background: linear-gradient(135deg, #ff8a2f, #ffad5c);
  transform: translateY(-1px);
}

/* Verwijder blauwe WPForms randjes */
.wpforms-container * {
  box-shadow: none !important;
}
/* ============================
   WPForms BASE – kleur overrides
   ============================ */

/* Submit knop oranje */
.wpforms-container .wpforms-submit,
.wpforms-container button.wpforms-submit {
  background-color: #ff7a18 !important;
  background-image: none !important;
  border-color: #ff7a18 !important;
  color: #ffffff !important;
}

.wpforms-container .wpforms-submit:hover {
  background-color: #ff8f3a !important;
}

/* Dropdown geselecteerde tekst (blauw → oranje) */
.wpforms-container select {
  color: #ff7a18 !important;
}

/* Dropdown pijl / focus rand */
.wpforms-container select:focus,
.wpforms-container input:focus,
.wpforms-container textarea:focus {
  border-color: #ff7a18 !important;
  box-shadow: 0 0 0 2px rgba(255,122,24,.35) !important;
}

/* Required ster */
.wpforms-container .wpforms-required-label {
  color: #ff7a18 !important;
}

/* Link-achtige blauwe tekst verwijderen */
.wpforms-container a {
  color: #ff7a18 !important;
}
/* === FORCE WPFORMS SUBMIT BUTTON (DESKTOP & MOBILE) === */
body .wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit {
  background-color: #ff7a18 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 36px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(255, 122, 24, 0.35) !important;
  text-transform: none !important;
}

/* Hover */
body .wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit:hover {
  background-color: #ff8f2a !important;
}

/* Focus / active */
body .wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit:focus,
body .wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit:active {
  background-color: #ff7a18 !important;
  outline: none !important;
}

/*hero / afsluitzin */
.hero .lead span.hero-extra {
	color: #ff8a00 !important;
	font-weight: 600;
}

.regio-links a {
  text-decoration: none;
  color: inherit;
}

.regio-links a:hover {
  text-decoration: underline ;
}

.regio-links a,
.regio-links a:visited,
.regio-links a:hover,{
	color: #f47b20;
}
.regio-links a:active {
	text-decoration: none !important;
	border-bottom: none !important;
}