/*
Theme Name: Carter Support Child
Theme URI: https://cartersupport.nl
Description: Child theme voor cartersupport.nl, gebaseerd op Kadence
Author: Michael Carter
Author URI: https://cartersupport.nl
Template: kadence
Version: 1.0.0
*/

/* =============================================
   ALGEMEEN
   ============================================= */

body {
	font-family: 'Inter', sans-serif;
	color: #ffffff;
	background-color: #0a1628 !important;
}

/* Standaard tekst wit op donkere achtergrond */
.entry-content p,
.entry-content li,
.entry-content td {
	color: #ccddee;
	font-size: 1.05rem;
	line-height: 1.8;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.entry-content h1 { font-size: 2.4rem; margin-bottom: 0.4em; }
.entry-content h2 { font-size: 1.5rem; margin-top: 2em; margin-bottom: 0.5em; border-left: 3px solid #1a9b6e; padding-left: 12px; }

/* =============================================
   NAVIGATIE FONT — BARLOW CONDENSED (past bij logo)
   ============================================= */

#masthead .menu-item > a,
#masthead .nav-drop-title-wrap {
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.15rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

/* =============================================
   MENU ICONEN — witte SVG iconen naast tekst
   ============================================= */

/* Basis: nav-links als flex zodat icoon naast tekst staat */
.menu-item-713 > a,
.menu-item-724 > a,
.menu-item-712 > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
}

/* Diensten: span wrapper als flex */
.menu-item-711 .nav-drop-title-wrap {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
}

/* Icoon basis */
.menu-item-713 > a::before,
.menu-item-711 .nav-drop-title-wrap::before,
.menu-item-724 > a::before,
.menu-item-712 > a::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
	opacity: 0.9;
}

/* Over Mij — persoon */
.menu-item-713 > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Diensten — moersleutel */
.menu-item-711 .nav-drop-title-wrap::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}

/* Projecten — map */
.menu-item-724 > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

/* Contact — telefoon */
.menu-item-712 > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* Alle witte vlakken donker maken */
.site-content,
.content-area,
#primary,
.entry-content,
.entry.content-bg,
article.type-page,
.single-entry,
.content-bg {
	background-color: #0a1628 !important;
}

/* Zijmarge van contentcontainer weg */
.content-container.site-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Ruimte boven content weg */
.site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

a {
	color: #0066cc;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* =============================================
   NAVIGATIE
   ============================================= */

/* ===== HEADER DONKER ===== */
#masthead,
#masthead .site-header-row,
#masthead .header-top-bar,
#masthead .kadence-top-row,
#masthead .kadence-mid-row,
#masthead .kadence-bottom-row,
.site-header,
.site-header .header-row,
.header-wrap {
	background-color: #0a1628 !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

/* Navigatielinks wit */
#masthead a,
#masthead .nav-link,
#masthead .menu-item a,
.site-header a {
	color: #ffffff !important;
}

#masthead a:hover,
.site-header a:hover {
	color: #1a9b6e !important;
	text-decoration: none !important;
}

/* Logo formaat beperken */
.site-logo img,
.custom-logo-link img,
.custom-logo,
header .wp-image-logo {
	max-height: 70px !important;
	width: auto !important;
	height: auto !important;
}

/* =============================================
   HERO / BANNER
   ============================================= */

.hero-sectie {
	background-color: #0a1628;
	color: #ffffff;
	padding: 80px 20px;
	text-align: left;
}

.hero-sectie h1 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
	color: #ffffff;
}

.hero-sectie p {
	font-size: 1.1rem;
	max-width: 600px;
	margin-bottom: 30px;
	color: #ccddee;
}

/* =============================================
   KNOPPEN
   ============================================= */

.knop-primair {
	display: inline-block;
	background-color: #0066cc;
	color: #ffffff;
	padding: 14px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	transition: background-color 0.2s ease;
}

.knop-primair:hover {
	background-color: #0052a3;
	text-decoration: none;
	color: #ffffff;
}

/* =============================================
   DIENSTEN SECTIE
   ============================================= */

.diensten-sectie {
	padding: 60px 20px;
	background-color: #f9f9f9;
}

.diensten-sectie h2 {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 40px;
}

.diensten-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}

.dienst-kaart {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 30px;
}

.dienst-kaart h3 {
	font-size: 1.2rem;
	margin-bottom: 12px;
}

.dienst-kaart p {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* =============================================
   OVER MIJ SECTIE
   ============================================= */

.over-mij-sectie {
	padding: 60px 20px;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	align-items: center;
}

.over-mij-sectie img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.over-mij-tekst h2 {
	font-size: 1.8rem;
	margin-bottom: 15px;
}

.over-mij-tekst p {
	color: #444;
	line-height: 1.7;
}

/* =============================================
   CONTACT SECTIE
   ============================================= */

.contact-sectie {
	background-color: #0a1628;
	color: #ffffff;
	padding: 60px 20px;
	text-align: center;
}

.contact-sectie h2 {
	font-size: 2rem;
	color: #ffffff;
	margin-bottom: 15px;
}

.contact-sectie p {
	color: #ccddee;
	margin-bottom: 25px;
}

/* =============================================
   FOOTER
   ============================================= */

.site-footer {
	background-color: #0a1628;
	color: #aabbcc;
	text-align: center;
	padding: 25px 20px;
	font-size: 0.85rem;
}

/* =============================================
   PAGINATITEL VERBERGEN
   ============================================= */

/* ===== PAGINATITEL + LICHTBLAUWE BALK VERBERGEN ===== */
.page .entry-header,
.page .wp-block-post-title,
.single .entry-header,
.page-title,
.site-main .entry-header,
.kadence-page-hero,
.entry-hero,
.hero-section-title,
.wp-block-post-title,
.page-hero-section,
.entry-title,
.hero-title {
	display: none !important;
}

/* Lichtblauwe balk (Kadence entry-hero) verbergen */
.entry-hero,
.page-hero-section,
.entry-hero-layout-standard,
.entry-hero-container-inner {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 0 !important;
}

/* Logo groter */
.custom-logo,
.site-branding img {
	max-height: 130px !important;
	width: auto !important;
	height: auto !important;
}

/* Ronde hoeken op hero/cover blokken */
.wp-block-cover,
.wp-block-group {
	border-radius: 16px !important;
	overflow: hidden !important;
}

/* Navigatie gecentreerd in header met verticale ruimte */
.site-main-header-inner-wrap {
	display: flex !important;
	align-items: center !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

.site-header-row-container-inner {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.site-header-main-section-left {
	flex: 0 0 auto !important;
}

.site-header-main-section-right {
	flex: 1 !important;
	display: flex !important;
	justify-content: center !important;
}

.site-header-main-section-right .primary-menu-container {
	justify-content: center !important;
}

/* =============================================
   MOBIEL
   ============================================= */

@media (max-width: 768px) {
	.hero-sectie h1 {
		font-size: 1.8rem;
	}

	.over-mij-sectie {
		flex-direction: column;
		text-align: center;
	}

	.over-mij-sectie img {
		width: 150px;
		height: 150px;
	}
}

/* =============================================
   GLOBALE FAQ SECTIE
   ============================================= */

.cs-faq-sectie {
	background-color: #0a1628;
	padding: 60px 20px;
}

.cs-faq-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.cs-faq-foto {
	flex-shrink: 0;
	width: 380px;
}

.cs-faq-foto img {
	width: 100%;
	border-radius: 8px;
	display: block;
}

.cs-faq-vragen {
	flex: 1;
}

.cs-faq-vragen h2 {
	color: #ffffff;
	font-size: 2rem;
	margin-bottom: 30px;
}

.cs-faq-vragen details {
	border-bottom: 1px solid #1a3a5c;
	padding: 18px 0;
}

.cs-faq-vragen details summary {
	color: #ffffff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cs-faq-vragen details summary::-webkit-details-marker {
	display: none;
}

.cs-faq-vragen details summary::after {
	content: '+';
	font-size: 1.4rem;
	color: #1a9b6e;
}

.cs-faq-vragen details[open] summary::after {
	content: '−';
}

.cs-faq-vragen details p {
	color: #ccddee;
	margin-top: 12px;
	line-height: 1.7;
}

@media (max-width: 768px) {
	.cs-faq-inner {
		flex-direction: column;
	}

	.cs-faq-foto {
		width: 100%;
	}
}