/*
Theme Name: Groenhout Makelaars
Theme URI: https://www.groenhoutmakelaars.nl
Author: Donderz
Author URI: https://donderz.nl
Description: Thema voor Groenhout Makelaars. Gebaseerd op het Donderz WP Starter thema.
Version: 1.0.1
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
*/

:root{

    /* Kleuren */
    --background-color: #FFFFFF;
    --section-background-color: #F5F5F8;
    --primary-color: #00537E;
    --secondary-color: #D29F13;
    --accent-color: #D29F13;
    --heading-color: #00537E;
    --text-color: #212121;   /* lopende tekst op de paginaachtergrond */
    --link-color: #00537E;
    --border-color: #A1A1A1;
    --input-border-color: #00537E33;   /* rand van formuliervelden: primary op 20% */
    --muted-text-color: #A1A1A1;   /* gedempte lopende tekst (text-gray op de bestaande site) */

    /* Extra kleuren uit het bestaande ontwerp */
    --primary-dark: #041A27;
    --overlay-color: rgba(2, 58, 96, 0.5);   /* blauwe overlay op hero-afbeeldingen */

    /* Fonts */
    --font-family: 'motiva-sans', sans-serif;
    --heading-font: 'motiva-sans', sans-serif;

    --h1-font: 3rem;      /* 48px @1440 */
    --h1-large: 4rem;     /* 64px @1440 */

    --h2-font: 1.875rem;  /* 30px @1440 */
    --h2-large: 2.25rem;  /* 36px @1440 */

    --h3-font: 1.5rem;    /* 24px @1440 */
    --h3-large: 1.875rem; /* 30px @1440 */

    --h4-font: 1.25rem;   /* 20px @1440 */
    --h4-large: 1.5rem;   /* 24px @1440 */

    --h5-font: 1.125rem;  /* 18px @1440 */
    --h5-large: 1.25rem;  /* 20px @1440 */

    --h6-font: 1rem;      /* 16px @1440 */
    --h6-large: 1.125rem; /* 18px @1440 */

    --text-large: 1.125rem;    /* 20px @1440 */
    --text-normal: 1rem;      /* 16px @1440 */
    --text-small: 0.9375rem;   /* 14px @1440 */

    /* Line heights */
    --line-height-base: 1em;
    --line-height-medium: 1.1em;
    --line-height-large: 1.6em;

    /* Spacing schaal (px-waarden gelden op 1440px) */
    --space-3xs: 0.25rem;   /* 4px   @1440 */
    --space-2xs: 0.5rem;    /* 8px   @1440 */
    --space-xs: 0.75rem;    /* 12px  @1440 */
    --space-sm: 1rem;       /* 16px  @1440 */
    --space-md: 1.5rem;     /* 24px  @1440 */
    --space-lg: 2rem;       /* 32px  @1440 */
    --space-xl: 2.5rem;     /* 40px  @1440 */
    --space-2xl: 4rem;      /* 64px  @1440 */
    --space-3xl: 6.75rem;   /* 108px @1440 */

    /* Containerbreedte: standaard 1440px, zoals de header en het megamenu.
       Inhoudsblokken zetten deze op 80rem (1280px), net als op de bestaande
       site waar de content in max-w-screen-xl staat. */
    --container-width: 90rem;      /* 1440px @1440 */
    --container-content: 80rem;    /* 1280px @1440 */

    /* Section padding */
    --section-padding-y: var(--space-2xl);      /* 64px @1440 - standaard sectie (py-16) */
    --section-padding-y-sm: var(--space-lg);    /* 32px @1440 - compacte sectie (py-8) */
    --section-padding-y-lg: 5rem;               /* 80px @1440 - ruime sectie (contact-cta) */
    --section-padding-x: 1.25rem;               /* 20px @1440 - container zijpadding */

    /* Border radius
       Het Groenhout-ontwerp is volledig recht: kaarten, knoppen, afbeeldingen en
       overlays hebben nergens een radius. Alle tokens staan daarom op 0. */
    --border-radius-full: 999px;
    --border-radius-large: 0;
    --border-radius-normal: 0;
    --border-radius-small: 0;
}

@media (max-width: 1024px) {
    :root{
        --section-padding-y: var(--space-2xl);
        --section-padding-y-sm: var(--space-xl);
        --section-padding-y-lg: var(--space-2xl);
    }
}

@media (max-width: 767px) {
    :root{
        --section-padding-y: var(--space-xl);
        --section-padding-y-sm: var(--space-lg);
        --section-padding-y-lg: var(--space-xl);
    }
}

/* Fluid scaling: standaard uit.
   Zet de clamp alleen aan als het ontwerp echt meeschaalt van 1440 naar 1920 --
   controleer of een 1920-frame grotere sectiehoogtes heeft dan het 1440-frame.
   Zijn die hoogtes gelijk, dan schaalt het ontwerp niet en blijft dit uit staan. */
html{
    font-size: 16px;
    /* font-size: clamp(16px, 1.1111vw, 21.333px); */
}

/* Ankerlinks (#sectie) scrollen vloeiend, behalve als de bezoeker minder
   beweging wil. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
    margin: 0!important;
    font-family: var(--font-family);
    line-height: var(--line-height-large);
}

.container{
    /* Standaard 1440px, zoals de header en het megamenu. Inhoudsblokken zetten
       --container-width op --container-content (1280px). */
    max-width: var(--container-width);
    padding: 0 var(--section-padding-x);
    margin: 0 auto;

    box-sizing: border-box;
}

.section-padding{
    padding-block: var(--section-padding-y);
}

.section-padding--sm{
    padding-block: var(--section-padding-y-sm);
}

.core-button{
    padding: var(--space-sm) var(--space-lg);  /* 16px 32px @1440 */
    border-radius: var(--border-radius-small);
    font-size: var(--text-normal);
    line-height: var(--line-height-large);
    font-weight: 700;
    text-decoration: unset;
    display: inline-block;
}

.primary-button{
    color: #fff;
    background-color: var(--secondary-color);
}

.secondary-button{
    color: #fff;
    background-color: var(--primary-color);
}

.accent-button{
    color: #fff;
    background-color: var(--accent-color);
}

.outline-button{
    color: var(--primary-color);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

/* Groenhout CTA-knop: gekleurd vlak met pijl-blokje rechts.
   Site-breed component, daarom hier en niet in blok-CSS. */
.core-button.arrow-button{
    padding: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 3.5rem;  /* 56px @1440 */
    position: relative;
    overflow: hidden;
}

/* Blauw vlak schuift bij hover van rechts naar links over de knop. */
.core-button.arrow-button::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out;
    z-index: 1;
}

.core-button.arrow-button:hover::after{
    width: 100%;
}

.core-button.arrow-button .core-button__label{
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
}

.core-button.arrow-button .core-button__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vierkant blok: even breed als de minimale knophoogte. */
    width: 3.5rem;   /* 56px @1440 */
    flex: 0 0 3.5rem;
    background-color: var(--primary-color);
    color: #fff;
    position: relative;
    z-index: 2;
}

.core-button.arrow-button .core-button__icon svg{
    transition: transform 0.3s ease-in-out;
}

.core-button.arrow-button:hover .core-button__icon svg{
    transform: translateX(5px);
}

.core-button.arrow-button.secondary-button .core-button__icon,
.core-button.arrow-button.secondary-button::after{
    background-color: var(--secondary-color);
}

.core-button.arrow-button svg{
    display: block;
}

/* Volle breedte binnen een smalle kolom, zoals in de hero-kaart */
.core-button.arrow-button.is-block{
    display: flex;
    width: 100%;
}

/* Knop zonder pijlvlak: bij hover groeit een witte streep onder het label door.
   Site-breed component, gebruikt op de landingspagina's. */
.core-button.underline-button .core-button__label{
    position: relative;
    display: inline-block;
}

.core-button.underline-button .core-button__label::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}

.core-button.underline-button:hover .core-button__label::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Knop zonder pijlvlak met dezelfde hover als .arrow-button: het blauwe vlak
   schuift van rechts naar links over de knop. Gebruik naast underline-button
   (zoals groenhout_cta_button() zonder pijl rendert); de witte streep vervalt dan. */
.core-button.slide-button{
    position: relative;
    overflow: hidden;
    /* Gouden rand die altijd blijft staan: zo blijft de knop herkenbaar als
       het blauwe vlak op een blauwe achtergrond volledig is ingeschoven. */
    border: 1px solid var(--secondary-color);
}

.core-button.slide-button::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out;
    z-index: 1;
}

.core-button.slide-button:hover::after{
    width: 100%;
}

.core-button.slide-button .core-button__label{
    position: relative;
    z-index: 2;
}

.core-button.slide-button .core-button__label::after{
    display: none;
}

/* Goudkleurige accent-onderstreping via {{tekst}} in ACF-velden */
.custom-underline{
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
    text-underline-offset: 0.15em;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--heading-font);
    line-height: var(--line-height-medium);
    margin: 0;
}

h1{
    font-size: var(--h1-font);
}

h2{
    font-size: var(--h2-font);
}

h3{
    font-size: var(--h3-font);
}

h4{
    font-size: var(--h4-font);
}

h5{
    font-size: var(--h5-font);
}

h6{
    font-size: var(--h6-font);
}

h1.large{
    font-size: var(--h1-large);
}

h2.large{
    font-size: var(--h2-large);
}

h3.large{
    font-size: var(--h3-large);
}

h4.large{
    font-size: var(--h4-large);
}

h5.large{
    font-size: var(--h5-large);
}

h6.large{
    font-size: var(--h6-large);
}

.skip-to-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: #eee;
	color: #0e0e0e;
	text-decoration: none;
	font-weight: 400;
	transform: translateY(-120%);
	/* transition: transform 0.2s ease; */
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
	transform: translateY(0);
}

/* admin bar */
#wpadminbar a img{
    width: 100%;
    height: 100%;
}

.screen-reader-text{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}