/* De Nachtwacht – Site Kit · thema-neutralisatie
   Zorgt dat het ontwerp 1-op-1 doorkomt bovenop Astra + Elementor:
   donker thema, eigen lettertype, volle breedte en alleen ONZE header/footer.
   Deze stijl wordt als laatste geladen zodat hij wint van het thema. */

/* ---- Astra eigen header/footer verbergen (alleen als ONZE header bestaat) ---- */
.dnw-has-chrome #masthead,
.dnw-has-chrome .ast-above-header-wrap,
.dnw-has-chrome .ast-below-header-wrap,
.dnw-has-chrome .ast-primary-header-bar,
.dnw-has-chrome #colophon,
.dnw-has-chrome .ast-footer-overlay,
/* Astra mobiele header + hamburger volledig weg (wij hebben een eigen menu) */
.dnw-has-chrome .ast-mobile-header-wrap,
.dnw-has-chrome #ast-mobile-header,
.dnw-has-chrome .ast-mobile-menu-buttons,
.dnw-has-chrome .main-header-menu-toggle,
.dnw-has-chrome #ast-hamburger-menu,
.dnw-has-chrome .ast-mobile-menu-trigger-fill,
.dnw-has-chrome .ast-mobile-menu-trigger-minimal {
	display: none !important;
}
/* Onze eigen header/footer (binnen Elementor) blijven uiteraard zichtbaar */
.elementor .site-header.dnw-header,
.elementor .site-footer.dnw-footer {
	display: flex !important;
}

/* ---- Donker thema forceren ---- */
html,
body,
#page,
.site,
.site-content,
#content,
.ast-container,
.elementor,
.elementor-section,
.entry-content {
	background-color: #1d1411 !important;
}
body,
.elementor,
.elementor-widget-container,
.entry-content {
	color: #eae5da;
	font-family: "Gilroy", "Montserrat", system-ui, sans-serif !important;
}

/* ---- Volle breedte: Astra/Elementor container-limieten weg ---- */
#page,
#content,
.site-content,
#primary,
.content-area,
.ast-container,
.entry-content,
.elementor-section-wrap {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.ast-separate-container .ast-article-single,
.single .entry-content,
.page .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
/* Astra sidebar uit op onze pagina's */
#secondary,
.ast-separate-container #secondary {
	display: none !important;
}

/* ---- Koppen/links niet door Astra laten kleuren ---- */
.elementor h1, .elementor h2, .elementor h3, .elementor h4 {
	color: #eae5da;
	font-family: "Gilroy", "Montserrat", system-ui, sans-serif;
	line-height: 1.06;
	letter-spacing: -0.01em;
}
.elementor a { color: inherit; text-decoration: none; }

/* ---- Astra/Elementor knop-resets binnen onze blokken neutraliseren ---- */
.elementor .btn {
	font-family: "Gilroy", "Montserrat", system-ui, sans-serif;
	text-transform: uppercase;
	line-height: 1;
}

/* ---- Elementor spacing volledig neutraliseren ----
   Onze eigen <section>'s bepalen zelf de witruimte, exact als in het ontwerp.
   Zonder dit voegt Elementor/Astra extra marges en kolom-padding toe waardoor
   de spacing afwijkt (o.a. tussen secties, galerijen en boven de footer). */
.elementor-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget,
.elementor-element {
	margin: 0 !important;
}
.elementor-widget:not(:last-child) {
	margin-bottom: 0 !important;
}
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated,
.elementor-element-populated,
.elementor-widget-wrap,
.elementor-column-wrap {
	padding: 0 !important;
}
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: none !important;
}

/* ---- Astra "naar boven"-knop in onze stijl (geen Astra-blauw) ---- */
#ast-scroll-top,
.ast-scroll-top-icon {
	background-color: #c8a96c !important;
	color: #1d1411 !important;
	border: 1px solid #b3935a !important;
	border-radius: 9px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
}
#ast-scroll-top:hover {
	background-color: #eae5da !important;
	color: #1d1411 !important;
}

/* ---- Album-detail + juridische pagina's: forceer volle breedte + donker,
        weg met Astra's "boxed" container en het thema-titelblok. ---- */
.single-dnw_album #primary,
.single-dnw_album #content,
.single-dnw_album .site-content,
.single-dnw_album .ast-container,
.single-dnw_album .ast-article-single,
.single-dnw_album .entry-content,
.single-dnw_album .ast-separate-container .ast-article-single,
.dnw-legal-page #primary,
.dnw-legal-page #content,
.dnw-legal-page .site-content,
.dnw-legal-page .ast-container,
.dnw-legal-page .ast-article-single,
.dnw-legal-page .entry-content,
.dnw-legal-page .ast-separate-container .ast-article-single {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.single-dnw_album .entry-header,
.single-dnw_album .entry-meta,
.single-dnw_album .post-thumbnail,
.single-dnw_album .ast-single-post-featured-section,
.single-dnw_album .ast-author-box {
	display: none !important;
}

/* ---- Lijsten: Astra zet er een marge/indent op, wij willen ze strak onder
        de kop (zoals het ontwerp). ---- */
.footer-grid ul,
.fcol ul,
.hours,
.mlist,
.perks,
.incl ul {
	margin: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}
/* De agenda-lijst blijft gecentreerd (op de agendapagina staat hij op max 920px,
   margin:0 auto); alleen de Astra-indent halen we weg. */
.events {
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.footer-grid ul li,
.fcol li,
.hours li,
.mlist li,
.events li,
.incl li {
	margin-left: 0 !important;
}

/* ---- Doorlopende foto-band: Astra's `figure{margin:0}` haalt de tussenruimte
        weg; die zetten we terug (anders staan de 'schilderijen' te dicht op elkaar). ---- */
.marquee-track .polaroid { margin-right: 44px !important; }

/* ---- Kop + knop in de agenda-kop netjes op dezelfde lijn (Astra zet een
        margin onder de h2 die de uitlijning verstoort). ---- */
.agenda-head h2 { margin: 0 !important; }

/* ---- Koppen op niet-Elementor-pagina's (album-detail + juridisch) krijgen
        anders de Astra-kleur; wij houden ze crème, net als het ontwerp. ---- */
.single-dnw_album .banner h1,
.single-dnw_album .album-date,
.dnw-legal-page .legal-banner h1,
.dnw-legal-page .legal-prose h2 {
	color: #eae5da;
}
.dnw-legal-page .legal-prose p,
.dnw-legal-page .legal-prose li {
	color: #a89e92;
}

/* ---- Astra post-navigatie (vorige/volgende album) staat niet in het ontwerp ---- */
.single-dnw_album .post-navigation,
.single-dnw_album .ast-single-related-posts-area {
	display: none !important;
}

/* ---- Formuliervelden: crème tekst op donkere achtergrond (Astra maakt ze
        anders donker/onleesbaar). Geldt voor onze formulieren én Contact Form 7. ---- */
.field input,
.field select,
.field textarea,
.formcard input,
.formcard select,
.formcard textarea,
.offerte input,
.offerte select,
.offerte textarea,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
	color: #eae5da !important;
	background-color: #1d1411 !important;
	-webkit-text-fill-color: #eae5da !important;
}
.field input::placeholder,
.field textarea::placeholder,
.formcard input::placeholder,
.formcard textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #897d70 !important;
	-webkit-text-fill-color: #897d70 !important;
}
.field select option,
.wpcf7-form select option {
	color: #eae5da;
	background: #292524;
}

/* ---- Ingelogd op desktop: vaste header onder de (vaste) WordPress-adminbalk.
        Op mobiel is de adminbalk NIET vast (scrollt mee), dus daar de header op
        top:0 laten — anders 'zweeft' de header bij het scrollen. ---- */
@media screen and (min-width: 783px) {
	.admin-bar .site-header,
	.admin-bar header.dnw-header { top: 32px; }
}

/* ---- Album-detail: hero gelijk aan contact (volle standaard .banner) ---- */
.single-dnw_album .banner {
	min-height: 62vh !important;
	padding-top: 170px !important;
	padding-bottom: 90px !important;
}
.single-dnw_album .section { padding-top: 56px !important; }

/* ---- "Alle albums"-terugknop: nette, gecentreerde ghost-knop boven de titel
        (in de banner-inhoud, dus vanzelf responsive; geen rare absolute plek,
        geen onderstreping). ---- */
.single-dnw_album .back.btn {
	position: static !important;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0 auto 22px;
	padding: 10px 22px;
	font-size: 11px;
	letter-spacing: .14em;
	text-decoration: none !important;
	background: rgba(29, 20, 17, .35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.single-dnw_album .back.btn::after { display: none; }

/* ---- Hamburger: geen blauwe tik-highlight/focus-vlek (mobiel) ---- */
.menu-toggle { -webkit-tap-highlight-color: transparent; outline: none; -webkit-appearance: none; appearance: none; }
.menu-toggle:focus,
.menu-toggle:active,
.menu-toggle:hover { outline: none !important; background: none !important; box-shadow: none !important; }
.menu-toggle span { background: #eae5da !important; }

/* ---- Logo bovenin het mobiele menu-overlay ---- */
.dnw-nav-logo { display: none; }
@media (max-width: 1000px) {
	nav.main .dnw-nav-logo {
		display: block;
		width: auto;
		height: 60px;
		margin: 0 auto 28px;
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .5s ease, transform .5s ease;
	}
	nav.main.open .dnw-nav-logo { opacity: 1; transform: none; transition-delay: .14s; }
}

/* ---- Hero-achtergrond moet op mobiel altijd de volledige hoogte vullen ---- */
@media (max-width: 768px) {
	.hero-bg {
		height: 100% !important;
		min-height: 100% !important;
		object-fit: cover !important;
	}
}

/* ---- Hero-afbeelding verder laten doorlopen (minder donkere afsnijding
        onderaan), zodat de foto mooier 'lager doorloopt' — desktop + mobiel. ---- */
.hero-scrim {
	background:
		radial-gradient(120% 90% at 50% 28%, transparent 0%, rgba(29,20,17,0.48) 72%),
		linear-gradient(to bottom, rgba(29,20,17,0.78) 0%, rgba(29,20,17,0.34) 46%, rgba(29,20,17,0.66) 84%, rgba(29,20,17,0.90) 100%) !important;
}

/* ---- Pagina-banner titel niet te groot op telefoon (anders 4 regels) ---- */
@media (max-width: 600px) {
	.banner h1 { font-size: clamp(27px, 8vw, 40px); line-height: 1.1; }
}

/* ---- Subpagina-hero (.banner) + CTA-band volledig laten vullen en mooier
        laten doorlopen. Zelfde oorzaak als bij de home-hero hierboven: een
        thema-regel `img{height:auto}` overschreef height:100% (foto 'stopte
        halverwege' op desktop) en de onderkant was te donker afgesneden. ---- */
.banner-bg,
.cta-band .cta-bg {
	height: 100% !important;
	min-height: 100% !important;
	object-fit: cover !important;
}
.banner::after {
	background:
		radial-gradient(120% 90% at 50% 28%, transparent 0%, rgba(29,20,17,0.46) 72%),
		linear-gradient(to bottom, rgba(29,20,17,0.80) 0%, rgba(29,20,17,0.34) 46%, rgba(29,20,17,0.62) 84%, rgba(29,20,17,0.92) 100%) !important;
}

/* Telefoon: hero wat hoger zodat titel + subtekst volledig met ruimte
   erachter vallen, en de foto iets lager getoond zodat de drukke bovenrand
   niet tegen de tekst botst. */
@media (max-width: 768px) {
	.banner { min-height: 76vh; padding-top: 148px; padding-bottom: 72px; }
	.banner-bg { object-position: center 62% !important; }
}

/* ---- Keuzevelden (select) niet verticaal afkappen ---- */
.field select,
.formcard select,
.offerte select,
.wpcf7-form select {
	height: 50px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: normal !important;
}

/* =====================================================================
   TELEFOON: inhoud + knoppen centreren. Desktop blijft volledig ongewijzigd
   (alles staat binnen deze media-query). Lijst-/prijsrijen en invoervelden
   houden hun eigen uitlijning zodat ze leesbaar blijven.
   ===================================================================== */
@media (max-width: 768px) {
	.dnw-has-chrome section .wrap,
	.dnw-has-chrome .cinfo,
	.dnw-has-chrome .formcard,
	.dnw-has-chrome .copy { text-align: center; }

	/* knop-/inhoudsrijen midden (NIET de menukaart-tabs — die moeten links
	   beginnen, anders 'starten ze half' bij horizontaal scrollen) */
	.dnw-has-chrome .hero-cta,
	.dnw-has-chrome .cta-band .row,
	.dnw-has-chrome .gallery-cta,
	.dnw-has-chrome .insta-cta,
	.dnw-has-chrome .agenda-head { justify-content: center; align-items: center; }
	.dnw-has-chrome .cattabs .row { justify-content: flex-start; text-align: left; }

	/* losse "blok"-knoppen netjes gecentreerd */
	.dnw-has-chrome .menu-foot,
	.dnw-has-chrome .partner-note { text-align: center; }

	/* uitzonderingen: invoervelden, menu-items en juridische tekst links uitlijnen */
	.dnw-has-chrome .field input,
	.dnw-has-chrome .field select,
	.dnw-has-chrome .field textarea,
	.dnw-has-chrome .mitem .mleft,
	.dnw-has-chrome .hours .day,
	.dnw-has-chrome .legal-prose .wrap { text-align: left; }
}

/* ---- Footer: juridische links op één nette regel op mobiel ---- */
@media (max-width: 680px) {
	.dnw-has-chrome .footer-bottom .legal {
		flex-wrap: nowrap;
		gap: 14px;
		justify-content: center;
	}
	.dnw-has-chrome .footer-bottom .legal a {
		font-size: 11px;
		white-space: nowrap;
		letter-spacing: 0;
	}
}
@media (max-width: 380px) {
	.dnw-has-chrome .footer-bottom .legal { gap: 10px; }
	.dnw-has-chrome .footer-bottom .legal a { font-size: 10px; }
}

/* ---- Vaste header niet over de eerste sectie laten 'duwen' wordt door
        de hero/banner zelf opgevangen (zoals in het ontwerp). ---- */

/* =====================================================================
   ELEMENTOR-EDITOR: entrance-animaties uitzetten.
   Op de echte site worden blokken pas zichtbaar als de JS .reveal→.in en
   body.ready toevoegt. In de editor hertekent Elementor de blokken, waardoor
   die JS ze niet activeert en alles op opacity:0 blijft staan ("grijze/lege
   vlakken"). In de editor daarom alles direct tonen.
   ===================================================================== */
.elementor-editor-active .reveal,
.elementor-editor-active .hero h1 span.w,
.elementor-editor-active .hero-inner .lead,
.elementor-editor-active .hero-inner .hero-cta,
.elementor-editor-active .merk-art,
.elementor-editor-active .dnw-nav-logo {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
.elementor-editor-active .loader.dnw-spotlight { display: none !important; }