/*
 * Vidabiol color overrides for the Soilux theme.
 * Loaded AFTER css/custom.css so these CSS custom properties win.
 * Original theme accent was a mustard yellow (#EECE38) — recolored to the
 * Vidabiol identity (orange / near-black / olive green).
 */
html {
    scroll-behavior: smooth;
}

.breadcrumb {
    --bs-breadcrumb-divider: "/";
}

.hero {
    background-image: url('/hero-bg2.png');
}

.main-menu ul li a {
    white-space: nowrap;
}

.main-menu .nav-link.active {
    color: var(--accent-color) !important;
}

.contact-us-circle a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

:root {
    --primary-color: #15140f;
    --secondary-color: #1e1c16;
    --bg-color: #15140f;
    --text-color: #b3b0a6;
    --accent-color: #F26722;
    --white-color: #FFFFFF;
    --divider-color: #FFFFFF1A;
    --dark-divider-color: #FFFFFF1A;
    --vidabiol-green: #6b7a52;
}

/*
 * The theme was authored for a LIGHT base (white/cream backgrounds, dark
 * text). Flipping --bg-color/--secondary-color to black makes every section
 * dark, but a couple dozen rules in custom.css still set text/icons to
 * var(--primary-color) assuming they'd sit on a light background. Each
 * selector below is copied verbatim from custom.css and re-declared here
 * (this file loads after it) so it wins the cascade without touching the
 * vendor file. Buttons, the WhatsApp/orange-background dropdown menu, and
 * the white contact-form inputs are deliberately left alone — their dark
 * text is still correct against their own (unchanged) light backgrounds.
 */
h1, h2, h3, h4, h5, h6,
.why-choose-nav ul li .nav-link,
.faq-accordion .accordion-header .accordion-button,
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after,
.readmore-btn {
    color: var(--white-color);
}

.readmore-btn::before {
    background-image: url('/idabiol/images/arrow-white.svg');
}

/* This badge keeps its own orange background regardless of section theme,
   so its heading must stay dark (inherited white would be unreadable). */
.why-choose-info-content h3 {
    color: var(--primary-color);
}

/* Testimonial cards keep their own white background (unchanged from the
   original light theme), so their headings must stay dark too. */
.testimonial-item-content h3,
.testimonial-author-content h3 {
    color: var(--primary-color);
}

/* The theme sets cursor:none on these so its own JS "magic cursor" (a
   custom circle that follows the mouse) can take over on hover. We never
   load that script, so the native pointer must stay visible everywhere it
   would otherwise vanish. */
.section-title h1,
.section-title h2,
.page-header-box h1,
.our-testimonials .swiper-wrapper,
.testimonial-slider-metal .swiper .swiper-wrapper {
    cursor: auto !important;
}

.watch-video-circle a,
.product-item-img a,
.team-item-image a,
.post-featured-image a,
.video-play-btn a,
.page-gallery-box .photo-gallery a,
.video-gallery-image a,
.service-item-image-gold a,
.our-story-button-gold .video-play-button-gold a,
.service-item-image-metal a,
.team-item-image-metal a {
    cursor: pointer !important;
}

/* Outline icons shipped as flat SVGs with a hardcoded dark stroke
   (#2C2C2C) — can't be recolored via `color`, so invert them to white the
   same way the theme already does for its own hover/active states. */
.icon-box img {
    filter: brightness(0) invert(1);
}

/* Touches of the secondary Vidabiol green accent, kept selective so the
   theme still reads as one coherent palette built around the orange accent. */
.faq-cta-box,
.why-choose-nav .nav-link.active {
    border-color: var(--vidabiol-green) !important;
}

.pricing-item.highlighted-box {
    border-color: var(--accent-color) !important;
}

.pricing-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.pricing-item-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.vidabiol-logo-badge {
    display: inline-flex;
    align-items: center;
}

.vidabiol-logo-img {
    display: block;
    height: 36px;
    width: auto;
}

.footer-logo.vidabiol-logo-badge {
    margin-bottom: 20px;
}

.vida-stats-row {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 32px;
}
.vida-stat {
    flex: 1;
    min-width: 140px;
    text-align: center;
}
.vida-stat h3 {
    color: var(--white-color);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}
.vida-stat p {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin: 0;
}

#distributeurs,
#histoire,
#vision,
#valeurs,
#rd,
#partenaires {
    scroll-margin-top: 100px;
}

.vida-simple-card {
    background: var(--secondary-color);
    border-radius: 12px;
    padding: 32px;
    height: 100%;
}
.vida-simple-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}
.vida-simple-card p {
    color: var(--text-color);
    margin: 0;
}

.resource-category-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: var(--accent-color);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

/* Placeholder badge for sections awaiting real client content
   (team members, blog posts, intro video) — kept unobtrusive. */
.vidabiol-placeholder-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vidabiol-green);
    background: rgba(107, 122, 82, 0.12);
    border-radius: 100px;
    padding: 4px 12px;
    margin-bottom: 10px;
}