/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ── Defensive: Elementor's widget-icon-list.min.css isn't always enqueued    */
/* on pages whose icon-list widgets live in a global header template, so the  */
/* browser default `disc` bullets leak into the nav. Reset list-style here.  */
.elementor-icon-list-items,
.elementor .elementor-icon-list-items,
.elementor-icon-list-items > li,
.elementor .elementor-icon-list-items > li {
    list-style: none;
}

/* ── Bigek Extrabold — register globally ─────────────────────────────────── */
/* Elementor only adds an @font-face for Bigek to a page's CSS when a widget  */
/* on that page has `typography_font_family: "Bigek Extrabold"` set EXPLICITLY.*/
/* Pages whose headings use the kit's `primary` typography token (which       */
/* references Bigek indirectly) don't trigger that, so Bigek silently falls   */
/* back to sans-serif there. Registering it here makes the font universally   */
/* available regardless of which Elementor enqueue path runs.                 */
@font-face {
    font-family: 'Bigek Extrabold';
    src: url('/wp-content/uploads/2026/02/Bigek-Extrabold.woff2') format('woff2'),
         url('/wp-content/uploads/2026/02/Bigek-Extrabold.woff') format('woff'),
         url('/wp-content/uploads/2026/02/Bigek-Extrabold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Work Sans variable font — full weight range ──────────────────────────── */
/* Overrides the static WorkSans-Light.ttf (weight:normal only) registered    */
/* by Elementor, enabling bold/semibold/etc. via <strong> or font-weight.     */
@font-face {
    font-family: 'WorkSans Light';
    src: url('/wp-content/uploads/2026/02/WorkSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Tame the bold — 600 instead of browser default 900 for <strong> */
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b,
.elementor-widget-theme-post-content strong,
.elementor-widget-theme-post-content b {
    font-weight: 600;
}

/* Admin-bar auto-hide DISABLED here — handed over to the satelliet
   "adminbar-bottom" snippet (placement: top). Original theme rules, commented:
#wpadminbar {
    top: auto !important;
    bottom: 0 !important;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}
#wpadminbar.adminbar-visible {
    transform: translateY(0);
}
#wpadminbar .menupop .ab-sub-wrapper {
    bottom: 100% !important;
    top: auto !important;
}
*/

/* Hide WordPress's phantom "default" group wrapper in our palette menu */
#wp-admin-bar-gft-palette-default > .ab-empty-item {
    display: none !important;
}
#wp-admin-bar-gft-palette-default {
    display: contents;
}

html body.admin-bar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Anchor pop — small scale bump when jumping to an in-page anchor ──────── */
@keyframes gft-anchor-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.gft-anchor-pop {
    animation: gft-anchor-pop 0.5s ease-out;
    transform-origin: center center;
}

/* ── fadeIn keyframes — not loaded by Elementor unless editor is active ───── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Prevent horizontal scroll from decorative elements ────────────────────── */
body {
    overflow-x: hidden;
}

/* ── Override Hello Elementor default link colors ──────────────────────────── */
/* reset.css sets a { color: #cc3366 } and a:hover { color: #333366 }         */
/* We want links to inherit their color from the surrounding text/section.    */

/* Scoped to prose contexts only (paragraphs, list items) inside text-editor /
   theme-post-content widgets. Avoids matching links inside nested custom
   widgets (CTAs, arrows, etc.) that bring their own anchor styling. */
.elementor .elementor-widget-text-editor a:not(.gft-ab),
.elementor .elementor-widget-theme-post-content a:not(.gft-ab),
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab) {
    color: inherit !important;
}

.elementor .elementor-widget-text-editor a:not(.gft-ab):active,
.elementor .elementor-widget-text-editor a:not(.gft-ab):hover,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):active,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):active,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):hover,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):hover {
    color: inherit !important;
}

/* ── Marker-style link underlines in text widgets ──────────────────────────── */
/* Highlight at low opacity of the link's own color, applied only inside
   prose blocks (<p>, <li>) so other anchor types stay untouched. */

.elementor .elementor-widget-text-editor a:not(.gft-ab),
.elementor .elementor-widget-theme-post-content a:not(.gft-ab),
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab) {
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: linear-gradient(color-mix(in srgb, currentColor 16%, transparent), color-mix(in srgb, currentColor 16%, transparent)) !important;
    background-repeat: no-repeat !important;
    /* TEMP: always-hover test — revert to `100% 8px` for default state */
    /* background-size: 100% 8px !important; */
    background-size: 100% 100% !important;
    background-position: 0 100% !important;
    padding-bottom: 0 !important;
    transition: background-size 0.3s ease;
}

.elementor .elementor-widget-text-editor a:not(.gft-ab):hover,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):hover,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):hover {
    background-size: 100% 100% !important;
}

/* ── Same marker-style underline for icon list + JetEngine dynamic link ────── */
/* Both widgets wrap their icon AND text inside a single <a>, so we underline  */
/* only the text span (.elementor-icon-list-text / .jet-listing-dynamic-link__label). */

.elementor .elementor-widget-icon-list a,
.elementor .elementor-widget-icon-list a:active,
.elementor .elementor-widget-icon-list a:hover {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* JetEngine dynamic link sets its own color via per-widget CSS — don't force
   `color: inherit` here or it wipes out the widget's chosen color. */
.elementor .elementor-widget-jet-listing-dynamic-link a,
.elementor .elementor-widget-jet-listing-dynamic-link a:active,
.elementor .elementor-widget-jet-listing-dynamic-link a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Note: we use a ::before pseudo-element (not background-image) because
   Elementor's lazy-load rule (`.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) *`)
   forces `background-image: none !important` on all descendants until their
   container is lazy-loaded, which blocks a gradient underline. We can't use
   inset box-shadow either — color-mix(currentColor, transparent) computes to
   rgba(0,0,0,0) during the hover transition (bug with currentColor + color-mix
   when Elementor's per-post `transition: color 0.3s` is active on the span),
   so the highlight disappears mid-animation. A pseudo-element with plain
   currentColor + opacity sidesteps both issues. */
.elementor .elementor-widget-icon-list a .elementor-icon-list-text,
.elementor .elementor-widget-jet-listing-dynamic-link a .jet-listing-dynamic-link__label {
    display: inline-block !important;
    position: relative !important;
    isolation: isolate !important;
}

.elementor .elementor-widget-icon-list a .elementor-icon-list-text::before,
.elementor .elementor-widget-jet-listing-dynamic-link a .jet-listing-dynamic-link__label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    /* TEMP: always-hover test — revert to `bottom: 0.15em; height: 0.4em` for default state */
    /* bottom: 0.15em !important; */
    /* height: 0.4em !important; */
    bottom: 0 !important;
    height: 100% !important;
    background-color: currentColor !important;
    opacity: 0.16 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition: height 0.3s ease !important;
}

.elementor .elementor-widget-icon-list a:hover .elementor-icon-list-text::before,
.elementor .elementor-widget-jet-listing-dynamic-link a:hover .jet-listing-dynamic-link__label::before {
    height: 100% !important;
}

/* ── Hero background — unset so parent element controls it */
.gv-hero {
    background: transparent !important;
}

/* ── Hero overlay gradient — fade out when logo starts moving (6s) */
.gv-hero-overlay {
    animation: gv-fade-out 0.6s 6s ease-in forwards !important;
}

/* ── Hero animation timing override — tighter sequence ─────────────────────── */
/* Gap between text-2 and logo halved: 4s → 2s. Everything after shifts -2s. */
/*                                                                            */
/* 0.3s  Text 1 fade in         (unchanged)                                   */
/* 2.5s  Text 2 fade in         (unchanged)                                   */
/* 4.0s  Shapes fade out        (was 6.0s)                                    */
/* 4.0s  Text 1 fade out        (was 6.0s)                                    */
/* 4.5s  Logo reveal            (was 6.5s)                                    */
/* 5.5s  Marquee enter          (was 7.5s)                                    */
/* 6.0s  Text 2 fade out        (was 8.0s)                                    */
/* 6.5s  Logo move              (was 8.5s)                                    */
/* 6.4s  Photo + hero-right     (photo was 8.9s: its override sat on a dead id) */

.gv-hero-shapes {
    animation: gv-fade-out 0.6s 4s ease-in forwards !important;
}

.gv-hero-text-1 {
    animation: gv-fade-in 0.6s 0.3s ease-out forwards,
               gv-fade-out 0.5s 4s ease-in forwards !important;
}

.gv-hero-text-2 {
    animation: gv-fade-in 0.6s 2.5s ease-out forwards,
               gv-fade-out 0.5s 5.5s ease-in forwards !important;
}

.gv-hero-logo {
    animation: gv-logo-reveal 0.8s 4.5s ease-out forwards,
               gv-logo-move 0.8s 6s ease-in-out forwards !important;
}

/* Marquee — override timing on widget container */
.elementor-394 .elementor-element.elementor-element-e3a1c44 > .elementor-widget-container {
    animation: marquee-enter 2s 5.5s ease-out forwards !important;
}

/* Photo — container id changed from 813fc92 to b8e1506 when the hero was rebuilt, so this
   override sat on a dead id and the photo kept the widget custom_css timing. Repointed; the
   widget custom_css carries the same 7.9s, this rule wins the tie through !important. */
.elementor-394 .elementor-element.elementor-element-b8e1506 {
    animation: fadeIn 1s 6.4s ease-out forwards !important;
}

/* Hero right */
.hero-right {
    opacity: 0;
    animation: fadeIn 1s 6.4s ease-out forwards;
}

/* Opt out of marker-style links — add .no-a-style to the widget or any ancestor */
.elementor .no-a-style .elementor-widget-text-editor a:not(.gft-ab),
.elementor .no-a-style .elementor-widget-theme-post-content a:not(.gft-ab),
.elementor .no-a-style .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab),
.elementor .no-a-style.elementor-widget-text-editor a:not(.gft-ab),
.elementor .no-a-style.elementor-widget-theme-post-content a:not(.gft-ab),
.elementor .no-a-style.elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab),
.elementor .no-a-style .elementor-widget-text-editor a:not(.gft-ab):hover,
.elementor .no-a-style .elementor-widget-theme-post-content a:not(.gft-ab):hover,
.elementor .no-a-style .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):hover,
.elementor .no-a-style.elementor-widget-text-editor a:not(.gft-ab):hover,
.elementor .no-a-style.elementor-widget-theme-post-content a:not(.gft-ab):hover,
.elementor .no-a-style.elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):hover {
    background-image: none !important;
    background-size: unset !important;
    padding-bottom: 0 !important;
}

.elementor .no-a-style .elementor-widget-icon-list a .elementor-icon-list-text::before,
.elementor .no-a-style.elementor-widget-icon-list a .elementor-icon-list-text::before,
.elementor .no-a-style .elementor-widget-icon-list a:hover .elementor-icon-list-text::before,
.elementor .no-a-style.elementor-widget-icon-list a:hover .elementor-icon-list-text::before,
.elementor .no-a-style .elementor-widget-jet-listing-dynamic-link a .jet-listing-dynamic-link__label::before,
.elementor .no-a-style.elementor-widget-jet-listing-dynamic-link a .jet-listing-dynamic-link__label::before,
.elementor .no-a-style .elementor-widget-jet-listing-dynamic-link a:hover .jet-listing-dynamic-link__label::before,
.elementor .no-a-style.elementor-widget-jet-listing-dynamic-link a:hover .jet-listing-dynamic-link__label::before {
    display: none !important;
}

/* h1 clamp now lives ONLY in Elementor > Site Settings > Custom CSS (kit). */

/* ── no-a-style (robust, nesting-direction agnostic) ───────────────────────── */
/* The original .no-a-style opt-out only matched when .no-a-style WRAPPED a      */
/* text-editor / theme-post-content widget. But JetEngine listing items (e.g.    */
/* the case-tag chips) render INSIDE the case body's theme-post-content widget,  */
/* so the marker highlight comes from that OUTER widget while .no-a-style sits    */
/* DEEPER (on the listing-item container). The reversed nesting meant the old    */
/* opt-out selector never matched. This release works regardless of where        */
/* .no-a-style sits relative to the prose widget: any link beneath it is freed.  */
.elementor .no-a-style a:not(.gft-ab),
.elementor .no-a-style a:not(.gft-ab):hover,
.elementor .no-a-style a:not(.gft-ab):active {
    background-image: none !important;
    background-size: unset !important;
    padding-bottom: 0 !important;
}
.elementor .no-a-style a .elementor-icon-list-text::before,
.elementor .no-a-style a:hover .elementor-icon-list-text::before,
.elementor .no-a-style a .jet-listing-dynamic-link__label::before,
.elementor .no-a-style a:hover .jet-listing-dynamic-link__label::before {
    display: none !important;
}

/* ── DM Mono — self-hosted ─────────────────────────────────────────────────── */
/* Google Fonts loading is disabled site-wide (elementor_google_font = 0) and    */
/* Bigek/WorkSans are self-hosted, but DM Mono — used across the UI (nav, etc.) — */
/* was never registered, so it silently fell back to the default monospace.      */
/* Self-hosted here (OFL), weights 400 + 500, latin + latin-ext subsets.         */
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/dm-mono/DMMono-400-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/dm-mono/DMMono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/dm-mono/DMMono-500-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/dm-mono/DMMono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Body paragraphs: force WorkSans Light (300) ─────────────────────────────── */
/* The "Tekst" global typography weight is stuck at 600 via an Elementor variable-  */
/* font desync: the visible weight slider (typography_weight) doesn't drive the      */
/* generated CSS — a hidden legacy typography_font_weight=600 does, with no UI to    */
/* change it while the font is variable. Force the real light weight here so the     */
/* editor canvas and the frontend match. Bold <strong>/<b> keep their own 600 rule   */
/* above (a directly-declared weight beats this inherited one, so bold still works).  */
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p {
    font-weight: 300 !important;
}


/* Complianz cookie banner — override Complianz's bottom-right offset so the
   right gap clears the desktop scrollbar (right 20 vs bottom 10 reads as even).
   Lives here (child theme) so a Complianz/banner re-save can't revert it.
   Desktop only — the mobile full-width banner (<=768px) is left untouched. */
@media (min-width: 769px) {
    .cmplz-cookiebanner.cmplz-bottom-right {
        right: 20px;
        bottom: 10px;
    }
}

/* Site-wide scrollbar in the dynamic palette: track = Dynamic Text
   (--e-global-color-76c389d, solid), thumb = Dynamic Background
   (--e-global-color-a2cf421, solid), square thumb. The vars are declared on
   :root by the dynamic-colour baker. */
/* WebKit/Blink (Chrome, Edge, Safari): square + coloured. Defining the webkit
   pseudo-elements forces the classic, squarable scrollbar. scrollbar-color is
   deliberately NOT set on this path — in modern Chrome its presence switches to
   the standard scrollbar and makes ::-webkit-scrollbar-thumb (incl. its
   border-radius:0) a no-op, so the thumb would stay rounded. */
::-webkit-scrollbar {
    background: var(--e-global-color-76c389d);
}
::-webkit-scrollbar-track {
    background: var(--e-global-color-76c389d);
}
::-webkit-scrollbar-thumb {
    background: var(--e-global-color-a2cf421);
    border-radius: 0;
    /* Transparent border + padding-box clip insets the thumb so the track
       background shows around it (a margin instead of a full-width thumb). */
    border: 5px solid transparent;
    background-clip: padding-box;
}
/* Firefox / browsers without ::-webkit-scrollbar: colour only (cannot square). */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: var(--e-global-color-a2cf421) var(--e-global-color-76c389d);
    }
}

/* ── Contact form colour mode ────────────────────────────────────────────────
   Driven by the [contactform mode="normal|inverse"] shortcode wrapper
   (.gft-cf--normal / .gft-cf--inverse). Maps the form's colour slots to the two
   dynamic globals: a2cf421 = Dynamic Background, 76c389d = Dynamic Text.
   normal  = text painted in the Text colour (form on a normal block).
   inverse = text painted in the Background colour (form on a contrasted block). */
.gft-cf,
.gft-cf--normal {
    --cf-fg:         var(--e-global-color-76c389d);  /* labels, html field, messages, button text */
    --cf-field-text: var(--e-global-color-a2cf421);  /* typed input text */
    --cf-field-bg:   var(--e-global-color-76c389d);  /* input fill */
}
.gft-cf--inverse {
    --cf-fg:         var(--e-global-color-a2cf421);
    --cf-field-text: var(--e-global-color-76c389d);
    --cf-field-bg:   var(--e-global-color-a2cf421);
}
.gft-cf .elementor-field-label,
.gft-cf .elementor-field-type-html,
.gft-cf .elementor-field-type-html *,
.gft-cf .elementor-message {
    color: var(--cf-fg) !important;
}
.gft-cf .elementor-field-textual {
    color: var(--cf-field-text) !important;
    background-color: var(--cf-field-bg) !important;
}

/* "Ik ontvang graag updates over planeet Graviteit" checkbox (form field id `updates`,
   logged by mu-plugins/gft-updates-signups.php). The field label stays in the form data
   (readable in Submissions) but is hidden on the page; the option text matches the privacy
   line; the box is a sharp square in the input colours with a check in the typed-text colour. */
.gft-cf .elementor-field-group-updates > .elementor-field-label {
    display: none;
}
.gft-cf .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.gft-cf .elementor-field-type-acceptance .elementor-field-option label {
    color: var(--cf-fg) !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    cursor: pointer;
}
.gft-cf .elementor-field-type-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 3px 0 0 0;
    background: var(--cf-field-bg);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.gft-cf .elementor-field-type-acceptance input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 11px;
    background: var(--cf-field-text);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform .12s ease-in-out;
}
.gft-cf .elementor-field-type-acceptance input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.gft-cf .elementor-field-type-acceptance input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cf-fg);
    outline-offset: 2px;
}

/* ── Site-wide content gutter ────────────────────────────────────────────────
   Single source of truth for the horizontal space between page content and the
   viewport edge. 120px desktop, 60px tablet, 30px mobile.

   Why: boxed containers only get a side gap once the viewport passes the 1440px
   content-width cap, so between the tablet breakpoint (1025px) and 1440px,
   sections with no horizontal padding hug the edges. This floors every
   TOP-LEVEL section to the gutter so content never touches the sides.

   - Scoped to direct children of the document root (.elementor > .e-con) so
     nested containers and loop items are untouched.
   - Only BOXED top-level sections get the floor. Full-width sections
     (.e-con-full) are a deliberate "go edge-to-edge" choice, so they bleed by
     default.
   - A *floor* via max(): sections with a deliberately larger inset (e.g. 120px)
     keep it; backgrounds still bleed full-width (padding sits on the container).
   - Opt-out: add `gv-bleed` to force a boxed section edge-to-edge.
   - Opt-in:  add `gv-pad` to a FULL-WIDTH section to inset its content to the
     gutter while the background keeps bleeding (hero / contact-form sections). */
:root { --gv-gutter: 120px; }                            /* desktop ≥1025 */
@media (max-width: 1024px) { :root { --gv-gutter: 60px; } }  /* tablet 768–1024 */
@media (max-width: 767px)  { :root { --gv-gutter: 30px; } }  /* mobile ≤767 */

/* Boxed top-level sections: floor content to the gutter.
   The `.elementor-section-wrap` variants cover the Elementor editor preview, which
   wraps top-level sections in that extra div, so the backend view matches the frontend. */
.elementor > .e-con:not(.gv-bleed):not(.e-con-full),
.elementor > .elementor-section-wrap > .e-con:not(.gv-bleed):not(.e-con-full),
/* Full-width sections that opt back in via `gv-pad`. */
.elementor > .e-con-full.gv-pad:not(.gv-bleed),
.elementor > .elementor-section-wrap > .e-con-full.gv-pad:not(.gv-bleed) {
    padding-inline-start: max(var(--gv-gutter), var(--padding-inline-start));
    padding-inline-end:   max(var(--gv-gutter), var(--padding-inline-end));
}
/* ---------- Graviteit table (reusable) ----------
   Normally emitted by the "Tabel" Elementor widget (graviteit-widgets/includes/widgets/tables.php),
   which builds the markup from either a pasted Word table or its row/column repeaters. Hand-written
   markup works too: class "gv-table" on the <table>, wrapped in <div class="gv-table-wrap">, with
   data-label="<column name>" on each <td> for the mobile card layout.

   COLOURS — this site randomises its colour scheme PER PAGELOAD. Verified mapping:
     --e-global-color-a2cf421 = FOREGROUND (the text colour the page uses in that context)
     --e-global-color-76c389d = BACKGROUND (the panel colour behind it)
     --e-global-color-d0a17be = third/accent — can be lime (#BDFF2E) or periwinkle, so NOT a safe
                                "light": never use it for contrast.
   --e-global-color-text / primary are FIXED, so binding to them leaves the table permanently
   blue-white while the page turns green/white.

   CRITICAL: the <table> renders with a white background from somewhere in the stack. Left alone it
   covers the scheme-coloured container, and on INVERTED schemes (fg = light #EEF2FB on a dark
   container) you get light text on white = contrast 1.12, i.e. invisible. So table/thead/tbody/tr/
   td/th are forced transparent and the container's own scheme colour shows through — the same
   surface the page's own text sits on, so contrast always equals the page's.

   Borders: hello-elementor gives every td/th a 1px rgba(128,128,128,.5) grey grid. It's recoloured
   to the foreground (same colour as the header band) instead of being left grey.

   Every knob below is a CSS variable so the widget's Style tab can override it per instance by
   writing the variable on the wrapper — the !important flags here would otherwise beat Elementor's
   generated rules. */
.gv-table-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0;

	--gv-fg: var(--e-global-color-a2cf421, #084147);
	--gv-bg: var(--e-global-color-76c389d, #FFFFFF);
	--gv-border: var(--gv-fg);
	--gv-border-w: 1px;
	--gv-zebra: color-mix(in srgb, var(--gv-fg) 8%, transparent);
	--gv-head-pad: 14px 18px;
	--gv-rowlabel-pad: 16px 18px;
	--gv-cell-pad: 16px 18px;
	--gv-card-pad: 12px 16px;
	--gv-card-gap: 14px;
	--gv-label-w: 7.5em;
}
.gv-table {
	width: 100%; border-collapse: collapse; line-height: 1.5; font-size: 1rem;
	color: var(--gv-fg);
	background: transparent !important;
}
.gv-table thead, .gv-table tbody, .gv-table tr,
.gv-table td, .gv-table th { background: transparent !important; }
.gv-table th, .gv-table td { border: var(--gv-border-w) solid var(--gv-border) !important; }
.gv-table tbody tr:nth-child(even) { background: var(--gv-zebra) !important; }

.gv-table thead th {
	background: var(--gv-fg) !important;
	color: var(--gv-bg) !important;
	font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400; font-size: .82rem;
	letter-spacing: .08em; text-transform: uppercase; text-align: left;
	padding: var(--gv-head-pad); white-space: nowrap;
}
.gv-table .gv-th-blank { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gv-table tbody th {
	font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; font-size: .92rem;
	text-align: left; padding: var(--gv-rowlabel-pad); vertical-align: top; white-space: nowrap;
	color: var(--gv-fg);
}
.gv-table td { padding: var(--gv-cell-pad); vertical-align: top; }

/* Under 768px every row becomes a card: the row label is the card header and each value is
   prefixed with its column name (from data-label), so a wide table never scrolls the page. */
@media (max-width: 767px) {
	.gv-table-wrap { overflow-x: visible; }
	.gv-table, .gv-table thead, .gv-table tbody, .gv-table tr, .gv-table th, .gv-table td { display: block; width: 100%; }
	.gv-table thead { display: none; }
	.gv-table th, .gv-table td { border: 0 !important; }          /* drop the grid in card mode */
	.gv-table tbody tr,
	.gv-table tbody tr:nth-child(even) {
		background: transparent !important; margin: 0 0 var(--gv-card-gap);
		border: var(--gv-border-w) solid var(--gv-border) !important;
	}
	.gv-table tbody th {
		background: var(--gv-fg) !important;
		color: var(--gv-bg) !important;
		text-transform: uppercase; letter-spacing: .07em; font-size: .8rem;
		white-space: normal; padding: var(--gv-card-pad);
	}
	.gv-table td { display: flex; gap: 12px; padding: var(--gv-card-pad); }
	.gv-table td + td { border-top: var(--gv-border-w) solid color-mix(in srgb, var(--gv-border) 35%, transparent) !important; }
	.gv-table td::before {
		content: attr(data-label); flex: 0 0 var(--gv-label-w);
		font-family: 'DM Mono', ui-monospace, monospace; font-size: .78rem;
		text-transform: uppercase; letter-spacing: .06em; opacity: .7; padding-top: .15em;
	}

	/* Opt out of the cards: keep a real table and scroll it sideways instead. */
	.gv-table-wrap--scroll { overflow-x: auto; }
	.gv-table-wrap--scroll .gv-table       { display: table; }
	.gv-table-wrap--scroll .gv-table thead { display: table-header-group; }
	.gv-table-wrap--scroll .gv-table tbody { display: table-row-group; }
	.gv-table-wrap--scroll .gv-table tr    { display: table-row; margin: 0; border: 0 !important; }
	.gv-table-wrap--scroll .gv-table th,
	.gv-table-wrap--scroll .gv-table td {
		display: table-cell; width: auto;
		border: var(--gv-border-w) solid var(--gv-border) !important;
	}
	.gv-table-wrap--scroll .gv-table tbody th {
		background: transparent !important; color: var(--gv-fg) !important;
		text-transform: none; letter-spacing: normal; font-size: .92rem;
		white-space: nowrap; padding: var(--gv-rowlabel-pad);
	}
	.gv-table-wrap--scroll .gv-table td          { padding: var(--gv-cell-pad); }
	.gv-table-wrap--scroll .gv-table td::before  { content: none; }
	.gv-table-wrap--scroll .gv-table tbody tr:nth-child(even) { background: var(--gv-zebra) !important; }
}

/* Tablet (768–1024px): same card layout, only for tables whose widget has "Op tablet" = kaartjes
   (wrapper class gv-table-wrap--tab-cards); "scrollen" keeps the table and scrolls it sideways. */
@media (min-width: 768px) and (max-width: 1024px) {
	.gv-table-wrap--tab-cards { overflow-x: visible; }
	.gv-table-wrap--tab-cards .gv-table, .gv-table-wrap--tab-cards .gv-table thead, .gv-table-wrap--tab-cards .gv-table tbody, .gv-table-wrap--tab-cards .gv-table tr, .gv-table-wrap--tab-cards .gv-table th, .gv-table-wrap--tab-cards .gv-table td { display: block; width: 100%; }
	.gv-table-wrap--tab-cards .gv-table thead { display: none; }
	.gv-table-wrap--tab-cards .gv-table th, .gv-table-wrap--tab-cards .gv-table td { border: 0 !important; }          /* drop the grid in card mode */
	.gv-table-wrap--tab-cards .gv-table tbody tr,
	.gv-table-wrap--tab-cards .gv-table tbody tr:nth-child(even) {
		background: transparent !important; margin: 0 0 var(--gv-card-gap);
		border: var(--gv-border-w) solid var(--gv-border) !important;
	}
	.gv-table-wrap--tab-cards .gv-table tbody th {
		background: var(--gv-fg) !important;
		color: var(--gv-bg) !important;
		text-transform: uppercase; letter-spacing: .07em; font-size: .8rem;
		white-space: normal; padding: var(--gv-card-pad);
	}
	.gv-table-wrap--tab-cards .gv-table td { display: flex; gap: 12px; padding: var(--gv-card-pad); }
	.gv-table-wrap--tab-cards .gv-table td + td { border-top: var(--gv-border-w) solid color-mix(in srgb, var(--gv-border) 35%, transparent) !important; }
	.gv-table-wrap--tab-cards .gv-table td::before {
		content: attr(data-label); flex: 0 0 var(--gv-label-w);
		font-family: 'DM Mono', ui-monospace, monospace; font-size: .78rem;
		text-transform: uppercase; letter-spacing: .06em; opacity: .7; padding-top: .15em;
	}

	.gv-table-wrap--tab-scroll { overflow-x: auto; }
}

/* ── Form HTML-field links (o.a. privacybeleid) — match prose marker-link ──── */
/* Elementor form html fields aren't text-editor/theme-post-content, so they  */
/* miss the default paragraph <a> treatment. Give them the same look.         */
.elementor .elementor-field-type-html a:not(.gft-ab),
.elementor .elementor-field-type-html a:not(.gft-ab):active,
.elementor .elementor-field-type-html a:not(.gft-ab):hover {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: linear-gradient(color-mix(in srgb, currentColor 16%, transparent), color-mix(in srgb, currentColor 16%, transparent)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: 0 100% !important;
    padding-bottom: 0 !important;
    transition: background-size 0.3s ease;
}

/* ── Staggered fade-in-up reveal for listing grids ──────────────────────────
   Add class `gv-stagger` to a JetEngine Listing Grid. Items start hidden and
   fade up in sequence when the grid scrolls into view (stagger-reveal.js adds
   .is-revealed and a per-item --gv-i index). Needed because Elementor's own
   entrance animations don't fire on items rendered inside a JetEngine listing. */
.gv-stagger .jet-listing-grid__item .elementor > .elementor-element { opacity: 0; }
.gv-stagger .jet-listing-grid__item.is-revealed .elementor > .elementor-element {
    animation: gvFadeInUp 1s ease both;
    animation-delay: calc(var(--gv-i, 0) * .35s);
}
@keyframes gvFadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gv-stagger .jet-listing-grid__item .elementor > .elementor-element { opacity: 1 !important; animation: none !important; }
}
.gv-stagger .jet-listing-grid__item.gv-shown .elementor > .elementor-element { opacity: 1 !important; animation: none !important; }

/* ── Browserstandaarden: vangnet voor toestanden die niemand heeft ingevuld ── */
/* Zie graviteit-browserstandaarden.md. reset.css van hello-elementor zet
   a { color: #c36 } en de browser kleurt een bezochte link paars zodra er geen
   eigen regel op :visited staat. Deze twee regels wegen nul door :where(), dus
   ze verslaan wel de standaard van thema en browser, maar verliezen van elke
   instelling uit het Elementor-paneel. Ze repareren dus alleen wat nergens
   is ingesteld. */
:where(a:link),
:where(a:visited) {
    color: inherit;
}

/* De ontbrekende toestanden bij de prozalinks hierboven: bezocht en focus.
   Rust, hover en active stonden er al, :visited en :focus-visible niet, en dat
   is precies waar het paars vandaan komt. */
.elementor .elementor-widget-text-editor a:not(.gft-ab):visited,
.elementor .elementor-widget-text-editor a:not(.gft-ab):focus,
.elementor .elementor-widget-text-editor a:not(.gft-ab):focus-visible,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):visited,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):visited,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):focus,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):focus,
.elementor .elementor-widget-theme-post-content a:not(.gft-ab):focus-visible,
.elementor .elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:not(.gft-ab):focus-visible {
    color: inherit !important;
}

/* Tikvlek op mobiel: browsers leggen een blauwe of paarse vlek over alles wat
   je aanraakt. Weghalen mag, zolang er een zichtbare :active of :hover tegenover
   staat, en dat is hier het geval. */
a,
button,
[role="button"],
input,
select,
textarea,
summary,
.e-con[href] {
    -webkit-tap-highlight-color: transparent;
}

/* ── Cookiebeleid (pagina 7418): cookieverklaring op volle breedte ──────────
   Complianz' eigen document.css legt `#cmplz-document { max-width: 800px }` op.
   Dat is de echte beperking (niet de Elementor-container). We heffen 'm op,
   met hogere specificiteit + !important zodat we winnen van de plugin.        */
.page-id-7418 #cmplz-document,
.page-id-7418 .cmplz-document {
    max-width: 100% !important;
}

/* ── Nieuws-listing foto: hover-overlay identiek aan cases ───────────────────
   Cases (listing 41, container 60f8977) leggen op hun beeld een radiale
   overlay (kleur a2cf421 = #08006B) op --overlay-opacity 0.41 en laten die
   bij hover naar 0 faden over 0.3s. De nieuws-listing (5156) toont een echte
   <img> in image-widget 2d82a78, binnen card-wrapper <a> fca854d. We bootsen
   exact dezelfde overlay-fade na met een pseudo-element op de foto, en laten
   de HELE kaart als trigger dienen (fca854d:hover), niet enkel de foto zelf,
   net zoals bij cases waar de volledige tegel de hover opvangt.                */
.elementor-5156 .elementor-element-2d82a78 {
    position: relative;
    display: block;
    line-height: 0;
}
.elementor-5156 .elementor-element-2d82a78::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(at center center, #36363600 45%, var( --e-global-color-a2cf421 ) 100%);
    opacity: .41;
    transition: opacity .3s ease;
}
.elementor-5156 .elementor-element-fca854d:hover .elementor-element-2d82a78::after {
    opacity: 0;
}

/* ── Hero intro: keep the tagline clear of the revealing GRAVITEIT logo on phones ──── */
/* The logo reveals centred on the VIEWPORT at 50vh, width:clamp(320px,45vw,700px);     */
/* below ~711px the 320px floor makes it oversized and it lands on the tagline           */
/* (.gv-hero-text-2), which is centred inside the shorter hero box (Pieter, 2026-09-29:  */
/* "op de telefoon staat het logo op 'blijf op koers'"). Anchor the tagline to the same  */
/* 50vh reference so it always sits a fixed gap below the logo, at every phone size.      */
/* Not transform: the gv-fade-in keyframe animates transform with forwards fill and would */
/* reset it. Desktop (>=768px) is untouched: there the hero == viewport and text-1's      */
/* reserved height already pushes the tagline clear. */
@media (max-width: 767px) {
    .gv-hero-text-2 {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50vh + 44px);
        margin-top: 0;
    }
}