/*
 Theme Name: Astra Child JaFa Verhuur
 Theme URI: https://jafaverhuur.nl/
 Description: Child theme voor JaFa Verhuur op basis van Astra, met feestelijke header, hero en knop-stijlen.
 Author: Melvin Bakker
 Template: astra
 Version: 1.0.0
*/

/* ===== BASIS OPMAAK JAFA VERHUUR ===== */

/* Achtergrond & tekst */
body {
    background: #FFF8EC;
    color: #333333;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    color: #0C3C78;
    font-weight: 700;
}

/* Iets meer lucht rond Elementor-secties */
.elementor-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Links algemeen */
a {
    color: #0C3C78;
}

a:hover {
    color: #E53935;
}


/* ===== HEADER ASTRA – FEESTELIJKE GRADIENT ===== */

.main-header-bar {
    background: linear-gradient(90deg, #0C3C78 0%, #E53935 50%, #FFB300 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border-bottom: none;
}

.site-branding img {
    max-height: 54px;
}

/* Menu desktop */
.main-header-menu .menu-link,
.main-header-menu>.menu-item>a {
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
}

.main-header-menu .menu-link:hover,
.main-header-menu>.menu-item.current-menu-item>a {
    color: #FFE082;
}

/* Social iconen in header */
.main-header-menu .menu-item a .ast-icon {
    color: #ffffff;
}

.main-header-menu .menu-item a:hover .ast-icon {
    color: #FFE082;
}

/* Mobiel menu */
.ast-header-break-point .main-header-bar {
    background: linear-gradient(90deg, #0C3C78 0%, #E53935 50%, #FFB300 100%);
}

.ast-header-break-point .main-header-bar-navigation .menu-link {
    color: #ffffff;
}


/* ===== HERO-SECTIE (BALLONNEN) ===== */
/* Geef je hero-sectie in Elementor de CSS klasse: jafa-hero */

.jafa-hero {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
}

/* Titel & tekst in hero */
.jafa-hero .elementor-heading-title {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.jafa-hero .elementor-widget-text-editor,
.jafa-hero .elementor-widget-text-editor p {
    color: #FFF7F2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Wave-shape netjes gecentreerd – geef de hero-sectie ook klasse: jafa-wave als je een shape gebruikt */
.jafa-wave .elementor-shape-bottom svg {
    width: 200%;
    left: 50%;
    transform: translateX(-50%);
}

/* Eventuele divider in hero: geef die widget de klasse jafa-hero-divider */
.jafa-hero-divider {
    height: 4px;
    max-width: 360px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFB300, #E53935, #FFFFFF);
    margin: 18px 0 22px;
}


/* ===== KNOPPEN ===== */
/* In Elementor bij Geavanceerd → CSS-klassen invullen:
   - jafa-btn-primary
   - jafa-btn-ghost
   - jafa-btn-light
*/

/* Primaire knop – rood */
.jafa-btn-primary .elementor-button {
    background: #E53935 !important;
    color: #ffffff !important;
    border-radius: 999px;
    border: none;
    padding: 10px 26px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.jafa-btn-primary .elementor-button:hover {
    background: #0C3C78 !important;
    color: #ffffff !important;
}

/* Secundaire knop – transparant met witte rand (voor op hero) */
.jafa-btn-ghost .elementor-button {
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 10px 26px;
    font-weight: 600;
}

.jafa-btn-ghost .elementor-button:hover {
    background: #ffffff !important;
    color: #0C3C78 !important;
}

/* Knoppen op lichte achtergrond (bijv. CTA onderaan pagina) */
.jafa-btn-light .elementor-button {
    background: #0C3C78 !important;
    color: #ffffff !important;
    border-radius: 999px;
    border: none;
    padding: 10px 24px;
    font-weight: 600;
}

.jafa-btn-light .elementor-button:hover {
    background: #E53935 !important;
}


/* ===== CTA-BALK ===== */
/* Geef de hele CTA-sectie de klasse: jafa-cta-bar */

.jafa-cta-bar {
    background: linear-gradient(90deg, #FFB300, #E53935);
    color: #ffffff;
    border-radius: 18px;
    padding: 22px 28px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.jafa-cta-bar h2,
.jafa-cta-bar .elementor-heading-title {
    color: #ffffff;
}


/* ===== SECTIES & KAARTEN ERONDER (VOOR POPPEN) ===== */

/* Lichte achtergrondsectie → geef sectie in Elementor klasse: jafa-section-light */
.jafa-section-light {
    background: #FFFDF8;
}

/* Kaart-stijl voor losse poppen → geef kolom of inner section de klasse: jafa-card */
.jafa-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.jafa-card img {
    border-radius: 12px;
    margin-bottom: 10px;
}


/* ===== INFO-BLOK ONDER BOEKINGSFORMULIER (RnB) ===== */
.jafa-rental-info {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    background: #FFFDF8;
    line-height: 1.4;
}

.jafa-rental-info strong {
    display: block;
    margin-bottom: 6px;
}

.jafa-rental-info em {
    display: block;
    margin-top: 6px;
    opacity: .85;
}
/* Info-blok onder boekingsformulier iets strakker */
.jafa-rental-info {
    font-size: 14px;
    color: #1f2937;
}

.jafa-rental-info strong {
    font-size: 15px;
}
/* Verberg locatie-kosten regels (want nacalculatie) */
.rnb-costs-wrap .pickup-cost,
.rnb-costs-wrap .return-cost,
.rnb-costs-wrap .pickup_location_cost,
.rnb-costs-wrap .return_location_cost,
.rnb-costs-wrap .rnb-pickup-cost,
.rnb-costs-wrap .rnb-return-cost {
    display: none !important;
}