/*

Theme Name: Panta Rhei Scholen
Template: kadence
Author: Cloudwise
Version: 1.0.1
Text Domain: panta-rhei-scholen
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
	--pr-fotokader: url("images/essesteijn/Afbeeldingkader1.svg#svgView(preserveAspectRatio(none))");
	--pr-ruitjes: none;
	--pr-menu-actief-bg: transparent;
	--pr-menu-actief-tekst: inherit;
}

.background-holder{
    background-position: center -70px !important;
}

#wrapper #masthead{
    z-index:200;
}

.entry-content .wp-block-kadence-rowlayout:not(.alignfull):not(.alignwide) > .kt-row-column-wrap.kb-theme-content-width {
  padding-left: 0;
  padding-right: 0;
}



body:not(.home) .entry-content .wp-block-kadence-image:not(.image-is-svg):not(:has(.kb-is-ratio-image)){
  position: relative;
  width: fit-content;
  max-width: min(700px, 100%);
  margin-top: 40px !important;
  margin-bottom: 40px !important;

  img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 560px;
  }

  &::after {
    content: "";
    position: absolute;
    inset: -20px;
    background-image: url("images/essesteijn/Afbeeldingkader1.svg#svgView(preserveAspectRatio(none))");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
}

.headerblock__inner {
  max-width: calc(1280px / 2  - 20px); 
  padding-left: 20px;/* halve container − padding − halve gap */

  h1{
    margin-top:5px !important;
  }
}


@media(max-width:768px){
  .headerblock--no-text .headerblock__content{
    padding-bottom:30px !important;
  }

  .zijmenu-kolom{
    display:none !important;
  }

  .kt-row-column-wrap:has(> .zijmenu-kolom) { grid-template-columns: minmax(0, 1fr) !important; }
  .zijmenu-kolom { display: none; }


}

.pr-badge-wrap{
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    height: 0;
    z-index: 5;
}
.pr-badge{
    position: absolute;
    right: 20px;
    top: -70px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transform: rotate(-8deg);
    transition: transform .2s;
}
.pr-badge:hover{ transform: rotate(0) scale(1.05); }
.pr-badge img{ display:block; width:100%; height:100%; border-radius:50%; }

@media (max-width: 768px){
    .pr-badge-wrap{ height: auto; display: flex; justify-content: center; padding: 10px 0; }
    .pr-badge{ position: static; width: 100px; height: 100px; }
}

/* Losse link in een alinea = knop, in de kleuren van de school */
.entry-content p > a.btn-link{
    display: inline-block;
    line-height: 44px;
    font-size: 16px;
    padding: 0 20px;
    margin: 0 16px 16px 0;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none !important;
    background-color: var(--buttonachtergrond);
    transition: all .3s ease;
}
.entry-content p > a.btn-link:hover{
    background-color: var(--buttontekst);
    color: var(--buttonachtergrond);
}

/* =====================================================================
   Pantarheischolen – algemene aanvullingen (voor ALLE scholen)
   Plaats in: style.css of css/components.css van het thema.
   Komt uit de Extra CSS van De Parachute en Sint Maarten; daar daarna weghalen.
   ===================================================================== */

/* Standaardwaarden: scholen zonder eigen waarden houden hun huidige uiterlijk.
   LET OP: url()'s in variabelen worden opgelost t.o.v. het bestand waarin de variabele
   GEBRUIKT wordt (deze style.css), daarom overal absolute paden vanaf /wp-content/. */
:root {
	--pr-fotokader: url("/wp-content/themes/pantarheischolen/images/essesteijn/Afbeeldingkader1.svg#svgView(preserveAspectRatio(none))");
	--pr-ruitjes: none;
	--pr-menu-actief-bg: transparent;
	--pr-menu-actief-tekst: inherit;
}

/* Geen horizontale scrollbalk door decoraties die buiten beeld vallen
   (bv. de ruitjes rechtsboven). 'clip' i.p.v. 'hidden' zodat sticky header blijft werken. */
html,
body {
	overflow-x: clip;
}

/* ---------- Nieuwsberichten: zelfde opbouw als pagina's ---------- */
/* Thema geeft berichten een smallere container (content-width-narrow) en extra marge boven.
   Daardoor stonden zijmenu en tekst op berichten op een andere plek dan op pagina's. */
.single-post .content-area {
	margin-top: 0;
}
.single-post.content-width-narrow .content-container.site-container {
	max-width: var(--global-content-width);
}

/* ---------- Fotokader ---------- */
/* Uitzondering: geef een afbeeldingsblok de extra CSS-class 'geen-kader' (logo's, iconen). */
body:not(.home) .entry-content .geen-kader::after {
	display: none !important;
}
body:not(.home) .entry-content .wp-block-kadence-image.geen-kader {
	width: auto;
	margin-top: 0 !important;
	margin-bottom: 1em !important;
}
/* Kader ook op losse standaard afbeeldingsblokken (bv. in nieuwsberichten); niet op galerijen.
   De kleur van het kader komt uit de schoolspecifieke css (variabele --pr-fotokader). */
body:not(.home) .entry-content figure.wp-block-image:not(.geen-kader):not(.wp-block-gallery figure) {
	position: relative;
	width: fit-content;
	max-width: min(700px, 100%);
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}
body:not(.home) .entry-content figure.wp-block-image:not(.geen-kader):not(.wp-block-gallery figure) img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 560px;
}
body:not(.home) .entry-content figure.wp-block-image:not(.geen-kader):not(.wp-block-gallery figure)::after {
	content: "";
	position: absolute;
	inset: -20px;
	pointer-events: none;
	background: var(--pr-fotokader) no-repeat;
	background-size: 100% 100%;
}
body:not(.home) .entry-content .wp-block-kadence-image:not(.image-is-svg):not(:has(.kb-is-ratio-image))::after {
	background-image: var(--pr-fotokader);
}

/* ---------- Actieve pagina markeren ---------- */
/* Kleuren per school via variabelen (zie schoolspecifieke css). */
.wp-block-lazyblock-zijmenu .SubpagesListItem.current > a {
	color: var(--pr-zijmenu-actief, var(--blauw)) !important; /* thema zet zijmenu-links met !important op zwart */
}
.header-navigation .primary-menu-container > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_ancestor) > a,
.header-navigation .primary-menu-container > ul > li:has(> ul .current-menu-parent, > ul .current-menu-item) > a {
	background: var(--pr-menu-actief-bg);
	color: var(--pr-menu-actief-tekst);
	font-weight: var(--pr-menu-actief-gewicht, inherit);
}

/* ---------- Ruitjes rechtsboven op subpagina's ---------- */
/* Afbeelding per school via --pr-ruitjes. */
body:not(.home) .content-wrap::after {
	content: "";
	position: absolute;
	right: -220px;
	top: -140px;
	z-index: 0;
	pointer-events: none;
	width: 460px;
	aspect-ratio: 524 / 485;
	background: var(--pr-ruitjes) no-repeat center / contain;
}


@media (min-width: 1025px) {
	.entry-content .kb-row-layout-wrap:has(> .kt-row-column-wrap > .wp-block-kadence-column .wp-block-lazyblock-zijmenu) > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
	}
}
.entry-content .kb-row-layout-wrap:has(> .kt-row-column-wrap > .wp-block-kadence-column .wp-block-lazyblock-zijmenu) {
	margin-top: var(--global-kb-spacing-lg, 3rem);
}