/*
 * FotograafTarief — Herstyling van de profielpagina (single 'fotograaf') naar
 * de --ft-* tokens, zelfde aanpak als ft-tailwind-pages-gold.css en
 * ft-search-results.css: het template zelf (softglaze-search/includes/
 * single-cpt-universal.php, painter-request-form/assets/css/painter-form.css)
 * is gedeeld met de andere klustarief-niches, dus hier NIETS in die
 * bestanden zelf aanpassen — alles via CSS gescopeerd op body.single-fotograaf,
 * met !important omdat de brontemplate zijn kleuren zelf ook met !important
 * en/of ná deze stylesheet (inline <style> verderop in de pagina) zet.
 *
 * Rood/groen blijven bewust ongemoeid (locatie-pin, favoriet-hart, succes-
 * meldingen, foutmeldingen) — dat zijn functionele kleuren, geen decoratieve
 * (DESIGN-BRIEF.md sectie 2). De 3D-fotogalerij (.sg3d-*) blijft ook
 * ongemoeid: die wordt bij de galerij-stap van de profielpagina-rebuild
 * (DESIGN-BRIEF.md 5.3, "fotogalerij in een raster") sowieso vervangen.
 */

/* ==========================================================================
   1) painter-form.css werkt met eigen --kt-* custom properties op :root —
      die hier overschrijven kleurt de hele offerte-wizard (alle stappen,
      niet alleen de trigger-knop) in één keer mee, inclusief eventuele
      toekomstige stappen die er nog bijkomen.
   ========================================================================== */
body.single-fotograaf {
	--kt-blue: var(--ft-gold) !important;
	--kt-blue-mid: #a3835f !important; /* --ft-gold ~10% donkerder, zelfde hover-conventie als elders */
	--kt-teal: var(--ft-gold) !important;
	--kt-orange: var(--ft-gold) !important;
	--kt-text: var(--ft-black) !important;
}

/* Twee knoppen waren donkerblauw: de headerknop (rechtsboven) is verwijderd,
   zie single-cpt-universal.php. Dit is de resterende knop in de
   informatiekaart — expliciet op klasse + button-primary omdat de exacte
   herkomst van de oude blauwe .button-primary-kleur niet betrouwbaar
   statisch te achterhalen was (WP Rocket laadt een deel van de CSS async);
   dit wint sowieso, ongeacht die bron. */
body.single-fotograaf .prf-secondary-btn,
body.single-fotograaf .prf-secondary-wrap .button-primary {
	background-color: var(--ft-gold) !important;
	border-color: var(--ft-gold) !important;
	color: var(--ft-white) !important;
}
body.single-fotograaf .prf-secondary-btn:hover,
body.single-fotograaf .prf-secondary-wrap .button-primary:hover {
	background-color: #a3835f !important;
	border-color: #a3835f !important;
	color: var(--ft-white) !important;
}

/* ==========================================================================
   2) Contactblok — lichtblauwe achtergrond/rand
   ========================================================================== */
body.single-fotograaf #contact-section.bg-blue-50 {
	background-color: var(--ft-gold-pale) !important;
	border-color: var(--ft-border) !important;
}
body.single-fotograaf .border-blue-200 {
	border-color: var(--ft-border) !important;
}
body.single-fotograaf .bg-blue-200 {
	background-color: var(--ft-gold-pale) !important;
}
body.single-fotograaf .text-blue-800 {
	color: var(--ft-black) !important;
}

/* ==========================================================================
   3) FAQ-balken — blauwe gradient + blauwe focus-ring
   ========================================================================== */
body.single-fotograaf .faq-section .from-\[\#054099\] {
	--tw-gradient-from: var(--ft-gold) !important;
}
body.single-fotograaf .faq-section .to-\[\#1c2c52\] {
	--tw-gradient-to: #a3835f !important;
}
body.single-fotograaf .faq-section .ring-\[\#054099\] {
	--tw-ring-color: var(--ft-gold) !important;
}

/* ==========================================================================
   4) Alle losse Tailwind-arbitrary-value kleuren op de pagina (badges,
      avatar-initialen-cirkel, iconen, links, "gerelateerde fotografen"-
      kaarten). Eén regel per klasse dekt elk gebruik van die klasse op de
      pagina, ongeacht hoe vaak hij voorkomt.
   ========================================================================== */
body.single-fotograaf .bg-\[\#054099\] {
	background-color: var(--ft-gold) !important;
}
body.single-fotograaf .text-\[\#054099\] {
	color: var(--ft-gold) !important;
}
body.single-fotograaf .border-\[\#054099\] {
	border-color: var(--ft-gold) !important;
}
body.single-fotograaf .border-\[\#274170\] {
	border-color: var(--ft-border) !important;
}
body.single-fotograaf .text-\[\#F25C05\] {
	color: var(--ft-gold) !important;
}
body.single-fotograaf .text-blue-400,
body.single-fotograaf .text-blue-900 {
	color: var(--ft-black) !important;
}
body.single-fotograaf .bg-blue-50 {
	background-color: var(--ft-gold-pale) !important;
}
body.single-fotograaf .to-blue-50 {
	--tw-gradient-to: var(--ft-gold-pale) !important;
}

/* Algemene linkkleur + hover (koppen, "Bekijk profiel"-links, FAQ-antwoord-
   links via .prose a, deel-sectie) — zelfde selectorlijst als de inline
   <style> onderaan single-cpt-universal.php, hier gescopeerd + herhaald zodat
   specificiteit wint ondanks dat die inline block later in de DOM staat. */
body.single-fotograaf a.general-link,
body.single-fotograaf #main-content a:not(.button):not(.social-share-icon):not(.group):not([class*="text-pink-"]):not([class*="text-yellow-"]),
body.single-fotograaf .faq-section a:not(.button),
body.single-fotograaf .location-details a:not(.button),
body.single-fotograaf .js-view-profile-link,
body.single-fotograaf .review-count-link,
body.single-fotograaf .prose a {
	color: var(--ft-gold) !important;
}
body.single-fotograaf a.general-link:hover,
body.single-fotograaf #main-content a:not(.button):not(.social-share-icon):not(.group):not([class*="text-pink-"]):not([class*="text-yellow-"]):hover,
body.single-fotograaf .faq-section a:not(.button):hover,
body.single-fotograaf .location-details a:not(.button):hover,
body.single-fotograaf .js-view-profile-link:hover,
body.single-fotograaf .review-count-link:hover,
body.single-fotograaf .prose a:hover {
	color: #a3835f !important;
	border-bottom-color: #a3835f !important;
}

/* "Gerelateerde fotografen"-kaarten onderaan (generate_non_featured_painter_card_html,
   gedeeld met de andere niches — vandaar hier, niet in de kaart-functie zelf) */
body.single-fotograaf .sg-btn-primary {
	background: var(--ft-gold) !important;
	border-color: var(--ft-gold) !important;
	color: var(--ft-white) !important;
}
body.single-fotograaf .sg-btn-primary:hover {
	background: #a3835f !important;
	color: var(--ft-white) !important;
}
body.single-fotograaf .sg-btn-secondary {
	color: var(--ft-gold) !important;
	border-color: var(--ft-gold) !important;
}
body.single-fotograaf .sg-btn-secondary:hover {
	background: var(--ft-gold-pale) !important;
}
body.single-fotograaf .sg-badge-premium {
	background: linear-gradient(135deg, var(--ft-gold) 0%, #a3835f 100%) !important;
}
body.single-fotograaf .sg-border-featured {
	border-color: var(--ft-gold) !important;
}
body.single-fotograaf .sg-tag-pill {
	background-color: var(--ft-gold-pale) !important;
	color: var(--ft-black) !important;
	border-color: var(--ft-border) !important;
}

/* ==========================================================================
   5) Avatar viel half achter de sticky header (desktop-only sticky, zie
      style.css .desktop-header-outer, z-index 2147483000). Simpelste en
      meest robuuste fix: extra ruimte boven de cover-sectie i.p.v. de
      negative-margin avatar-trekbeweging zelf aanpassen.
   ========================================================================== */
body.single-fotograaf section[aria-label="Header section"] {
	padding-top: 110px;
}
@media (max-width: 767px) {
	/* Header is alleen sticky op desktop (Elementor sticky_on: ["desktop"]),
	   dus op mobiel is deze extra ruimte niet nodig. */
	body.single-fotograaf section[aria-label="Header section"] {
		padding-top: 0;
	}
}

/* ==========================================================================
   6) Specialisatie-badges onder de naam (single-cpt-universal.php,
      $profile_specialisaties) — zelfde stijl als .ft-badge op de
      zoekresultatenpagina (ft-search-results.css), eigen klassenamen
      zodat dit niet afhangt van die stylesheet op deze pagina.
   ========================================================================== */
body.single-fotograaf .ft-profile-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
}
body.single-fotograaf .ft-profile-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--ft-gold-pale);
	color: var(--ft-black);
	border-radius: var(--ft-radius-badge, 999px);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

body.single-fotograaf .ft-google-rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex-basis: 100%;
	margin-bottom: 8px;
}

body.single-fotograaf .ft-google-rating .ft-result-row__rating {
	margin-bottom: 0;
}

body.single-fotograaf .ft-google-rating__basis {
	margin: 0;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 0.75rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1rem;
	letter-spacing: normal;
	text-transform: none;
	color: rgb(31, 41, 55);
}

@media (min-width: 640px) {
	body.single-fotograaf .ft-google-rating__basis {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

body.single-fotograaf .ft-google-rating__source {
	margin: 0;
	font-size: var(--ft-meta-size, 13px);
	line-height: 1.3;
	color: var(--ft-text-gray, #6b7280);
}

body.single-fotograaf .ft-google-rating .ft-stars {
	color: var(--ft-gold, #c4a574);
	font-size: 13px;
	letter-spacing: 1px;
}