/*
Theme Name: Moorstuinen Child
Theme URI: https://www.moorstuinen.nl/
Description: Child theme voor Moorstuinen op basis van Blocksy.
Author: Moorstuinen
Template: blocksy
Version: 1.0.0
Text Domain: moorstuinen-child
*/

/* =========================================================
   MOORSTUINEN HEADER - TWEE HOOFDMENU'S
   ========================================================= */

/* Menu 1 - Tuinen */
[data-id="menu"] {
    background: #9aa24a;
}

/* Menu 2 - Solitaire bijen */
[data-id="menu_2"] {
    background: #e69532;
}

/* Beide menu's */
[data-id="menu"],
[data-id="menu_2"] {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 28px;
}

/* Menu tekst */
[data-id="menu"] a,
[data-id="menu_2"] a {
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Hover */
[data-id="menu"] a:hover,
[data-id="menu_2"] a:hover {
    opacity: 0.8;
}

/* =========================================================
   MOORSTUINEN - BIJEN MENU CORRECTE BLOCKSY SELECTOR
   ========================================================= */

[data-id="menu-secondary"] {
    background: #e69532;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 28px;
}

[data-id="menu-secondary"] a {
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[data-id="menu-secondary"] a:hover {
    opacity: 0.8;
}

/* =========================================================
   MOORSTUINEN - BREDE 50/50 MENU BALK
   ========================================================= */

/* onderste header rij */
#header [data-row="bottom"] .ct-container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* linker en rechter zone ieder 50% */
#header [data-row="bottom"] [data-column="start"],
#header [data-row="bottom"] [data-column="end"] {
    width: 50%;
    flex: 0 0 50%;
}

/* beide menu containers vullen hun halve breedte */
#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    width: 100%;
    min-height: 64px;
    padding: 0;
    justify-content: center;
}

/* hoofdmenu-item ook volledig centreren */
#header [data-row="bottom"] [data-id="menu"] > ul,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul {
    width: 100%;
    justify-content: center;
}

/* menu links */
#header [data-row="bottom"] [data-id="menu"] > ul > li,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li {
    width: 100%;
}

#header [data-row="bottom"] [data-id="menu"] > ul > li > a,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    justify-content: center;
    width: 100%;
    min-height: 64px;
}

/* =========================================================
   MOORSTUINEN - BOTTOM ROW ECHT 50/50
   ========================================================= */

#header [data-row="bottom"] .ct-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}

/* Middenkolom niet gebruiken */
#header [data-row="bottom"] [data-column="middle"] {
    display: none !important;
}

/* Linker- en rechterhelft */
#header [data-row="bottom"] [data-column="start"],
#header [data-row="bottom"] [data-column="end"] {
    width: 100% !important;
    max-width: none !important;
}

/* Menu vult zijn volledige helft */
#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Geen ruimte tussen beide helften */
#header [data-row="bottom"] [data-column="start"] {
    grid-column: 1;
}

#header [data-row="bottom"] [data-column="end"] {
    grid-column: 2;
}

/* Moorstuinen hoofdmenu - grotere typografie */
#header [data-row="bottom"] [data-id="menu"] > ul > li > a,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Definitieve Moorstuinen kleur - Solitaire Bijen */
#header [data-row="bottom"] [data-id="menu-secondary"] {
    background: #ffa200 !important;
}

/* =========================================================
   MOORSTUINEN DEFINITIEVE HUISSTIJLKLEUREN
   Tuinen:          #9fa614
   Solitaire bijen: #ffa200
   ========================================================= */

#header [data-row="bottom"] [data-id="menu"] {
    background: #9fa614 !important;
}

#header [data-row="bottom"] [data-id="menu-secondary"] {
    background: #ffa200 !important;
}

/* =========================================================
   MOORSTUINEN HOOFDMENU - ORIGINELE VERHOUDINGEN
   ========================================================= */

#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    min-height: 89px !important;
}

/* TUINEN */
#header [data-row="bottom"] [data-id="menu"] > ul > li > a {
    min-height: 89px !important;
    font-size: 30px !important;
    line-height: 89px !important;
    font-weight: 400 !important;
    color: #fff !important;
}

/* SOLITAIRE BIJEN */
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    min-height: 89px !important;
    font-size: 30px !important;
    line-height: 89px !important;
    font-weight: 400 !important;
    color: #fff !important;
}

/* =========================================================
   MOORSTUINEN - VASTE WEBSITEBREEDTE
   ========================================================= */

:root {
    --moorstuinen-width: 1280px;
}

/* Header inhoud */
#header [data-row="middle"] .ct-container,
#header [data-row="bottom"] .ct-container {
    max-width: var(--moorstuinen-width) !important;
    width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Bottom menu blijft 50/50 binnen de container */
#header [data-row="bottom"] .ct-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Homepage inhoud dezelfde maximale breedte */
.home .site-main .entry-content {
    max-width: var(--moorstuinen-width);
    margin-left: auto;
    margin-right: auto;
}

/* Full-width Gutenberg blokken op homepage begrenzen */
.home .entry-content > .alignfull {
    width: 100% !important;
    max-width: var(--moorstuinen-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   MOORSTUINEN - COMPACTERE HOOFDMENUBALK
   ========================================================= */

#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    min-height: 65px !important;
}

#header [data-row="bottom"] [data-id="menu"] > ul > li > a,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    min-height: 65px !important;
    height: 65px !important;
    line-height: 65px !important;
    font-size: 26px !important;
}

/* =========================================================
   MOORSTUINEN - COMPACTERE HOOFDMENUBALK
   ========================================================= */

#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    min-height: 65px !important;
}

#header [data-row="bottom"] [data-id="menu"] > ul > li > a,
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    min-height: 65px !important;
    height: 65px !important;
    line-height: 65px !important;
    font-size: 26px !important;
}

/* Scheidingslijn tussen Tuinen en Solitaire Bijen */
#header [data-row="bottom"] [data-id="menu-secondary"] {
    border-left: 2px solid #ffffff !important;
}

/* Scheidingslijn tussen Tuinen en Solitaire Bijen */
#header [data-row="bottom"] [data-id="menu-secondary"] {
    border-left: 2px solid #ffffff !important;
}

/* =========================================================
   MOORSTUINEN - HOMEPAGE KEUZEBLOKKEN
   ========================================================= */

.moors-card-tuinen,
.moors-card-bijen {
    overflow: hidden;
    margin: 0 !important;
}

/* Afbeeldingen exact dezelfde hoogte */
.moors-card-tuinen img,
.moors-card-bijen img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

/* Geen ongewenste ruimte rond afbeelding */
.moors-card-tuinen figure,
.moors-card-bijen figure {
    margin: 0 !important;
}

/* Titelbalk */
.moors-card-tuinen h2,
.moors-card-bijen h2 {
    margin: 0 !important;
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    color: #fff !important;
    font-size: 26px;
    font-weight: 400;
    text-transform: uppercase;
}

/* Tuinen */
.moors-card-tuinen h2 {
    background: #9fa614;
}

/* Solitaire bijen */
.moors-card-bijen h2 {
    background: #ffa200;
}

/* Subtiele beweging op de foto */
.moors-card-tuinen img,
.moors-card-bijen img {
    transition: transform .35s ease;
}

.moors-card-tuinen:hover img,
.moors-card-bijen:hover img {
    transform: scale(1.025);
}

/* Mobiel */
@media (max-width: 767px) {
    .moors-card-tuinen img,
    .moors-card-bijen img {
        height: 260px;
    }

    .moors-card-tuinen h2,
    .moors-card-bijen h2 {
        min-height: 60px;
        font-size: 22px;
        padding: 0 20px;
    }
}

/* =========================================================
   MOORSTUINEN - KAARTEN ONDER HERO
   ========================================================= */

.moors-card-tuinen,
.moors-card-bijen {
    overflow: hidden;
    margin: 0 !important;
}

/* Foto's gelijk houden */
.moors-card-tuinen figure,
.moors-card-bijen figure {
    margin: 0 !important;
}

.moors-card-tuinen img,
.moors-card-bijen img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
}

/* Titelbalken */
.moors-card-tuinen h2,
.moors-card-bijen h2 {
    margin: 0 !important;
    min-height: 65px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Tuinen */
.moors-card-tuinen h2 {
    background: #9fa614;
}

/* Solitaire bijen */
.moors-card-bijen h2 {
    background: #ffa200;
}

/* Foto subtiel laten bewegen bij hover */
.moors-card-tuinen img,
.moors-card-bijen img {
    transition: transform .35s ease;
}

.moors-card-tuinen:hover img,
.moors-card-bijen:hover img {
    transform: scale(1.025);
}

/* Mobiel */
@media (max-width: 767px) {

    .moors-card-tuinen img,
    .moors-card-bijen img {
        height: 250px;
    }

    .moors-card-tuinen h2,
    .moors-card-bijen h2 {
        min-height: 58px;
        font-size: 21px !important;
        padding: 0 20px;
    }
}

/* =========================================================
   MOORS - TWEE HOMEPAGE KAARTEN DEFINITIEF
   ========================================================= */

/* Foto's */
figure.moors-card-tuinen,
figure.moors-card-bijen {
    margin: 0 !important;
    overflow: hidden;
}

figure.moors-card-tuinen img,
figure.moors-card-bijen img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
}

/* Titelbalken */
.moors-title-tuinen,
.moors-title-bijen {
    margin: 0 !important;
    min-height: 65px;
    padding: 0 28px !important;
    display: flex;
    align-items: center;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Tuinen */
.moors-title-tuinen {
    background-color: #9fa614 !important;
}

/* Solitaire bijen */
.moors-title-bijen {
    background-color: #ffa200 !important;
}

/* =========================================================
   MOORS - HOMEPAGE TWEE KEUZEBLOKKEN
   ========================================================= */

.moors-home-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    width: 100%;
    margin-top: 22px;
}

.moors-home-card {
    display: block;
    text-decoration: none !important;
    overflow: hidden;
}

.moors-home-card__image {
    height: 330px;
    overflow: hidden;
}

.moors-home-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.moors-home-card:hover .moors-home-card__image img {
    transform: scale(1.025);
}

.moors-home-card__title {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    text-transform: uppercase;
}

.moors-home-card--tuinen .moors-home-card__title {
    background: #9fa614;
}

.moors-home-card--bijen .moors-home-card__title {
    background: #ffa200;
}

@media (max-width: 767px) {
    .moors-home-cards {
        grid-template-columns: 1fr;
    }

    .moors-home-card__image {
        height: 260px;
    }

    .moors-home-card__title {
        height: 58px;
        font-size: 22px;
        padding: 0 20px;
    }
}

/* =========================================================
   MOORS - HOMEPAGE TWEE KEUZEBLOKKEN
   ========================================================= */

.moors-home-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    width: 100%;
    margin-top: 22px;
}

.moors-home-card {
    display: block;
    text-decoration: none !important;
    overflow: hidden;
}

.moors-home-card__image {
    height: 330px;
    overflow: hidden;
}

.moors-home-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.moors-home-card:hover .moors-home-card__image img {
    transform: scale(1.025);
}

.moors-home-card__title {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    text-transform: uppercase;
}

.moors-home-card--tuinen .moors-home-card__title {
    background: #9fa614;
}

.moors-home-card--bijen .moors-home-card__title {
    background: #ffa200;
}

@media (max-width: 767px) {
    .moors-home-cards {
        grid-template-columns: 1fr;
    }

    .moors-home-card__image {
        height: 260px;
    }

    .moors-home-card__title {
        height: 58px;
        font-size: 22px;
        padding: 0 20px;
    }
}

/* =========================================================
   MOORS HOMEPAGE BASIS
   ========================================================= */

.home .entry-content {
    max-width: 1280px;
    margin: 0 auto;
}

/* HERO */
.moors-hero {
    margin: 0;
    min-height: 520px;
    overflow: hidden;
}

.moors-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TWEE HOOFDKAARTEN */
.moors-home-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.moors-home-card {
    overflow: hidden;
}

.moors-home-card figure {
    margin: 0 !important;
}

.moors-home-card img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
}

.moors-home-card-title {
    min-height: 65px;
    margin: 0 !important;
    padding: 0 28px !important;
    display: flex;
    align-items: center;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

.moors-home-card--tuinen .moors-home-card-title {
    background: #9fa614;
}

.moors-home-card--bijen .moors-home-card-title {
    background: #ffa200;
}

/* OVER MOORS */
.moors-about {
    margin-top: 60px;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* CONTACT CTA */
.moors-contact {
    margin-top: 40px;
    margin-bottom: 70px;
    text-align: center;
}

/* MOBIEL */
@media (max-width: 767px) {

    .home .entry-content {
        width: calc(100% - 30px);
    }

    .moors-hero {
        min-height: 360px;
    }

    .moors-home-cards {
        grid-template-columns: 1fr;
    }

    .moors-home-card img {
        height: 250px;
    }

    .moors-home-card-title {
        min-height: 58px;
        font-size: 21px !important;
        padding: 0 20px !important;
    }

    .moors-about {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/* MOORS - TITELBALKEN ONDER HOMEPAGE FOTO'S */

h2.moors-title-tuinen,
h2.moors-title-bijen {
    margin: 0 !important;
    height: 65px;
    padding: 0 28px !important;
    display: flex;
    align-items: center;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

h2.moors-title-tuinen {
    background-color: #9fa614 !important;
}

h2.moors-title-bijen {
    background-color: #ffa200 !important;
}

/* =========================================================
   MOORS - RUSTIGE HOOFDNAVIGATIE
   ========================================================= */

/* Geen grote gekleurde menu-vlakken */
#header [data-id="menu"] ,
#header [data-id="menu-secondary"] {
    background: transparent !important;
}

/* Beide menuhelften wit */
#header [data-row="bottom"] {
    background: #ffffff !important;
}

#header [data-row="bottom"] > div,
#header [data-row="bottom"] .ct-container {
    background: #ffffff !important;
}

/* TUINEN */
#header [data-id="menu"] .ct-menu-link {
    background: transparent !important;
    color: #9fa614 !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* SOLITAIRE BIJEN */
#header [data-id="menu-secondary"] .ct-menu-link {
    background: transparent !important;
    color: #ffa200 !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Pijltjes dezelfde kleur */
#header [data-id="menu"] .ct-toggle-dropdown-desktop svg {
    fill: #9fa614 !important;
}

#header [data-id="menu-secondary"] .ct-toggle-dropdown-desktop svg {
    fill: #ffa200 !important;
}

/* Menu minder hoog */
#header [data-row="bottom"] {
    min-height: 68px !important;
}

/* Subtiele hover */
#header [data-id="menu"] > ul > li > a,
#header [data-id="menu-secondary"] > ul > li > a {
    position: relative;
}

#header [data-id="menu"] > ul > li > a::after,
#header [data-id="menu-secondary"] > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    transform: scaleX(0);
    transition: transform .2s ease;
}

#header [data-id="menu"] > ul > li > a::after {
    background: #9fa614;
}

#header [data-id="menu-secondary"] > ul > li > a::after {
    background: #ffa200;
}

#header [data-id="menu"] > ul > li:hover > a::after,
#header [data-id="menu-secondary"] > ul > li:hover > a::after {
    transform: scaleX(1);
}

/* =========================================================
   MOORS - RUSTIGE HOOFDNAVIGATIE
   ========================================================= */

/* Geen grote gekleurde menu-vlakken */
#header [data-id="menu"] ,
#header [data-id="menu-secondary"] {
    background: transparent !important;
}

/* Beide menuhelften wit */
#header [data-row="bottom"] {
    background: #ffffff !important;
}

#header [data-row="bottom"] > div,
#header [data-row="bottom"] .ct-container {
    background: #ffffff !important;
}

/* TUINEN */
#header [data-id="menu"] .ct-menu-link {
    background: transparent !important;
    color: #9fa614 !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* SOLITAIRE BIJEN */
#header [data-id="menu-secondary"] .ct-menu-link {
    background: transparent !important;
    color: #ffa200 !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Pijltjes dezelfde kleur */
#header [data-id="menu"] .ct-toggle-dropdown-desktop svg {
    fill: #9fa614 !important;
}

#header [data-id="menu-secondary"] .ct-toggle-dropdown-desktop svg {
    fill: #ffa200 !important;
}

/* Menu minder hoog */
#header [data-row="bottom"] {
    min-height: 68px !important;
}

/* Subtiele hover */
#header [data-id="menu"] > ul > li > a,
#header [data-id="menu-secondary"] > ul > li > a {
    position: relative;
}

#header [data-id="menu"] > ul > li > a::after,
#header [data-id="menu-secondary"] > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    transform: scaleX(0);
    transition: transform .2s ease;
}

#header [data-id="menu"] > ul > li > a::after {
    background: #9fa614;
}

#header [data-id="menu-secondary"] > ul > li > a::after {
    background: #ffa200;
}

#header [data-id="menu"] > ul > li:hover > a::after,
#header [data-id="menu-secondary"] > ul > li:hover > a::after {
    transform: scaleX(1);
}

/* =========================================================
   MOORS NAVIGATIE - DEFINITIEF RUSTIG
   ========================================================= */

/* Alle achtergrondkleuren van de onderste header weg */
#header [data-row="bottom"],
#header [data-row="bottom"] .ct-container,
#header [data-row="bottom"] [data-column],
#header [data-row="bottom"] [data-items],
#header [data-row="bottom"] nav,
#header [data-row="bottom"] ul.menu,
#header [data-row="bottom"] ul.menu > li,
#header [data-row="bottom"] ul.menu > li > a {
    background: transparent !important;
    background-color: transparent !important;
}

/* Witte basis */
#header [data-row="bottom"] {
    background: #fff !important;
}

/* Menu minder hoog */
#header [data-row="bottom"] .ct-container {
    min-height: 64px !important;
}

/* TUINEN */
#header #header-menu-1 > ul > li > a {
    color: #9fa614 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
}

/* SOLITAIRE BIJEN */
#header #header-menu-2 > ul > li > a {
    color: #ffa200 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
}

/* Dropdowns WEL een achtergrond geven */
#header [data-row="bottom"] .sub-menu {
    background: #fff !important;
    padding: 10px 0 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.10);
}

/* Tuinen dropdown */
#header #header-menu-1 .sub-menu a {
    color: #596168 !important;
    background: #fff !important;
    font-size: 16px !important;
}

/* Bijen dropdown */
#header #header-menu-2 .sub-menu a {
    color: #596168 !important;
    background: #fff !important;
    font-size: 16px !important;
}

/* =========================================================
   MOORS HEADER MENU - DEFINITIEVE RESET
   ========================================================= */

/* Onderste rij volledig wit */
#header [data-row="bottom"],
#header [data-row="bottom"] .ct-container,
#header [data-row="bottom"] [data-column="start"],
#header [data-row="bottom"] [data-column="middle"],
#header [data-row="bottom"] [data-column="end"],
#header [data-row="bottom"] [data-items="primary"],
#header [data-row="bottom"] [data-items="secondary"],
#header [data-row="bottom"] nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Oude 50/50 kleurblokken neutraliseren */
#header [data-row="bottom"] [data-id="menu"],
#header [data-row="bottom"] [data-id="menu-secondary"] {
    background: none !important;
    background-color: transparent !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Menu's zichtbaar houden */
#header [data-row="bottom"] ul.menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* TUINEN */
#header [data-row="bottom"] [data-id="menu"] > ul > li > a {
    color: #9fa614 !important;
    background: transparent !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    height: 56px !important;
    min-height: 56px !important;
}

/* SOLITAIRE BIJEN */
#header [data-row="bottom"] [data-id="menu-secondary"] > ul > li > a {
    color: #ffa200 !important;
    background: transparent !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    height: 56px !important;
    min-height: 56px !important;
}

/* Pijltjes */
#header [data-row="bottom"] [data-id="menu"] svg {
    fill: #9fa614 !important;
}

#header [data-row="bottom"] [data-id="menu-secondary"] svg {
    fill: #ffa200 !important;
}

/* Dropdowns */
#header [data-row="bottom"] .sub-menu {
    background: #ffffff !important;
}

/* TUINEN - groene H2 */
body.moors-tuinen h2 {
    color: #9fa614 !important;
}

/* SOLITAIRE BIJEN - oranje H2 */
body.moors-bijen h2 {
    color: #ffa200 !important;
}

/* =========================================================
   MOORS - TUINEN HOMEPAGE
   ========================================================= */

.moors-subhero {
    margin-bottom: 0 !important;
}

.moors-subhero h1 {
    color: #fff !important;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    margin-bottom: 12px;
}

.moors-subhero p {
    color: #fff;
    max-width: 650px;
}

.moors-section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.moors-section h2 {
    margin-bottom: 24px;
}

.moors-section > p {
    max-width: 850px;
    font-size: 18px;
    line-height: 1.7;
}

.moors-services {
    margin-top: 45px;
    gap: 24px;
}

.moors-service-card {
    height: 100%;
    padding: 32px;
    background: #f6f6f2;
    border-top: 4px solid #9fa614;
}

.moors-service-card h3 {
    margin-top: 0;
    font-size: 24px;
}

.moors-service-card a {
    color: #9fa614;
    font-weight: 600;
    text-decoration: none;
}

.moors-section-soft {
    background: #f6f6f2;
    padding-left: 45px;
    padding-right: 45px;
}

.moors-section-soft img {
    width: 100%;
    min-height: 360px;
    object-fit: cover;
}

.moors-contact-block {
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.moors-contact-block p {
    margin-left: auto;
    margin-right: auto;
}

.moors-contact-block .wp-block-buttons {
    justify-content: center;
    margin-top: 28px;
}

.moors-button-tuinen .wp-block-button__link {
    background: #9fa614 !important;
    color: #fff !important;
    padding: 15px 28px;
    border-radius: 0;
}

.moors-button-tuinen .wp-block-button__link:hover {
    opacity: .88;
}

@media (max-width: 767px) {
    .moors-section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .moors-section-soft {
        padding-left: 22px;
        padding-right: 22px;
    }

    .moors-subhero {
        min-height: 380px !important;
    }
}

/* =========================================================
   MOORS TUINEN - BEWERKBARE HERO
   ========================================================= */

.moors-subhero {
    position: relative;
    min-height: 500px;
    padding: 0 !important;
    overflow: hidden;
}

.moors-subhero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.moors-subhero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* donkere laag voor leesbaarheid */
.moors-subhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1;
    pointer-events: none;
}

.moors-subhero-content {
    position: relative;
    z-index: 2;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px !important;
}

.moors-subhero-content h1 {
    color: #fff !important;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.moors-subhero-content p {
    color: #fff !important;
    max-width: 680px;
    margin: 0;
}

/* gewone Blocksy paginatitel op Tuinen verbergen */
body.page-id-30 .hero-section {
    display: none !important;
}

@media (max-width: 767px) {
    .moors-subhero,
    .moors-subhero-content {
        min-height: 380px;
    }

    .moors-subhero-content {
        padding: 28px !important;
    }
}

/* =========================================================
   MOORS - SOLITAIRE BIJEN
   ========================================================= */

body.moors-bijen h2 {
    color: #ffa200 !important;
}

.moors-service-card-bijen {
    border-top-color: #ffa200 !important;
}

.moors-service-card-bijen a {
    color: #ffa200 !important;
}

.moors-button-bijen .wp-block-button__link {
    background: #ffa200 !important;
    color: #fff !important;
    padding: 15px 28px;
    border-radius: 0;
}

.moors-button-bijen .wp-block-button__link:hover {
    opacity: .88;
}

/* standaard Blocksy paginatitel op Bijen verbergen */
body.page-id-32 .hero-section {
    display: none !important;
}

/* =========================================================
   MOORS - DEFINITIEVE HOOFDNAVIGATIE
   ========================================================= */

#header .menu > li > a {
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0;
}

/* Tuinen */
#header .menu > li:nth-child(1) > a {
    color: #9fa614 !important;
}

/* Solitaire Bijen */
#header .menu > li:nth-child(2) > a {
    color: #ffa200 !important;
}

/* Over ons + Contact */
#header .menu > li:nth-child(3) > a,
#header .menu > li:nth-child(4) > a {
    color: #26384a !important;
}

/* wat meer ruimte tussen menu-items */
#header .menu > li {
    margin-right: 8px;
}

/* dropdowns */
#header .sub-menu a {
    font-size: 16px !important;
    font-weight: 400 !important;
}


/* =========================================================
   MOORS - MENU KLEUREN DEFINITIEF
   ========================================================= */

/* Standaard menu donker */
#header .menu > li > a {
    color: #26384a !important;
}

/* Tuinen */
#header .menu > li > a[href*="/home-tuinen/"] {
    color: #9fa614 !important;
}

/* Solitaire Bijen */
#header .menu > li > a[href*="/home-bijen/"] {
    color: #ffa200 !important;
}

/* Pijltje Tuinen */
#header .menu > li > a[href*="/home-tuinen/"] svg {
    fill: #9fa614 !important;
}

/* Pijltje Solitaire Bijen */
#header .menu > li > a[href*="/home-bijen/"] svg {
    fill: #ffa200 !important;
}

/* =========================================================
   MOORS - MENU KLEUREN DEFINITIEF
   ========================================================= */

/* Standaard menu donker */
#header .menu > li > a {
    color: #26384a !important;
}

/* Tuinen */
#header .menu > li > a[href*="/home-tuinen/"] {
    color: #9fa614 !important;
}

/* Solitaire Bijen */
#header .menu > li > a[href*="/home-bijen/"] {
    color: #ffa200 !important;
}

/* Pijltje Tuinen */
#header .menu > li > a[href*="/home-tuinen/"] svg {
    fill: #9fa614 !important;
}

/* Pijltje Solitaire Bijen */
#header .menu > li > a[href*="/home-bijen/"] svg {
    fill: #ffa200 !important;
}

/* =========================================================
   MOORS - EXACTE KLEUREN HOOFDMENU
   ========================================================= */

/* Tuinen */
#menu-item-91 > a.ct-menu-link {
    color: #9fa614 !important;
}

/* Solitaire Bijen */
#menu-item-92 > a.ct-menu-link {
    color: #ffa200 !important;
}

/* Pijltjes */
#menu-item-91 > a.ct-menu-link svg {
    fill: #9fa614 !important;
}

#menu-item-92 > a.ct-menu-link svg {
    fill: #ffa200 !important;
}

/* Over ons / Contact neutraal */
#header .menu > li:not(#menu-item-91):not(#menu-item-92) > a.ct-menu-link {
    color: #26384a !important;
}

/* Solitaire Bijen - ook actief altijd oranje */
#header #menu-item-92 > a.ct-menu-link,
#header #menu-item-92.current-menu-item > a.ct-menu-link,
#header #menu-item-92.current_page_item > a.ct-menu-link {
    color: #ffa200 !important;
}

/* Tuinen altijd groen */
#header #menu-item-91 > a.ct-menu-link,
#header #menu-item-91.current-menu-item > a.ct-menu-link,
#header #menu-item-91.current_page_item > a.ct-menu-link {
    color: #9fa614 !important;
}


/* =========================================================
   MOORS - MENU KLEUREN ACTIEVE PAGINA
   ========================================================= */

/* Solitaire Bijen altijd oranje */
#header #menu-item-92 > a.ct-menu-link,
#header #menu-item-92.current-menu-item > a.ct-menu-link,
#header #menu-item-92.current_page_item > a.ct-menu-link {
    color: #ffa200 !important;
}

/* Solitaire Bijen pijltje */
#header #menu-item-92 > a.ct-menu-link svg {
    fill: #ffa200 !important;
}

/* Tuinen altijd groen */
#header #menu-item-91 > a.ct-menu-link,
#header #menu-item-91.current-menu-item > a.ct-menu-link,
#header #menu-item-91.current_page_item > a.ct-menu-link {
    color: #9fa614 !important;
}

/* Tuinen pijltje */
#header #menu-item-91 > a.ct-menu-link svg {
    fill: #9fa614 !important;
}


/* =========================================================
   MOORS - DEFINITIEVE MENU KLEUREN
   ========================================================= */

/* TUINEN */
#header #menu-item-35 > a.ct-menu-link,
#header #menu-item-35.current-menu-item > a.ct-menu-link,
#header #menu-item-35.current_page_item > a.ct-menu-link {
    color: #9fa614 !important;
}

#header #menu-item-35 > a.ct-menu-link svg {
    fill: #9fa614 !important;
}

/* SOLITAIRE BIJEN */
#header #menu-item-92 > a.ct-menu-link,
#header #menu-item-92.current-menu-item > a.ct-menu-link,
#header #menu-item-92.current_page_item > a.ct-menu-link {
    color: #ffa200 !important;
}

#header #menu-item-92 > a.ct-menu-link svg {
    fill: #ffa200 !important;
}


/* =========================================================
   MOORS - DEFINITIEVE MENU KLEUREN
   ========================================================= */

/* TUINEN */
#header #menu-item-35 > a.ct-menu-link,
#header #menu-item-35.current-menu-item > a.ct-menu-link,
#header #menu-item-35.current_page_item > a.ct-menu-link {
    color: #9fa614 !important;
}

#header #menu-item-35 > a.ct-menu-link svg {
    fill: #9fa614 !important;
}

/* SOLITAIRE BIJEN */
#header #menu-item-92 > a.ct-menu-link,
#header #menu-item-92.current-menu-item > a.ct-menu-link,
#header #menu-item-92.current_page_item > a.ct-menu-link {
    color: #ffa200 !important;
}

#header #menu-item-92 > a.ct-menu-link svg {
    fill: #ffa200 !important;
}


/* =========================================================
   MOORS - TUINEN HARD OVERRIDE
   ========================================================= */

#header #menu-item-35,
#header #menu-item-35 > a,
#header #menu-item-35 > a.ct-menu-link,
#header #menu-item-35 > a.ct-menu-link span,
#header #menu-item-35 > a.ct-menu-link svg,
#header #menu-item-35 > a.ct-menu-link svg path {
    color: #9fa614 !important;
    fill: #9fa614 !important;
    --theme-link-initial-color: #9fa614 !important;
    --theme-link-hover-color: #9fa614 !important;
}


/* =========================================================
   MOORS - HOOFDMENU KLEUREN HARD GEFORCEERD
   ========================================================= */

/* TUINEN */
#header-menu-1 #menu-item-35 > a.ct-menu-link,
#header-menu-1 #menu-item-35 > a.ct-menu-link:hover,
#header-menu-1 #menu-item-35.ct-active > a.ct-menu-link {
    color: #9fa614 !important;
    --theme-link-initial-color: #9fa614 !important;
    --theme-link-hover-color: #9fa614 !important;
}

#header-menu-1 #menu-item-35 > a.ct-menu-link svg,
#header-menu-1 #menu-item-35 > a.ct-menu-link svg path {
    fill: #9fa614 !important;
}

/* SOLITAIRE BIJEN */
#header-menu-1 #menu-item-92 > a.ct-menu-link,
#header-menu-1 #menu-item-92 > a.ct-menu-link:hover,
#header-menu-1 #menu-item-92.ct-active > a.ct-menu-link {
    color: #ffa200 !important;
    --theme-link-initial-color: #ffa200 !important;
    --theme-link-hover-color: #ffa200 !important;
}

#header-menu-1 #menu-item-92 > a.ct-menu-link svg,
#header-menu-1 #menu-item-92 > a.ct-menu-link svg path {
    fill: #ffa200 !important;
}

/* OVER ONS + CONTACT */
#header-menu-1 #menu-item-99 > a.ct-menu-link,
#header-menu-1 #menu-item-100 > a.ct-menu-link {
    color: #26384a !important;
}

/* =========================================================
   MOORS - GEKLEURDE SUBMENU BLOKKEN
   ========================================================= */

/* Basis dropdown */
#header-menu-1 .sub-menu {
    width: 220px !important;
    min-width: 220px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* TUINEN dropdown */
#header-menu-1 #menu-item-35 > .sub-menu {
    background: #9fa614 !important;
}

/* BIJEN dropdown */
#header-menu-1 #menu-item-92 > .sub-menu {
    background: #ffa200 !important;
}

/* Submenu links */
#header-menu-1 #menu-item-35 > .sub-menu > li > a,
#header-menu-1 #menu-item-92 > .sub-menu > li > a {
    color: #ffffff !important;
    background: transparent !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    padding: 15px 20px !important;
    min-height: 52px;
}

/* Dun wit scheidingslijntje */
#header-menu-1 .sub-menu > li + li {
    border-top: 1px solid rgba(255,255,255,.35);
}

/* Hover */
#header-menu-1 .sub-menu > li > a:hover {
    background: rgba(0,0,0,.10) !important;
    color: #ffffff !important;
}


/* =========================================================
   MOORS - TUINEN HOOFDLINK DEFINITIEF GROEN
   ========================================================= */

#header-menu-1 ul#menu-tuinen > li#menu-item-35 > a.ct-menu-link {
    color: #9fa614 !important;
}

#header-menu-1 ul#menu-tuinen > li#menu-item-35 > a.ct-menu-link:hover,
#header-menu-1 ul#menu-tuinen > li#menu-item-35.ct-active > a.ct-menu-link,
#header-menu-1 ul#menu-tuinen > li#menu-item-35.current-menu-item > a.ct-menu-link,
#header-menu-1 ul#menu-tuinen > li#menu-item-35.current_page_item > a.ct-menu-link {
    color: #9fa614 !important;
}

#header-menu-1 ul#menu-tuinen > li#menu-item-35 > a.ct-menu-link svg,
#header-menu-1 ul#menu-tuinen > li#menu-item-35 > a.ct-menu-link svg path {
    fill: #9fa614 !important;
}

/* =========================================================
   MOORS - HOOFDMENU BINNEN CONTAINER
   ========================================================= */

/* Geen negatieve/verkeerde offset op het hoofdmenu */
#header-menu-1,
#header-menu-1 > ul#menu-tuinen {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Eerste menu-item niet extra naar links */
#header-menu-1 > ul#menu-tuinen > li:first-child {
    margin-left: 0 !important;
}

/* Header bottom container dezelfde breedte als site */
#header [data-row="bottom"] > .ct-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

EOFcd /Volumes/Websites_lokaal/moorstuinen/wp-content/themes/moorstuinen-child

cat >> style.css <<'EOF'

/* =========================================================
   MOORS - HOOFDMENU BINNEN CONTAINER
   ========================================================= */

/* Geen negatieve/verkeerde offset op het hoofdmenu */
#header-menu-1,
#header-menu-1 > ul#menu-tuinen {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Eerste menu-item niet extra naar links */
#header-menu-1 > ul#menu-tuinen > li:first-child {
    margin-left: 0 !important;
}

/* Header bottom container dezelfde breedte als site */
#header [data-row="bottom"] > .ct-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   MOORS - HOOFDMENU BINNEN CONTAINER
   ========================================================= */

/* Geen negatieve/verkeerde offset op het hoofdmenu */
#header-menu-1,
#header-menu-1 > ul#menu-tuinen {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Eerste menu-item niet extra naar links */
#header-menu-1 > ul#menu-tuinen > li:first-child {
    margin-left: 0 !important;
}

/* Header bottom container dezelfde breedte als site */
#header [data-row="bottom"] > .ct-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   MOORS - MENU UITLIJNEN MET LOGO / CONTENT
   ========================================================= */

#header [data-row="bottom"] .ct-container {
    padding-left: 100px !important;
    padding-right: 100px !important;
    box-sizing: border-box;
}

#header-menu-1 {
    width: 100%;
}

#header-menu-1 > ul.menu {
    justify-content: flex-start !important;
    gap: 10px;
}


/* =========================================================
   MOORSTUINEN HERO
   ========================================================= */

.moor-hero {
    position: relative;
    min-height: 610px;
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    overflow: hidden;
}

/* Transparant groen vlak links */
.moor-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 59%;
    background: rgba(38, 65, 35, 0.80);
    clip-path: polygon(
        0 0,
        100% 0,
        82% 67%,
        72% 74%,
        60% 74%,
        69% 100%,
        0 100%
    );
    z-index: 1;
}

.moor-hero-content {
    position: relative;
    min-height: 610px;
    z-index: 2;
}

.moor-hero-text {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 590px;
    color: #fff;
}

.moor-hero-small {
    display: inline-block;
    margin-bottom: 28px;
    padding-bottom: 7px;
    border-bottom: 3px solid #a7b82b;
    color: #fff;
    font-size: 18px;
    font-style: italic;
}

.moor-hero h1 {
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(48px, 4.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -2px;
}

.moor-hero h1 span {
    color: #a7b82b;
    font-style: italic;
    font-weight: 500;
}

.moor-hero p {
    margin: 0 0 32px;
    color: #fff;
    font-size: 19px;
    line-height: 1.6;
}

.moor-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px;
    background: #a7b82b;
    color: #fff !important;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none !important;
    transition: .2s ease;
}

.moor-hero-button:hover {
    transform: translateY(-2px);
    background: #909f20;
}

/* Bijtje */
.moor-hero-bee {
    position: absolute;
    width: 72px;
    height: auto;
    left: 47%;
    top: 34%;
    z-index: 4;
    transform: rotate(8deg);
}

/* Bloem links */
.moor-hero-flower {
    position: absolute;
    left: -36px;
    top: 34%;
    color: #a7b82b;
    font-size: 120px;
    line-height: 1;
    z-index: 3;
}

/* Tablet */
@media (max-width: 1024px) {

    .moor-hero,
    .moor-hero-content {
        min-height: 560px;
    }

    .moor-hero::before {
        width: 72%;
    }

    .moor-hero-text {
        left: 7%;
        max-width: 510px;
    }

    .moor-hero-bee {
        left: 58%;
    }
}

/* Mobiel */
@media (max-width: 767px) {

    .moor-hero {
        min-height: 620px;
        background-position: 65% center;
        border-radius: 15px;
    }

    .moor-hero-content {
        min-height: 620px;
    }

    .moor-hero::before {
        width: 100%;
        background: rgba(38, 65, 35, 0.78);
        clip-path: none;
    }

    .moor-hero-text {
        left: 24px;
        right: 24px;
        top: 52%;
        max-width: none;
    }

    .moor-hero h1 {
        font-size: 45px;
        letter-spacing: -1px;
    }

    .moor-hero p {
        font-size: 17px;
    }

    .moor-hero p br {
        display: none;
    }

    .moor-hero-bee {
        width: 55px;
        left: auto;
        right: 24px;
        top: 20%;
    }

    .moor-hero-flower {
        left: -35px;
        font-size: 90px;
    }
}


/* =========================================================
   MOORSTUINEN HERO - VERFIJNING
   ========================================================= */

.moor-hero {
    min-height: 650px !important;
    background-position: center center !important;
}

.moor-hero-content {
    min-height: 650px !important;
}

.moor-hero::before {
    width: 56% !important;
    background: rgba(38, 65, 35, 0.72) !important;

    clip-path: polygon(
        0 0,
        100% 0,
        78% 68%,
        70% 74%,
        55% 74%,
        65% 100%,
        0 100%
    ) !important;
}

.moor-hero-text {
    left: 8% !important;
}

.moor-hero-flower {
    display: none !important;
}


/* =========================================================
   HOME BLOKKEN - RONDE HOEKEN
   ========================================================= */

.moors-home-card img {
    border-radius: 18px !important;
}

/* Afbeelding netjes binnen de ronde hoeken */
.moors-home-card figure {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* Mooie overgang bij hover */
.moors-home-card img {
    transition: transform .35s ease;
}

.moors-home-card figure:hover img {
    transform: scale(1.025);
}


/* =========================================================
   HOME KAARTEN - FOTO + TITEL ALS 1 RONDE KAART
   ========================================================= */

.moors-home-card > .wp-block-column {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* Foto zelf hoeft onderaan niet rond */
.moors-home-card > .wp-block-column figure {
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.moors-home-card > .wp-block-column img {
    border-radius: 0 !important;
    display: block;
}

/* Titelbalk direct tegen de afbeelding */
.moors-home-card > .wp-block-column h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hele kaart subtiele hover */
.moors-home-card > .wp-block-column {
    transition: transform .3s ease, box-shadow .3s ease;
}

.moors-home-card > .wp-block-column:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
}


/* =========================================================
   TUINEN HERO - LICHTGROEN
   ========================================================= */

.moor-hero-tuinen::before {
    background: rgba(126, 143, 45, 0.74) !important;
}

.moor-hero-tuinen .moor-hero-small {
    border-bottom-color: #d5df64 !important;
}

.moor-hero-tuinen h1 span {
    color: #d5df64 !important;
}

.moor-hero-tuinen .moor-hero-button {
    background: #a8b719 !important;
}

.moor-hero-tuinen .moor-hero-button:hover {
    background: #929f16 !important;
}


/* =========================================================
   SOLITAIRE BIJEN HERO - ORANJE
   ========================================================= */

.moor-hero-bijen::before {
    background: rgba(224, 126, 0, 0.76) !important;
}

.moor-hero-bijen .moor-hero-small {
    border-bottom-color: #263f2a !important;
}

.moor-hero-bijen h1 span {
    color: #263f2a !important;
}

.moor-hero-bijen .moor-hero-button {
    background: #263f2a !important;
    color: #fff !important;
}

.moor-hero-bijen .moor-hero-button:hover {
    background: #1b301f !important;
}


/* =========================================================
   SOLITAIRE BIJEN - KAARTEN VERFIJNING
   ========================================================= */

.moors-service-card-bijen {
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 32px !important;
    border-top: 4px solid #f39a00 !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.moors-service-card-bijen:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* Groot blok Waarom solitaire bijen */
.moors-section-soft {
    border-radius: 22px !important;
    overflow: hidden !important;
    padding: 42px !important;
}

/* Foto in groot blok */
.moors-section-soft .wp-block-image {
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.moors-section-soft .wp-block-image img {
    display: block;
    width: 100%;
    border-radius: 18px !important;
}

/* Links in Bijen-kaarten */
.moors-service-card-bijen a {
    color: #f39a00 !important;
    font-weight: 600;
    text-decoration: none !important;
}


/* =========================================================
   TUINEN - SERVICE KAARTEN ROND
   ========================================================= */

.moors-service-card:not(.moors-service-card-bijen) {
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 32px !important;
    border-top: 4px solid #a7b82b !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.moors-service-card:not(.moors-service-card-bijen):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.moors-service-card:not(.moors-service-card-bijen) a {
    color: #9aaa00 !important;
    font-weight: 600;
    text-decoration: none !important;
}


/* TUINEN - 3 KAARTEN GELIJKE HOOGTE */

.moors-services {
    align-items: stretch !important;
}

.moors-services > .wp-block-column {
    display: flex !important;
}

.moors-services > .wp-block-column > .moors-service-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 250px;
    display: flex !important;
    flex-direction: column !important;
}

.moors-service-card > p:last-child {
    margin-top: auto !important;
}


/* TUINEN - 3 KAARTEN GELIJKE HOOGTE */

.moors-services {
    align-items: stretch !important;
}

.moors-services > .wp-block-column {
    display: flex !important;
}

.moors-services > .wp-block-column > .moors-service-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 250px;
    display: flex !important;
    flex-direction: column !important;
}

.moors-service-card > p:last-child {
    margin-top: auto !important;
}

/* =========================================================
   MOORSTUINEN FOOTER
   ========================================================= */

.moors-footer {
    background: #35533f;
    color: #fff;
    margin-top: 70px;
}

.moors-footer-inner {
    width: min(1275px, calc(100% - 48px));
    margin: 0 auto;
    padding: 58px 0 52px;

    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 70px;
}

.moors-footer-title {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 18px;
}

.moors-footer-heading {
    color: #b5bf16;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 18px;
}

.moors-footer p {
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    margin: 0;
    max-width: 380px;
}

.moors-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moors-footer a {
    color: rgba(255,255,255,.86);
    text-decoration: none;
    transition: color .2s ease;
}

.moors-footer a:hover {
    color: #f4a000;
}

.moors-footer-contact {
    display: inline-block;
    margin-top: 18px;
    color: #f4a000 !important;
    font-weight: 600;
}

.moors-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.08);
}

.moors-footer-bottom-inner {
    width: min(1275px, calc(100% - 48px));
    min-height: 68px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    color: rgba(255,255,255,.65);
    font-size: 14px;
}

.moors-footer-legal {
    display: flex;
    gap: 25px;
}

.moors-footer-legal a {
    color: rgba(255,255,255,.65);
}

/* standaard Blocksy footer verbergen */

footer.ct-footer {
    display: none !important;
}

@media (max-width: 800px) {

    .moors-footer {
        margin-top: 45px;
    }

    .moors-footer-inner {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 45px 0;
    }

    .moors-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 18px 0;
    }

    .moors-footer-legal {
        flex-wrap: wrap;
        gap: 10px 20px;
    }
}

/* =========================================================
   HOMEPAGE - TIPS & TRICKS
   ========================================================= */

.moors-tips-home {
    position: relative;
    margin-top: 45px;
    margin-bottom: 30px;
    padding: 55px 60px;
    border-radius: 24px;
    background: #eef2e6;
    overflow: hidden;
}

.moors-tips-home::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -55px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(169, 181, 30, .16);
}

.moors-tips-home-title {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: #35533f;
    font-size: clamp(30px, 4vw, 46px);
}

.moors-tips-home-text {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin-bottom: 25px;
    color: #4f5c52;
    font-size: 18px;
    line-height: 1.7;
}

.moors-tips-home-button {
    position: relative;
    z-index: 1;
}

.moors-tips-home-button .wp-block-button__link {
    background: #35533f;
    color: #fff;
    border-radius: 999px;
    padding: 13px 24px;
}

.moors-tips-home-button .wp-block-button__link:hover {
    background: #f39a1f;
    color: #fff;
}

@media (max-width: 700px) {
    .moors-tips-home {
        padding: 38px 28px;
        border-radius: 18px;
    }

    .moors-tips-home-text {
        font-size: 16px;
    }
}


/* =========================================================
   HOMEPAGE - TIPS & TRICKS
   ========================================================= */

.moors-tips-home {
    position: relative;
    margin-top: 45px;
    margin-bottom: 30px;
    padding: 55px 60px;
    border-radius: 24px;
    background: #eef2e6;
    overflow: hidden;
}

.moors-tips-home::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -55px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(169, 181, 30, .16);
}

.moors-tips-home-title {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: #35533f;
    font-size: clamp(30px, 4vw, 46px);
}

.moors-tips-home-text {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin-bottom: 25px;
    color: #4f5c52;
    font-size: 18px;
    line-height: 1.7;
}

.moors-tips-home-button {
    position: relative;
    z-index: 1;
}

.moors-tips-home-button .wp-block-button__link {
    background: #35533f;
    color: #fff;
    border-radius: 999px;
    padding: 13px 24px;
}

.moors-tips-home-button .wp-block-button__link:hover {
    background: #f39a1f;
    color: #fff;
}

@media (max-width: 700px) {
    .moors-tips-home {
        padding: 38px 28px;
        border-radius: 18px;
    }

    .moors-tips-home-text {
        font-size: 16px;
    }
}


/* =========================================================
   TIPS & TRICKS - SEIZOENEN
   ========================================================= */

.moors-tips-page {
    padding-top: 25px;
    padding-bottom: 60px;
}

.moors-tips-intro {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
}

.moors-tips-intro h1 {
    color: #35533f;
    margin-bottom: 15px;
}

.moors-tips-intro p {
    color: #59645c;
    line-height: 1.7;
}

.moors-season-grid {
    gap: 28px;
    margin-bottom: 28px;
}

.moors-season-card {
    position: relative;
    min-height: 300px;
    padding: 42px 42px 38px;
    border-radius: 24px;
    overflow: hidden;
}

.moors-season-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -65px;
    bottom: -75px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
}

.moors-season-card h2 {
    position: relative;
    z-index: 1;
    margin: 8px 0 15px;
    font-size: 32px;
    color: #35533f;
}

.moors-season-card p {
    position: relative;
    z-index: 1;
    max-width: 500px;
    line-height: 1.7;
    color: #48544b;
}

.moors-season-icon {
    position: relative;
    z-index: 1;
    font-size: 38px;
    line-height: 1;
}

.moors-season-link {
    margin-top: 24px !important;
    font-weight: 700;
    color: #35533f !important;
}

/* Seizoenskleuren */

.moors-season-lente {
    background: #e6f0df;
}

.moors-season-zomer {
    background: #f8edc9;
}

.moors-season-herfst {
    background: #f4dfcc;
}

.moors-season-winter {
    background: #e4eceb;
}

@media (max-width: 781px) {

    .moors-tips-intro {
        text-align: left;
        margin-bottom: 35px;
    }

    .moors-season-card {
        min-height: 0;
        padding: 34px 28px;
        border-radius: 18px;
    }

    .moors-season-card h2 {
        font-size: 28px;
    }
}


/* =========================================================
   TIPS & TRICKS - SEIZOENPAGINA FAQ
   ========================================================= */

.moors-season-page {
    max-width: 900px;
    padding-top: 35px;
    padding-bottom: 70px;
}

.moors-season-page > h1 {
    color: #35533f;
    margin-bottom: 16px;
}

.moors-season-page > .has-large-font-size {
    color: #59645c;
    line-height: 1.7;
    margin-bottom: 45px;
}

.moors-season-page > h2 {
    color: #35533f;
    margin-bottom: 24px;
}

.moors-faq-item {
    margin-bottom: 14px;
    padding: 0;
    border: 1px solid rgba(53, 83, 63, .14);
    border-radius: 16px;
    background: #f7f8f4;
    overflow: hidden;
}

.moors-faq-item summary {
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 700;
    color: #35533f;
    list-style: none;
}

.moors-faq-item summary::-webkit-details-marker {
    display: none;
}

.moors-faq-item summary::after {
    content: "+";
    float: right;
    font-size: 24px;
    line-height: 1;
    color: #a8b20b;
}

.moors-faq-item[open] summary::after {
    content: "−";
}

.moors-faq-item p {
    margin: 0;
    padding: 0 24px 22px;
    color: #59645c;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .moors-faq-item summary {
        padding: 18px 20px;
    }

    .moors-faq-item p {
        padding: 0 20px 20px;
    }
}


.moors-season-link a {
    color: #35533f;
    text-decoration: none;
    font-weight: 700;
}

.moors-season-link a:hover {
    color: #f39a1f;
}