/*
Theme Name: The White Barn
Theme URI: https://thewhitebarn.nl/
Author: The White Barn
Description: Bewerkbaar block theme op basis van het Canva-ontwerp van The White Barn.
Version: 0.4.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: the-white-barn
*/
:root {--wb-cream:#f4f1eb;--wb-wine:#905451;--wb-olive:#85805c;--wb-ink:#302d29;}
*{box-sizing:border-box} html{scroll-behavior:smooth}body{margin:0;color:var(--wb-ink)}a{text-underline-offset:3px} .wb-site-head{position:relative;z-index:4;background:var(--wb-cream)}
.wb-topbar{background:#89835e;color:white;padding:5px 5%;font-size:11px;letter-spacing:.06em}.wb-topbar a{color:white;text-decoration:none}.wb-topbar .wp-block-columns{margin:0;gap:12px}
.wb-nav{padding:14px max(4%,calc((100% - 1250px)/2));gap:20px}.wb-nav .wp-block-site-title a{text-decoration:none;white-space:nowrap}.wb-nav .wp-block-navigation{font-family:Karla,sans-serif;font-size:12px;letter-spacing:.075em;font-weight:600;text-transform:uppercase}
.wb-hero img{width:100%;height:clamp(320px,34vw,550px);object-fit:cover;display:block}.wb-hero{margin:0!important}.wb-section{padding:82px 24px}.wb-inner{max-width:1160px;margin-inline:auto}.wb-intro{text-align:center}.wb-intro .wp-block-heading{max-width:850px;margin:8px auto 20px;line-height:1.1}.wb-intro p:not(.wb-kicker){max-width:690px;margin-inline:auto}.wb-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:12px!important;font-weight:700;margin:0 0 9px!important;font-family:Karla,sans-serif}.wb-btn .wp-block-button__link{background:var(--wb-wine);border-radius:999px;color:#fff;padding:12px 32px;font-size:12px;letter-spacing:.055em;text-transform:uppercase;font-weight:700}.wb-btn .wp-block-button__link:hover{background:#754340}.wb-btn.is-style-outline .wp-block-button__link{background:transparent;color:var(--wb-ink);border:1px solid var(--wb-ink)}
.wb-features{background:var(--wb-cream)}.wb-features .wb-kicker,.wb-features .wb-section-title{text-align:center}.wb-features .wb-section-title{margin:6px 0 34px}.wb-feature-grid{gap:26px}.wb-feature-grid .wp-block-column{min-width:0}.wb-feature-grid figure{margin:0 0 15px}.wb-feature-grid img{width:100%;height:236px;object-fit:cover;display:block}.wb-feature-grid h3{font-size:27px;line-height:1.05;margin:0 0 10px}.wb-feature-grid p{margin:0}.wb-center-btn{text-align:center;margin-top:34px}
.wb-story .wb-story-columns{align-items:center;gap:5vw}.wb-story-copy{max-width:460px}.wb-story-copy blockquote{border:0;margin:0 0 26px;padding:0}.wb-story-copy blockquote p{font-family:Fraunces,serif;font-size:clamp(28px,3.4vw,47px);font-style:italic;line-height:1.06;margin:0 0 12px}.wb-story-copy cite{font-family:Karla,sans-serif;font-size:12px;font-style:normal;letter-spacing:.12em;font-weight:700}.wb-story-photos{position:relative;min-height:480px}.wb-story-photos .wb-photo-one{width:69%;position:relative;z-index:1}.wb-story-photos .wb-photo-two{width:62%;position:absolute;right:0;bottom:0;z-index:2}.wb-story-photos img{width:100%;height:315px;object-fit:cover;box-shadow:0 9px 20px rgba(0,0,0,.13)}.wb-story-photos .wb-photo-two img{height:260px}.wb-cta{text-align:center;padding-top:52px;padding-bottom:92px}.wb-cta .wp-block-heading{margin:6px auto 16px}.wb-cta p:not(.wb-kicker){max-width:680px;margin-inline:auto}.wb-cta .wp-block-buttons{justify-content:center;gap:20px;margin-top:24px}
.wb-footer{background:var(--wb-olive);color:#fff;padding:56px 24px 62px}.wb-footer .wp-block-columns{gap:40px;max-width:1160px;margin:auto}.wb-footer a{color:#fff;text-decoration:none}.wb-footer a:hover{text-decoration:underline}.wb-footer h3{font-family:Karla,sans-serif;font-size:12px;letter-spacing:.12em;margin:0 0 16px;text-transform:uppercase}.wb-footer p{font-size:13px;margin:4px 0}.wb-footer-brand{font-size:38px;line-height:.92;font-weight:500;font-family:Fraunces,serif}.wb-footer-brand em{font-style:italic}.wb-placeholder{opacity:.86}.wb-default{max-width:950px;padding:80px 24px;margin:auto}.wb-default h1{font-size:clamp(40px,5vw,65px)}
@media(max-width:900px){.wb-nav{padding:14px 24px}.wb-feature-grid img{height:190px}.wb-story-photos{min-height:390px}.wb-story-photos img{height:260px}.wb-story-photos .wb-photo-two img{height:210px}}
@media(max-width:700px){.wb-topbar{padding:7px 15px}.wb-topbar .wp-block-columns{display:flex;justify-content:center;flex-wrap:wrap}.wb-topbar .wp-block-column{flex:0 1 auto}.wb-section{padding:58px 20px}.wb-hero img{height:310px}.wb-feature-grid{gap:30px}.wb-feature-grid img{height:230px}.wb-feature-grid h3{font-size:26px}.wb-story .wb-story-columns{gap:30px}.wb-story-photos{min-height:355px}.wb-story-photos img{height:235px}.wb-story-photos .wb-photo-two img{height:195px}.wb-cta{padding:50px 20px 70px}.wb-footer .wp-block-columns{gap:22px}.wb-footer-brand{font-size:34px}}

/* V0.2: dichter bij Canva: compacte volledige header, brede panoramabanner en kortere secties */
body{font-family:Karla,Arial,sans-serif;font-size:16px;line-height:1.45}
.wb-site-head,.wb-topbar,.wb-nav,.wb-hero,.wb-section,.wb-footer{box-sizing:border-box}
.wb-site-head{width:100%;max-width:none!important;margin:0!important;background:#f4f1eb}
.wb-topbar{width:100%;max-width:none!important;padding:4px max(26px,calc((100% - 1330px)/2));font-size:11px;line-height:1.3}
.wb-topbar>.wp-block-columns{max-width:none!important}
.wb-topbar p{margin:0!important}
.wb-nav{width:100%;max-width:none!important;min-height:62px;padding:12px max(28px,calc((100% - 1320px)/2));align-items:center!important;flex-wrap:nowrap!important}
.wb-nav .wp-block-navigation{font-size:12px;letter-spacing:.04em;gap:clamp(18px,3vw,50px)}
.wb-header-brand{font-family:Fraunces,Georgia,serif;font-size:clamp(20px,2vw,27px);font-weight:500;letter-spacing:.12em;white-space:nowrap;margin:0!important;line-height:1}
.wb-header-brand a{color:#302d29;text-decoration:none}
.wb-hero{width:100%!important;max-width:none!important; padding:0!important; margin:0!important;display:block}
.wb-hero figure{margin:0!important;width:100%;max-width:none!important}
.wb-hero img{width:100%!important;max-width:none!important;height:clamp(185px,16vw,265px)!important;object-fit:cover;object-position:center 52%;display:block}
.wb-section{width:100%!important;max-width:none!important;padding:58px 24px}
.wb-section>.wp-block-group,.wb-section>.wp-block-columns{max-width:1160px!important;margin-left:auto;margin-right:auto}
.wb-intro{padding:45px 20px 58px}
.wb-intro h1{max-width:770px;font-size:clamp(29px,3.15vw,44px)!important;line-height:1.09;margin:8px auto 15px!important}
.wb-intro p:not(.wb-kicker){max-width:700px;margin:0 auto 18px;font-size:16px;line-height:1.5}
.wb-kicker{font-size:11px!important;letter-spacing:.15em!important}
.wb-btn .wp-block-button__link{padding:11px 32px!important;font-size:11px!important;min-width:175px;text-align:center}
.wb-features{padding:56px 24px 55px!important}
.wb-features .wb-section-title{font-size:clamp(28px,2.8vw,39px)!important;margin:4px 0 26px!important}
.wb-feature-grid{max-width:1160px!important;gap:24px!important}
.wb-feature-grid .wp-block-column{min-width:0!important}
.wb-feature-grid img{height:200px!important;width:100%;object-fit:cover}
.wb-feature-grid h3{font-size:clamp(22px,2vw,27px)!important;line-height:1.07;margin:0 0 9px!important}
.wb-feature-grid p{font-size:15px;line-height:1.45}
.wb-center-btn{margin-top:26px!important}
.wb-story{padding:68px 24px 50px!important}
.wb-story-columns{max-width:1060px!important;gap:6vw!important;align-items:center}
.wb-story-copy blockquote p{font-size:clamp(30px,3.1vw,43px)!important;line-height:1.06}
.wb-story-copy>p{font-size:15px;line-height:1.48}
.wb-story-photos{min-height:400px}
.wb-story-photos img{height:270px}
.wb-story-photos .wb-photo-two img{height:220px}
.wb-cta{padding:42px 20px 68px!important}
.wb-cta h2{font-size:clamp(28px,2.8vw,39px)!important}
.wb-cta p:not(.wb-kicker){font-size:15px}
.wb-footer{width:100%!important;max-width:none!important;padding:42px 30px 55px}
.wb-footer .wp-block-columns{max-width:1200px!important;gap:45px}
.wb-footer-brand{font-size:39px!important;line-height:.85!important}
.wb-footer p{font-size:13px}
@media(max-width:780px){.wb-nav{flex-wrap:wrap!important;gap:12px}.wb-hero img{height:240px!important}.wb-feature-grid img{height:220px!important}.wb-story-photos{min-height:350px}.wb-story-photos img{height:230px}.wb-story-photos .wb-photo-two img{height:185px}}
@media(max-width:600px){.wb-nav{min-height:65px;padding:14px 20px}.wb-header-brand{font-size:20px}.wb-section{padding:48px 20px}.wb-intro{padding:48px 20px}.wb-intro h1{font-size:32px!important}.wb-hero img{height:255px!important}.wb-features{padding:48px 20px!important}.wb-story{padding:48px 20px!important}.wb-feature-grid{gap:32px!important}.wb-story-photos{margin-top:24px}.wb-cta{padding:48px 20px 66px!important}}

/* v0.3: visuele correcties op basis van WordPress-screenshots */
/* Fraunces: headings. Outfit: navigatie, labels en knoppen. Karla: lopende tekst. */
.wb-topbar{font-family:Outfit,Arial,sans-serif!important;font-size:14px!important;line-height:1.45!important;padding-top:7px!important;padding-bottom:7px!important;letter-spacing:.055em}
.wb-topbar p,.wb-topbar a{font-family:Outfit,Arial,sans-serif!important;font-size:inherit!important}
.wb-nav{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:82px!important;gap:35px!important}
.wb-header-brand{flex:0 0 auto}
.wb-nav .wp-block-navigation{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:1 1 auto;font-family:Outfit,Arial,sans-serif!important;font-size:15px!important;font-weight:600!important;letter-spacing:.045em!important;line-height:1.2!important}
.wb-nav .wp-block-navigation__container{align-items:center!important;justify-content:flex-end!important;gap:clamp(23px,3.6vw,62px)!important}
.wb-nav .wp-block-navigation-item__content{font-family:Outfit,Arial,sans-serif!important;line-height:1.2!important}
.wb-hero img{height:clamp(370px,35vw,560px)!important;object-fit:cover!important;object-position:center 51%!important}
.wb-kicker,.wb-section .wb-kicker{font-family:Outfit,Arial,sans-serif!important;font-size:14px!important;font-weight:600!important;letter-spacing:.14em!important;line-height:1.4!important;text-align:center!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;}
.wb-intro .wb-kicker{text-align:center!important;max-width:none!important;display:block!important}
.wb-btn .wp-block-button__link,.wb-section .wp-block-button__link{font-family:Outfit,Arial,sans-serif!important;font-size:13px!important;font-weight:600!important;letter-spacing:.065em!important}
.wb-feature-grid figure{margin:0 0 17px!important;box-shadow:0 9px 22px rgba(34,30,24,.17)!important;background:transparent!important;border:0!important;}
.wb-feature-grid img{width:100%!important;height:auto!important;aspect-ratio:1 / 1!important;object-fit:cover!important;border:0!important;box-shadow:none!important;display:block!important;}
.wb-story-photos{min-height:505px!important}
.wb-story-photos figure,.wb-story-photos .wp-block-image{background:transparent!important;margin:0!important;border:0!important;box-shadow:none!important}
.wb-story-photos .wb-photo-one{width:60%!important;position:relative!important;z-index:1!important}
.wb-story-photos .wb-photo-two{width:57%!important;position:absolute!important;right:0!important;bottom:0!important;z-index:2!important}
.wb-story-photos img{width:100%!important;height:395px!important;aspect-ratio:3 / 4!important;object-fit:cover!important;box-shadow:none!important;border:0!important;display:block!important}
.wb-story-photos .wb-photo-two img{height:375px!important;aspect-ratio:3 / 4!important;object-fit:cover!important;box-shadow:none!important}
.wb-cta .wb-kicker{display:block!important;text-align:center!important;max-width:none!important}
.wb-footer h3,.wb-story-copy cite{font-family:Outfit,Arial,sans-serif!important}
@media(max-width:900px){.wb-nav{gap:17px!important;min-height:76px!important}.wb-nav .wp-block-navigation{font-size:13px!important}.wb-nav .wp-block-navigation__container{gap:18px!important}.wb-story-photos{min-height:440px!important}.wb-story-photos img{height:335px!important}.wb-story-photos .wb-photo-two img{height:315px!important}}
@media(max-width:700px){.wb-topbar{font-size:12px!important}.wb-nav{min-height:68px!important;flex-wrap:wrap!important}.wb-nav .wp-block-navigation{flex:0 1 auto}.wb-hero img{height:370px!important;object-position:center center!important}.wb-feature-grid img{height:auto!important;aspect-ratio:1/1!important}.wb-story-photos{min-height:415px!important}.wb-story-photos img{height:320px!important}.wb-story-photos .wb-photo-two img{height:300px!important}.wb-kicker,.wb-section .wb-kicker{font-size:12px!important}}

/* Versie 0.4: header vertical alignment, italic logo, title alignment, portrait carousel, footer */
.wb-nav{padding-top:0!important;padding-bottom:0!important;min-height:94px!important;align-items:stretch!important}
.wb-nav>.wb-header-brand,.wb-nav>.wp-block-navigation{align-self:stretch!important;display:flex!important;align-items:center!important;margin-top:0!important;margin-bottom:0!important}
.wb-nav .wp-block-navigation__container{align-items:center!important}
.wb-header-brand{line-height:1.1!important}
.wb-header-brand em{font-style:italic}
.wb-features .wb-section-title,.wb-features .wb-inner>.wp-block-heading{text-align:center!important;width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
.wb-story-columns{align-items:center!important}
.wb-story-columns>.wp-block-column{align-self:center!important}
.wb-story-copy{margin-block:auto!important}
.wb-portrait-slider{width:min(100%,390px);margin:0 auto!important}
.wb-slider-track{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}
.wb-slider-track figure.wb-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;opacity:0;visibility:hidden;transition:opacity .3s ease;box-shadow:none!important;background:transparent!important}
.wb-slider-track figure.wb-slide:first-child,.wb-slider-track figure.wb-slide.is-active{opacity:1;visibility:visible}
.wb-slider-track.is-ready figure.wb-slide:first-child:not(.is-active){opacity:0;visibility:hidden}
.wb-slider-track img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;box-shadow:none!important}
.wb-slider-controls{display:flex;justify-content:center;align-items:center;gap:23px;padding-top:15px;font-family:Outfit,Arial,sans-serif;font-size:13px;letter-spacing:.07em}
.wb-slider-controls button{cursor:pointer;display:grid;place-items:center;background:transparent;border:1px solid #7f7b6b;border-radius:50%;width:38px;height:38px;color:var(--wb-ink);font-size:21px;line-height:1}
.wb-slider-controls button:hover,.wb-slider-controls button:focus-visible{background:var(--wb-olive);color:#fff}
.wb-footer h3{font-size:15px!important;line-height:1.4!important}
.wb-footer p,.wb-footer p a{font-size:15px!important;line-height:1.6!important}
@media(max-width:780px){.wb-nav{min-height:76px!important}.wb-portrait-slider{width:min(100%,360px)}}
@media(max-width:700px){.wb-nav{min-height:70px!important;align-items:center!important;padding:12px 20px!important}.wb-nav>.wb-header-brand,.wb-nav>.wp-block-navigation{align-self:center!important}.wb-portrait-slider{width:min(100%,340px)}.wb-story-columns{gap:28px!important}.wb-footer h3{font-size:14px!important}.wb-footer p,.wb-footer p a{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){.wb-slider-track figure.wb-slide{transition:none}}