/*
Theme Name: Claus 2026
Theme URI: https://claus.unicoz.nl
Author: Melange Design
Description: Eigen thema van IKC Prins Claus op de Melange Stack. Paginabouw komt uit Melange Builder, dit thema levert header, menu, footer en huisstijl.
Version: 1.0.0
Text Domain: claus-2026
*/

/* ---- Basis van het Bricks-gedrag, nagebouwd voor Melange Builder (gemeten op claus2026, 7-10-2026) ---- */
*,*::before,*::after{box-sizing:border-box}
.mb-el--section{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;box-sizing:border-box}
.mb-el--container{display:flex;flex-direction:column;align-items:flex-start;margin-left:auto;margin-right:auto;width:1100px;max-width:100%;box-sizing:border-box}
.mb-el--image{max-width:100%}
.mb-el--container.mb-block{width:100%;margin-left:0;margin-right:0}
@media(max-width:767px){.mb-el--section,.mb-el--container{flex-wrap:wrap}}

/* ---- Huisstijl en chrome (overgenomen uit de mu-plugin claus-bricks-chrome) ---- */
:root{--cl-content:1330px;--cl-blue:#34a0d0;--cl-green:#14b758;--cl-purple:#8224e3;--cl-navy:#2f3231;}
body{margin:0;font-family:'Varela Round',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#2f3231;}
h1,h2,h3,h4{font-family:'Varela Round',sans-serif;font-weight:700;color:#000;}
img{max-width:100%;height:auto;}
section.cl-hero.mb-el--section > .mb-el--container{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important;}
section.cl-hero .mb-el--text{width:100%!important;}
section[class*="cl-"] > .mb-el--container{display:block;width:100%!important;max-width:1330px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;}
section[class*="cl-"] > .mb-el--container > .mb-el--text{width:100%;}
section[class*="cl-"]{box-sizing:border-box!important;max-width:100%;}
/* HEADER + MENU (1-op-1 nagebouwd van productie claus.unicoz.nl: simpele hover-dropdown, geen megapaneel) */
.cl-hd{position:relative;z-index:1000;background:#fff;}
.cl-hd-badge{max-width:1330px;margin:0 auto;display:flex;justify-content:flex-end;padding:8px 20px 0;}
.cl-hd-badge img{height:11px;width:auto;display:block;}
.cl-hd-in{max-width:1330px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;}
.cl-hd-logo img{height:90px;width:auto;display:block;}
.cl-mega{display:flex;align-items:center;}
.cl-mega-top{list-style:none;margin:0;padding:0;display:flex;align-items:center;}
.cl-mi{display:flex;align-items:center;}
.cl-mi>a{display:flex;align-items:center;padding:14px 18px;color:#73748c;font-family:'Varela Round',sans-serif;font-size:19px;font-weight:400;text-decoration:none;white-space:nowrap;}
.cl-mi>a.cur{color:#34a0d0;}
.cl-mi:hover>a{color:#34a0d0;}
/* megamenu-paneel (zoals zonaardebasisschool.nl): intro-blok + linkenlijst */
.cl-panel{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.12);border-top:1px solid #eee;z-index:1001;}
.cl-panel::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px;background:transparent;}
.cl-mi:hover .cl-panel,.cl-panel:hover{display:block;}
.cl-panel-in{max-width:1100px;margin:0 auto;display:flex;gap:50px;padding:36px 20px;}
.cl-panel-intro{flex:0 0 40%;background:#f4f5f7;border-radius:14px;padding:26px 30px;}
.cl-panel-intro h3{font-family:'Varela Round',sans-serif;color:var(--cl-blue);font-size:26px;margin:0 0 10px;font-weight:700;}
.cl-panel-intro p{color:#555;font-size:15px;line-height:1.55;margin:0;}
.cl-panel-links{flex:1;list-style:none;margin:0;padding:0;align-self:center;}
.cl-panel-links a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 8px;border-bottom:1px solid #eee;color:#333;text-decoration:none;font-family:'Varela Round',sans-serif;font-size:16px;}
.cl-panel-links li:last-child a{border-bottom:0;}
.cl-panel-links a:hover{color:var(--cl-blue);}
.cl-panel-links .chev{color:#c3c3cc;font-size:18px;}
.cl-burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:#2f3231;line-height:1;}
/* MOBILE FLYOUT (accordion, exact zoals productie: paneel schuift van links in, sluitkruisje linksboven) */
html,body{overflow-x:hidden!important;max-width:100vw!important;}
.cl-flyout{position:fixed;top:0;left:-320px;width:280px;max-width:80vw;height:100%;background:#f7f7f7;box-shadow:4px 0 20px rgba(0,0,0,.15);z-index:1100;transition:left .3s ease;padding:60px 24px 24px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;visibility:hidden;}
.cl-flyout.open{left:0;visibility:visible;}
.cl-flyout a{color:#73748c;font-weight:400;text-decoration:none;font-size:20px;text-align:center;padding:14px 0;font-family:'Varela Round',sans-serif;}
.cl-flyout a.cur{color:#34a0d0;}
.cl-flyclose{position:absolute;top:16px;left:20px;background:none;border:0;font-size:28px;cursor:pointer;color:#888;}
.cl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1090;opacity:0;pointer-events:none;transition:opacity .3s;}
.cl-overlay.open{opacity:1;pointer-events:auto;}
.cl-flyout details{border-bottom:none;}
.cl-flyout summary{padding:14px 0;font-weight:400;color:#73748c;cursor:pointer;list-style:none;font-family:'Varela Round',sans-serif;font-size:20px;text-align:center;position:relative;}
.cl-flyout summary::-webkit-details-marker{display:none;}
.cl-flyout summary::after{content:"\2304";display:inline-block;margin-left:6px;transition:transform .2s;}
.cl-flyout details[open] summary::after{transform:rotate(180deg);}
/* accordion: submenu klapt direct open in dezelfde flyout, geen navigatie */
.cl-flyout details .cl-sub{background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);border-radius:4px;margin:0 0 8px;padding:6px 0;}
.cl-flyout details .cl-sub a{display:block;text-align:left;padding:10px 18px;font-size:16px;color:#73748c;}
@media(max-width:980px){.cl-mega{display:none;}.cl-burger{display:block;}}
/* HERO (home) */
.cl-hero{position:relative;}
.cl-hero-img img,.cl-hero-img video{width:100%;display:block;aspect-ratio:2048/1368;object-fit:cover;}
.cl-hero-title{position:absolute;bottom:6%;right:5%;left:auto;transform:none;max-width:55%;width:auto;text-align:right;color:#fff;font-size:clamp(28px,4.8vw,64px);font-weight:700;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.45);margin:0;z-index:6;}
.cl-hero-sub{position:absolute;top:8%;left:50%;transform:translateX(-50%);color:#ffb020;font-size:clamp(14px,1.4vw,20px);font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.cl-hero-intro{position:absolute;left:5%;bottom:-40px;max-width:400px;background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.15);padding:28px 30px;z-index:5;}
.cl-hero-intro p{margin:0 0 18px;color:#444;font-size:16px;line-height:1.55;}
.cl-hero-intro-btn{display:inline-block;background:var(--cl-blue);color:#fff!important;text-decoration:none;font-weight:700;font-family:'Varela Round',sans-serif;padding:12px 26px;border-radius:999px;font-size:15px;}
.cl-hero-intro-btn:hover{background:#2a86b3;}
@media(max-width:760px){.cl-hero-intro{position:static;max-width:none;margin:0 16px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-30px);}.cl-hero-title{max-width:70%;font-size:clamp(22px,7vw,32px);bottom:auto;top:calc(100vw * 1368 / 2048 - 90px);right:5%;}}
/* PAGE HERO + BODY (subpaginas) */
.cl-pagehero{background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),var(--cl-blue);min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center;padding:46px 20px;background-size:cover;background-position:center;}
.cl-pagehero h1{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.20);margin:0;}
.cl-pagetitle{color:#fff;text-align:center;font-size:clamp(26px,3.4vw,42px);margin:0;line-height:1.2;}
.cl-body{padding:48px 20px 60px;}
.cl-bwrap{max-width:860px;margin:0 auto;}
.cl-bh{color:var(--cl-blue);margin:30px 0 10px;font-size:22px;line-height:1.3;}
.cl-bt{color:#333;line-height:30px;margin:0 0 16px;font-size:17px;}
.cl-bt a{color:var(--cl-blue);}
.cl-bt ul,.cl-bt ol{margin:0 0 16px 20px;line-height:1.6;}
.cl-bt li{margin:4px 0;}
.cl-bfig{margin:22px 0;text-align:center;}.cl-bfig img{max-width:440px;width:100%;border-radius:12px;}
.cl-body2{max-width:var(--cl-content)!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;}
.cl-row2{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:48px;align-items:flex-start;margin:0 0 34px;}
.cl-row2 .cl-col-text{flex:1;min-width:0;}
.cl-row2 .cl-col-text>*:first-child{margin-top:0;}
.cl-row2 .cl-col-img{flex:0 0 380px;}
.cl-row2 .cl-col-img img{width:100%;height:auto;border-radius:12px;display:block;}
@media(max-width:760px){.cl-row2{flex-direction:column!important;gap:18px;}.cl-row2 .cl-col-img{flex-basis:auto;}.cl-row2 .cl-col-img img{max-width:420px;margin:0 auto;}}
/* HOME SECTIES */
.cl-intro{padding:20px 20px 40px;text-align:center;}
.cl-lead-h2{color:#000;font-size:clamp(24px,2.6vw,30px);margin:0 0 16px;font-weight:700;}
.cl-lead{max-width:900px;margin:0 auto;text-align:center;font-size:16px;line-height:1.6;color:#333;}
.cl-cards{background:var(--cl-blue);padding:40px 20px;}
.cl-cards-in{max-width:var(--cl-content);margin:0 auto!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:26px;}
.cl-card{text-align:center;color:#fff;}
.cl-card img{width:100%;border-radius:6px;display:block;margin-bottom:16px;aspect-ratio:16/10;object-fit:cover;}
.cl-card h3{font-size:14px;letter-spacing:.5px;text-transform:uppercase;margin:0 0 12px;color:#fff;font-weight:700;}
.cl-card p{font-size:14px;line-height:1.6;color:#eaf6fc;margin:0 0 18px;min-height:80px;}
.cl-card .cl-btn{display:inline-block;background:var(--cl-purple);color:#fff!important;padding:11px 30px;border-radius:6px;font-weight:600;text-decoration:none;font-size:14px;}
@media(max-width:900px){.cl-cards-in{grid-template-columns:1fr;}}
.cl-pills{padding:36px 20px;}
.cl-pills-in{max-width:var(--cl-content);margin:0 auto!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px;}
.cl-pill{background:var(--cl-blue);color:#fff;border-radius:40px;padding:22px 20px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:22px;font-weight:700;text-decoration:none;}
@media(max-width:760px){.cl-pills-in{grid-template-columns:1fr;}}
.cl-about{padding:20px 20px 50px;}
.cl-about-in{max-width:var(--cl-content);margin:0 auto;}
.cl-about h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 20px;}
.cl-about p{font-size:16px;line-height:1.65;color:#333;margin:0 0 14px;}
.cl-about ul{margin:0 0 16px 20px;line-height:1.7;}
.cl-gallery{background:var(--cl-green);padding:40px 20px;}
.cl-gallery-in{max-width:var(--cl-content);margin:0 auto!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:6px;}
.cl-gallery-in img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
@media(max-width:900px){.cl-gallery-in{grid-template-columns:repeat(3,1fr);}}
.cl-partner{padding:44px 20px;text-align:center;}
.cl-partner h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 24px;}
.cl-partner-logos{display:flex;align-items:center;justify-content:center;gap:60px;flex-wrap:wrap;}
.cl-partner-logos img{max-height:80px;width:auto;}
.cl-map{padding:20px 20px 50px;text-align:center;}
.cl-map h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 20px;}
.cl-map iframe{width:100%;max-width:900px;height:330px;border:0;border-radius:12px;}
/* FOOTER (1-op-1 nagebouwd van productie: beige blok met 2 rijen kop+logo, fb-icoon, grijze copyrightbalk) */
.cl-footer-top{background:#F4F0ED;padding:40px 20px 30px;}
.cl-footer-row{max-width:var(--cl-content);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:18px 0;}
.cl-footer-row h3{color:#004868;font-family:'Varela Round',sans-serif;font-weight:800;font-size:22px;margin:0;flex:1;min-width:220px;}
.cl-footer-row .cl-flogo{flex:0 0 auto;}
.cl-footer-row .cl-flogo img{display:block;width:auto;}
.cl-footer-row .cl-flogo img[alt*="UNICOZ"]{max-height:114px;}
.cl-footer-row .cl-flogo img[alt*="Scholen"]{max-height:114px;}
.cl-footer-social{background:#F4F0ED;text-align:center;padding:10px 20px 30px;}
.cl-footer-social a{display:inline-flex;color:#000;font-size:30px;text-decoration:none;}
.cl-footer{background:#C5C4C4;padding:14px 20px;text-align:center;color:#fff;font-size:14px;}
.cl-footer a{color:#fff;text-decoration:none;}
.cl-footer a:hover{text-decoration:underline;}
@media(max-width:760px){.cl-footer-row{flex-direction:column;align-items:flex-start;text-align:left;gap:16px;}.cl-footer-row h3{text-align:left;}}
/* TEAM PAGE spacing (team-showcase shortcode blijft eigen styling) */
.cl-team-wrap{max-width:var(--cl-content);margin:0 auto;padding:20px 20px 60px;}
@media(max-width:760px){.cl-cards-in,.cl-gallery-in,.cl-pills-in{gap:14px;}}
.cl-news-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:26px;max-width:var(--cl-content);margin:0 auto!important;}
.cl-news-card{background:#fff;}
.cl-news-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;margin-bottom:10px;}
.cl-news-date{font-size:12px;color:#888;margin-bottom:4px;}
.cl-news-card h3{font-size:17px;margin:0 0 8px;line-height:1.3;}
.cl-news-card h3 a{color:#000;text-decoration:none;}
.cl-news-excerpt{font-size:14px;color:#444;line-height:1.5;margin-bottom:8px;}
.cl-news-more{font-size:13px;color:var(--cl-blue);font-weight:700;text-decoration:none;}
@media(max-width:980px){.cl-news-grid{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:560px){.cl-news-grid{grid-template-columns:1fr!important;}}

/* ---- Basis en standaardpagina (kale tekstpagina zonder builder) ---- */
body{font-size:15px;line-height:1.7}
.cl-default{width:1100px;max-width:100%;margin:0 auto;padding:0}
.cl-default h1{font-size:36px;margin:0;line-height:1.4}
.cl-default p{margin:0 0 18px}
.cl-default p:last-child{margin-bottom:0}

/* ---- Nieuwsbericht (nagebouwd van de standaard berichtopmaak op de Bricks-staging, gemeten 7-10-2026) ---- */
.cl-post-head{position:relative;background:#2f3231 center/cover no-repeat;height:450px;margin-bottom:60px;display:flex;align-items:center;color:#fff}
.cl-post-head.heeft-foto{background-image:var(--cl-post-foto)}
.cl-post-head::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.cl-post-head-in{position:relative;z-index:1;width:1070px;max-width:100%;margin:0 auto;padding:0}
.cl-post-head h1{color:#fff;font-size:45px;line-height:1.4;margin:0}
.cl-post-meta{display:flex;gap:10px;font-size:18px;line-height:31px;color:#fff}
.cl-post-meta .punt{margin:0 4px}
.cl-post-body{width:1070px;max-width:100%;margin:0 auto;padding:0}
.cl-post-content{font-size:15px;line-height:1.7}
.cl-post-content img{max-width:100%;height:auto}
.cl-post-author{display:flex;align-items:center;gap:15px;margin:60px 0 91px}
.cl-post-author .avatar{border-radius:50%;width:60px;height:60px}
.cl-post-author strong{font-size:31.5px;line-height:1.4;font-family:'Varela Round',sans-serif;color:#000}
.cl-post-share{list-style:none;display:flex;gap:10px;margin:0;padding:30px 0 30px 5px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;width:100%}
.cl-post-share a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.cl-post-share svg{width:16px;height:16px}
.cl-post-related-title{font-size:31.5px;line-height:1.4;margin:30px 0 4px;color:#000}
.cl-post-related{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cl-rel{display:flex;flex-direction:column;gap:8px;color:#000;text-decoration:none}
.cl-rel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cl-rel .t{font-size:19.5px;line-height:1.4;font-weight:700;font-family:'Varela Round',sans-serif}
.cl-rel .d{font-size:14px;color:#333}
.cl-post-nav{display:flex;justify-content:space-between;gap:30px;margin:60px 0 0}
.cl-post-nav a{display:flex;align-items:center;gap:15px;color:#2f3231;text-decoration:none}
.cl-post-nav .rond{flex:none;width:60px;height:60px;border-radius:50%;background:#b8d9ea center/cover no-repeat}
.cl-post-nav .tk{display:flex;flex-direction:column}
.cl-post-nav small{font-size:15px;text-transform:uppercase;line-height:1.4}
.cl-post-nav b{font-size:19.5px;line-height:1.4;font-family:'Varela Round',sans-serif}
.cl-post-nav .next{text-align:right}
@media(max-width:1100px){.cl-post-head-in,.cl-post-body{padding-left:15px;padding-right:15px}}
@media(max-width:760px){.cl-post-head{height:422px}.cl-post-related{grid-template-columns:1fr}.cl-post-meta{flex-wrap:wrap}}

/* ---- Hero-video zoals Bricks hem rendert: wrapper 16/9, video vult hem absoluut ---- */
.cl-hero-img{display:flex;position:relative;overflow:hidden;aspect-ratio:16/9;width:100%}
.cl-hero-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}