/* ============================================================================
   A. GLOBAL DEFAULTS
   ============================================================================ */

/* iOS Safari auto-inflate uit: voorkom dat tekst in brede kolommen automatisch
   wordt vergroot terwijl tekst in smalle kolommen op normale grootte blijft,
   wat zichtbare inconsistenties veroorzaakt tussen hp-intro en hp-pillar. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body:not(.wp-admin):not(.viveres-dashboard-page),
body:not(.wp-admin) .site,
body:not(.wp-admin) #wrap {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--color-body);
    letter-spacing: var(--letter-spacing-body);
}

/* ── Raw HTML spans: inline stijlen laten winnen via directe selector ──── */
/* ── Journeys approach numbers en titels ────────────────────────────────── */
body:not(.wp-admin) .wpb_raw_html span[style] {
    font-size: var(--journeys-num-size, 57px) !important;
    color: var(--journeys-num-color, #c9a96e) !important;
    font-family: var(--journeys-num-family, 'Noto Serif Display') !important;
    font-style: var(--journeys-num-style, italic) !important;
    font-weight: var(--journeys-num-weight, 400) !important;
}
body:not(.wp-admin) .wpb_raw_html h3[style] {
    font-size: var(--journeys-title-size, 32px) !important;
    color: var(--journeys-title-color, #000000) !important;
    font-family: var(--journeys-title-family, 'Playfair Display') !important;
    font-weight: var(--journeys-title-weight, 500) !important;
    letter-spacing: var(--journeys-title-spacing, 0.5px) !important;
}






body:not(.wp-admin):not(.viveres-dashboard-page) a { color: var(--color-link); }

/* Knoppen altijd wit tekst — niet overschrijven door --color-link */
body:not(.wp-admin) a.advantage-btn,
body:not(.wp-admin) a.advantage-btn:hover,
body:not(.wp-admin) a.viv-404-btn,
body:not(.wp-admin) a.viv-404-btn:hover,
body:not(.wp-admin) .vif-trigger-primary,
body:not(.wp-admin) .vcf-trigger-primary,
body:not(.wp-admin) .viveres-inquiry-trigger { color: #ffffff !important; }
body:not(.wp-admin):not(.viveres-dashboard-page) a:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) a:focus { color: var(--color-link-hover); }


/* ============================================================================
   B. HEADINGS — uitgecommentarieerd
   ============================================================================ */

/* body:not(.wp-admin) h1, h2, h3 ... { } */


/* ============================================================================
   C. WPBAKERY TEXT — uitgecommentarieerd
   ============================================================================ */

/* body:not(.wp-admin) .wpb_text_column { } */


/* ============================================================================
   D. HEADER & NAVIGATION
   ============================================================================ */

body:not(.wp-admin) #site-header,
body:not(.wp-admin) .site-header,
body:not(.wp-admin) #site-header-inner,
body:not(.wp-admin) .is-sticky #site-header,
body:not(.wp-admin) .navbar-style-one .header-flex-inner { background-color: var(--color-header-background); }

body:not(.wp-admin) #site-logo a,
body:not(.wp-admin) .site-header .site-branding a { color: var(--color-header-text); }

body:not(.wp-admin) #site-navigation .main-menu > li > a,
body:not(.wp-admin) #site-navigation .dropdown-menu > li > a,
body:not(.wp-admin) .navbar-style-one .main-menu > li > a,
body:not(.wp-admin) .main-menu > li > a { color: var(--color-menu-text-default); }

body:not(.wp-admin) #site-navigation .main-menu > li > a:hover,
body:not(.wp-admin) #site-navigation .dropdown-menu > li > a:hover,
body:not(.wp-admin) .main-menu > li > a:hover { color: var(--color-menu-text-default-hover); }

body.home:not(.wp-admin):not(.is-sticky) #site-navigation .main-menu > li > a,
body.home:not(.wp-admin):not(.is-sticky) .main-menu > li > a { color: var(--color-menu-text-home); }

body.home:not(.wp-admin):not(.is-sticky) #site-navigation .main-menu > li > a:hover,
body.home:not(.wp-admin):not(.is-sticky) .main-menu > li > a:hover { color: var(--color-menu-text-home-hover); }

body:not(.wp-admin) .main-menu .sub-menu,
body:not(.wp-admin) #site-navigation .main-menu .sub-menu { background-color: var(--color-header-background); }

body:not(.wp-admin) .main-menu .sub-menu a { color: var(--color-menu-text-default); }
body:not(.wp-admin) .main-menu .sub-menu a:hover { color: var(--color-menu-text-default-hover); }

body:not(.wp-admin) .menu-pill > li > a,
body:not(.wp-admin) .pill-menu > li > a,
body:not(.wp-admin) .wpex-pill-menu a { background-color: var(--color-pill-background); color: var(--color-pill-text); }

body:not(.wp-admin) .menu-pill > li > a:hover,
body:not(.wp-admin) .pill-menu > li > a:hover,
body:not(.wp-admin) .wpex-pill-menu a:hover { background-color: var(--color-pill-background-hover); }

body:not(.wp-admin) .menu-pill > li.current-menu-item > a,
body:not(.wp-admin) .pill-menu > li.current-menu-item > a,
body:not(.wp-admin) .wpex-pill-menu .current-menu-item a { background-color: var(--color-pill-background-active); }

body:not(.wp-admin) #wpex-mobile-menu-navbar a,
body:not(.wp-admin) .mobile-menu a,
body:not(.wp-admin) #mobile-menu a { color: var(--color-menu-text-default); }

body:not(.wp-admin) #wpex-mobile-menu-navbar a:hover,
body:not(.wp-admin) .mobile-menu a:hover,
body:not(.wp-admin) #mobile-menu a:hover { color: var(--color-menu-text-default-hover); }


/* ============================================================================
   E. FOOTER
   ============================================================================ */

body:not(.wp-admin) #footer,
body:not(.wp-admin) .site-footer,
body:not(.wp-admin) #footer-inner,
body:not(.wp-admin) #footer-widgets,
body:not(.wp-admin) .footer-widgets { background-color: var(--color-footer-background); color: var(--color-footer-text); }

body:not(.wp-admin) #footer a,
body:not(.wp-admin) .site-footer a,
body:not(.wp-admin) #footer-widgets a { color: var(--color-footer-text); }

body:not(.wp-admin) #footer a:hover,
body:not(.wp-admin) .site-footer a:hover,
body:not(.wp-admin) #footer-widgets a:hover { opacity: 0.8; }

body:not(.wp-admin) #footer-bottom,
body:not(.wp-admin) .footer-bottom { background-color: var(--color-footer-background); color: var(--color-footer-text); }

body:not(.wp-admin) #footer h1, body:not(.wp-admin) #footer h2,
body:not(.wp-admin) #footer h3, body:not(.wp-admin) #footer h4,
body:not(.wp-admin) #footer h5, body:not(.wp-admin) #footer h6,
body:not(.wp-admin) .site-footer h1, body:not(.wp-admin) .site-footer h2,
body:not(.wp-admin) .site-footer h3, body:not(.wp-admin) .site-footer h4,
body:not(.wp-admin) .site-footer h5, body:not(.wp-admin) .site-footer h6 { color: var(--color-footer-text); }


/* ============================================================================
   F. BUTTONS
   ============================================================================ */

body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button,
body:not(.wp-admin):not(.viveres-dashboard-page) .wpex-button,
body:not(.wp-admin):not(.viveres-dashboard-page) a.theme-button,
body:not(.wp-admin):not(.viveres-dashboard-page) a.wpex-button,
body:not(.wp-admin):not(.viveres-dashboard-page) input[type="submit"],
body:not(.wp-admin):not(.viveres-dashboard-page) button[type="submit"] {
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    border-color: var(--color-button-background);
}

body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) .wpex-button:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) a.theme-button:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) a.wpex-button:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) input[type="submit"]:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) button[type="submit"]:hover {
    background-color: var(--color-button-background-hover);
    color: var(--color-button-text);
    border-color: var(--color-button-background-hover);
}

body:not(.wp-admin):not(.viveres-dashboard-page) a.vcex-button:not(.vsp-cta__booking a):not(.vsp-hero__booking a) {
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    border-color: var(--color-button-background);
}

body:not(.wp-admin):not(.viveres-dashboard-page) a.vcex-button:not(.vsp-cta__booking a):not(.vsp-hero__booking a):hover {
    background-color: var(--color-button-background-hover);
    color: var(--color-button-text);
    border-color: var(--color-button-background-hover);
}

body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button.outline,
body:not(.wp-admin):not(.viveres-dashboard-page) .wpex-button.outline,
body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button-outline {
    background-color: transparent;
    color: var(--color-button-background);
    border: 2px solid var(--color-button-background);
}

body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button.outline:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) .wpex-button.outline:hover,
body:not(.wp-admin):not(.viveres-dashboard-page) .theme-button-outline:hover {
    background-color: var(--color-button-background);
    color: var(--color-button-text);
}


/* ============================================================================
   G. WPBAKERY CONTENT ELEMENTS
   ============================================================================ */

body:not(.wp-admin) .vc_custom_heading { color: var(--color-primary); }
body:not(.wp-admin) .vc_separator .vc_sep_holder .vc_sep_line { border-color: var(--color-primary); }
body:not(.wp-admin) .vc_icon_element .vc_icon_element-inner .vc_icon_element-icon { color: var(--color-primary); }
body:not(.wp-admin) .vc_progress_bar .vc_single_bar .vc_bar { background-color: var(--color-primary); }
body:not(.wp-admin) .vc_tta-tabs .vc_tta-tab.vc_active > a,
body:not(.wp-admin) .vc_tta-tabs .vc_tta-tab > a:hover { color: var(--color-primary); }
body:not(.wp-admin) .vc_toggle_title h4,
body:not(.wp-admin) .vc_tta-accordion .vc_tta-panel-title a { color: var(--color-primary); }


/* ============================================================================
   H. TOTAL THEME — VCEX MODULES
   ============================================================================ */

body:not(.wp-admin) .vcex-post-terms a:not(.property-card a) { color: var(--color-text); }
body:not(.wp-admin) .vcex-blog-entry-title a,
body:not(.wp-admin) .vcex-post-title a { color: var(--color-text); }
body:not(.wp-admin) .vcex-blog-entry-title a:hover,
body:not(.wp-admin) .vcex-post-title a:hover { color: var(--color-primary); }
body:not(.wp-admin) .vcex-icon-box .vcex-icon-box-icon { color: var(--color-primary); }


/* ============================================================================
   I. TEKST VARIANTEN
   ============================================================================ */

body:not(.wp-admin) .entry-meta, body:not(.wp-admin) .post-meta,
body:not(.wp-admin) .wpex-post-meta, body:not(.wp-admin) .meta,
body:not(.wp-admin) .vcex-post-meta, body:not(.wp-admin) small,
body:not(.wp-admin) .text-muted, body:not(.wp-admin) figcaption { color: var(--color-text-light); }

body:not(.wp-admin) blockquote { border-left-color: var(--color-primary); color: var(--color-text); }


/* ============================================================================
   J. ACHTERGRONDEN
   ============================================================================ */

body:not(.wp-admin) .bg-alt,
body:not(.wp-admin) .wpex-bg-gray,
body:not(.wp-admin) .vc_row.bg-alt { background-color: var(--color-background-secondary); }


/* ============================================================================
   K. UI ELEMENTEN
   ============================================================================ */

body:not(.wp-admin) #site-scroll-top,
body:not(.wp-admin) .wpex-scroll-top { background-color: var(--color-primary); color: var(--color-button-text); }
body:not(.wp-admin) #site-scroll-top:hover,
body:not(.wp-admin) .wpex-scroll-top:hover { background-color: var(--color-primary-hover); }
body:not(.wp-admin) .site-breadcrumbs a { color: var(--color-link); }
body:not(.wp-admin) .site-breadcrumbs a:hover { color: var(--color-link-hover); }
body:not(.wp-admin):not(.viveres-dashboard-page) ::selection { background-color: var(--color-primary); color: #ffffff; }


/* ============================================================================
   L. BORDERS
   ============================================================================ */

/* v4.2.774 — was: border-color: var(--color-text-light); opacity: 0.3;
   Die combo overschreef de 1px rgba(0,0,0,0.05) van alle paginadividers
   (.concierge-divider, .hp-divider, .about-divider, .faq-divider, .journeys-divider,
   .va-divider) omdat de globale `hr` selector wint van een enkele class. Resultaat:
   alle hr-dividers zichtbaar donkerder dan de single-property hairline (die als
   border-bottom op .vsp-hero zit en dus ontsnapt aan deze regel).
   Nu trekken we de hr-kleur aan hetzelfde --viveres-border token als de rest,
   zodat elke divider op de site dezelfde subtiele tint heeft. */
body:not(.wp-admin) hr { border-color: var(--viveres-border, rgba(0,0,0,0.05)); opacity: 1; }


/* ============================================================================
   M. UITSLUITINGEN
   ============================================================================ */

.vsp, .vsp *, .property-card, .property-card * { /* laat #649 en #714 de controle houden */ }


/* ============================================================================
   N. UTILITY CLASSES
   Gegenereerd via Dashboard → Design → Utility Classes (snippet 48)
   ============================================================================ */

.viveres-hero-title .vc_column-inner,
.viveres-hero-title p {
    font-style: var(--font-style-hero) !important;
    letter-spacing: var(--letter-spacing-hero) !important;
}


/* ============================================================================
   O. HOMEPAGE — viv-* LAYOUT CLASSES
   ============================================================================ */

/* ── Hero ───────────────────────────────────────────────────────────────────── */
body .v-hero .wpb_text_column p,
body .v-hero p {
    font-size: 96px !important;
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
}
.v-hero .wpb_wrapper p {
    margin-bottom: -20px !important;
}
.viv-hero-sub .wpb_wrapper p,
.viv-hero-sub .wpb_wrapper span,
.viv-hero-sub * {
    letter-spacing: 5px !important;
    font-size: clamp(14px, 1.8vw, 25px) !important;
}


/* ── Divider rijen ──────────────────────────────────────────────────────────── */


/* ── Feature rijen — layout & symmetrische padding ──────────────────────────── */
body .viv-feature-row.vc_row {
    padding-top: 50px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

body .viv-feature-row.vc_row-flex {
    align-items: stretch !important;
}

/* Tekst links (rijen: text | img) */
body .viv-feature-text-left.wpb_column {
    display: flex !important;
    align-items: center !important;
}
body .viv-feature-text-left.wpb_column > .vc_column-inner {
    padding-right: 2% !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* Foto rechts (rijen: text | img) */
body .viv-feature-img-right.wpb_column > .vc_column-inner {
    padding-left: 2% !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Foto links (rijen: img | text) */
body .viv-feature-img-left.wpb_column > .vc_column-inner {
    padding-right: 2% !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Tekst rechts (rijen: img | text) */
body .viv-feature-text-right.wpb_column {
    display: flex !important;
    align-items: center !important;
}
body .viv-feature-text-right.wpb_column > .vc_column-inner {
    padding-left: 2% !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Afbeeldingen — volledige breedte kolom + border-radius */
body .viv-feature-img-right .vcex-image,
body .viv-feature-img-right .vcex-image-wrap,
body .viv-feature-img-right .vcex-img-wrap,
body .viv-feature-img-left .vcex-image,
body .viv-feature-img-left .vcex-image-wrap,
body .viv-feature-img-left .vcex-img-wrap {
    width: 100% !important;
    display: block !important;
    line-height: 0 !important;
}
body .viv-feature-img-right .vcex-image img,
body .viv-feature-img-right .vcex-img-wrap img,
body .viv-feature-img-left .vcex-image img,
body .viv-feature-img-left .vcex-img-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
}


/* ============================================================================
   P. FULL-HEIGHT ROW — VERTICALE CENTRERING FIX
   ============================================================================ */

:root { --viveres-header-h: 157px; }


/* Single property hero — "Inquire about this stay" button: 40px hoog */
body:not(.wp-admin) .vsp-hero__booking .vif-trigger-primary {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}