/*
 * FotograafTarief — Header & footer styling
 * Bron: DESIGN-BRIEF.md, stap 2 ("Volgorde van bouwen").
 *
 * Gebruikt uitsluitend de --ft-* tokens uit ft-design-tokens.css.
 * Geen HTML-wijzigingen — de bestaande structuur/klassen blijven gelijk,
 * hier wordt alleen styling toegevoegd of een Elementor-inline-kleur
 * overschreven waar dat nodig is.
 */

/* ==========================================================================
   Header — achtergrond
   ========================================================================== */

/* Wit op gewone pagina's (expliciet naast Elementor's eigen inline regel) */
.klustarief-header-wrapper {
	background-color: var(--ft-white);
}

/* Let op: GEEN transparante header over de hero op de homepage (bewust
   overgeslagen — te riskant zonder browsertest, zie DESIGN-BRIEF stap 2). */

/* Oude (klustarief-oranje) gloed onder de header weghalen — hoort niet bij
   de nieuwe, rustige stijl ("geen felle kleuren"). */
.elementor-element.elementor-element-e75b048 {
	box-shadow: none !important;
}

/* ==========================================================================
   Header — navigatie
   ========================================================================== */

.klustarief-header-wrapper .desktop-nav > ul > li > a,
.klustarief-header-wrapper .desktop-nav ul ul li a,
.klustarief-header-wrapper .mobile-menu-list > li > a,
.klustarief-header-wrapper .submenu-toggle,
.klustarief-header-wrapper .mobile-submenu a {
	color: var(--ft-black);
	font-family: var(--ft-font-family);
	transition: color 0.15s ease;
}

/* Oude oranje dropdown-accent (var(--kt-orange)) vervangen door goud */
.klustarief-header-wrapper .desktop-nav ul ul {
	border-top-color: var(--ft-gold);
}

.klustarief-header-wrapper .desktop-nav > ul > li > a:hover,
.klustarief-header-wrapper .desktop-nav > ul > li > a:focus,
.klustarief-header-wrapper .desktop-nav ul ul li a:hover,
.klustarief-header-wrapper .desktop-nav ul ul li a:focus,
.klustarief-header-wrapper .mobile-menu-list > li > a:hover,
.klustarief-header-wrapper .mobile-menu-list > li > a:focus,
.klustarief-header-wrapper .submenu-toggle:hover,
.klustarief-header-wrapper .submenu-toggle:focus,
.klustarief-header-wrapper .mobile-submenu a:hover,
.klustarief-header-wrapper .mobile-submenu a:focus {
	color: var(--ft-gold);
}

/* ==========================================================================
   Header — knoppen
   ========================================================================== */

.klustarief-header-wrapper .btn-kt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--ft-black);
	color: var(--ft-white) !important;
	border: none;
	border-radius: var(--ft-radius-button);
	padding: var(--ft-button-padding);
	font-family: var(--ft-font-family);
	font-size: var(--ft-button-font-size);
	font-weight: var(--ft-button-font-weight);
	text-decoration: none;
	box-shadow: none;
	transition: filter 0.15s ease;
}

.klustarief-header-wrapper .btn-kt:hover,
.klustarief-header-wrapper .btn-kt:focus {
	filter: brightness(90%);
	color: var(--ft-white) !important;
}

/* .footer-btn deelde voorheen deze regel met .btn-kt (background: var(--ft-black)) —
   correct voor de knop op de witte header, maar onzichtbaar nu de footerachtergrond
   zelf zwart is (zwart op zwart). Eigen, losse stijl: goud i.p.v. zwart. */
.footer-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--ft-gold);
	color: var(--ft-white) !important;
	border: none;
	border-radius: var(--ft-radius-button);
	padding: var(--ft-button-padding);
	font-family: var(--ft-font-family);
	font-size: var(--ft-button-font-size);
	font-weight: var(--ft-button-font-weight);
	text-decoration: none;
	box-shadow: none;
	transition: filter 0.15s ease;
}

.footer-btn:hover,
.footer-btn:focus {
	/* style.css zet op hover nog background:transparent (bedoeld voor de oude
	   outline-hover-stijl) — expliciet terugzetten, anders wordt de knop op
	   hover onzichtbaar tegen de zwarte footer. */
	background-color: var(--ft-gold);
	filter: brightness(90%);
	color: var(--ft-white) !important;
}

.klustarief-header-wrapper .btn-kt-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--ft-white);
	color: var(--ft-black) !important;
	border: 1px solid var(--ft-border);
	border-radius: var(--ft-radius-button);
	padding: var(--ft-button-padding);
	font-family: var(--ft-font-family);
	font-size: var(--ft-button-font-size);
	font-weight: var(--ft-button-font-weight);
	text-decoration: none;
	transition: filter 0.15s ease;
}

.klustarief-header-wrapper .btn-kt-outline:hover,
.klustarief-header-wrapper .btn-kt-outline:focus {
	filter: brightness(90%);
	color: var(--ft-black) !important;
}

/* ==========================================================================
   Footer — achtergrond
   ========================================================================== */

/* Overschrijft Elementor's inline achtergrond (was #004AAD, oud klustarief-blauw)
   voor deze specifieke footer-container
   (.elementor-66398 .elementor-element.elementor-element-11b73aa). */
.elementor-element.elementor-element-11b73aa {
	background-color: var(--ft-black) !important;
}

/* De eigenlijke zichtbare achtergrond is niet deze Elementor-container maar
   .custom-footer-wrapper eromheen (de div binnen de HTML-widget) — die heeft
   in style.css zijn EIGEN, losstaande var(--ft-bg) (#004AAD, legacy naam-
   collision) en dekt de hele footer-achtergrond af. Bovenstaande regel alleen
   was daarom onzichtbaar. */
.custom-footer-wrapper {
	background-color: var(--ft-black) !important;
}

/* style.css zet op .footer-logo een witte drop-shadow (bedoeld als contrast-
   rand tegen het oude blauw). Het logo-bestand zelf is al wit/goud en dus
   correct voor een donkere achtergrond; die witte shadow geeft op zwart nu
   alleen een wazige gloed. Uitzetten. */
.custom-footer-wrapper .footer-logo {
	filter: none;
}

/* ==========================================================================
   Footer — kolomkoppen en links
   ========================================================================== */

.custom-footer-wrapper h4 {
	color: var(--ft-white);
	font-family: var(--ft-font-family);
}

/* Oude oranje kop-onderstreping (var(--ft-orange), legacy naam) vervangen door goud */
.custom-footer-wrapper .footer-col h4 {
	border-bottom-color: var(--ft-gold);
}

.custom-footer-wrapper .footer-links a,
.custom-footer-wrapper .social-icons a,
.custom-footer-wrapper .newsletter-trigger {
	color: var(--ft-white);
	transition: color 0.15s ease;
}

.custom-footer-wrapper .footer-links a:hover,
.custom-footer-wrapper .footer-links a:focus,
.custom-footer-wrapper .social-icons a:hover,
.custom-footer-wrapper .social-icons a:focus,
.custom-footer-wrapper .newsletter-trigger:hover,
.custom-footer-wrapper .newsletter-trigger:focus {
	color: var(--ft-gold);
}

/* style.css zet hier nog het oude oranje (var(--ft-orange), legacy) als hover-
   achtergrond van de social-iconen; overschrijven naar goud. */
.custom-footer-wrapper .social-icons a:hover {
	background: var(--ft-gold);
}

/* Links naar pagina's die nog niet bestaan: geen kliktarget, wel zichtbaar
   als lijst-item (zie TODO-comments in de footer-HTML). */
.custom-footer-wrapper .footer-link-pending {
	color: rgba(255, 255, 255, 0.45);
	cursor: default;
}

.custom-footer-wrapper .copyright-bar {
	color: var(--ft-white);
}