/*
Theme Name: Future Energy Child
Author: 
Description: Your description goes here
Version: 1.0
Template: future-energy

This is the child theme for Future Energy theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/* Breder scherm voor test.enever.nl */

/* ===== Pagina-layout: content + sidebar ===== */

.page-wrapper {
    display: flex;
    justify-content: flex-start; /* content links, sidebar ernaast */
    align-items: flex-start;      /* bovenkanten gelijk uitlijnen */
    gap: 3rem;                    /* ruimte tussen content en sidebar */
    max-width: 1200px;            /* optioneel: centreren binnen bredere schermen */
    margin: 0 auto;               /* horizontaal centreren */
}

/* hoofd-inhoud links */
#primary.content-area {
    flex: 0 1 70%;    /* ongeveer 70% van de breedte */
    min-width: 0;     /* voorkomt overflow in flex */
}

/* sidebar rechts */
#secondary.sidebar.widget-area {
    flex: 0 0 320px;  /* vaste breedte, pas aan naar smaak */
    max-width: 320px;
    margin-top: 60px; /* duw de sidebar iets naar beneden zodat hij
                         optisch uitlijnt met "Huidige prijzen" */
}

/* Optioneel: wat styling voor de sidebar zelf */
#secondary.sidebar.widget-area .widget {
    background: rgba(0, 20, 40, 0.9); /* donkere achtergrond zoals site */
    padding: 12px 16px;
    border-radius: 4px;
}

/* Mobiel: onder elkaar tonen */
@media (max-width: 900px) {
    .page-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }

    #primary.content-area,
    #secondary.sidebar.widget-area {
        flex: 1 1 auto;
        max-width: 100%;
        margin-top: 0;  /* marge resetten op mobiel */
    }
}

.entry-content .warning-red,
.entry-content .warning-red strong,
.entry-content .warning-red a {
    color: #d36b2f !important;
}

/* ===== HAMBURGER KNOP ===== */
.menu-toggle {
    display: none;          /* standaard verborgen op desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
}

/* Drie streepjes */
.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #00ff00;  /* groene kleur passend bij je thema */
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Animatie naar × als menu open is */
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ===== MOBIEL LAYOUT ===== */
@media (max-width: 768px) {

    /* header container: logo links, hamburger rechts */
    .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 15px;
    }

    /* hamburger knop zichtbaar op mobiel */
    .menu-toggle {
        display: flex;
    }

    /* nav standaard verborgen op mobiel */
    .main-menu {
        display: none;
        width: 100%;             /* volledige breedte onder logo/hamburger */
        order: 3;                /* zet het menu onder logo en knop */
    }

    /* nav zichtbaar als is-active class aanwezig is */
    .main-menu.is-active {
        display: block;
    }

    /* menu-items verticaal */
    .main-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #0a1628; /* donkere achtergrond passend bij je thema */
    }

    .main-menu ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-menu ul li:last-child {
        border-bottom: none;
    }

    .main-menu ul li a {
        display: block;
        padding: 12px 20px;
        color: #ffffff;
        font-size: 1em;
        text-decoration: none;
    }

    .main-menu ul li a:hover {
        color: #00ff00;
        background: rgba(255, 255, 255, 0.05);
    }

    /* submenus op mobiel */
    .main-menu ul ul {
        padding-left: 15px;
        background: rgba(0, 0, 0, 0.2);
    }
}