/* 
Theme Name: Compass Digital Theme
Theme URI: https://compassdigital.nl/
Description: Compass Digital theme
Author: Mark Kokkelkoren
Template: hello-elementor
Version: 1.0.1
Text Domain: compass-digital-child
*/

/* =========================
   0. Kleuren
   ========================= */

:root {
	--main-font: "Rubik", sans-serif;
    --secondary-font: "Dancing Script",cursive;
    --text-font: "Rubik", sans-serif;
	--light-weight: 300;
	--regular-weight: 400;
	--medium-weight: 500;
    --bold-weight: 600;
}

/* =========================
   1. Algemene stijlen
   ========================= */
body {
    font-family: var(--text-font), sans-serif;
    color: var(--text);
    background-color: var(--e-global-color-secondary);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================
   2. Typografie
   ========================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--main-font);
    color: var(--e-global-color-primary);
    font-weight: var(--bold-weight);
}

h1 { font-size: 30px!important; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5, h6 { font-size: 16px; }

p {
    font-size: 16px;
    line-height: 1.6;
}

/* =========================
   3. Navigatie
   ========================= */
.navbar {
    background-color: var(--e-global-color-primary);
    padding: 10px;
}

.navbar a {
    color: var(--e-global-color-text);
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}

.navbar a:hover {
    color: var(--e-global-color-text);
}

/* =========================
   4. Knoppen
   ========================= */
button, .elementor-button {
    background-color: var(--e-global-color-primary);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    font-weight: var(--bold-weight);
}

button:hover, .elementor-button:hover {
    background-color: var(--e-global-color-primary);
}

/* =========================
   5. Breadcrumbs
   ========================= */
.smartcrawl-breadcrumbs {
	color: var( --e-global-color-9465594 );
	font-weight: 400!important;
	font-size: 0.9em;
}

.smartcrawl-breadcrumbs a {
	color: var( --e-global-color-c5f1d48 );
}