/*
Theme Name: Brro Flex Theme
Author: ronaldpostma.com @ Brro.nl
Description: Minimal flexbox-friendly starter theme with assets + templates
Version: 1.2.0
Text Domain: brro-flex-theme
*/

/*
 * CSS lives in this file only (framework default).
 * Use section banners below — same pattern as on real projects (see brro-flex-theme/style.css).
 * Add rules under SITE WIDE, FRONT PAGE ONLY, or template-specific blocks; keep related rules together.
 * Do not create assets/css/{page}.css unless the developer explicitly asks for split stylesheets.
 */

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* CSS Custom Properties (CSS Variables) — map project colors/fonts here (see 03-css-variables.mdc). */
:root {
    --content-max-desk: min(100vw,1600px);
    --content-max-tab: min(100vw,1023px);
    --content-max-mob: min(100vw,767px);
    --gutter-desktop: 108px;
    --gutter-tablet: 48px;
    --gutter-mobile: 24px;
    --def-mob: clamp(309px, calc(28.26vw + 218.28px), 435px) /*320px @ 360 : 435px @ 767*/;
    --small-mob: clamp(290px, calc(19.66vw + 209.24px), 360px);
    --wide-mob: clamp(300px, calc(63.88vw + 90.02px), 580px);
    /* Brand colors */
    --mint: #D8E0C8;
    --purple: #2C1050;
    --tan: #BDAC81;
    --cream: #FFF8E2;
    --black: #0e0e0e;
    --white: #FFFFFF;
    --grey: #838383;
    /* Gradient presets */
    --gradient-trans-purple: linear-gradient(180deg, transparent 70%, var(--purple) 100%);
    --gradient-purple-trans: linear-gradient(180deg, var(--purple) 0%, transparent 30%);
    --gradient-trans-tan: linear-gradient(180deg, transparent 0%, var(--tan) 58.17%);
    --gradient-tan-trans: linear-gradient(180deg, var(--tan) 0%, var(--tan) 25%, transparent 75%, transparent 100%);
}

/* ========================================
   CUSTOM ANIMATIONS
   ======================================== */


/* ========================================
   WORDPRESS ADMIN BAR
   ======================================== */

/* Hide all admin bar items by default */
body:not(.webadmin) #wpadminbar li:not(#wp-admin-bar-site-name, #wp-admin-bar-my-account, #wp-admin-bar-logout) {
    display: none !important;
}

/* ========================================
   HTML, BODY AND LAYOUT STYLES
   ======================================== */

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden !important;
    margin: 0 !important;
}

.content-section-flexible .content-wrapper,
.content-section-reviews-item .content-wrapper {
    width: 566px;
}
.content-section-form-item .content-wrapper {
    width: 710px;
}
.content-section-default-item .content-wrapper{
    width: 793px;
}
body:not(.layout-featured-img) .content-section-flexible .content-wrapper,
body:not(.layout-featured-img) .content-section-reviews-item .content-wrapper {
    margin-left:calc(365px - var(--gutter-desktop));
}
body.layout-featured-img .content-section-flexible .content-wrapper,
body.layout-featured-img .content-section-reviews-item .content-wrapper {
    margin-left:calc(243px - var(--gutter-desktop));
}
.content-section-default-item .content-wrapper {
    margin-left:calc(280px - var(--gutter-desktop));
}


/* Gradients on pseudo-elements */

/* Flexible section, gradient transparent to tan */
.outer-flex-wrapper[class*="content-section-"] {
    background-color: transparent!important;
    background-image: none!important;
}
.content-section-flexible.gradient-trans-tan-bg:before,
.content-section-flexible.gradient-trans-tan-bg:after,
.content-section-flexible.gradient-tan-trans-bg:before,
.content-section-flexible.gradient-tan-trans-bg:after,
.outer-flex-wrapper.purple-bg:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 190vw;
    z-index: -1;
}
.content-section-flexible.gradient-trans-tan-bg:before,
.content-section-flexible.gradient-tan-trans-bg:before,
.outer-flex-wrapper.purple-bg:after {
    top: 0;
    height: 100%;
}
footer .outer-flex-wrapper.purple-bg:after {
    top:unset;
    bottom: 0;
}
.content-section-flexible.gradient-trans-tan-bg:before,
.content-section-flexible.gradient-tan-trans-bg:after {
    background: var(--gradient-trans-tan);
}
.content-section-flexible.gradient-tan-trans-bg:before,
.content-section-flexible.gradient-trans-tan-bg:after {
    background: var(--gradient-tan-trans);
}
.content-section-flexible.gradient-trans-tan-bg:after,
.content-section-flexible.gradient-tan-trans-bg:after {
    height: 350px;
}
.content-section-flexible.gradient-trans-tan-bg:after {
    bottom: -350px;
}
.content-section-flexible.gradient-tan-trans-bg:after {
    top: -350px;
}

/* Default item, purple background */
.outer-flex-wrapper.purple-bg:after {
    background-blend-mode: multiply;
    background-color: var(--purple);
    filter: blur(150px);
}
/* spacing adjustments */

.outer-flex-wrapper:not(.footer-section):not(.header-section):has( + .outer-flex-wrapper.purple-bg) .content-wrapper,
.outer-flex-wrapper:not(.footer-section):not(.header-section):last-child .content-wrapper {
    padding-bottom: 335px;
}
.outer-flex-wrapper:not(.footer-section):not(.header-section).purple-bg + .outer-flex-wrapper .content-wrapper {
    padding-top: 335px;
}
.content-section-default-item:not(.footer-section):not(.header-section) .content-wrapper {
    padding: 203px 0px 232px 0px;
}

/* ========================================
   TEXT & LINK STYLES
   ======================================== */

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

a:not(.underline) {
    text-decoration: none;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Remove default search input styling in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}

/* ========================================
   FONT STYLES
   ======================================== */
/* Figma named styles + project extensions (see 04-typography.mdc). */

/* Gantry — self-hosted in assets/fonts/ */
@font-face {
    font-family: "Gantry";
    src: url("assets/fonts/Gantry-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gantry";
    src: url("assets/fonts/Gantry-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gantry";
    src: url("assets/fonts/Gantry-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gantry";
    src: url("assets/fonts/Gantry-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ================================
   GANTRY
   ================================ */

/* Figma: leestekst */
.leestekst {
    font-family: "Gantry", sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 32px;
}

/* Figma: tussenkop */
.tussenkop {
    font-family: "Gantry", sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    font-style: normal;
}

/* Header nav links */
.menu-tekst {
    font-family: "Gantry", sans-serif;
    font-size: 20px;
    line-height: normal;
    font-weight: 500;
    font-style: normal;
}

/* Button label */
.knop-tekst,
.button {
    font-family: "Gantry", sans-serif;
    font-size: 20px;
    line-height: normal;
    font-weight: 400;
    font-style: normal;
}

/* Footer phone / email */
.contactgegevens {
    font-family: "Gantry", sans-serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    font-style: normal;
}

/* Figma: introteksten */
.introteksten {
    font-family: "Gantry", sans-serif;
    font-size: 26px;
    line-height: 36px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 32px;
}

/* Samenwerking card title */
.kaart-kop {
    font-family: "Gantry", sans-serif;
    font-size: 35px;
    line-height: 34px;
    font-weight: 400;
    font-style: normal;
}

/* Rotated side labels (heden / hier) */
.zij-tekst {
    font-family: "Gantry", sans-serif;
    font-size: 40px;
    line-height: normal;
    font-weight: 500;
    font-style: normal;
}

/* Detail page Gantry title */
.pagina-kop {
    font-family: "Gantry", sans-serif;
    font-size: 83px;
    line-height: 83px;
    font-weight: 300;
    font-style: normal;
}

/* ================================
   AVERIA SERIF LIBRE
   ================================ */

/* Figma: kop 2 */
.kop-2 {
    font-family: "Averia Serif Libre", serif;
    font-size: 32px;
    line-height: 32px;
    font-weight: 300;
    font-style: normal;
}

/* Footer contact heading */
.kop-contact {
    font-family: "Averia Serif Libre", serif;
    font-size: 36px;
    line-height: 42px;
    font-weight: 300;
    font-style: normal;
}

/* Section serif heading */
.kop {
    font-family: "Averia Serif Libre", serif;
    font-size: 57px;
    line-height: 57px;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 56px;
}

/* Hero serif headline */
.kop-groot {
    font-family: "Averia Serif Libre", serif;
    font-size: 107px;
    line-height: 87px;
    font-weight: 300;
    font-style: normal;
}
/* ========================================
   TEXT LAYOUT STYLES
   ======================================== */
.flex-content-item:has( + .tussenkop) {
    margin-bottom: 64px;
}
.flex-content-item.button {
    margin-bottom: 82px;
}
.flex-content-item:has( + .button) {
    margin-bottom: 48px;
}
ul {
    margin-top: 0px;
    padding-left: 2px;
}
ul li {
    list-style: none;
}
ul li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 5px;
    vertical-align: 0.15em;
    background-color: currentColor;
}


/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */
/* Two lines per color — combine selectors when the declaration is the same (see 03-css-variables.mdc). */

.mint, .mint-hover:hover { color: var(--mint); }
.mint-bg, .mint-bg-hover:hover { background-color: var(--mint); }
.purple, .purple-hover:hover { color: var(--purple); }
.purple-bg, .purple-bg-hover:hover { background-color: var(--purple); }
.tan, .tan-hover:hover { color: var(--tan); }
.tan-bg, .tan-bg-hover:hover { background-color: var(--tan); }
.cream, .cream-hover:hover { color: var(--cream); }
.cream-bg, .cream-bg-hover:hover { background-color: var(--cream); }
.black, .black-hover:hover { color: var(--black); }
.black-bg, .black-bg-hover:hover { background-color: var(--black); }
.white, .white-hover:hover { color: var(--white); }
.white-bg, .white-bg-hover:hover { background-color: var(--white); }
.grey, .grey-hover:hover { color: var(--grey); }
.grey-bg, .grey-bg-hover:hover { background-color: var(--grey); }
.transparent { color: transparent; }

/* Gradient backgrounds */
.gradient-trans-purple-bg { background: var(--gradient-trans-purple); }
.gradient-purple-trans-bg { background: var(--gradient-purple-trans); }
.gradient-trans-tan-bg { background: var(--gradient-trans-tan); }
.gradient-tan-trans-bg { background: var(--gradient-tan-trans); }

/* ========================================
   (STICKY) HEADER
   ======================================== */
/* Clear fixed header — all content templates wrap in .brro-flex-page. */
.brro-flex-page .outer-flex-wrapper.page-title-section + .outer-flex-wrapper .content-wrapper {
    padding-top: 180px;
}
.brro-flex-page .outer-flex-wrapper {
    position: relative;
}
/* Sticky behaviour: brro-fx on <header class="brro-fx--header"> — see brro-fx Skill. */
header.brro-fx--header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
header.brro-fx--header .content-wrapper {
    padding-top: 24px;
}

/* Invert dark SVG logo on purple (and other dark) page backgrounds — also used in footer. */
.logo-invert {
    filter: brightness(100) invert(1);
}

/* Desktop header nav — menu links use `only desk`; logo stays visible on all breakpoints. */
.header-menu {
    flex-flow: row nowrap;
    justify-content: center;
    gap:86px;
    align-items: center;
    width: 100%;
    overflow: visible;
}

@media (max-width: 1023px) {
    header.brro-fx--header .content-wrapper {
        justify-content: space-between;
    }

    .header-menu {
        width: auto;
        justify-content: flex-start;
    }
}

.header-menu .menu-tekst {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
}

.header-logo-link {
    box-sizing: border-box;
    flex: 0 0 120px;
    width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

img.hedenhier-logo {
    width: 120px;
    max-width: 100%;
    height: auto;
}

.header-menu-toggle {
    line-height: 0;
}

/* ========================================
   NAV POPUP STYLES
   ======================================== */
#nav-popup {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 998;
    opacity: 0;
    transform: translateY(-200vh);
    pointer-events: none;
    /* Only opacity animates; transform snaps (delayed on close so it moves offscreen after fade). */
    transition: opacity 800ms ease, transform 0s ease-in-out 800ms;
}

#nav-popup .nav-popup-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Content must stack above the absolute backdrop (in-flow blocks paint below positioned siblings). */
#nav-popup .outer-flex-wrapper {
    position: relative;
    z-index: 1;
}

#nav-popup.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 800ms ease-in-out, transform 0s ease-in-out 0ms;
}


/* ========================================
   FOOTER STYLES
   ======================================== */
footer {
    position: relative;
    padding-top: 400px;
}
footer .footer-row-first,
footer .footer-row-last {
    padding-top: 60px;
}
footer .footer-row-last {
    padding-bottom: 40px;
}
footer .kop-contact {
    margin-bottom: 12px;
}
footer .algemene-voorwaarden {
    margin-top: 100px;
}

/* ========================================
   DEFAULT SECTION
 ======================================== */
.content-section-default-item .image {
    width: 214px;
    height: 211px;
    aspect-ratio: 71/70;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    overflow: hidden;
}
.content-section-default-item p {
    width: 420px;
    margin-top: 18px;
}

/* ========================================
   BORDERS, RADIUS, ETC
   ======================================== */


/* ========================================
   BUTTONS
   ======================================== */
.content-section-default-item .content-wrapper {
    gap: 28px 52px;
}
.content-section-default-item .content-wrapper > .flex-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
    overflow: hidden;
}
.content-section-default-item .content-wrapper > .button {
    margin-left: auto;
}
.button {
    border: 2px solid;
    border-radius: 50px;
    padding: 7px 40px;
    display: inline-block;
    margin-bottom: 32px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .flex-content-item.button {
        transform: translateX(140px);
    }
}

/* ========================================
   SWIPER SLIDER GLOBAL STYLES
   ======================================== */

/* Base Swiper layout — per-slider design uses .brro-swiper--modifier or #id below this block. */
.swiper {
    position: relative;
    overflow: hidden;
}
.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Optional UI — tune colors per project (:root variables). */
.swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--black);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 200ms var(--cubix, ease);
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--purple);
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-next {
    right: 0;
}

/* ========================================
   SITE WIDE SECTIONS AND COMPONENTS
   ======================================== */
/* Reusable blocks used on more than one template (cards, page-title-section, reviews, etc.). */

/* Glow sphere — absolute, first child of .brro-flex-page; 113vw wide, max 1808px */
.brro-flex-page > .page-title-glowsphere {
    position: absolute;
    top: calc(clamp(370px, 36.04vw, 577px) - min(113vw, 1800px));
    left: 50%;
    z-index: 0;
    width: min(113vw, 1808px);
    transform: translateX(-50%);
    line-height: 0;
    pointer-events: none;
    aspect-ratio: 1 / 1;
}
.brro-flex-page > .page-title-glowsphere img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.page-title-section {
    overflow: visible;
}
.page-title-section .inner-flex-wrapper,
.page-title-section .content-wrapper {
    overflow: visible;
}

/* ========================================
   REVIEWS STYLES
   ======================================== */
/* section_reviews_item — always on purple background; text is hardcoded white in the template. */

.brro-swiper--reviews {
    position: relative;
    width: 100%;
    padding-bottom: clamp(32px, 2.78vw, 40px);
}

/* Pagination bullets — same sizing/behaviour as ref; colors from :root (white inactive, mint active). */
.brro-swiper--reviews .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.brro-swiper--reviews .swiper-pagination-bullet {
    width: clamp(12px, 0.97vw, 16px);
    height: clamp(12px, 0.97vw, 16px);
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 200ms ease;
}
.brro-swiper--reviews .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--mint);
}

/* Flexible content: spacer_item — height set inline from ACF range field */
.content-spacer {
    width: 100%;
    flex-shrink: 0;
}

/* ========================================
   FRONT PAGE ONLY
   ======================================== */
/* Scope with body.home, #hero, or .home — not a separate CSS file. */


/* ========================================
   DEFAULT PAGE TEMPLATE
   ======================================== */
/* Scope with body.page, .page-template-default, or section ids on page.php. */


/* ========================================
   COMING SOON PAGE (page-comingsoon.php)
   ======================================== */

/* Hide site chrome; page content is only the full-screen image. */
body.brro-coming-soon-page header,
body.brro-coming-soon-page footer {
    display: none;
}
body.brro-coming-soon-page {
    background: var(--mint);
    min-height:100vh;
    overflow: hidden;
}

body.brro-coming-soon-page main {
    margin: 0;
    padding: 0;
}
img.coming-soon-img.logo {
   display: block;
   margin: auto;
   margin-top: 100px;
   width: 220px;
}


/* ========================================
   SINGLE POST TYPE TEMPLATE
   ======================================== */
/* e.g. body.single-{post_type} — add when a plugin or CPT needs its own single layout. */


/* ========================================
   ARCHIVE POST TYPE TEMPLATE
   ======================================== */
/* e.g. body.post-type-archive-{post_type} */
.content-section-posts-cards {
    gap: 24px;
}

.post-card {
    max-width:300px;
}