/*
Theme Name: DJ Levaro Editable SEO Theme
Theme URI: https://djlevaro.nl/
Author: Jouke van der Kam
Description: Snel, SEO-vriendelijk en volledig via WordPress pagina's aanpasbaar klassiek thema voor DJ Levaro. Inclusief starterpagina's, brede blokken, LocalBusiness schema, responsive design en conversiegerichte styling.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: djlevaro
Tags: custom-logo, featured-images, block-styles, wide-blocks, one-column, full-site-editing-ready
*/

:root{
  --dl-bg:yellow;              /* #080914; */  
	--dl-bg-soft: yellow;      /* #111329; */  
	--dl-card:#0f172a;
	--dl-text:#1D2327;
    --dl-muted:black;      /* Update:text site*/  
	--dl-primary:green;     /* #dc2626 */  
	--dl-secondary:yellow;    /* logo DL */  
	--dl-accent:yellow;     /* logo DL*/ 
	--dl-white: white;
	--dl-dark: #000;     /* #0f172a */ 
  --dl-radius:26px;
	--dl-shadow:0 24px 80px rgba(0,0,0,.32);
	--dl-width:1180px;
	--dl-wide:1440px;
	--dl-kop1:#FDFDFD;
	--dl-kop2:#56AADA;
	--dl-kop3:#56AADA;
	--dl-kop4:#56AADA;
    --dl-menu:#1D2327;   /* #0f172a */ 
	--dl-menubg:white;
}

.header-usps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  padding: 10px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.header-usp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
	color:var(--dl-white);
  white-space: nowrap;
}

.usp-icon {
  font-size: 18px;
}

.header-usp strong {
  font-weight: 700;
}

@media (max-width: 600px) {
  .header-usps {
    flex-direction: column;
    gap: 8px;     
    padding: 12px 10px;
  }

  .header-usp {
    justify-content: center;
    font-size: 13px;
	  color:var(--dl-white);
  }
}


#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span {
    color: #EAB75F !important;
}




*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65;font-size:17px}a{color:inherit}img{max-width:100%;height:auto}.screen-reader-text{position:absolute;left:-9999px}.dl-container{width:min(calc(100% - 40px),var(--dl-width));margin-inline:auto}.dl-wide{width:min(calc(100% - 24px),var(--dl-wide));margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50; padding-top: 2px; padding-bottom: 2px; background-color: #F0F0F0; color:var(--dl-white); backdrop-filter:blur(18px);border-bottom:0px solid rgba(255,255,255,.08)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;letter-spacing:-.04em;font-size:26px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--dl-primary),var(--dl-secondary));display:grid;place-items:center;color:#06101d;font-weight:950;box-shadow:0 14px 40px rgba(0,212,255,.25)}.main-nav ul{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.main-nav a{display:block;text-decoration:none;color:var(--dl-menu);font-weight:750;padding:10px 14px;border-radius:999px}.main-nav a:hover,.main-nav .current-menu-item>a{background:rgba(0,0,0,.1);}.nav-toggle{display:none;background-color:black;padding-bottom: 10px; border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:10px 12px;font-weight:800}.dl-btn,.wp-block-button__link,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--dl-knop),var(--dl-secondary));color:#06101d!important;text-decoration:none;border:0;border-radius:999px;padding:14px 22px;font-weight:900;box-shadow:0 18px 50px rgba(0,212,255,.25);transition:.22s ease}.dl-btn:hover,.wp-block-button__link:hover{transform:translateY(-2px);filter:saturate(1.15)}.dl-btn.alt{background:rgba(255,255,255,.09);color:#fff!important;border:1px solid rgba(255,255,255,.16);box-shadow:none}.site-main{min-height:70vh}

.entry-content > :where(h1,h2,h3,h4,h5,h6,p,ol,blockquote){
    width: min(calc(100% - 10px), var(--dl-width));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.entry-content h1,
.entry-title{
    font-size: clamp(42px,7vw,82px);
    line-height: 1.1;
    letter-spacing: -.07em;
    margin: 0 0 24px;
	color:var(--dl-kop1);
}

.entry-content h2{
    font-size: clamp(32px,5vw,56px);
    line-height: 1.15;
    margin: 10px 0 10px;
	color:var(--dl-kop2);
}

.entry-content h3{
    font-size: clamp(22px,3vw,31px);
    line-height: 1.3;
    margin: 40px 0 16px;
	color:var(--dl-kop3);
}

.h3 {
    color:var(--dl-kop3);
}


.entry-content h4,
.entry-content h5,
.entry-content h6{
    margin: 32px 0 16px;
	color:var(--dl-kop4);
}

.entry-content p{
    color: var(--dl-muted);
    line-height: 1.8;
    margin: 0 0 24px;
}

.dl-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.62)),
        url('assets/images/hero-eyecatcher.jpg') center/cover no-repeat;
    opacity: .82;
}

.dl-hero:after {
    content: "";
    position: absolute;
    inset: auto -10% -45% -10%;
    height: 55%;
    background: linear-gradient(180deg, transparent, var(--dl-bg));
}

.dl-hero-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), 920px);
    margin-inline: auto;
    text-align: center;
}

.dl-kicker {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #fff;
    padding: 8px 13px;
    font-weight: 850;
    margin-bottom: 22px;
}

.dl-hero h1 {
    font-size: clamp(44px, 8vw, 92px);
    letter-spacing: -.08em;
    line-height: .98;
    margin: 0 0 18px;
}

.dl-gradient {
    background: linear-gradient(135deg, #fff, var(--dl-primary), #bca7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dl-lead {
    font-size: clamp(19px, 2.3vw, 26px);
    color: #2478AF;
    max-width: 820px;
    margin: 0 auto 30px;
}

.dl-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dl-section {
    padding: 20px 0;
}

.dl-section.soft {
    background: #F1F5F9;
}

.dl-grid {
    display: grid;
    gap: 24px;
}

.dl-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dl-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dl-card,
.wp-block-group.is-style-dl-card {
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--dl-radius);
    padding: 28px;
    box-shadow: var(--dl-shadow);
    position: relative;
    overflow: hidden;
}

.dl-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 10%, rgba(0,212,255,.17), transparent 35%);
    pointer-events: none;
}

.dl-card > * {
    position: relative;
}

.dl-card h3 {
    margin-top: 0;
}

.dl-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--dl-primary), var(--dl-secondary));
    display: grid;
    place-items: center;
    font-size: 27px;
    margin-bottom: 14px;
}

.dl-image-card {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    border-radius: var(--dl-radius);
    padding: 24px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,.12);
}

.dl-image-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 15%, rgba(0,0,0,.78));
}

.dl-image-card > * {
    position: relative;
}

.dl-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 22px 0;
    list-style: none;
}

.dl-pill-list li {
    background: #DBE0FD;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 9px 13px;
    color: #34365F;
    font-weight: 800;
	box-shadow: 
        0 8px 25px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.15);
    transition: all .3s ease;
    cursor: default;
    overflow: hidden;
}





.dl-cta {
    background: linear-gradient(135deg, rgba(0,212,255,.2), rgba(127,90,240,.24));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 34px;
    padding: 44px;
    text-align: center;
    box-shadow: var(--dl-shadow);
}

.dl-footer {
    background: #050611;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 54px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 28px;
}

.footer-grid a {
    color: var(--dl-white);
    text-decoration: none;
}

.footer-grid,
.footer-grid p,
.footer-grid li,
.footer-grid span,
.footer-grid h1,
.footer-grid h2,
.footer-grid h3,
.footer-grid h4,
.footer-grid h5,
.footer-grid h6 {
    color: var(--dl-white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 34px;
    padding-top: 20px;
     color: var(--dl-white);
    font-size: 14px;
}

.sticky-cta {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dl-accent), #ffedd5);
    color: #1f1300;
    box-shadow: 0 18px 40px rgba(245,158,11,.28);
}

.page-wrap {
    padding: 72px 0;
}

.entry-header{
    min-height:350px;
    padding:82px 0 20px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(rgba(8,9,20,.50), rgba(8,9,20,.50)),
        url("https://www.djlevaro.nl/wp-content/uploads/2026/07/DJ-huren-Friesland-Verjaardag-Bruiloft.png") center center / cover no-repeat;
}

.entry-header .dl-container{
    text-align:center;
}

.wp-block-columns{
    gap:24px;
}

.wp-block-cover{
    border-radius:34px;
    overflow:hidden;
}

.wp-block-image img{
    border-radius:24px;
}

.wp-block-quote{
    border-left:4px solid var(--dl-primary);
    background:rgba(255,255,255,.055);
    border-radius:20px;
    padding:22px 28px;
}


.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff}

.contact-form label{display:block;font-weight:800;margin-bottom:7px}.contact-form p{margin-bottom:14px}.contact-form button{cursor:pointer}.menu-fallback{display:flex;gap:8px;align-items:center}.menu-fallback a{color:var(--dl-dark);text-decoration:none;font-weight:750;padding:10px 14px;border-radius:999px}.menu-fallback a:hover{background:rgba(255,255,255,.1);} .entry-title{max-width:980px; margin-inline:auto}.has-dl-card-style {background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.12);border-radius:var(--dl-radius);padding:28px}

/* Update:computer */
@media(max-width:900px){.nav-toggle{display:inline-flex}.main-nav{display:none;position:absolute;top:72px;left:20px;right:20px;background:var(--dl-menubg);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:12px}.main-nav.open{display:block}.main-nav ul{display:block}.main-nav a{padding:12px 14px}.dl-grid.three,.dl-grid.four,.footer-grid{grid-template-columns:1fr}.dl-hero{min-height:620px;padding:80px 0}.dl-cta{padding:30px 20px}.sticky-cta a span{display:none}}

/* Update:telefoon */
@media(max-width:580px){body{font-size:16px}.dl-container,.entry-content>:where(p,h1,h2,h3,h4,h5,h6,ol,blockquote){width:min(calc(100% - 10px),var(--dl-width))}.header-inner{padding:12px 0}.brand{font-size:21px}.dl-section{padding:25px 0}.dl-card{padding:22px}.dl-actions{align-items:stretch}.dl-btn,.wp-block-button__link{width:100%}.sticky-cta{left:12px;right:12px}.sticky-cta a{flex:1}}

/* Update: kleiner logo en offerteknop rechtsboven */
.custom-logo,
.brand img {
  max-height: 46px;
  width: auto;
  display: block;
}
.brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
}
.header-offerte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 900;
  color: #06101d !important;
  background: linear-gradient(135deg,var(--dl-primary),var(--dl-accent));
  box-shadow: 0 16px 40px rgba(0,212,255,.22);
  transition: .22s ease;
}
.header-offerte-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12);
}
@media(max-width:900px){
  .header-actions{gap:10px;}
  .header-offerte-btn{padding:10px 14px;font-size:14px;}
  .main-nav{top:76px;}
}
@media(max-width:580px){
  .custom-logo,.brand img{max-height:38px;}
  .header-offerte-btn{font-size:13px;padding:9px 12px;}
}


/* Update: rode conversieknoppen en extra home-blokken */
.dl-btn,
.wp-block-button__link,
.button,
.header-offerte-btn,
.sticky-cta a {
  background: linear-gradient(135deg,#ef4444,#b91c1c) !important;
  color: #fff !important;
  box-shadow: 0 18px 48px rgba(220,38,38,.32) !important;
}
.dl-btn.alt {
  background: rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.dl-eyecatcher {
  min-height: 470px;
  border-radius: 36px;
  background: linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.76)), url('assets/images/hero-eyecatcher.jpg') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--dl-shadow);
  overflow: hidden;
}
.dl-eyecatcher h2,
.dl-eyecatcher p { max-width: 760px; }
.dl-badge-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.dl-badge { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:9px 13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:850; }
.dl-step { counter-increment: step; }
.dl-step h3:before { content: counter(step); display:inline-grid; place-items:center; width:34px; height:34px; margin-right:10px; border-radius:50%; background:#ef4444; color:#000; font-size:17px; }
.dl-steps { counter-reset: step; }
.dl-review { font-size: 18px; }
.dl-review strong { color:#fff; }
@media(max-width:700px){.dl-eyecatcher{min-height:390px;padding:24px;border-radius:28px}}

a {
  
  text-decoration: underline;
}

.dl-card{margin-bottom:10px;}

.fw-select:msf-select-test {
    color: black;
}


.ad-columns {
    display: flex;
    flex-wrap: nowrap; /* voorkomt dat ze onder elkaar gaan */
    gap: 20px;
    margin: 40px 0;
}

.ad-column {
    flex: 1;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    background: #f8f8f8;
    border-radius: 6px;
    box-sizing: border-box;
}

/* Mobiel */
@media (max-width: 700px) {
    .ad-columns {
        flex-direction: column;
    }
}
.logo-titel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rond-logo {
    border-radius: 60%;
    object-fit: cover;
}

.logo-titel h3 {
    margin: 0;
}