/* =========================================================
   SQ CUSTOM - GLOBAL / SQUARESPACE
   ---------------------------------------------------------
   Algemene herbruikbare Squarespace-styling.

   Bevat:
   1.  Google Translate interface verbergen
   2.  Google Translate iframe verbergen
   3.  Google Translate tooltips verbergen
   4.  Google Translate hover/highlight fixes
   5.  Desktop & mobile language dropdown container
   6.  Desktop & mobile language buttons
   7.  Language dropdown menu styling
   8.  Language dropdown menu items
   9.  Positionering mobiele language dropdown
   10. Mobile landscape optimalisaties
   11. Android / Chrome tap highlight uitschakelen
   12. E-maillinks: onderlijning verwijderen
   13. Algemene link hover styling
   14. Standaard Squarespace button styling
   15. Footer basisstyling
   16. Footer menu clone active state fixes
   17. Desktop footer menu
   18. Mobile footer menu
   19. Desktop header menu
   20. Formulierelementen
   ========================================================= */


/* =========================================================
   1. GOOGLE TRANSLATE INTERFACE VERBERGEN
   ---------------------------------------------------------
   Google Translate plaatst soms een blauwe balk bovenaan
   en verschuift de body naar beneden via top: 40px.
   Deze regels zetten de pagina terug naar normale positie.
   ========================================================= */

/* Google Translate top bar verbergen */
html,
body {
    top: 0 !important;
    position: static !important;
}

/* Google Translate zwevend feedback-icoon verbergen */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
    display: none !important;
}


/* =========================================================
   2. GOOGLE TRANSLATE IFRAME VERBERGEN
   ---------------------------------------------------------
   De blauwe Google Translate balk zit bij jouw implementatie
   in een iframe onder .skiptranslate.
   We verbergen het iframe zonder de vertaalfunctie zelf
   te verwijderen.
   ========================================================= */

.skiptranslate > iframe {
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   3. GOOGLE TRANSLATE TOOLTIPS VERBERGEN
   ---------------------------------------------------------
   Google toont soms een popup met de originele tekst wanneer
   je boven een vertaald woord blijft hangen.
   Deze regels verbergen die tooltip-elementen.
   ========================================================= */

#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame {
    display: none !important;
}


/* =========================================================
   4. GOOGLE TRANSLATE HOVER-HIGHLIGHT VERWIJDEREN
   ---------------------------------------------------------
   Google Translate markeert vertaalde tekst soms met een
   blauwe achtergrond of schaduw bij hover.
   Zowel .goog-text-highlight als geneste font-tags worden
   hier geneutraliseerd.
   ========================================================= */

.goog-text-highlight {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

font font {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   5. DESKTOP & MOBILE LANGUAGE DROPDOWN CONTAINER
   ---------------------------------------------------------
   .lang-dropdown is de wrapper rond zowel het desktopmenu
   als het mobiele menu.
   ========================================================= */

.lang-dropdown {
    position: relative;
    display: inline-block;

    font-size: 14px;
    z-index: 9999;
}


/* Desktop language dropdown staat naast de social icons.
   Daarom krijgt alleen de niet-mobiele versie een marge links. */

#languageSwitcher {
    margin-left: 1.5vw;
}


/* =========================================================
   6. LANGUAGE BUTTONS
   ---------------------------------------------------------
   Gemeenschappelijke stijl voor desktop- en mobile-knop.
   Desktop gebruikt #langButton.
   Mobile gebruikt #mobileLangButton.
   ========================================================= */

#langButton,
#mobileLangButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 1px solid #ccc;
    border-radius: 25px;
    background: transparent;
    cursor: pointer;

    font-family: inherit;
    color: inherit;

    outline: none;
    box-shadow: none;
}


/* Desktopknop: compact, geschikt voor de header */

#langButton {
    width: 65px;
    padding: 5px 12px;

    font-size: 14px;
}


/* Mobiele knop: groter en makkelijker aanklikbaar */

#mobileLangButton {
    width: 100px;
    padding: 8px 14px;

    font-size: 22px;
    gap: 8px;
}


/* Focus/active rand verwijderen bij klikken of tabben */

#langButton:focus,
#langButton:active,
#mobileLangButton:focus,
#mobileLangButton:active {
    outline: none !important;
    box-shadow: none !important;
}


/* Chevron/pijltje uitlijnen */

.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow svg {
    display: block;
}


/* =========================================================
   7. DROPDOWN MENU BASISSTIJL
   ---------------------------------------------------------
   Dit is het uitklapmenu met de talen.
   Het wordt standaard verborgen en zichtbaar gemaakt via
   de JavaScript-klasse .show.
   ========================================================= */

#langMenu,
#mobileLangMenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    min-width: 100px;

    margin: 8px 0 0 0;
    padding: 12px 0;

    list-style: none;

    background: #fff;
    border: none;
    border-radius: 12px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);

    display: none;

    z-index: 99999;
}


/* Mobiel dropdownmenu: groter en ronder */

#mobileLangMenu {
    min-width: 200px;
    border-radius: 16px;
}


/* Menu zichtbaar maken wanneer JavaScript .show toevoegt */

#langMenu.show,
#mobileLangMenu.show {
    display: block;
}


/* =========================================================
   8. DROPDOWN MENU ITEMS
   ---------------------------------------------------------
   Stijl voor de afzonderlijke taalkeuzes.
   ========================================================= */

#langMenu li,
#mobileLangMenu li {
    cursor: pointer;
    white-space: nowrap;

    color: #000;
}


/* Desktop menu-items */

#langMenu li {
    padding: 9px 15px;
    font-size: 14px;
}


/* Mobile menu-items */

#mobileLangMenu li {
    padding: 14px 28px;
    font-size: 22px;
}


/* Hover-effect voor beide menu's */

#langMenu li:hover,
#mobileLangMenu li:hover {
    background: #f5f5f5;
}


/* =========================================================
   9. MOBILE LANGUAGE DROPDOWN POSITIONERING
   ---------------------------------------------------------
   Het mobiele taalmenu wordt via JavaScript bovenaan het
   hamburger-menu geïnjecteerd.
   Deze regels centreren het en geven voldoende ruimte rondom.
   ========================================================= */

.mobile-lang-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    margin: 24px 0 32px 0;

    z-index: 1;
}


/* =========================================================
   10. MOBILE LANDSCAPE HEADER & MENU OPTIMALISATIES
   ---------------------------------------------------------
   Verkleint de header alleen op smartphones in horizontale
   stand, waar de beschikbare hoogte beperkt is.
   ========================================================= */

@media screen and (orientation: landscape) and (max-height: 500px) {
    .header .header-announcement-bar-wrapper {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .header-title-text,
    .header-title-logo a,
    .header-title a {
        font-size: 40px !important;
        line-height: 1 !important;
    }

    .header-burger {
        transform: scale(0.8);
        transform-origin: center;
    }

    .header-menu-nav-item-content {
        font-size: clamp(30px, 4vw, 40px) !important;
        line-height: 0.3 !important;
    }

     .header-display-mobile {
        padding-left: 0 !important;
    }

    .header-title {
        margin-left: -20px !important;
        padding-left: 0 !important;
    }
}


/* =========================================================
   11. ANDROID / CHROME TAP HIGHLIGHT UITSCHAKELEN
   ---------------------------------------------------------
   Verwijdert de standaard blauwe Android-touch highlight
   op links, knoppen en formulier-elementen.
   ========================================================= */
a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   12. E-MAILLINKS: ONDERLIJNING VERWIJDEREN
   ---------------------------------------------------------
   Verwijdert de standaard onderlijning van mailto:-links
   in normale toestand, bij hover en bij focus.
   Hierdoor sluit de e-maillink visueel beter aan bij de
   overige footer-elementen en navigatielinks.
   ========================================================= */
a[href^="mailto:"],
a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus {
    text-decoration: none !important;
}


/* =========================================================
   13. ALGEMENE LINK HOVER STYLING
   ---------------------------------------------------------
   Standaard hoverkleur voor links op de website.
   ========================================================= */

a:hover {
    color: #989898 !important;
}


/* =========================================================
   14. STANDAARD SQUARESPACE BUTTON STYLING
   ---------------------------------------------------------
   Overschrijft de standaard Squarespace primaire buttons.

   Normaal:
   - zwarte achtergrond
   - witte tekst
   - zwarte rand

   Hover:
   - witte achtergrond
   - zwarte tekst
   - zwarte rand

   De standaard Squarespace opacity-hover wordt uitgeschakeld.
   ========================================================= */

.sqs-button-element--primary,
.sqs-system-button,
.sqs-block-button-element {
    background: #000000 !important;
    background-color: #000000 !important;

    color: #ffffff !important;
    border: 1px solid #000000 !important;

    opacity: 1 !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease !important;
}

/* Tekst standaard wit */

.sqs-button-element--primary *,
.sqs-system-button *,
.sqs-block-button-element * {
    color: #ffffff !important;
}

/* Hover / focus / active */

.sqs-button-element--primary:hover,
.sqs-button-element--primary:focus,
.sqs-button-element--primary:active,
.sqs-system-button:hover,
.sqs-system-button:focus,
.sqs-system-button:active,
.sqs-block-button-element:hover,
.sqs-block-button-element:focus,
.sqs-block-button-element:active {
    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #000000 !important;
    border-color: #000000 !important;

    opacity: 1 !important;
}

/* Tekst bij hover zwart */

.sqs-button-element--primary:hover *,
.sqs-button-element--primary:focus *,
.sqs-button-element--primary:active *,
.sqs-system-button:hover *,
.sqs-system-button:focus *,
.sqs-system-button:active *,
.sqs-block-button-element:hover *,
.sqs-block-button-element:focus *,
.sqs-block-button-element:active * {
    color: #000000 !important;
}


/* =========================================================
   15. FOOTER BASISSTYLING
   ---------------------------------------------------------
   Gemeenschappelijke styling voor de via JavaScript
   gekloonde footer-menu's en algemene footerlinks.
   ========================================================= */

.footer-menu-clone {
    width: 100% !important;
}

.footer-menu-clone .header-nav-item,
.footer-menu-clone .header-menu-nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-wrapper a {
    text-decoration: none !important;
}


/* =========================================================
   16. FOOTER MENU CLONE ACTIVE STATE FIXES
   ---------------------------------------------------------
   Verwijdert actieve Squarespace styling uit het
   gekloonde footermenu zodat actieve pagina's geen
   dubbele underlines of accentlijnen tonen.
   ========================================================= */

.footer-menu-clone .header-nav-item--active a {
    text-decoration: underline !important;
    text-underline-offset: 0.22em;
}

.footer-menu-clone .header-nav-item--active a::before,
.footer-menu-clone .header-nav-item--active a::after {
    display: none !important;
    content: none !important;
}

.footer-menu-clone a,
.footer-menu-clone a:visited,
.footer-menu-clone a:hover {
    text-decoration: none !important;
}


/* =========================================================
   17. DESKTOP FOOTERMENU
   ---------------------------------------------------------
   Rangschikking in meerdere rijen:
   - Hoofditems op de bovenste rij
   - Subitems uit de dropdown menu's in aparte rijen eronder

   Beide rijen zijn rechts uitgelijnd.
   ========================================================= */

.footer-menu-desktop-clone {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    row-gap: 12px;
    text-align: right;
}


/* Beide afzonderlijke menurijen */

.footer-menu-desktop-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: flex-end;
    align-items: center;

    column-gap: 30px;
    row-gap: 12px;

    width: 100%;
}


/* Individuele footerlinks */

.footer-menu-desktop-link {
    display: inline-block;

    margin: 0;
    padding: 0;

    color: inherit;
    white-space: nowrap;
}


/* =========================================================
   18. MOBILE FOOTER MENU
   ---------------------------------------------------------
   Verticale versie van het gekloonde hoofdmenu.
   Wordt geplaatst op de locatie van:
   <footer_menu_mobile>
   ========================================================= */

.footer-menu-mobile-clone {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 30px;
    font-size: 20px;

    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-mobile-clone a {
    display: block;
    text-align: center;
}


/* =========================================================
   19. DESKTOP HEADER MENU
   ---------------------------------------------------------
   Style wijzigingen in het header menu:
   - Meer verticale ruimte tussen de items in
     een dropdown menu
   ========================================================= */

.header-nav-folder-item {
    padding: 10px 0;
}


/* =========================================================
   20. FORMULIERELEMENTEN
   ========================================================= */

input,
textarea,
select,
.custom-form-element {
    outline: none !important;
    box-shadow: none !important;
}

input,
textarea,
select,
.custom-form-element {
    border-color: #bbb !important;
}

input:hover,
textarea:hover,
select:hover,
.custom-form-element:hover {
    border-color: #000 !important;
}

input:focus,
textarea:focus,
select:focus,
.custom-form-element:focus-within {
    border-color: #000 !important;
}

.snipcart-order__invoice-number--highlight {
    color: #000;
}

/* =========================================================
   SNIPCART ORDER CONFIRMATION - ICONS
   ---------------------------------------------------------
   Maakt alle SVG iconen binnen de order details zwart.
   ========================================================= */

#snipcart .snipcart-order__details .snipcart__icon,
#snipcart .snipcart-order__details svg {
    color: #000000 !important;
    stroke: #000000 !important;
}