/*
 Theme Name:   Miedema-Assistance
 Theme URI:    https://generatepress.com
 Description:  Maatwerk design  
 Author:       Miedema Assistance BV
 Template:     generatepress
 Version:      0.1
*/

.gfield_signature_container canvas {
    width: 44.31rem;
    height: 13.44rem !important;
}

.horizontal-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
  hyphens: auto;
  max-width: 65ch;
  letter-spacing: 0.3px;
}

p {
  hyphens: auto;
  text-wrap: pretty;
  max-width: 75ch;
  letter-spacing: 0.3px;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* H1 - hoofdkop (subtiel groot) */
h1, .fs-h1 {
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.8rem);
}

/* H2 - kleinere hoofdkop (meer richting 1rem) */
h2, .fs-h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem);
}

/* H3 - subtiele subkop (richting 1rem) */
h3, .fs-h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.35rem);
}

/* H4 en H5 - lichte accenten rondom 1rem */
h4, h5, .fs-h4, .fs-h5 {
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
}

/* H6 - kleinste subtiele kop */
h6, .fs-h6 {
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); 
}

.header-container > div {
  display: none; /* Verberg standaard alle headers */
}

.header-container > div.active {
  display: block; /* Maak alleen de actieve header zichtbaar */
}


.font-clamp-breadcrumb {
    font-size: clamp(0.8333rem, 0.7576rem + 0.303vw, 1rem);;
}

.blok-link { 
    position: relative;
}

.blok-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.blok-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.blok-link a:is(:hover, :focus) {
    outline: none;
}



body .gform_wrapper .gform_body input,
body .gform_wrapper .gform_body,
body .gform_wrapper .gform_body .gform_fields .gfield select {
    font-size: 1rem;
}

.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
    width: 100%;
}

.gv-search-box input[type=search] {
    border-radius: 0.625rem;
    height: 3.125rem;
    width: 40rem;
    padding: 0.3125rem 0.625rem;
    background-color: #fff;
}

.ar-4-3 {
    aspect-ratio: 4/3;
}

@media (max-width: 48rem) {
    .secondary-navigation {
        display: none;
    }

    nav#generate-slideout-menu {
        width: 80vw;
    }
}

.wp-block-navigation-item:hover {
    color: #918B76;
}

/* Styles for the content within navigation items */
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container-close {
    font-size: 1rem;
    padding: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}

/* Formulier Stijling */
body .gform_wrapper .gform_body,
body .gform_wrapper .gform_body input,
body .gform_wrapper .gform_body textarea,
body .gform_wrapper .gform_body select {
    font-size: clamp(0.875rem, 1.125rem, 1.275rem);
    width: 100%;
        padding: 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)){
    margin-top: 1rem;
    font-size: 1.125rem;
}

body .gform_wrapper .gform_body input,
body .gform_wrapper .gform_body,
body .gform_wrapper .gform_body .gform_fields .gfield select {
    font-size: 1.125rem;
}

/* Formulier Stijling */
body .gform_wrapper .gform_body,
body .gform_wrapper .gform_body input,
body .gform_wrapper .gform_body textarea,
body .gform_wrapper .gform_body select {
    font-size: clamp(0.875rem, 1.125rem, 1.275rem);
    width: 100%;
        padding: 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.ma-glas {
  background: rgba(255, 255, 255, 0.08); /* glas-achtig wit */
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 15px rgba(0, 84, 143, 0.25); /* zachte schaduw in je blauw */
  color: #3e84b3:
}

@media (max-width: 768px) {
  .wp-block-site-logo img {
    max-width: 100px; /* Pas aan naar gewenste breedte */
    height: auto;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;                 /* mobiel: 1 kolom */
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-auto-flow: row dense;                  /* vul gaten slim op */
}

/* item dat over alle kolommen moet lopen */
.grid > .full { grid-column: 1 / -1; }

/* Tablet (768–1199): 2 kolommen */
@media (min-width: 768px) and (max-width: 1199px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid > .span-2-tab { grid-column: 1 / -1; }  /* optioneel: alleen op tablet full */
}

/* Desktop (≥1200): 3 kolommen JÓF 2fr/1fr-layout, kies één van de twee ↓ */

/* A) 3 gelijke kolommen */
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid > .span-2-desk { grid-column: 1 / -1; } /* optioneel: alleen op desktop full */
}

/* B) 2fr/1fr + extra kolom (2fr/1fr/1fr) — verhouding laat browser rekenen */
@media (min-width: 1200px) {
  .grid.alt-2fr { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
}

.header-bovenste-balk {
  background-color: #0D1C3A;
  padding-top: env(safe-area-inset-top);
}

.liquid-glass-black-deep {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.15);
  
}

.liquid-glass-black {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.ma--glass-transition-top {
apple-glass-transition-top.soft {
  --fade-strength: 14px;

  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 40%,
      rgba(0, 0, 0, 0.32) 100%
    );
}

  .metablockstyling {
  background: linear-gradient(
    234deg,
    rgba(255, 255, 255, 1) 0%,        /* perfect wit */
    rgba(255, 255, 255, 0.60) 40%,    /* soft mist */
    rgba(0, 0, 0, 0.85) 100%           /* deep luxe black glass */
  );

  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
  
  .liquid-glass-black-secondary {
  background: rgba(0, 0, 0, 0.42); /* iets dieper dan versie 1 */
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.40),     /* minder zwaar dan variant 1 */
    inset 0 1px 2px rgba(255, 255, 255, 0.18); /* sterkere inner light voor 'paneel-gevoel' */
}

:root { --header-h: 96px; }
@media (max-width: 768px) { :root { --header-h: 72px; } }

/* default, overal normale header flow */
.site-header { position: relative; }

/* alleen wanneer er een hero op de pagina staat, header overlay */
body:has(.hp-hero) .site-header{
  position: absolute;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
}

/* hero achtergrond moet op 0 blijven */
.hp-hero{
  margin-top: 0;
  padding-top: 0;
}

/* alleen de hero inhoud zakt onder de header */
.hp-hero > .gb-inside-container{
  padding-top: var(--header-h);
}
  
.gpb-booking-time-picker {
    max-width: 775px;
    background-color: white;
    padding: 0.5rem;
}
  
  /* 1. Beschikbare dagen (Lichtgroen) */
.gpb-available {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-radius: 4px; /* Zorgt voor zachte hoekjes */
    font-weight: bold;
}

/* 2. Volledig volgeboekte dagen (Lichtrood met streep erdoor) */
.gpb-booked {
    background-color: #ffebee !important;
    color: #c62828 !important;
    text-decoration: line-through;
    opacity: 0.8;
}

/* 3. Handmatig onbeschikbaar gemaakte dagen (Lichtgrijs) */
.gpb-unavailable {
    background-color: #f5f5f5 !important;
    color: #9e9e9e !important;
}

/* 4. Dagen buiten je beschikbaarheidsvenster (bijv. weekenden) */
.gpb-outside-availability {
    background-color: #fafafa !important;
    color: #bdbdbd !important;
    opacity: 0.6;
}

/* Optioneel: Hover effect voor de beschikbare dagen, zodat het interactief voelt */
.gpb-available:hover {
    background-color: #c8e6c9 !important;
    cursor: pointer;
}