/*
Theme Name: Sundance Ridge
Theme URI: https://sundanceridge.nl
Author: Kay-webmedia
Author URI: https://kay-webmedia.nl
Description: Warm, rustig en natuurlijk maatwerkthema voor Sundance Ridge Rhodesian Ridgebacks. Ontwikkeld door Kay-webmedia.
Version: 1.7.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sundance-ridge
Tags: custom-menu, custom-logo, featured-images, block-patterns, translation-ready
*/

/* ==========================================================================
   Lettertypen (lokaal gehost)
   ========================================================================== */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/karla.woff2') format('woff2');
}

/* ==========================================================================
   Variabelen
   ========================================================================== */
:root {
	--sr-creme: #F6F2EA;
	--sr-wit: #FDFCF9;
	--sr-zand: #ECE4D3;
	--sr-taupe: #B7A98F;
	--sr-lichtbruin: #A5825C;
	--sr-olijf: #6E7355;
	--sr-mos: #4C513C;
	--sr-ink: #37382F;
	--sr-ink-zacht: #5C5D52;
	--sr-serif: 'Cormorant Garamond', Georgia, serif;
	--sr-sans: 'Karla', -apple-system, 'Segoe UI', sans-serif;
	--sr-content: 760px;
	--sr-breed: 1180px;
}

/* ==========================================================================
   Basis
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Geen doorveren voorbij de pagina (voorkomt lege vlakken op mobiel) */
html { background: #4C513C; overscroll-behavior: none; }
body { overscroll-behavior: none; }

body {
	font-family: var(--sr-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	color: var(--sr-ink);
	background: var(--sr-creme);
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sr-serif);
	font-weight: 500;
	line-height: 1.2;
	color: var(--sr-ink);
}
h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: clamp(22px, 3vw, 28px); }
h4 { font-size: 20px; }

p { margin-bottom: 1.2em; color: var(--sr-ink-zacht); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--sr-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sr-olijf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sr-mos); }
ul, ol { padding-left: 1.3em; margin-bottom: 1.2em; color: var(--sr-ink-zacht); }
li { margin-bottom: .35em; }

::selection { background: var(--sr-zand); color: var(--sr-ink); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--sr-mos); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

.sr-wrap { max-width: var(--sr-breed); margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   Header en navigatie
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--sr-creme);
	border-bottom: 1px solid rgba(183, 169, 143, .35);
}
@media (min-width: 961px) {
	.site-header { background: rgba(246, 242, 234, .93); backdrop-filter: blur(8px); }
}
.header-inner { display: flex; flex-direction: column; align-items: center; padding: 20px 24px 0; }
.site-wordmark {
	font-family: var(--sr-serif); font-size: 30px; letter-spacing: .16em;
	text-transform: uppercase; text-decoration: none; color: var(--sr-ink);
}
.site-wordmark span { color: var(--sr-olijf); }
.site-wordmark img { max-height: 64px; width: auto; }
.site-tagline {
	font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
	color: var(--sr-taupe); margin-top: 2px;
}
.main-nav { margin-top: 12px; }
.main-nav ul { display: flex; gap: 38px; list-style: none; padding: 0 0 16px; margin: 0; flex-wrap: wrap; justify-content: center; }
.main-nav li { margin: 0; }
.main-nav a {
	font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
	text-decoration: none; color: var(--sr-ink-zacht);
	padding-bottom: 6px; border-bottom: 1px solid transparent; transition: .25s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a { color: var(--sr-olijf); border-color: var(--sr-olijf); }

/* Submenu (desktop) */
.main-nav li { position: relative; }
.main-nav ul ul {
	display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	background: var(--sr-wit); border: 1px solid var(--sr-zand); padding: 10px 0;
	min-width: 220px; flex-direction: column; gap: 0; z-index: 60; box-shadow: 0 14px 30px rgba(55, 56, 47, .08);
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul { display: flex; }
.main-nav ul ul a { display: block; padding: 8px 22px; border: 0; letter-spacing: .1em; font-size: 12.5px; }

/* Hamburger */
.menu-knop {
	display: none; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
	padding: 0; position: relative; z-index: 70;
}
.sr-subtoggle { display: none; }
.menu-knop:focus { outline: none; }
.menu-knop:focus-visible { outline: 2px solid var(--sr-olijf); outline-offset: 4px; }
.menu-knop span { display: block; width: 26px; height: 2px; background: var(--sr-ink); transition: transform .3s ease, opacity .3s ease, background .3s ease; }
body.menu-open .menu-knop span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--sr-creme); }
body.menu-open .menu-knop span:nth-child(2) { opacity: 0; }
body.menu-open .menu-knop span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--sr-creme); }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero (voorpagina)
   ========================================================================== */
.sr-hero { position: relative; height: min(78vh, 720px); min-height: 480px; overflow: hidden; }
.sr-hero img.sr-hero-foto { width: 100%; height: 100%; object-fit: cover; object-position: var(--sr-hero-focus, 50% 50%); }
.sr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(55, 56, 47, .10) 0%, rgba(55, 56, 47, .45) 100%); }
.sr-hero-tekst { position: absolute; inset: auto 0 0 0; z-index: 2; text-align: center; padding: 0 24px 68px; color: #fff; }
.sr-hero-tekst h1 { color: #fff; font-size: clamp(36px, 6vw, 62px); max-width: 840px; margin: 10px auto 18px; }
.sr-hero-tekst p { max-width: 560px; margin: 0 auto 28px; color: rgba(255, 255, 255, .92); font-size: 18px; }

.sr-eyebrow {
	font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
	color: var(--sr-lichtbruin); display: block; font-family: var(--sr-sans); font-weight: 400;
}
.sr-hero .sr-eyebrow { color: rgba(255, 255, 255, .85); }

.sr-knop, .wp-block-button__link {
	display: inline-block; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
	text-decoration: none; padding: 15px 36px; border: 1px solid var(--sr-olijf);
	color: var(--sr-olijf); background: transparent; transition: .3s; border-radius: 0;
	font-family: var(--sr-sans); font-weight: 400; cursor: pointer;
}
.sr-knop:hover, .wp-block-button__link:hover { background: var(--sr-olijf); color: #fff; }
.sr-knop-licht { border-color: rgba(255, 255, 255, .85); color: #fff; }
.sr-knop-licht:hover { background: #fff; color: var(--sr-ink); }

/* Actueel bericht (via klantportaal) */
.sr-berichtband { background: var(--sr-zand); text-align: center; padding: 16px 24px; font-size: 15.5px; letter-spacing: .04em; color: var(--sr-ink); border-bottom: 1px solid var(--sr-taupe); }

/* ==========================================================================
   Paginakop (binnenpagina's)
   ========================================================================== */
.sr-paginakop { background: var(--sr-zand); text-align: center; padding: 72px 24px 64px; }
.sr-paginakop h1 { margin-top: 10px; }
.sr-paginakop .sr-intro { max-width: 640px; margin: 16px auto 0; font-size: 18px; }

/* ==========================================================================
   Inhoud en blokken
   ========================================================================== */
.site-main { display: block; }
.entry-content { padding: 72px 24px 96px; }
.entry-content > * { max-width: var(--sr-content); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--sr-breed); }
.entry-content > .alignfull { max-width: none; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content > h2 { margin-top: 2.2em; }
.entry-content > h3 { margin-top: 1.8em; }

.entry-content h2 .sr-eyebrow, .entry-content h1 .sr-eyebrow { margin-bottom: 8px; }

figcaption, .wp-element-caption {
	font-size: 13px; letter-spacing: .06em; color: var(--sr-ink-zacht);
	text-align: center; margin-top: 10px; font-family: var(--sr-sans);
}

/* Afbeeldingen en galerijen: rustige, begrensde formaten */
.wp-block-image img { width: 100%; }
.entry-content > .wp-block-image:not(.alignwide):not(.alignfull) img { max-height: 600px; width: auto; max-width: 100%; margin: 0 auto; }
.entry-content > .wp-block-image.alignwide img, .entry-content > .wp-block-image.alignfull img { width: 100%; max-height: 540px; object-fit: cover; object-position: 50% 40%; }
/* Volledige weergave zonder bijsnijden (bijv. stamboom-afbeelding) */
.entry-content .wp-block-image.sr-foto-volledig img { max-height: none !important; height: auto !important; object-fit: unset !important; }
.wp-block-media-text__media img { max-height: 620px; object-fit: cover; }
.wp-block-gallery { --wp--style--unstable-gallery-gap: 18px !important; gap: 18px !important; }
.wp-block-gallery .wp-block-image { border-radius: 0; }
/* Laatste tegel niet laten uitrekken over de volle breedte bij een onvolledige rij */
.wp-block-gallery.is-cropped .wp-block-image { flex-grow: 0; }
.wp-block-gallery img { object-fit: cover; height: 100%; width: 100%; object-position: 50% 30%; }
.wp-block-gallery.columns-2 .wp-block-image img { aspect-ratio: 4 / 3; }
.wp-block-gallery.columns-3 .wp-block-image img { aspect-ratio: 4 / 5; }
.wp-block-gallery.columns-4 .wp-block-image img { aspect-ratio: 1 / 1; }
/* Galerijvarianten: "volledig" toont hele foto's in een strakke metselwerk-indeling, "zacht" snijdt minder streng bij */
.wp-block-gallery.sr-galerij-volledig { display: block !important; columns: 3; column-gap: 18px; }
.wp-block-gallery.sr-galerij-volledig.columns-2 { columns: 2; }
.wp-block-gallery.sr-galerij-volledig .wp-block-image {
	display: block; break-inside: avoid; -webkit-column-break-inside: avoid;
	width: 100% !important; margin: 0 0 18px !important;
}
.wp-block-gallery.sr-galerij-volledig .wp-block-image img { width: 100%; height: auto; aspect-ratio: auto; object-fit: unset; object-position: center; }
.wp-block-gallery.sr-galerij-zacht .wp-block-image img { aspect-ratio: 4 / 3; }

/* Media en tekst */
.wp-block-media-text { grid-gap: 48px; }
.wp-block-media-text .wp-block-media-text__content { padding: 0; }

/* Citaat */
.wp-block-quote, blockquote {
	border: 0; padding: 0; margin: 2em auto;
	font-family: var(--sr-serif); font-style: italic;
	font-size: clamp(22px, 3vw, 30px); line-height: 1.45; color: var(--sr-ink);
	text-align: center;
}
.wp-block-quote cite {
	display: block; font-family: var(--sr-sans); font-style: normal; font-size: 12px;
	letter-spacing: .3em; text-transform: uppercase; color: var(--sr-taupe); margin-top: 18px;
}

/* Quote-band (patroon) */
.sr-quoteband { background: var(--sr-mos); padding: 90px 24px; }
.sr-quoteband .wp-block-quote, .sr-quoteband blockquote { color: var(--sr-creme); margin: 0 auto; max-width: 820px; }
.sr-quoteband p, .sr-quoteband .wp-block-quote p { color: var(--sr-creme); }
.sr-quoteband .wp-block-quote cite { color: #CFC8B4; }

/* Sectie-achtergronden */
.sr-band-wit { background: var(--sr-wit); border-top: 1px solid var(--sr-zand); border-bottom: 1px solid var(--sr-zand); }
.sr-band-zand { background: var(--sr-zand); }

/* Tabellen (gezondheid, stamboom) */
.wp-block-table table, table {
	width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--sr-wit);
}
.wp-block-table td, .wp-block-table th, table td, table th {
	border: 1px solid var(--sr-zand); padding: 12px 16px; text-align: left; color: var(--sr-ink-zacht);
	vertical-align: top;
}
.wp-block-table th, table th { font-family: var(--sr-sans); font-weight: 600; color: var(--sr-ink); background: var(--sr-zand); letter-spacing: .04em; }
.wp-block-table figcaption { margin-top: 12px; }

/* Scheiding */
hr, .wp-block-separator {
	border: 0; border-top: 1px solid var(--sr-taupe); max-width: 96px; margin: 2.6em auto; opacity: .6;
}

/* Lijsten met resultaten: één kolom, jurylid onder de show */
.sr-resultaten { list-style: none; padding: 0; }
.sr-resultaten li { padding: 14px 0; border-bottom: 1px solid var(--sr-zand); margin: 0; display: block; }
.sr-resultaten li strong { font-weight: 600; display: block; }
.sr-resultaten li span { display: block; color: var(--sr-taupe); font-size: 14px; letter-spacing: .04em; margin-top: 2px; }

/* Kaarten (verwijzingen) */
.sr-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.sr-kaart { text-decoration: none; display: block; color: inherit; }
.sr-kaart figure { overflow: hidden; margin: 0; }
.sr-kaart img { width: 100%; height: 400px; object-fit: cover; transition: transform 1.2s ease; }
.sr-kaart:hover img { transform: scale(1.045); }
.sr-kaart-body { text-align: center; padding: 24px 12px 0; }
.sr-kaart-body h3 { margin: 6px 0 10px; }
.sr-kaart-body p { font-size: 15.5px; margin-bottom: 14px; }
.sr-kaart-link {
	font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--sr-olijf); border-bottom: 1px solid var(--sr-olijf); padding-bottom: 4px;
}

/* Badge (kampioenstitel) */
.sr-badge {
	display: inline-block; background: var(--sr-zand); color: var(--sr-ink);
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 20px;
}

/* Omkaderde foto: sierkader alleen om de foto zelf, nooit door de tekst */
.sr-fotokader .wp-block-media-text__media { position: relative; padding: 0 26px 26px 0; }
.sr-fotokader .wp-block-media-text__media::after { content: ""; position: absolute; top: 26px; right: 0; bottom: 0; left: 26px; border: 1px solid var(--sr-taupe); pointer-events: none; z-index: 0; }
.sr-fotokader img { position: relative; z-index: 1; }

/* Subtiele verschijn-animatie */
.sr-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sr-reveal.sr-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sr-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Formulieren
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea {
	width: 100%; padding: 13px 16px; border: 1px solid var(--sr-taupe); background: var(--sr-wit);
	font-family: var(--sr-sans); font-size: 16px; color: var(--sr-ink);
}
input:focus, textarea:focus { outline: 2px solid var(--sr-olijf); outline-offset: 1px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--sr-mos); color: rgba(246, 242, 234, .8); padding: 80px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; margin-bottom: 56px; }
.site-footer .site-wordmark { color: var(--sr-creme); font-size: 24px; }
.site-footer .site-wordmark span { color: var(--sr-taupe); }
.site-footer p { font-size: 15px; line-height: 1.8; margin-top: 14px; color: rgba(246, 242, 234, .8); }
.site-footer h4 { color: var(--sr-creme); font-size: 20px; margin-bottom: 16px; }
.footer-nav ul { list-style: none; padding: 0; }
.footer-nav a {
	display: block; text-decoration: none; font-size: 14px; letter-spacing: .06em;
	padding: 5px 0; color: rgba(246, 242, 234, .75); transition: .25s;
}
.footer-nav a:hover { color: #fff; }
.sr-instagram { display: inline-flex; align-items: center; gap: 8px; color: rgba(246, 242, 234, .85); text-decoration: none; font-size: 14.5px; letter-spacing: .04em; }
.sr-instagram:hover { color: #fff; }
.footer-logos { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.footer-logos img { height: 96px; width: auto; max-width: 100%; background: #FFFFFF; padding: 12px 16px; border-radius: 6px; object-fit: contain; }
.footer-onder {
	border-top: 1px solid rgba(246, 242, 234, .18); padding-top: 26px;
	display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
	font-size: 13px; letter-spacing: .06em; color: rgba(246, 242, 234, .55);
}
.footer-onder a { color: inherit; text-decoration: none; }
.footer-onder a:hover { color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.header-inner { flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 20px; }
	.site-wordmark { font-size: 22px; letter-spacing: .14em; }
	.site-wordmark img { max-height: 48px; }
	.site-tagline { display: none; }
	.menu-knop { display: flex; }

	.main-nav {
		margin: 0; position: fixed; inset: 0; z-index: 60; background: var(--sr-mos);
		display: flex; align-items: center; justify-content: center;
		opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
	}
	.main-nav.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
	.main-nav > div { max-height: 100vh; overflow-y: auto; padding: 40px 0; }
	.main-nav ul { flex-direction: column; gap: 4px; padding: 0; text-align: center; }
	.main-nav a {
		font-family: var(--sr-serif); font-size: 28px; font-weight: 500; text-transform: none;
		letter-spacing: .05em; color: var(--sr-creme); border: none; padding: 7px 24px; display: inline-block;
	}
	.main-nav a:hover, .main-nav .current-menu-item > a { color: #fff; border: none; }

	/* Inklapbare submenu's op mobiel */
	.main-nav ul ul {
		display: none; position: static; transform: none; background: none; border: 0;
		box-shadow: none; padding: 0 0 6px; min-width: 0;
	}
	.main-nav li.sr-open > ul { display: block; }
	.main-nav ul ul a { font-size: 19px; color: #CFC8B4; padding: 3px 24px; }
	.sr-subtoggle {
		display: inline-block; background: none; border: 0; color: var(--sr-creme); cursor: pointer;
		font-size: 16px; padding: 6px 10px; vertical-align: middle; transition: transform .25s ease;
	}
	.main-nav li.sr-open > .sr-subtoggle { transform: rotate(180deg); }

	.wp-block-gallery.sr-galerij-volledig { columns: 2; column-gap: 12px; }
	.wp-block-gallery.sr-galerij-volledig .wp-block-image { margin-bottom: 12px !important; }
	.sr-kaarten { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
	.footer-grid { grid-template-columns: 1fr; gap: 40px; }
	.wp-block-media-text { grid-template-columns: 1fr !important; }
	.wp-block-media-text .wp-block-media-text__content { padding-top: 28px; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.entry-content { padding: 56px 20px 72px; }
	.sr-paginakop { padding: 52px 20px 44px; }
	.sr-hero { height: 72vh; min-height: 420px; }
	.sr-hero-tekst { padding-bottom: 52px; }
	.sr-hero-tekst h1 { font-size: clamp(32px, 9vw, 44px); }
	.sr-knop, .wp-block-button__link { padding: 13px 28px; font-size: 12px; }
	.sr-kaart img { height: 320px; }
	.sr-quoteband { padding: 64px 20px; }
	.wp-block-gallery { --wp--style--unstable-gallery-gap: 12px !important; gap: 12px !important; }
	.site-footer { padding: 60px 0 28px; }
	.footer-onder { justify-content: center; text-align: center; }
	.sr-fotokader .wp-block-media-text__media { padding: 0; }
	.sr-fotokader .wp-block-media-text__media::after { display: none; }
}

/* ==========================================================================
   Toegankelijkheid en diversen
   ========================================================================== */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}
:focus-visible { outline: 2px solid var(--sr-olijf); outline-offset: 2px; }