/* 
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 */

/* --- 1. Root Variabelen & Design Tokens --- */
:root {
    /* Font Families & Weights volgens de bronnen */
    --cg-font-family-base: 'Inter', sans-serif;
    --cg-font-weight-base: 400;
    --cg-font-family-head: 'Inter', sans-serif;
    --cg-font-weight-head: 700;
    --cg-font-family-code: 'Roboto Mono', monospace;
    --cg-font-weight-code: 400;

    /* Fluid Typography (320px tot 1120px viewport) */
    --cg-font-h1: clamp(1.80rem, calc(1.620rem + 0.900vw), 2.25rem);
    --cg-font-h2: clamp(1.50rem, calc(1.350rem + 0.750vw), 1.88rem);
    --cg-font-h3: clamp(1.40rem, calc(1.260rem + 0.700vw), 1.75rem);
    --cg-font-h4: clamp(1.30rem, calc(1.170rem + 0.650vw), 1.63rem);
    --cg-font-h5: clamp(1.20rem, calc(1.080rem + 0.600vw), 1.50rem);
    --cg-font-h6: clamp(1.10rem, calc(0.990rem + 0.550vw), 1.38rem);
    --cg-font-base: clamp(1.00rem, calc(0.900rem + 0.500vw), 1.25rem);
    --cg-font-small: clamp(0.88rem, calc(0.787rem + 0.438vw), 1.09rem);
    --cg-font-code: clamp(0.88rem, calc(0.787rem + 0.438vw), 1.09rem);

    /* Layout Spacing */
    --space-fluid: clamp(16px, calc(10.182px + 1.818vw), 32px);
}

/* --- 2. Font Toepassing (Global) --- */

/* Body tekst met Inter (Gewicht 400) */
body, .cg-base {
    font-family: var(--cg-font-family-base);
    font-weight: var(--cg-font-weight-base);
    font-size: var(--cg-font-base);
    line-height: 1.6;
}

/* Koppen met Inter (Gewicht 700) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cg-font-family-head);
    font-weight: var(--cg-font-weight-head);
    line-height: 1.2;
}

/* Code elementen met Roboto Mono */
code, .cg-code {
    font-family: var(--cg-font-family-code);
    font-weight: var(--cg-font-weight-code);
    font-size: var(--cg-font-code);
    background-color: #f1f5f9;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* --- 3. Typography Klassen (Atomic Design) --- */
h1, .cg-h1 { font-size: var(--cg-font-h1); }
h2, .cg-h2 { font-size: var(--cg-font-h2); }
h3, .cg-h3 { font-size: var(--cg-font-h3); }
h4, .cg-h4 { font-size: var(--cg-font-h4); }
h5, .cg-h5 { font-size: var(--cg-font-h5); }
h6, .cg-h6 { font-size: var(--cg-font-h6); }
small, .cg-small { font-size: var(--cg-font-small); }

/* --- 4. Sticky Header Fix ---
   Hello Elementor's reset.css sets `body { overflow-x: clip }`. Per the CSS
   overflow spec, when one axis is non-visible and the other isn't, the
   visible axis gets silently promoted to `auto`, turning body into an
   accidental scroll container and breaking real `position: sticky` on the
   header. Explicitly declaring overflow-y here stops that promotion without
   removing the horizontal-scroll protection the original rule provides. */
html, body {
    overflow-y: visible;
}