.bg-primary {
    background-color: #00508f !important;
}

.text-primary {
    color: #00508f !important;
}

#header-wrap, .sticky-header #header-wrap {
    background-color:#00508f !important;
}
@media (min-width: 1400px) {

    #logo-placeholder {
        display:block !important;
        width:150px;
        height:1px;
    }
    #logo {
        position: absolute;
        display: block;
        z-index: 20;
    }

    #logo img {
        padding: 5px;
    }
}

#logo img {
    width: 150px !important;
    height: 150px !important;
    margin-bottom:5px;
}

.sticky-header-shrink #logo img {
    width: 60px !important;
    height: 60px !important;
}

/* Tablet/laptop (992–1399px): het menu past hier niet naast het logo en
   wrapt onder het logo; de vlaggetjes kwamen dan nog op een derde regel.
   Vlaggetjes rechtsboven in de logo-rij en menu-items iets compacter,
   zodat het menu op één regel blijft. Het menu altijd op een eigen rij,
   anders schuift een korter menu naast het logo, onder de vlaggetjes. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    #header-wrap .header-row {
        position: relative;
    }
    #header-wrap .primary-menu {
        flex-basis: 100%;
    }
    #header-wrap .header-misc {
        position: absolute;
        top: 12px;
        right: 0;
    }
    .primary-menu .menu-container > .menu-item > .menu-link {
        letter-spacing: 0;
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .primary-menu .menu-container > .menu-item > .menu-link {
        font-size: 15px;
    }
}

@media (max-width: 996px){
    .menu-container > .menu-item > .menu-link.active:after {
        top: 50px !important;
    }
}
.footer a {
    color:#FFFFFF;
    text-decoration: underline !important;
}


.block {
    color: #011312;
    position: relative;
    display: block;
    padding: 15px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    overflow: hidden;
}
.block2 {
    min-height: 150px;
    padding: 0;
}


.menu-link {
    text-transform: initial;
    font-size:16px;
    font-weight:normal;
    padding-left:8px;
    padding-right:8px;
    color: #FFFFFF;
}

.menu-item:hover > .menu-link {
    color:#FCFCFC;
}
.btn-primary {
    border:none;
}

.language-switcher ul li:first-child {
    display:none;
}

/* Dun wit randje om de vlaggetjes: de blauwe baan van NL en de zwarte
   van DE vallen anders weg tegen de blauwe header, waardoor de vlaggen
   ongelijk uitgelijnd lijken. De vlagplaatjes op de server zijn vierkant
   met transparante ruimte boven en onder de (3:2) vlag; object-fit snijdt
   die weg, zodat het randje strak om de vlag zelf valt. */
.language-switcher img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
    border-radius: 1px;
}

.contact-button  {
    display:none !important;
}



.footer .navbar-nav li:before {
    content: "\f0da";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: 0;
    padding: 0 5px;
    line-height: 30px;
    font-size: 12px;
}

#footer {
    border-top:0px;
}

.dark #copyrights, #copyrights.dark  {
    background-color:#02345b;
    border-top:none;
}

.dark #copyrights a, #copyrights.dark a{
    color:white;
 }

h3 {
    color:#02345b;
    font-size:18px;
    margin-bottom:15px;
}

.bottomleft {
    position: relative;
    bottom: 31px;
    left: 10px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    text-align:left;
    display: inline-block;
}




/* Gele underline alleen op het hoofdmenu (directe items van .menu-container),
   niet op actieve items binnen de uitklap. */
.menu-container > .menu-item > .menu-link.active:after {
    height: 1px;
    opacity: 1;
    transform: translateY(0px);
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #efe82d;
    content: '';
}

.sticky-header-shrink .menu-container > .menu-item > .menu-link.active:after {
    top:59px;
}


::placeholder {
    color: red;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
    color: red;
}

.slider-element .owl-dots {
    display: none;
}



/* De oude zwevende social-balk rechts is verplaatst naar de footer
   (zie .footer-socials hieronder). Hij overlapte op mobiel de content. */
#socialmedia {
    display: none !important;
}

/* ================================================================
   Social media in de footer — "Volg ons"
   Ronde glas-icoonknoppen op de donkerblauwe footer (#00508f).
   Subtiel in rust; bij hover vult de knop de merkkleur en tilt op.
   Geel accentstreepje (#efe82d) onder de titel echoot de huisstijl.
   ================================================================ */
.footer-socials {
    margin: 22px 0 28px;
}

.footer-socials__label {
    display: inline-block;
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffffff;
}

.footer-socials__label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: #efe82d;
}

.footer-socials__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Witte ring + schaduw zodat elke knop — ook de blauwe Facebook —
       loskomt van de donkerblauwe footer (#00508f). */
    border: 2px solid rgba(255, 255, 255, 0.92);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
    /* In rust iets zachter/minder fel; bij hover komt de volle kleur terug. */
    filter: saturate(0.7) brightness(0.95);
    opacity: 0.9;
    transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease;
}

/* De algemene footer-underline (.footer a) niet op de social-iconen.
   Hogere specificiteit + !important om die regel te overrulen. */
.footer-socials a.footer-socials__link {
    text-decoration: none !important;
}

/* Volle merkkleuren al in rust, zodat de iconen direct opvallen. */
.footer-socials__link--facebook {
    background: #1877f2;
}

.footer-socials__link--instagram {
    background: radial-gradient(circle at 30% 110%,
                #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 90%);
}

.footer-socials__link--youtube {
    background: #ff0000;
}

.footer-socials__link--whatsapp {
    background: #25d366;
}

.footer-socials__link:hover,
.footer-socials__link:focus-visible {
    transform: translateY(-3px) scale(1.06);
    color: #ffffff;
    filter: saturate(1) brightness(1.05);
    opacity: 1;
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.55);
    outline: none;
}


.owl-dots {
    display: none !important;
}

/* Hamburger-knop als wit rondje met blauwe streepjes (mobiel).
   Groter en duidelijker, in de stijl van een ronde icoonknop. */
#primary-menu-trigger {
    width: 56px;
    height: 56px;
    margin-left: 18px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#primary-menu-trigger:hover,
#primary-menu-trigger:active {
    transform: scale(1.04);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.32);
}

.svg-trigger {
    width: 38px;
    height: 38px;
}

.svg-trigger path {
    stroke: #00508f;
    stroke-width: 6;
}

/* ================================================================
   Uitklapmenu (dropdown) — mobiel
   Donkerblauwe header (#00508f) van Silltal: zorg voor leesbare
   uitklapitems, duidelijke hiërarchie en een geel accent uit het logo.
   ================================================================ */
@media (max-width: 991.98px) {

    /* De geopende uitklap als ingesprongen, iets donkerder paneel */
    .primary-menu .sub-menu-container {
        background: rgba(0, 0, 0, 0.16);
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        padding: 4px 0 !important;
        margin: 0;
    }

    /* Uitklapitems goed leesbaar op de donkere achtergrond */
    .primary-menu .sub-menu-container .menu-item > .menu-link {
        position: relative;
        color: rgba(255, 255, 255, 0.78);
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0.2px;
        text-transform: none;
        padding: 13px 16px 13px 30px;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .primary-menu .sub-menu-container .menu-item:not(:first-child) {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* Geel accentbalkje links bij actief/aangeraakt item */
    .primary-menu .sub-menu-container .menu-item > .menu-link::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        width: 3px;
        height: 16px;
        border-radius: 3px;
        background: #efe82d;
        transform: translateY(-50%) scaleY(0);
        transition: transform 0.2s ease;
    }

    .primary-menu .sub-menu-container .menu-item > .menu-link:hover,
    .primary-menu .sub-menu-container .menu-item > .menu-link:active,
    .primary-menu .sub-menu-container .menu-item.current > .menu-link {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.05);
    }
    .primary-menu .sub-menu-container .menu-item > .menu-link:hover::before,
    .primary-menu .sub-menu-container .menu-item > .menu-link:active::before,
    .primary-menu .sub-menu-container .menu-item.current > .menu-link::before {
        transform: translateY(-50%) scaleY(1);
    }

    /* Oudermenuknop (bv. "Per seizoen"): volledige rij voelt klikbaar */
    .primary-menu .menu-item.sub-menu > .menu-link {
        cursor: pointer;
    }
    .primary-menu .menu-item.sub-menu > .menu-link:hover,
    .primary-menu .menu-item.sub-menu > .menu-link:active {
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Het pijltje: witte, ruime tap-zone die soepel meedraait bij openen.
       Vaste 'top' (uitgelijnd op de menu-rij), niet gecentreerd: anders zou
       het pijltje meezakken zodra de uitklap de menu-item-hoogte vergroot. */
    .primary-menu .menu-item .sub-menu-trigger {
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        width: 44px;
        height: 44px;
        line-height: 44px;
        top: 3px;
        transition: transform 0.3s ease, color 0.2s ease;
    }
    .primary-menu .menu-item .sub-menu-trigger.icon-rotate-90 {
        color: #efe82d;
        transform: rotate(90deg);
    }
}

/* ================================================================
   CTA-knop in het hoofdmenu — laatste menu-item ("Nu boeken")
   Oranje knop voor sterk contrast met de blauwe menubalk (#00508f).
   De binnenste <div> wordt de knop: zo blijft hij verticaal
   gecentreerd binnen de (grote) klikzone van de menu-link, ongeacht
   header-grootte of sticky-shrink. inline-block houdt hem ook in het
   mobiele uitklapmenu compact i.p.v. een balk over de volle breedte.
   ================================================================ */
.primary-menu .menu-container > .menu-item:last-child > .menu-link > div {
    display: inline-block;
    background-color: #28a745;
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
    padding: 9px 18px;
    transition: background-color 0.2s ease;
}

.primary-menu .menu-container > .menu-item:last-child > .menu-link:hover > div,
.primary-menu .menu-container > .menu-item:last-child > .menu-link.active > div {
    background-color: #1f8a39;
    color: #ffffff;
}

/* Geen gele underline onder de CTA-knop (die hoort bij gewone items) */
.primary-menu .menu-container > .menu-item:last-child > .menu-link.active:after {
    display: none;
}

/* Emoji iets vergroten zodat ze visueel meewegen met de tekst. */
.page-icon--emoji {
    font-size: 1.05em;
}

/* In de footer krijgt een icoon een vaste breedte, zodat de labels
   onder elkaar uitlijnen. */
.footer-two__links .page-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #efe82d;
}

/* Het thema geeft het uitklapmenu een vaste breedte van 220px; met de
   extra emoji past een lang label ("Voorjaarsvakantie Zweden") net niet
   meer op één regel. Daarom het seizoensmenu op desktop laten meegroeien
   met de inhoud (en niet afbreken). Alleen desktop: op mobiel is het menu
   sowieso al volle breedte. */
@media (min-width: 992px) {
    .primary-menu .sub-menu-container:has(> .menu-item:nth-child(4)) {
        width: auto;
        min-width: 220px;
        max-width: 340px;
    }
    .primary-menu .sub-menu-container:has(> .menu-item:nth-child(4)) > .menu-item > .menu-link > div {
        white-space: nowrap;
    }
}


/* ================================================================
   FooterTwo — demo (4 kolommen)
   Lichte, rustige footer. Geen randjes om de vlakken.
   Seizoenen met een neutraal icoon ervoor (geen kleur).
   Social media onderaan; privacy/copyright rechts.
   ================================================================ */
.footer-two {
    background: #00508f;        /* donkerblauw, gelijk aan FooterOne (.bg-primary) */
    color: #eaf1f8;
    padding: 56px 0 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* Geen onderstreping in rust; subtiele lichte hover op de donkere footer. */
.footer-two a {
    color: #eaf1f8;
    text-decoration: none !important;
    transition: color 0.18s ease;
}

.footer-two a:hover,
.footer-two a:focus-visible {
    color: #ffffff;
    text-decoration: underline !important;
    outline: none;
}

/* Merkblok (breed) + 4 linkkolommen → 2 op tablet → 1 op mobiel.
   Kolombreedtes afgestemd op de inhoud: "Over Silltal" smaller,
   de tekstrijkere kolommen iets breder. */
.footer-two__cols {
    display: grid;
    /* Het aantal linkkolommen komt uit de widget (--footer-two-cols), want kolommen zijn
       child-records: een kolom erbij of eraf mag de indeling niet breken. De 4 is alleen
       een terugval als de variabele ontbreekt. */
    grid-template-columns: 1.6fr repeat(var(--footer-two-cols, 4), minmax(0, 1fr));
    gap: 32px 40px;
}

@media (max-width: 1199.98px) {
    .footer-two__cols {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Merkblok over de volledige rij erboven. */
    .footer-two__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .footer-two__cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .footer-two__cols {
        grid-template-columns: 1fr;
    }
    /* Op mobiel het merkblok onderaan plaatsen (onder "Praktisch"). */
    .footer-two__col--brand {
        order: 1;
    }
}

/* Merkblok — welkomsttekst, contactgegevens en logo (uit oude footer). */
.footer-two__brand-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 16px;
}

.footer-two__col--brand p {
    margin: 0 0 16px;
    color: #d4e2f0;
}

/* Inline tekstlinks in het merkblok wél onderstreept (herkenbaarheid). */
.footer-two__col--brand p a {
    text-decoration: underline !important;
}

.footer-two__col--brand strong {
    color: #ffffff;
}

.footer-two__logo {
    display: inline-block;
    margin-top: 8px;
    max-width: 220px;
}

.footer-two__logo img {
    width: 100%;
    height: auto;
}

.footer-two__heading {
    position: relative;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 9px;
}

/* Geel accentstreepje onder de kop, echoot de huisstijl (zoals .footer-socials). */
.footer-two__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: #efe82d;
}

.footer-two__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-two__links li {
    margin-bottom: 10px;
}

/* Subitems onder de Contact-uitklap, licht ingesprongen. */
.footer-two__links--sub {
    margin: 12px 0 0;
    padding-left: 16px;
}

/* Seizoenen: neutraal icoon ervoor, geen gekleurde pillen. */
.footer-two__seasons li a {
    display: inline-flex;
    align-items: center;
}

.footer-two__seasons i {
    width: 20px;
    margin-right: 9px;
    text-align: center;
    color: #efe82d;          /* één rustig accent, niet per seizoen */
    font-size: 14px;
}

.footer-two__seasons-extra {
    margin-top: 14px;
}

/* Contact-uitklap (geen JS nodig, native <details>). */
.footer-two__contact {
    margin-top: 14px;
}

.footer-two__contact summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
}

.footer-two__contact summary::-webkit-details-marker {
    display: none;
}

.footer-two__contact summary::after {
    content: "\f078";        /* chevron-down (Font Awesome) */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.footer-two__contact[open] summary::after {
    transform: rotate(180deg);
}

/* Onderbalk: social media links, privacy/copyright rechts.
   Bovenliggende scheidingslijn zit nu op deze balk (contactregel is weg). */
.footer-two__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-two__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-two__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 14px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.footer-two__social i {
    font-size: 15px;
}

.footer-two__social:hover,
.footer-two__social:focus-visible {
    text-decoration: none !important;
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.9);
}

.footer-two__social--facebook:hover  { background: #1877f2; }
.footer-two__social--instagram:hover { background: #d6249f; }
.footer-two__social--youtube:hover   { background: #ff0000; }
.footer-two__social--linkedin:hover  { background: #0a66c2; }

.footer-two__legal {
    font-size: 14px;
    color: #bcd2e6;
    white-space: nowrap;
}

.footer-two__legal-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 575.98px) {
    .footer-two__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================================================
   Mobiel: minder ruimte boven en onder de h1 op elke pagina.
   - Boven: de pt-5 (3rem) van de titel-bar omlaag.
   - Onder: de margin-bottom (30px) van de h1 omlaag.
   ================================================================ */
@media (max-width: 767.98px) {
    .tile-single-row-carousel-widget.pt-5 {
        padding-top: 1.25rem !important;
    }

    .tile-single-row-carousel-widget h1 {
        margin-bottom: 12px;
    }
}


/* ================================================================
   Font Awesome iconen ingevoegd via de rich text editor (TinyMCE).
   Elk via de editor ingevoegd icoon krijgt de class .content-icon,
   zodat het automatisch de huisstijlkleur en -grootte krijgt — net
   als de kenmerken-iconen. display:inline-block maakt width effectief
   (vast icoonkolommetje vóór de tekst).
   ================================================================ */
i.content-icon,
svg.content-icon {
    display: inline-block;
    width: 30px;
    font-size: 20px;
    color: #00508f;
    text-align: center;
}


/* ================================================================
   Seizoenen-kenmerken zijn klikbaar (links naar de seizoenpagina's).
   Geef de link een geel onderstreepje (#efe82d) zodat zichtbaar is
   dat je erop kan klikken; bij hover loopt het streepje door.
   ================================================================ */
.kenmerken-item a {
    text-decoration: none;
    color: #00508f;
}

/* Geel streepje alleen onder de tekst, niet onder het icoon. */
.kenmerken-item a span {
    border-bottom: 2px solid #efe82d;
    padding-bottom: 1px;
    transition: border-color 0.18s ease;
}

.kenmerken-item a:hover span,
.kenmerken-item a:focus-visible span {
    border-bottom-color: #00508f;
}

/* ================================================================
   Pagina-iconen (veld `icon` op de pagina)
   ----------------------------------------------------------------
   Eerder stonden de seizoensiconen als emoji in de CSS, gekoppeld aan
   de positie in het uitklapmenu. Ze komen nu uit het CMS en worden
   door PageHelper::iconHtml() uitgegeven; hier staat alleen de opmaak.
   ================================================================ */
.page-icon {
    font-style: normal;
    line-height: 1;
}

/* Emoji iets vergroten zodat ze visueel meewegen met de tekst. */
.page-icon--emoji {
    font-size: 1.05em;
}

/* Footer: geel, met een vaste kolombreedte zodat de labels onder elkaar
   uitlijnen ook als het ene icoon breder is dan het andere. */
.footer-two__links a {
    display: inline-flex;
    align-items: center;
}

.footer-two__links .page-icon {
    flex: 0 0 auto;
    width: 22px;
    margin-right: 12px;
    text-align: center;
    color: #efe82d;
    font-size: 1.05em;
}

/* Hoofdmenu: zelfde icoon, zelfde geel. */
.primary-menu .menu-link > div {
    display: inline-flex;
    align-items: center;
}

.primary-menu .menu-link .page-icon {
    flex: 0 0 auto;
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: #efe82d;
}

/* Het uitklapmenu heeft een witte achtergrond; geel is daar nauwelijks
   leesbaar. Daar dus het blauw van de site. */
.primary-menu .sub-menu-container .page-icon {
    color: #00508f;
}