/*
Theme Name: Kortmann Logies
Theme URI:
Author: Koen Wensing
Description: Block theme for Kortmann Logies — reusable starter base for B&B and vacation rental sites.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: kortmann-logies
*/

/* ============================================
   GLOBAL RESETS & FIXES
   ============================================ */

/* Fix: twentytwentyfive parent blockGap injects margin-block-start between template parts.
   With a fixed header this shows as a visible strip above the hero. */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + *,
.entry-content > * + *,
.wp-block-post-content > * + *,
.wp-block-group > * + * {
    margin-block-start: 0 !important;
}

/* Smooth scrolling for anchor links.
   NEVER put an overflow-x value on `html`: `hidden` breaks position:fixed on mobile
   Chrome and `clip` hides the scrollbar sitewide. It goes on `body` only.
   CLAUDE.md -> "overflow-x rule (precise)". */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
}

/* Single source of truth for the fixed header's height (Gotcha #17) —
   never restate 5rem/80px as a literal anywhere else in this file. */
:root {
    --header-h: 5rem;
}

/* Clear the fixed header + breathing room below it */
body {
    padding-top: calc(var(--header-h) + 1.5rem);
}

/* Homepage + property pages: remove body padding so heroes sit full-bleed behind the fixed header.
   Each hero has its own padding-top to clear the header.
   All other page templates (default, privacy) keep the 6.5rem body padding. */
body.page-template-page-homepage,
body.page-template-page-property {
    padding-top: 0;
}

/* Property page hero — shorter than homepage, with property name overlay.
   Bottom-aligned content grows UPWARD as the heading wraps, so it must reserve
   its own space below the fixed header rather than relying on flex centering
   (Gotcha #17 — a wrapped heading on a narrow viewport otherwise slides under
   the header with no error and no visual sign on desktop). */
.property-hero {
    position: relative;
    height: 50vh;
    min-height: 24rem;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 3rem;
}

.property-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(29,45,32,0.8) 0%, rgba(29,45,32,0.3) 50%, transparent 100%);
    z-index: 1;
}

.property-hero-content {
    position: relative;
    z-index: 2;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.property-hero-content h1 {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .property-hero-content h1 {
        font-size: 4rem;
    }
}

.property-hero-content .property-hero-subtitle {
    color: #dfd7b8;
    font-size: 1.125rem;
}

/* WordPress injects default margins between wp:html blocks.
   On full-bleed homepages this creates visible body-color gaps between sections.
   Kill them so sections touch seamlessly. */
.wp-block-html {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* WordPress admin bar offset — push fixed header below the admin bar */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* WordPress's skip link inherits the theme's link colour, which only reaches 3.97:1
   on the cream background. It is keyboard-accessibility furniture rather than a brand
   surface, so it gets an explicit high-contrast colour of its own — set on the BASE
   state, not only on :focus, because the link is clipped rather than display:none and
   a contrast audit measures it where it sits. */
.skip-link,
.skip-link.screen-reader-text {
    color: #1D2D20;
}

.skip-link.screen-reader-text:focus {
    color: #1D2D20;
    background-color: #efebd9;
    text-decoration: underline;
}

/* Global selection color */
::selection {
    background-color: var(--wp--preset--color--farm-300);
    color: #fff;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

body {
    font-family: 'Nunito Sans', sans-serif;
    color: #44403c; /* stone-700 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    color: #1D2D20; /* leaf-900 */
}

/* ============================================
   HEADER
   ============================================ */

/* Mode A (default): solid light background, shadow on scroll.
   The header uses a ::before pseudo-element for the background so that
   backdrop-filter does NOT create a containing block that traps
   position:fixed mobile nav overlays (Gotcha #9). */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: box-shadow 0.3s ease;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(247, 246, 242, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    z-index: -1;
    pointer-events: none;
}

.site-header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Mode B (for future clients): transparent header that becomes solid on scroll.
   To activate: add class "header-transparent" to .site-header in header.html
   and remove the ::before background. Uncomment below and adapt. */
/*
.site-header.header-transparent::before {
    background-color: transparent;
    backdrop-filter: none;
    border-bottom: none;
}
.site-header.header-transparent .nav-link {
    color: #fff;
}
.site-header.header-transparent .site-logo-text {
    color: #fff;
}
.site-header.header-transparent.scrolled::before {
    background-color: rgba(247, 246, 242, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #dfd7b8;
}
.site-header.header-transparent.scrolled .nav-link {
    color: #57534e;
}
.site-header.header-transparent.scrolled .site-logo-text {
    color: #1D2D20;
}
*/

.site-header-inner {
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-h);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-logo img {
    height: 3rem;
    width: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid #dfd7b8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.site-logo-text {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #1D2D20;
}

/* Desktop nav */
.nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
    .site-header .nav-mobile-toggle {
        display: none !important;
    }
}

.nav-link {
    color: #57534e; /* stone-600 */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #947545; /* farm-600 */
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap; /* CLAUDE.md header checklist #7 — never break mid-word */
    background-color: #2A3F2C; /* leaf-800 */
    color: #fff;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.nav-cta:hover {
    background-color: #1D2D20; /* leaf-900 */
    transform: scale(1.05);
}

/* Statutory identity line in the footer bottom bar (SOPs/08 s1.5).
   ONE quiet line next to the copyright — never a second footer band, and never a
   repeat of the address/phone/e-mail that the Contact column already carries. */
.footer-statutory {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #a8a29e;
}

/* NL / EN language switcher (inc/multilingual.php).
   Client request 23-08-2026: two small rounded flags instead of the "NL / EN" text pill,
   as on https://mariahoeve-logies.nl/. Recorded as an approved deviation from the demo in
   BUILD-REPORT.md — do not "correct" it back to text.

   The flags are inline SVG drawn by kl_lang_flag_svg(); everything below is only the box
   they sit in. The links carry visually-hidden text, so .kl-lang-link still needs a
   readable colour even though nothing of it is painted. */
.kl-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Two classes on purpose: .nav-mobile-panel a sets display:flex and its own padding on
   every link inside the mobile menu, and a single-class selector would lose to it.

   The hairline sits on the LINK, not on the flag, and the dimming sits on the FLAG, not
   on the link. That split is load-bearing: `opacity` composites an element's whole
   subtree, box-shadow included, so a hairline drawn on a dimmed flag would be dimmed
   along with it — and both flags carry a white band that then bleeds straight into the
   near-white header, which is the one thing the hairline exists to prevent. */
.kl-lang .kl-lang-link {
    display: inline-flex;
    padding: 0;
    border-radius: 3px;
    line-height: 0;                /* no descender gap under the flag */
    color: #6f6963;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(29, 45, 32, 0.55);
    transition: box-shadow 0.2s ease;
}

.kl-lang-flag {
    display: block;
    width: 26px;
    height: 18px;
    border-radius: 3px;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Which language you are on has to stay readable without any text. The CURRENT one is
   marked by the ring; the other is only lightly muted, never faded — it is the flag a
   visitor actually has to find and click, and at 45% over a #f7f6f2 header the tricolour
   fell to ~2.3:1, below the 3:1 that WCAG 1.4.11 asks of a control's own boundary. This
   build already made and recorded that fix once for the text switcher it replaces
   (BUILD-REPORT §10b); do not re-dim it. */
.kl-lang .kl-lang-link:not(.is-active) .kl-lang-flag {
    opacity: 0.75;
    filter: saturate(0.7);
}

.kl-lang .kl-lang-link:hover .kl-lang-flag,
.kl-lang .kl-lang-link:focus-visible .kl-lang-flag {
    opacity: 1;
    filter: none;
}

.kl-lang .kl-lang-link.is-active {
    box-shadow: 0 0 0 1px rgba(29, 45, 32, 0.55), 0 0 0 2px #2A3F2C;
}

.kl-lang .kl-lang-link:focus-visible {
    outline: 2px solid #2A3F2C;
    outline-offset: 3px;
}

.kl-lang-mobile {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid #efebd9;
}

@media (min-width: 768px) {
    .kl-lang-mobile { display: none; }
}

/* Mobile menu toggle.
   The glyph is font-INDEPENDENT on purpose: the Phosphor icon font loads with
   font-display: block, so a cold load would otherwise show an empty square where
   the menu button should be. `.menu-glyph` draws U+2630 in a system font, which is
   always available (SOPs/05 s4 — "never depend on the icon font for the hamburger"). */
.nav-mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #57534e;
    font-size: 1.875rem;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.nav-mobile-toggle .menu-glyph::before {
    content: '\2630';
    font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
}

/* If the icon font DOES arrive, hide the fallback so the two never stack. */
.fonts-loaded .nav-mobile-toggle .menu-glyph {
    display: none;
}

.nav-mobile-toggle .ph-list {
    display: none;
}

.fonts-loaded .nav-mobile-toggle .ph-list {
    display: inline-block;
}

.nav-mobile-toggle:hover {
    color: #2A3F2C;
}

/* Mobile menu panel */
.nav-mobile-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #dfd7b8;
    box-shadow: 0 12px 24px -4px rgba(0,0,0,0.12);
    padding: 1rem 1.25rem 1.25rem;
}

.nav-mobile-panel.open {
    display: block;
}

.nav-mobile-panel nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-bottom: 1px solid #efebd9;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.nav-mobile-panel a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.875rem;
    color: #44403c;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-mobile-panel a:hover {
    background-color: #efebd9;
    color: #1D2D20;
}

.nav-mobile-panel a.nav-cta-mobile {
    background-color: #947545;
    color: #fff;
    justify-content: center;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
}

.nav-mobile-panel a.nav-cta-mobile:hover {
    background-color: #7a5d3a;
    color: #fff;
}

@media (min-width: 768px) {
    .nav-mobile-panel {
        display: none !important;
    }
}

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

.site-footer {
    background-color: #1c1917; /* stone-900 */
    color: #a8a29e; /* stone-400 */
    padding: 4rem 0;
    border-top: 8px solid #947545; /* farm-600 */
}

.site-footer h3,
.site-footer h4 {
    color: #fff;
}

.site-footer a {
    color: #a8a29e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #fff;
}

.footer-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-inner {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-brand-name {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-brand-name img {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    object-fit: cover;
}

.footer-section-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    font-family: 'Nunito Sans', sans-serif;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #292524; /* stone-800 */
    color: #fff;
    transition: background-color 0.2s ease;
}

.footer-social-link:hover {
    color: #fff;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-contact-icon {
    color: #a68b51; /* farm-500 */
    font-size: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 0.5rem;
}

.footer-bottom {
    max-width: 80rem;
    margin: 3rem auto 0;
    padding: 2rem 1rem 0;
    border-top: 1px solid #292524;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ============================================
   HERO / COVER SECTIONS
   ============================================ */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-h); /* clear fixed header */
    overflow: hidden;
}

/* Homepage hero photo rotator — stacked full-bleed layers, crossfaded via .is-active
   (toggled by assets/js/gallery-slider.js). The section itself no longer carries its
   own background-image; each slide paints one. */
.hero-bg-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

.hero-bg-slide.is-active {
    opacity: 1;
}

/* background-attachment: fixed is unreliable on iOS Safari and forces a repaint on
   every scroll frame on Android — fall back to a normal background on phones. */
@media (max-width: 768px) {
    .hero-bg-slide {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-slide {
        transition: none;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(42, 63, 44, 0.6), rgba(29, 45, 32, 0.8));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

.hero-eyebrow {
    color: #cbbe90; /* farm-300 */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.hero-heading {
    font-family: 'Lora', serif;
    font-weight: 700;
    color: #fff;
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .hero-heading {
        font-size: 4.5rem;
    }
}

.hero-heading em {
    color: #dfd7b8; /* farm-200 */
    font-style: italic;
}

.hero-subtitle {
    color: #f7f6f2; /* farm-50 */
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 1.5rem;
    }
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .hero-actions {
        flex-direction: row;
    }
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid #fff;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background-color: #fff;
    color: #1D2D20;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #a68b51; /* farm-500 */
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    background-color: #947545; /* farm-600 */
}

/* ============================================
   SECTION PATTERNS
   ============================================ */

.section {
    padding: 5rem 0;
}

@media (min-width: 768px) {
    .section {
        padding: 8rem 0;
    }
}

.section-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-eyebrow {
    color: #947545; /* farm-600 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.section-heading {
    font-family: 'Lora', serif;
    font-weight: 700;
    color: #1D2D20;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-heading {
        font-size: 3rem;
    }
}

/* Background variants */
.section-white { background-color: #fff; }
.section-cream { background-color: #f7f6f2; }
.section-light { background-color: #efebd9; }
.section-dark  { background-color: #1D2D20; color: #f7f6f2; }
.section-dark .section-heading { color: #fff; }

/* ============================================
   PROPERTY CARDS
   ============================================ */

.property-card {
    background-color: #f7f6f2;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    border: 1px solid #efebd9;
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .property-card {
        flex-direction: row;
    }
    .property-card.reversed {
        flex-direction: row-reverse;
    }
}

.property-card-image {
    position: relative;
    height: 24rem;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .property-card-image {
        width: 50%;
        height: auto;
    }
}

.property-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.property-card:hover .property-card-image img {
    transform: scale(1.05);
}

.property-card-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background-color: #a68b51;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.property-card.reversed .property-card-badge {
    left: auto;
    right: 1.5rem;
}

.property-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1024px) {
    .property-card-content {
        width: 50%;
        padding: 3rem;
    }
}

.property-card-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.875rem;
    color: #1D2D20;
    margin-bottom: 1rem;
}

.property-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .property-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.property-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #44403c;
}

.property-features .check-icon {
    color: #a68b51;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.property-card-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid #dfd7b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.property-book-link {
    color: #2A3F2C;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.property-book-link:hover {
    color: #947545;
}

.property-thumbs {
    display: flex;
    gap: 0.5rem;
}

.property-thumbs img {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid #dfd7b8;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.property-thumbs img:hover {
    opacity: 0.8;
}

/* ============================================
   CONTACT FORM 7 — BASE STYLING
   ============================================ */

/* Ensure all form elements respect their container width */
.wpcf7 *,
.wpcf7 *::before,
.wpcf7 *::after {
    box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #dfd7b8; /* farm-200 */
    border-radius: 0.5rem;
    background-color: #fff;
    color: #44403c; /* stone-700 */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease;
    outline: none;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #a68b51; /* farm-500 */
}

.wpcf7 textarea {
    min-height: 8rem;
    resize: vertical;
}

.wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #947545; /* farm-600 — accent color, swap per client */
    color: #fff;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.wpcf7 input[type="submit"]:hover {
    background-color: #7a5d3a; /* farm-700 */
    transform: translateY(-2px);
}

.wpcf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #57534e;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Form card wrapper — less padding on mobile.
   max-width is 80% of .section-inner (80rem) so the form fills more of the band
   horizontally while staying centred via `margin: 0 auto`. */
.kl-form-card {
    max-width: 64rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

@media (min-width: 640px) {
    .kl-form-card {
        padding: 2.5rem;
    }
}

/* Responsive form grid — 1 col on mobile, 2 cols ≥640px, 3 cols ≥900px.
   The 3-col track keeps the reservation form wide and short: the seven short
   fields land on two rows, with Opmerkingen spanning the remaining cells. */
.kl-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
    align-items: start;
}

@media (min-width: 640px) {
    .kl-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .kl-form-wide {
        grid-column: span 2;
    }
}

@media (min-width: 900px) {
    .kl-form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tighten CF7's default <p> rhythm — the plugin wraps every field in a <p>,
   whose default margins are what made the card so tall. */
.kl-form-card .wpcf7-form p {
    margin: 0 0 1rem;
}

.kl-form-card .wpcf7-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #44403c; /* stone-700 */
    margin-bottom: 1rem;
}

/* Shorter textarea: it sits beside "Aantal personen", so its height sets the
   whole row's height. CF7's rows=10 default is far taller than needed. */
.kl-form-grid textarea {
    min-height: 6.5rem;
}

/* Consent + submit share one row instead of stacking into two. */
.kl-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.kl-form-footer p {
    margin: 0;
}

.kl-form-consent {
    flex: 1 1 20rem;
}

.kl-form-submit {
    flex: 0 0 auto;
}

/* Ensure the form card doesn't overflow on small screens */
.wpcf7 {
    min-width: 0;
    width: 100%;
}

/* ============================================
   GLOBAL DESIGN CONSISTENCY
   ============================================ */

/* Border-radius + shadow on images, buttons, cards */
.wp-block-image img {
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.wp-block-button__link {
    border-radius: 9999px;
}

/* Content container width — only for default/inner pages, not full-bleed homepages.
   Full-bleed pages use layout type "default" in the template so sections go edge-to-edge.
   Each section controls its own max-width via .section-inner. */

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f7f6f2; }
::-webkit-scrollbar-thumb { background: #cbbe90; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a68b51; }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   PROPERTY GALLERY SLIDER (.kl-slider)
   ============================================ */

.kl-slider {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    background-color: #efebd9;
}

.kl-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.kl-slider-track::-webkit-scrollbar { display: none; }

.kl-slider-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* Clip the Ken Burns overscan so a scaled photo never bleeds into its neighbour. */
    overflow: hidden;
}

/* Client-approved deviation (feedback 19-08-2026): the photos used to render in a short
   ~1250x430 letterbox crop. They now keep the photo's native 16:9 ratio — the same height
   as the old site (~690px tall at ~1210px wide) — and scale responsively. Do NOT put a
   fixed pixel height back on this rule. */
.kl-slider-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Ken Burns overscan: the photo starts slightly zoomed in and drifts back out. */
    transform-origin: center center;
    will-change: transform;
}

/* Client-approved deviation (feedback 19-08-2026): "kunnen de foto's in de slide bewegen
   zoals op oude site ... iets uitzoomen naar links of rechts". Slow zoom-out with a
   sideways drift on the ACTIVE slide only, alternating direction per slide. */
.kl-slider-slide.is-active img {
    animation: kl-kenburns-left 8s ease-out both;
}

.kl-slider-slide.is-active:nth-child(even) img {
    animation-name: kl-kenburns-right;
}

@keyframes kl-kenburns-left {
    from { transform: scale(1.12) translateX(2.2%); }
    to   { transform: scale(1)    translateX(0); }
}

@keyframes kl-kenburns-right {
    from { transform: scale(1.12) translateX(-2.2%); }
    to   { transform: scale(1)    translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kl-slider-slide.is-active img { animation: none; transform: none; }
}

.kl-slider-prev,
.kl-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 9999px;
    background-color: rgba(29,45,32,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kl-slider-prev:hover,
.kl-slider-next:hover { background-color: rgba(29,45,32,0.85); }

.kl-slider-prev { left: 1rem; }
.kl-slider-next { right: 1rem; }

/* Arrows appear on hover and fade out when the mouse leaves (agreed behaviour).
   On touch devices there is no hover, so they stay visible there. */
@media (hover: hover) {
    .kl-slider-prev,
    .kl-slider-next {
        opacity: 0;
        transition: opacity 0.25s ease, background-color 0.2s ease;
    }
    .kl-slider:hover .kl-slider-prev,
    .kl-slider:hover .kl-slider-next,
    .kl-slider:focus-within .kl-slider-prev,
    .kl-slider:focus-within .kl-slider-next,
    .kl-slider-prev:focus-visible,
    .kl-slider-next:focus-visible {
        opacity: 1;
    }
}

.kl-slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.kl-slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255,255,255,0.55);
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.kl-slider-dot.is-active {
    background-color: #fff;
    transform: scale(1.3);
}

/* ============================================
   CLICK-TO-LOAD EMBED FACADES (.kl-facade)
   No third-party request fires until the visitor explicitly asks for it, so the
   site keeps the documented no-cookie-banner position (SOPs/08 s2.2) while the
   video and the map still work. Never put a bare <iframe> to youtube.com,
   youtube-nocookie.com or maps.google.com back into page content.
   ============================================ */

.kl-facade {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    background-color: #efebd9;
}

.kl-facade iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* --- video facade --- */

.kl-facade-video {
    aspect-ratio: 16 / 9;
}

.kl-facade-video img,
.kl-facade-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kl-facade-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(29, 45, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kl-facade-play:hover,
.kl-facade-play:focus-visible {
    background-color: rgba(29, 45, 32, 0.5);
}

.kl-facade-play-icon {
    display: block;
    width: 5rem;
    height: 3.5rem;
    border-radius: 0.9rem;
    background-color: rgba(255, 255, 255, 0.92);
    position: relative;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease;
}

.kl-facade-play:hover .kl-facade-play-icon {
    transform: scale(1.06);
}

.kl-facade-play-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.15rem;
    border-color: transparent transparent transparent #1D2D20;
}

/* --- map facade --- */

.kl-facade-map .kl-facade-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    text-align: center;
    min-height: 20rem;
    padding: 2.5rem 1.5rem;
    background-color: #efebd9;
}

.kl-facade-map.is-dark .kl-facade-panel {
    background-color: #2A3F2C;
}

.kl-facade-pin {
    font-size: 2.25rem;
    color: #947545;
}

.kl-facade-map.is-dark .kl-facade-pin {
    color: #cbbe90;
}

.kl-facade-address {
    margin: 0;
    font-family: 'Lora', serif;
    font-size: 1.125rem;
    color: #1D2D20;
}

.kl-facade-map.is-dark .kl-facade-address {
    color: #fff;
}

.kl-facade-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.kl-facade-actions .kl-facade-load {
    border: none;
    cursor: pointer;
    font: inherit;
}

.kl-facade-note {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #57534e;
    max-width: 26rem;
}

.kl-facade-map.is-dark .kl-facade-note {
    color: #a8a29e;
}

.kl-facade-video .kl-facade-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 0.5rem 1rem;
    max-width: none;
    background-color: rgba(29, 45, 32, 0.72);
    color: #efebd9;
    pointer-events: none;
}

/* ============================================
   404 PAGE (templates/404.html)
   ============================================ */

.kl-404 {
    padding-top: calc(var(--header-h) + 4rem);
    padding-bottom: 2rem;
}

.kl-404-code {
    font-family: 'Lora', serif;
    font-size: clamp(5rem, 18vw, 9rem);
    line-height: 1;
    color: #dfd7b8; /* farm-200 — decorative, deliberately NOT a heading */
    margin: 0 0 0.5rem;
}

.kl-404-search {
    background-color: #f7f6f2;
    padding: 0 1rem 1rem;
}

.kl-404-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.kl-404-links a {
    color: #947545;
    font-weight: 600;
    text-decoration: none;
}

.kl-404-links a:hover {
    color: #7a5d3a;
    text-decoration: underline;
}

.kl-404-links i {
    font-size: 0.75rem;
}

/* ============================================
   STICKY MOBILE CTA (.kl-sticky-cta)
   Mobile-only bottom booking bar, rendered from functions.php so a content
   re-push cannot wipe it. Deliberate third CTA surface per SOPs/08 s1.2.
   ============================================ */

.kl-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .kl-sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: block;
        padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
        background-color: rgba(247, 246, 242, 0.96);
        border-top: 1px solid #dfd7b8;
        box-shadow: 0 -6px 18px -6px rgba(0, 0, 0, 0.18);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Hidden while the booking section itself is on screen — no point offering a
       shortcut to something the visitor is already looking at. */
    .kl-sticky-cta.is-hidden {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
    }

    .kl-sticky-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.875rem 1rem;
        border-radius: 9999px;
        background-color: #2A3F2C;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
    }

    .kl-sticky-cta-btn:hover,
    .kl-sticky-cta-btn:focus {
        background-color: #1D2D20;
        color: #fff;
    }

    /* Keep the bar from covering the last line of the footer. */
    .site-footer {
        padding-bottom: 5.5rem;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .kl-sticky-cta { transition: none; }
}

/* ============================================
   LIGHTBOX SLIDER (.kl-lightbox)
   Any container with .kl-lightbox-gallery turns its <img> children into
   clickable thumbnails that open enlarged in a slider with prev/next + dots.
   Used by the "De Boerderij & Omgeving" photo grid (client request 19-08-2026).
   ============================================ */

.kl-lightbox-gallery img {
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kl-lightbox-gallery img:hover,
.kl-lightbox-gallery img:focus-visible {
    transform: scale(1.02);
}

/* A woning card is itself a lightbox gallery — client request 23-08-2026: "Je kan op de
   foto klikken, maar er gebeurd niets?". Its small thumbnails now open the slider with
   that card's photos. The big photo is the exception: it is wrapped in a link to the
   woning page (the same target as the "Bekijk ..." button), so it must not look or
   behave like a thumbnail. */
.property-card-image > a {
    display: block;
    width: 100%;
    height: 100%;
}

.property-card.kl-lightbox-gallery .property-card-image img {
    cursor: pointer;                 /* it navigates — never zoom-in */
    transition: transform 0.7s ease; /* keep the card's own slow zoom, not the 0.25s one */
}

.property-card.kl-lightbox-gallery .property-thumbs img {
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.kl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(29, 45, 32, 0.94);
    padding: 3.5rem 1rem 4.5rem;
}

.kl-lightbox.is-open { display: flex; }

.kl-lightbox-figure {
    position: relative;
    max-width: 76rem;
    width: 100%;
    margin: 0;
    text-align: center;
}

.kl-lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    margin: 0 auto;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    object-fit: contain;
}

.kl-lightbox-caption {
    margin-top: 0.875rem;
    color: #d6d3d1;
    font-size: 0.9375rem;
}

.kl-lightbox-prev,
.kl-lightbox-next,
.kl-lightbox-close {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kl-lightbox-prev:hover,
.kl-lightbox-next:hover,
.kl-lightbox-close:hover { background-color: rgba(255, 255, 255, 0.32); }

.kl-lightbox-prev,
.kl-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
}

.kl-lightbox-prev { left: 0.75rem; }
.kl-lightbox-next { right: 0.75rem; }

/* `display:flex` above out-specifies the UA's [hidden] rule, so a hidden arrow would
   still render — and a single-photo gallery would show two dead buttons. */
.kl-lightbox [hidden] { display: none !important; }

.kl-lightbox-close {
    top: -3rem;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}

.kl-lightbox-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.kl-lightbox-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    border: none;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.kl-lightbox-dot.is-active {
    background-color: #fff;
    transform: scale(1.3);
}

@media (max-width: 640px) {
    .kl-lightbox { padding: 3rem 0.5rem 4rem; }
    .kl-lightbox-prev,
    .kl-lightbox-next { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
    .kl-lightbox-prev { left: 0.25rem; }
    .kl-lightbox-next { right: 0.25rem; }
}

body.kl-lightbox-open { overflow: hidden; }

/* ============================================
   AVAILABILITY CALENDAR (.kl-availability)
   ============================================ */

.kl-availability { margin-top: 1rem; }

.kl-availability-months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.kl-availability-month {
    background-color: #fff;
    border: 1px solid #dfd7b8;
    border-radius: 1rem;
    padding: 1.25rem;
}

.kl-availability-month h4 {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1rem;
    color: #1D2D20;
    margin: 0 0 0.75rem;
    text-transform: capitalize;
}

.kl-availability-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    text-align: center;
}

.kl-availability-grid .kl-day-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #57534e;
    text-transform: uppercase;
    padding-bottom: 0.25rem;
}

.kl-availability-grid .kl-day {
    font-size: 0.75rem;
    line-height: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: #44403c;
}

.kl-availability-grid .kl-day.is-empty { visibility: hidden; }
.kl-availability-grid .kl-day.is-free { background-color: #f7f6f2; }
.kl-availability-grid .kl-day.is-booked {
    background-color: #dfd7b8;
    color: #44403c;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.kl-availability-grid .kl-day.is-today {
    box-shadow: inset 0 0 0 2px #947545;
    font-weight: 700;
}

.kl-availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: #57534e;
}

.kl-availability-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kl-availability-legend .kl-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.kl-availability-legend .kl-dot.is-free { background-color: #f7f6f2; border: 1px solid #dfd7b8; }
.kl-availability-legend .kl-dot.is-booked { background-color: #dfd7b8; }

.kl-availability-note {
    font-size: 0.8125rem;
    /* Was stone-400 (#a8a29e): 2.3:1 on the cream section — the line that tells a
       guest "a free date is not a guarantee" was the least readable text on the page.
       #6f6963 is still visibly muted and clears AA on white, cream and farm-100. */
    color: #6f6963;
    margin-top: 1rem;
}

.kl-availability-error {
    font-size: 0.875rem;
    color: #6f6963; /* see .kl-availability-note */
    font-style: italic;
}