/*
Theme Name:   GROW Flow
Theme URI:    https://sparklinesynergy.nl
Description:  GROW Flow Child Theme — gebouwd op Hello Elementor
Author:       Sparkline Synergy
Author URI:   https://sparklinesynergy.nl
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  growflow-theme
*/

/* ─── GROW Flow Design Tokens ─────────────────────────────────────── */
:root {
    --color-navy:       #1A2B4A;
    --color-navy-light: #253857;
    --color-orange:     #E8622A;
    --color-white:      #FFFFFF;
    --color-off-white:  #F8F9FA;
    --color-gray:       #64748B;
    --color-text-dark:  #1A1A2E;
    --color-green:      #2D7D5A;
}

/* ─── Base ─────────────────────────────────────────────────────────── */
body {
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-off-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-navy);
    font-weight: 700;
}

/* ─── Links ─────────────────────────────────────────────────────────── */
/* De :not() zorgt ervoor dat links binnen een Elementor-element of menu hun eigen styling behouden */
a:not([class*="elementor"]):not([class*="hfe"]):not([class*="uae"]):not([class*="menu"]) {
    color: var(--color-orange);
    text-decoration: none;
}

a:not([class*="elementor"]):not([class*="hfe"]):not([class*="uae"]):not([class*="menu"]):hover {
    color: var(--color-navy);
}
/* ─── Buttons ───────────────────────────────────────────────────────── */
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"] {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.elementor-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
}

/* ─── Header & Footer ──────────────────────────────────────────────── */
/* We voegen extra klassen toe zodat de achtergrond wél pakt, welke plugin je ook gebruikt */
.site-header,
.elementor-location-header,
header[class*="header"],
div[class*="uae-header"], 
div[class*="hfe-header"]  
{
    background-color: var(--color-navy) !important;
    color: var(--color-white);
}

.site-footer,
.elementor-location-footer,
footer[class*="footer"],
div[class*="uae-footer"],
div[class*="hfe-footer"] 
{
    background-color: var(--color-navy);
    color: var(--color-white);
}

/* ─── Callout / Highlight vlakken ──────────────────────────────────── */
.callout,
.highlight-block {
    background-color: var(--color-navy-light);
    color: var(--color-white);
    padding: 2rem;
    border-radius: 6px;
}

/* ─── Subtekst & bijschriften ───────────────────────────────────────── */
.subtext,
figcaption,
.wp-caption-text,
small {
    color: var(--color-gray);
}

/* ─── Checkmarks / positieve uitkomsten ────────────────────────────── */
.check-icon,
.positive-outcome::before {
    color: var(--color-green);
}
/* CF7 Submit Button – GROW Flow oranje */
.wpcf7-submit,
.wpcf7 input[type="submit"],
form.wpcf7-form input[type="submit"] {
    background-color: #E8622A !important;
    color: #F8F9FA !important;
    border: none;
    border-radius: 20px;
    padding: 12px 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover,
form.wpcf7-form input[type="submit"]:hover {
    background-color: #E8622A !important;
    color: #1A2B4A !important;
	border-radius: 20px;
}

.menu-separator {
  pointer-events: none; /* niet klikbaar */
  color: transparent;   /* verberg eventuele tekst */
}

.menu-separator > a {
  font-size: 0;        /* verbergt de tekst volledig, ongeacht wat erin staat */
  color: transparent;
  padding-top: 6px;
  padding-bottom: 6px;
  display: block 
  box-sizing: border-box
}

.menu-separator > a::before {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background-color: var(--color-off-white); 
  /* margin: 0 auto; */
  
}