/*
Theme Name: Kiem Origineel
Theme URI: https://www.atelierkiem.com
Author: Atelier Kiem / Marieke Tol
Description: Nabouw van de huidige atelierkiem.com in WordPress: homepage met beeldvullende foto, pagina's Marieke Tol, Contact en Bestellen (met bestelformulier en keuzegalerij), cookiebalk met Google Analytics-toestemming en een tool om alle foto's van Squarespace naar de Mediatheek te kopiëren.
Version: 2.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kiem-origineel
*/

:root{
  --bg:#fff;
  --ink:#222;
  --grey:#666;
  --grey-2:#999;
  --line:#e2e2e2;
  --field:#fafafa;
  --black:#0f0f0f;
  --header-h:86px;
  --pad:50px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Nunito Sans',Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Big Shoulders','Nunito Sans',sans-serif;font-weight:300;color:var(--ink);margin:0;line-height:1.1;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font:inherit;}
.wrap{max-width:1300px;margin:0 auto;padding:0 var(--pad);}
.wrap-wide{padding:0 var(--pad);}
.screen-reader-text,.kiem-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 14px;z-index:999;}
.skip-link:focus{left:10px;}
:focus-visible{outline:2px solid #000;outline-offset:2px;}

/* ===== HEADER ===== */
.site-header{position:relative;z-index:60;background:#fff;}
.top-row{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 var(--pad);border-bottom:1px solid #f0f0f0;}
.logo img{height:38px;width:auto;}
.main-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.main-nav a{
  font-size:14px;font-weight:400;color:var(--grey);text-decoration:none;
  text-transform:uppercase;letter-spacing:.06em;
}
.main-nav a:hover,.main-nav .current a,.main-nav .current-menu-item a{color:var(--ink);}
.menu-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{display:block;width:24px;height:2px;background:var(--ink);position:relative;transition:transform .2s,opacity .2s;}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;}
.menu-toggle .bars::before{top:-7px;}
.menu-toggle .bars::after{top:7px;}
.nav-open .menu-toggle .bars{background:transparent;}
.nav-open .menu-toggle .bars::before{transform:translateY(7px) rotate(45deg);}
.nav-open .menu-toggle .bars::after{transform:translateY(-7px) rotate(-45deg);}

.sub-row{display:flex;justify-content:flex-end;align-items:flex-start;gap:30px;height:104px;padding:54px var(--pad) 0;border-bottom:1px solid #ccc;}
.pill{
  display:inline-block;padding:11px 19px;border-radius:300px;font-size:15px;font-weight:400;line-height:1.2;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;white-space:nowrap;
  border:1.6px solid var(--ink);color:var(--ink);background:transparent;transition:background .2s,color .2s;
}
.pill:hover{background:var(--ink);color:#fff;}

/* Homepage: pillen over de hero-foto, wit */
.home-hero .sub-row{position:absolute;left:0;right:0;top:var(--header-h);border:0;height:auto;}
.home-hero .pill{border-color:#fff;color:#fff;font-weight:600;}
.home-hero .pill:hover{background:#fff;color:var(--ink);}

/* ===== HERO & BANNERS ===== */
.hero{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:420px;background:#111 center/cover no-repeat;}
.hero{position:relative;}
.hero-down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:8px;opacity:.9;}
.hero-down:hover{opacity:1;}
.banner{height:85vh;min-height:360px;background:#222 center/cover no-repeat;}
@media (min-width:1000px){ .banner{background-attachment:fixed;} }

.section-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:40;}
.section-dots a{width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);display:block;}
.section-dots a.active{background:#fff;}

/* ===== SECTIES ===== */
main section{padding:90px 0;}
main section.hero,main section.banner{padding:0;}
.section-title{text-align:center;font-size:60px;margin-bottom:46px;}
.grid-3{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:36px;}
.grid-3 img{height:336px;width:auto;max-width:100%;object-fit:cover;}
.credit{text-align:center;font-size:16px;margin:46px 0 60px;}
.credit .muted{color:var(--grey-2);border-bottom:1px solid #ddd;}
.centered-copy{max-width:960px;margin:0 auto 40px;text-align:center;}
.centered-copy p{margin:0 0 1em;}

.btn-dark{
  display:inline-block;background:var(--black);color:#fff;border:0;cursor:pointer;
  padding:14px 30px;text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;text-decoration:none;
}
.btn-dark:hover{background:#444;color:#fff;}

/* Carrousel */
.centered-copy.after-carousel{margin-top:70px;}
.grid-3.after-carousel{margin-top:80px;}
.carousel-caption{text-align:center;margin:70px 0 0;}
.carousel-caption + .carousel{margin-top:20px;}
.centered-cta{text-align:center;margin:50px 0 0;}
.carousel{max-width:708px;margin:50px auto 0;outline:none;}
.carousel-stage{position:relative;background:#f6f6f6;height:min(640px,75vh);}
.carousel-slide{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s;}
.carousel-slide.active{opacity:1;visibility:visible;}
.carousel-slide img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:45px;height:62px;border:0;cursor:pointer;
  background:rgba(220,220,220,.85);color:#fff;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.carousel-arrow:hover{background:rgba(160,160,160,.9);}
.carousel-arrow.prev{left:0;}
.carousel-arrow.next{right:0;}
.carousel-thumbs{display:flex;gap:0;overflow-x:auto;margin-top:20px;scrollbar-width:thin;}
.thumb{flex:0 0 auto;border:0;padding:0;background:none;cursor:pointer;opacity:.45;transition:opacity .2s;}
.thumb.active,.thumb:hover{opacity:1;}
.thumb img{height:88px;width:auto;}

/* Projecten */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.proj-card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;text-decoration:none;background:#ddd;}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.proj-card:hover img{transform:scale(1.03);}
.proj-card h3{
  position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);text-align:center;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:38px;line-height:1.2;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* ===== FOOTER ===== */
.site-footer{background:var(--black);color:#fff;text-align:center;padding:120px 0 70px;}
.foot-copy{font-size:16px;font-weight:400;text-transform:uppercase;}
.foot-social{display:flex;justify-content:center;gap:12px;margin-top:30px;}
.foot-social a{width:48px;height:48px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,color .2s;}
.foot-social a:hover{background:#fff;color:#000;}
.foot-links{margin-top:28px;font-size:13px;color:#aaa;display:flex;gap:8px;justify-content:center;align-items:center;}
.foot-links a,.link-btn{color:#aaa;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:13px;}
.foot-links a:hover,.link-btn:hover{color:#fff;text-decoration:underline;}

/* ===== COOKIEBALK ===== */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;font-size:13px;line-height:1.5;
}
.cookiebar[hidden]{display:none;}
.cookiebar p{margin:0;max-width:980px;}
.cookiebar a{color:#fff;}
.cookiebar-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{background:#fff;color:#000;border:1px solid #fff;padding:12px 18px;cursor:pointer;font-size:13px;}
.cookie-btn.ghost{background:transparent;color:#fff;}
.cookie-btn:hover{opacity:.85;}

/* ===== PAGINA'S ===== */
.page-title{text-align:center;font-size:110px;padding:130px 20px 70px;}
.page-title.small{font-size:64px;padding:80px 0 40px;text-align:left;}
.basic-page{max-width:760px;margin:0 auto;padding:0 24px 100px;}
.entry h2{font-size:34px;margin:1.6em 0 .4em;}
.entry a{color:var(--ink);}

/* Marieke Tol */
.about{max-width:520px;margin:0 auto;padding:110px 24px 30px;}
.about-head{display:flex;align-items:center;gap:30px;margin-bottom:34px;}
.about-portrait{width:205px;height:205px;object-fit:cover;flex-shrink:0;}
.about h1{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:20px;line-height:1.2;}
.about p{margin:0 0 1em;}
.video{position:relative;aspect-ratio:16/9;margin-top:30px;background:#000;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.insta{padding:30px var(--pad) 120px!important;}
.insta-btn{display:inline-block;border:2px solid var(--ink);padding:12px 20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-bottom:12px;}
.insta-btn:hover{background:var(--ink);color:#fff;}
.insta-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;}
/* Live Instagram-feed (Smash Balloon): zelfde raster als de vaste foto's, ongeacht de plugin-instellingen */
.insta-live #sb_instagram{padding:0!important;width:100%!important;}
.insta-live #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;gap:9px!important;padding:0!important;width:100%!important;}
.insta-live #sb_instagram #sbi_images .sbi_item{width:auto!important;height:auto!important;padding:0!important;margin:0!important;}
.insta-live #sb_instagram .sbi_photo_wrap,.insta-live #sb_instagram .sbi_photo{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;overflow:hidden;}
.insta-live #sb_instagram .sbi_photo img{width:100%!important;height:100%!important;object-fit:cover!important;}
.insta-live .sb_instagram_header,.insta-live #sbi_load{display:none!important;}
@media (max-width:1100px){ .insta-live #sb_instagram #sbi_images{grid-template-columns:repeat(6,minmax(0,1fr))!important;} }
@media (max-width:860px){ .insta-live #sb_instagram #sbi_images{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;} }
.insta-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;}

/* Formulieren */
.form-wrap{max-width:708px;margin:0 auto;padding:0 24px 110px;scroll-margin-top:30px;}
.form-wrap.wide{max-width:900px;}
.form-title{font-size:48px;text-align:center;margin:20px 0 30px;}
.kiem-form fieldset{border:0;margin:0 0 26px;padding:0;}
.kiem-form legend{font-size:16px;font-weight:400;margin-bottom:6px;padding:0;}
.kiem-form label{display:block;font-size:13px;font-weight:400;color:var(--ink);margin-bottom:20px;}
.kiem-form .lbl-big{font-size:16px;}
.kiem-form .req{color:var(--grey-2);font-size:12px;}
.kiem-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kiem-form input[type=text],.kiem-form input[type=email],.kiem-form input[type=tel],.kiem-form select,.kiem-form textarea{
  display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #ccc;background:var(--field);color:var(--ink);
  font:inherit;font-size:15px;font-weight:400;border-radius:0;
}
.kiem-form textarea{resize:vertical;}
.kiem-form input:focus,.kiem-form select:focus,.kiem-form textarea:focus{border-color:#888;background:#fff;outline:none;}
.form-privacy{font-size:13px;color:var(--grey);margin:16px 0;}
.form-notice{padding:16px 18px;margin-bottom:28px;font-weight:400;}
.form-notice.ok{background:#eef6ea;border-left:4px solid #3c7a2a;}
.form-notice.err{background:#fbeceb;border-left:4px solid #b3261e;}

/* Bestellen */
.order-intro,.order-copy{max-width:708px;margin:0 auto;padding:0 24px;}
.order-copy{padding-bottom:110px;}
.order-options{max-width:900px;margin:30px auto 40px;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.order-option{border:1px solid var(--line);padding:28px;position:relative;}
.order-option .num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--black);color:#fff;align-items:center;justify-content:center;font-weight:600;margin-bottom:12px;}
.order-option h2{font-size:34px;margin-bottom:10px;}
.order-option p{margin:0;}
.price-table-wrap{max-width:900px;margin:0 auto 60px;padding:0 24px;}
.price-table{width:100%;border-collapse:collapse;font-size:15px;}
.price-table th{text-align:left;font-weight:600;border-bottom:2px solid var(--ink);padding:10px 8px;}
.price-table td{border-bottom:1px solid var(--line);padding:10px 8px;}
.small{font-size:13px;color:var(--grey);}
.step-n{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--black);color:#fff;font-size:13px;font-weight:600;align-items:center;justify-content:center;margin-right:8px;}
.kiem-form .step legend{font-size:18px;font-weight:600;margin-bottom:14px;}
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.choice{margin:0!important;cursor:pointer;}
.choice input{position:absolute;opacity:0;}
.choice span{display:block;border:1.6px solid #ccc;padding:16px 18px;transition:border-color .2s,background .2s;}
.choice strong{display:block;font-size:16px;font-weight:600;}
.choice small{color:var(--grey);font-size:13px;}
.choice input:checked + span{border-color:var(--ink);background:#f7f7f7;box-shadow:inset 0 0 0 1px var(--ink);}
.choice input:focus-visible + span{outline:2px solid #000;outline-offset:2px;}
.chosen{font-weight:600;margin:0 0 10px;}
.pick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:430px;overflow-y:auto;padding:4px;border:1px solid var(--line);}
.pick{margin:0!important;cursor:pointer;position:relative;}
.pick input{position:absolute;opacity:0;}
.pick img{width:100%;aspect-ratio:1/1;object-fit:cover;outline:3px solid transparent;outline-offset:-3px;transition:outline-color .15s,opacity .15s;}
.pick:hover img{opacity:.85;}
.pick input:checked + img{outline-color:#000;}
.pick input:checked + img + span,.pick input:checked ~ img{opacity:1;}
.pick input:focus-visible + img{outline-color:#555;}
.price-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;background:#f6f6f6;padding:16px 18px;}
.ps-label{text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:600;}
.ps-amount{font-size:28px;font-weight:600;}
.ps-detail{font-size:13px;color:var(--grey);}
.shops{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:10px 0 50px;}
.shop h3{font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.shop p{margin:0 0 6px;}
.shop a{font-size:14px;}
.examples{padding-bottom:110px;}
.examples .carousel{margin-top:20px;}

/* Projectpagina's */
.project{position:relative;max-width:1300px;margin:0 auto;padding:110px var(--pad) 110px;}
.back-btn{position:absolute;left:var(--pad);top:178px;border:2px solid var(--ink);padding:12px 20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;}
.back-btn:hover{background:var(--ink);color:#fff;}
.project-title{font-size:96px;max-width:640px;margin:0 auto 60px;}
.project-text{max-width:640px;margin:0 auto;}
.project-text p{margin:0 0 1em;}
.project-gallery{max-width:640px;margin:60px auto 0;}
.project-gallery h3{font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.project-gallery .carousel{margin-top:0;}
.project-gallery .carousel-stage{height:min(480px,60vh);}

/* Bewerkbare teksten */
.about::after{content:"";display:block;clear:both;}
.about .about-portrait{float:left;margin:0 30px 34px 0;}
.about-text > :first-child{min-height:205px;display:flex;align-items:center;margin:0 0 34px;}
.about-text > :nth-child(n+2){clear:left;}
.about-text h1,.about-text h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:20px;line-height:1.2;}
.form-intro{max-width:708px;margin:-30px auto 40px;padding:0 24px;text-align:center;}
.shops-text h3{font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin:26px 0 4px;}
.shops-text h3 + p{margin-top:0;}
.order-option p:last-child{margin-bottom:0;}

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
  :root{--pad:20px;--header-h:70px;}
  .logo img{height:30px;}
  .menu-toggle{display:block;}
  .main-nav{display:none;position:absolute;left:0;right:0;top:var(--header-h);background:#fff;border-bottom:1px solid var(--line);padding:10px var(--pad) 20px;}
  .nav-open .main-nav{display:block;}
  .main-nav ul{flex-direction:column;gap:0;}
  .main-nav a{display:block;padding:12px 0;font-size:15px;}
  .sub-row{justify-content:center;gap:8px;padding:18px 10px;height:auto;flex-wrap:wrap;}
  .home-hero .sub-row{top:calc(var(--header-h) + 10px);padding:0 10px;}
  .pill{font-size:12px;padding:8px 12px;}
  .section-dots{display:none;}
  .section-title{font-size:42px;}
  .grid-3{grid-template-columns:1fr;gap:12px;}
  .grid-3 img{height:auto;width:100%;}
  .cards-3,.order-options,.shops,.choice-cards{grid-template-columns:1fr;}
  .proj-card h3{font-size:28px;}
  .page-title{font-size:64px;padding:60px 20px 40px;}
  .about{padding-top:50px;}
  .about-head{gap:18px;}
  .about-portrait{width:130px;height:130px;}
  .about-text > :first-child{min-height:130px;}
  .insta-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .kiem-form .row-2{grid-template-columns:1fr;gap:0;}
  .pick-grid{grid-template-columns:repeat(3,1fr);}
  .carousel-stage{height:60vh;}
  .carousel-arrow{width:36px;height:50px;font-size:28px;}
  .thumb img{height:64px;}
  .banner{height:50vh;}
  .project{padding-top:30px;}
  .back-btn{position:static;display:inline-block;margin-bottom:30px;}
  .project-title{font-size:54px;}
  .cookiebar{flex-direction:column;align-items:stretch;}
  .cookiebar-actions{justify-content:flex-end;}
}