/**
 * @file
 * CSS classes to replace inline styles for CSP compliance.
 * These classes replace style="" attributes throughout the theme templates.
 */

/* === Body initial state (replaces inline <style> in html.html.twig) === */
body {
  visibility: hidden;
  overflow-x: hidden;
}

/* === Layout utilities === */
.csp-clearfix { clear: both; }
.csp-clearfix-h64 { clear: both; height: 64px; }
.csp-text-center { text-align: center; }
.csp-text-left { text-align: left !important; }
.csp-float-left { float: left; }
.csp-float-none { float: none; }
.csp-display-none { display: none; }
.csp-display-block { display: block; }
.csp-display-flex { display: flex; }
.csp-w100 { width: 100%; }
.csp-w33 { width: 33%; }
.csp-mx-auto { margin-left: auto; margin-right: auto; }
.csp-relative { position: relative; }

/* === Font & text === */
.csp-fw600 { font-weight: 600; }
.csp-fs-115rem { font-size: 1.15rem; }
.csp-no-decoration { text-decoration: none; }
.csp-text-decoration-none { text-decoration: none; }
.csp-underline { text-decoration: underline; }

/* === Colors (used in links, titles, etc.) === */
.csp-color-dark { color: #212529; }
.csp-color-zw-roze { color: #950042; }
.csp-color-brand { color: #950042; }
.csp-color-zw-oranje { color: #EC6A30; }
.csp-color-white { color: white; }
.csp-color-black { color: #000000; }

/* === Spacing === */
.csp-mt24 { margin-top: 24px; }
.csp-mt48 { margin-top: 48px; }
.csp-mr6 { margin-right: 6px; }
.csp-mr8 { margin-right: 8px; }
.csp-pt0 { padding-top: 0; }

/* === Opacity === */
.csp-opacity-0 { opacity: 0; }

/* === Background colors === */
.csp-bg-white { background: white !important; }
.csp-bg-roze { background: #FFE1EE; }
.csp-bg-oranje { background: #FFC7AE; }

/* Container tegels background */
.container-tegels { background-color: #fef5f5; }

/* === Specific component overrides === */

/* Footer rij2 text alignment */
.zw-footer .rij2 { text-align: left !important; }

/* Footer links color */
a.footer-link { color: #212529; }

/* Reset button hidden by default */
#reset-btn { display: none; }

/* Footer table cells */
.menu-onder td { width: 33%; }
.menu-onder td.contact-onder img { margin-right: 8px; }
.menu-onder tr { width: 100%; }

/* Footer50 hidden columns */
.footer50-hidden-col {
  opacity: 0;
  height: 50px;
  overflow: hidden;
}

/* Footer50 logo */
.footer50-logo { width: 320px; }

/* Footer50 aanmelden button */
.aanmelden-button { color: white; }
.aanmelden-button.csp-mr6 { margin-right: 6px; }

/* Footer50 menulink display:none */
a.menulink-mobiel-hidden { display: none; }

/* Header button font-weight */
.bt-menu-0 .btn.btn-secondary { font-weight: 600; }
._header .btn.btn-secondary { font-weight: 600; }

/* Header margin fix */
.header-area-2.csp-mt-neg24 { margin-top: -24px !important; }

/* iframe border:none */
iframe.csp-no-border { border: none; overflow: hidden; }
iframe.csp-no-border-abs { border: 0; }

/* Vimeo embed responsive container */
.csp-vimeo-container { padding: 56.25% 0 0 0; position: relative; }
.csp-vimeo-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Background image utility classes */
.csp-bg-cover {
  background-size: cover;
  background-position: center;
}
.csp-bg-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.csp-bg-cover-top {
  background-size: cover;
  background-position: center;
  z-index: 98;
  position: relative;
}

/* === Specific page/paragraph styles === */

/* page--node--1000031 / front-pagina-header3 clipped image */
.testpica3.clipped { z-index: 98; position: relative; background-size: cover; background-position: center; }
.testpica4.clipped { z-index: 98; position: relative; background-size: cover; background-position: center; }
.testpica-mobile-img { z-index: 98; position: relative; background-size: cover; background-position: center; }
.testpica2.clipped2 { margin-right: 16px; float: left; z-index: 98; position: relative; background-size: cover; background-position: center; }

/* Ervaringsverhalen block section visible */
.ervaringsverhalen-section { visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s; }

/* Cat-content */
.cat-content { background-color: #fef5f5; }
.cat-content.csp-border-top-white { border-top: solid 32px white; }
.cat-content2.csp-mt-neg84 { margin-top: -84px; }

/* Alles-blok min-height */
.alles-blok.csp-min-h480 { min-height: 480px; }

/* Ervaringsverhalen m-top */
.about-experice-area.csp-mt24 { margin-top: 24px; }

/* Zitten-titel link padding */
.zitten-titel .locatie-vinden-front { padding-top: 0; }

/* Nieuws h2 */
h2.title.csp-nieuws-header { width: 100%; text-align: center; margin-top: 24px; }

/* Contact-foto (random background) data attribute */
#contact-foto { background-size: cover; background-position: center; }

/* Frontgolf opacity */
.frontgolf-hidden { opacity: 0; }

/* Regiopagina wrappers */
.regiopagina-subtitel-wrapper { margin-left: auto; margin-right: auto; }
.regiopagina-foto-medium-wrapper { margin-left: auto; margin-right: auto; }
.regiopagina-tekst-dubbel-wrapper { margin-left: auto; margin-right: auto; }
.foto-breed-wrapper { margin-left: auto; margin-right: auto; }

/* Foto breed */
.fotobreed { background-size: cover; background-position: center; }

/* Foto met tekst links/rechts */
.fototekst-links { background-size: cover; background-position: center; }
.fototekst-rechts { width: 100%; }
.fototekst-linksR { width: 100%; }
.fototekst-rechtsR.FR { background-size: contain; background-position: center; padding: 40px; background-origin: content-box; }

/* tegel-txt2 padding */
.tegel-txt2 { padding-top: 32px; }

/* Carousel foto */
.carousel-foto { background-position: center; background-size: cover; }

/* Front items block bg */
.front-items-bg {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: white;
  text-align: center;
  padding: 24px;
  background-size: cover;
  background-position: center;
}

.icoon-img {

	background-size: contain !important;

}

/* Medewerker foto */
#mw-foto-random { background-size: cover; background-position: center; }

/* Stappenplan image */
.front-carousel-image-stappenplan { background-repeat: no-repeat; background-position: center; background-size: contain; }

/* Woning foto */
.woning-foto { background-size: cover; background-position: center; }
.woning-foto-nw { background-size: cover; background-position: center; }

/* Accordion image */
.acc-image { background-size: cover; background-position: center; }

/* Ervaringsverhaal page title area */
.page-title-area { background-size: cover; background-position: center; }

/* Paragraph slider item */
.swiper-slide { background-size: cover; background-position: center; }

/* Squircle (front-pagina-header) */
.squircle { background-size: cover; background-position: center; }

/* Container padding-top for page--node--16031 */
.container.csp-pt528 { padding-top: 528px; }

/* Page-node--16031 specific */
.galinks.csp-mt190 { margin-top: 190px; }

/* Plaatje-tekstblok bg */
.plaatje-tekstblok { background-size: cover; background-position: center; }

/* Standaard tekst c2a */
a.c2atekst { text-decoration: none; }

/* Hidden links */
a.csp-hidden-link { color: #950042; text-decoration: underline; display: none; }

/* Hide formulier-blok on all pages except /aanmelden */
#formulier-blok { display: none; }
body.path-aanmelden #formulier-blok { display: block; }

/* Ervaringsverhaal page layout */
.ervaringsverhaal-layout { display: flex; }
.ervaringsverhaal-foto-col { float: left; }
.ervaringsverhaal-content { color: black; float: right; }

/* Filter heading inline styles */
.boven-actions { display: none; }

/* Front-pagina-header3 paragraph */
.paragraph--front-pagina-header3 .testpica3.clipped { margin-top: 0; }
.page--node--1000031 .testpica3.clipped { margin-top: 64px; }

/* Icoon images */
.icoon-img { background-size: cover; background-position: center; }
.icoon-img-groot { background-size: cover; background-position: center; }

/* Paragraph header block2 */
.paragraph--paragraph-header-block2 { background-size: cover; background-position: center; }

/* Stuurons / home tegels (bck-page--node--frontpage) */
.home-b1 { float: left; }

/* Krub font overrides */
.csp-font-krub { font-family: 'Krub'; }

/* === Missing classes added for CSP compliance === */

/* Backgrounds */
.csp-bg-brand { background: #950042; }
.csp-bg-licht { background: #f6f3ec; }

/* Border */
.csp-border-radius-40 { border-radius: 40px; }

/* Display */
.csp-display-none-important { display: none !important; }

/* Ervaringsverhaal foto */
.csp-ervaring-foto { width: 100%; height: 100%; background-size: cover; background-position: center; }

/* Animations */
.csp-fade-in { animation: cspFadeIn 0.5s ease-in forwards; }
.csp-fadeInUp { animation: cspFadeInUp 0.6s ease-out forwards; }
@keyframes cspFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cspFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Float */
.csp-float-left-pl0 { float: left; padding-left: 0; }
.csp-float-right { float: right; }

/* Height */
.csp-h540 { height: 540px; }

/* Map container */
.csp-map-container { width: 100%; height: 400px; }

/* Margin bottom */
.csp-mb48 { margin-bottom: 48px; }

/* Medewerker card */
.csp-medewerker-card { text-align: center; }
.csp-mw-name { font-weight: 600; margin-bottom: 4px; }
.csp-mw-title { color: #666; }

/* Margin top */
.csp-mt64 { margin-top: 64px; }

/* Nieuws background */
.csp-nieuws-bg { background-size: cover; background-position: center; width: 100%; }

/* Padding top */
.csp-pt32 { padding-top: 32px; }
.csp-pt64 { padding-top: 64px; }

/* Section title (text-align with border-bottom) */
.csp-section-title { margin-bottom: 64px; border-bottom: 1px solid #bbb; padding-bottom: 8px; }

/* Vimeo iframe */
.csp-vimeo-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Width combos */
.csp-w100-center { width: 100%; text-align: center; }
.csp-w100-flex { width: 100%; display: flex; }
.csp-w80-h80 { width: 80px; height: 80px; }

/* Z-index */
.csp-z-neg99 { z-index: -99; }