/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/




/* Fonts */

.section-title p{  font-family: "emmascript-mvb-std", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-script {
    font-family: "emmascript-mvb-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* header logo overflow*/
@media only screen and (min-width: 1000px) {

    #header-outer #top #logo {
        margin:0;
        transform: translateY(20px);
        scale: 1.2;
    }

    #top {
        z-index: 10000;
    }

    #header-outer #top .col.span_9.col_last,
    #header-outer #top .col.span_9.col_last nav {
        width: 100%;
    }

    #header-outer #top .col.span_9.col_last nav ul.sf-menu {
        width: 100%;
        justify-content: space-around;
    }
}

/* ── Algemeen: tekstlinks altijd onderstreept ───────────────────────────────
   Salient verwijdert standaard de underline van links (text-decoration: none).
   Hieronder zetten we die terug voor alle platte tekstlinks in de content,
   maar niet voor knoppen, navigatie, afbeeldingslinks e.d.
   ─────────────────────────────────────────────────────────────────────────── */
.entry-content a:not([class]),
.entry-content a:not([class]):hover,
.woocommerce-product-details__short-description a,
p a:not([class]),
.content-inner p a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Agenda header meta: meer-info link onderstrepen */
#single-below-header .meta-meer-info a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Verlopen agenda items: grijs en iets transparant */
.agenda-verlopen .page-header-wrap,
.nectar-post-grid-item.agenda-verlopen{
    opacity: 1;
    filter: grayscale(100%);
}

span.nectar-post-grid-item__custom-field.inline[data-key="datum"] {
    font-size: 1.2em;
    font-weight: 600;
    background-color: var(--nectar-accent-color);
    padding: 8px 15px 10px;
    line-height: 1;
    border-radius: 50px;
}

.Agenda-Post-Loop .nectar-post-grid-item__custom-fields {
  align-items: center;
}


/* diverse */

.rotate-15 {
    transform: rotate(15deg);
}

#header-outer #top nav > ul > li:not(.megamenu) ul .submenu-section-title a:hover {
    background-color: unset;
}

.overflow-hidden {
  overflow:hidden;
}

/* Carousel Simple Slider: aangepaste verhouding 3:1 */
.nectar-simple-slider.sizing-aspect-ratio.aspect-3-1 {
    padding-bottom: calc((1 / 3) * 100%) !important;
}



/* BORDER RADIUS  DEFAULT FOR IMAGES AND ELEMENTS*/

span.woocommerce-loop-category__image img {
    border-radius: 1em;
}
.flickity-slider .slide.is-selected, .flickity-slider .slide .thumb-inner img{
    border-radius: 1em;
    overflow: hidden;
}
.flickity-slider .flex-active-slide, .flickity-slider .slide .thumb-inner img {
    border-radius: 1em;
}

.wpb_video_wrapper iframe {
    border-radius: 1em;
}

.single .main-content img {
    border-radius: 1rem;
}

/* -- END BORDER RADIUS */


/* Product Gallery Flickity Slider updates */
.single-product .product-thumbs .flickity-slider .thumb img, .single-product .product[data-gallery-style=left_thumb_sticky] .product-thumbs .thumb img, .single-product .product-thumbs .flickity-slider .thumb.is-nav-selected img {
  border: solid 0px #fff;
  padding:0;
}
.single-product .product-thumbs .flickity-slider .thumb img:hover {
  opacity: 0.85;
  border-width: 3px;
}


/* ── Agenda single page: zelfde max-width als blogberichten ─────────────────
   Salient's single.css begrenst .post-area op max 1000px, maar uitsluitend
   via de body-class .single-post. Bij agenda-items is de body-class
   .single-agenda, waardoor de beperking niet actief was. Onderstaande regels
   spiegelen de relevante selectors voor .single-agenda.
   ─────────────────────────────────────────────────────────────────────────── */
body[data-ext-responsive="true"].single-agenda .container-wrap.no-sidebar .post-area,
body[data-ext-responsive="true"].single-agenda .container-wrap.no-sidebar .comment-list > li,
body[data-ext-responsive="true"].single-agenda #page-header-bg[data-post-hs="default_minimal"] h1,
body[data-ext-responsive="true"].single-agenda .heading-title[data-header-style="default_minimal"] .entry-title {
    max-width: 1000px;
    margin: 0 auto !important;
}

/* ── Agenda single page: meta-tekst volledig wit (geen 0.8 opacity) ──────────
   Salient zet #single-below-header span op rgba(255,255,255,0.8) voor de
   header-achtergrond variant. Voor agenda-items overschrijven we dit naar
   volledig ondoorzichtig wit zodat datum, tijden en overige velden helder
   leesbaar zijn.
   ─────────────────────────────────────────────────────────────────────────── */
.single-agenda #page-header-bg #single-below-header span {
    color: rgba(255, 255, 255, 1);
}



/* ── Blog & Agenda: H1 maximaal 48px (responsive) ───────────────────────────
   Salient's standaard blog-titel schaalt via vw-eenheden naar boven toe.
   Hier begrenzen we de .entry-title voor zowel blogberichten als agenda-items
   op 48px, terwijl de responsive verkleining op kleinere schermen intact blijft.
   ─────────────────────────────────────────────────────────────────────────── */
.single-post #page-header-bg .entry-title,
.single-agenda #page-header-bg .entry-title {
    font-size: clamp(28px, 5vw, 48px) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5em;
}

/* ── Blog & Agenda: meta-tekst (#single-below-header) op 1.4rem ─────────────
   Salient hardcodeert deze op 16px. Wij overschrijven naar een relatieve
   eenheid zodat de grootte meebeweegt met de root-fontgrootte.
   ─────────────────────────────────────────────────────────────────────────── */
.single-post #single-below-header span,
.single-agenda #single-below-header span {
    font-size: 1.4rem !important;
}


/* ── Winkelwagen-icoon achter "In winkelwagen"-knop ─────────────────────────
   Gebruikt de icomoon-font die Salient al laadt (geen extra bibliotheek nodig).
   \e910 = icon-salient-cart
   ─────────────────────────────────────────────────────────────────────────── */
.woocommerce a.add_to_cart_button::after,
.woocommerce button.single_add_to_cart_button::after {
    font-family: icomoon !important;
    content: "\e910";
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: 8px;
    font-size: 1em;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


/* ============================================================
   B2B Retailer topbar
   Vaste meldingsbalk boven de header voor ingelogde B2B-klanten
   ============================================================ */

.wbvl-b2b-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    width: 100%;
    background: #f4f8f2;
    border-bottom: 1px solid #c8dfc0;
    color: #4a6640;
    font-size: 0.8em;
    line-height: 1.4;
    text-align: center;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
}

.wbvl-b2b-topbar a {
    color: #4a6640;
    text-decoration: underline;
    white-space: nowrap;
}

.wbvl-b2b-topbar a:hover {
    opacity: 0.75;
}