/* ============================================================
   YWOL — Custom Styles
   Sticky + transparent header (transitions to solid on scroll)
   ============================================================ */

.header-section-1 {
    position: sticky;
    top: 0;
    z-index: 999;
    background: transparent;
    /* transparent over the hero */
    transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* Once the user scrolls: give the header a readable solid background */
.header-section-1.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Text/icon color switch: white when transparent, dark when scrolled
   (Only affects the nav row of header-section-1, not the top bar)
   ============================================================ */
.header-section-1 .main-menu-2>ul>li>a,
.header-section-1 .header-info-content span,
.header-section-1 .header-info-content p a,
.header-section-1 .header-info-icon i,
.header-section-1 .header-bar-3 .bar {
    transition: color 0.35s ease, background 0.35s ease;
}

/* Top of page: white text (over hero) */
.header-section-1:not(.scrolled) .main-menu-2>ul>li>a,
.header-section-1:not(.scrolled) .header-info-content span,
.header-section-1:not(.scrolled) .header-info-content p a {
    color: #ffffff;
}

.header-section-1:not(.scrolled) .header-info-icon i {
    color: #ffffff;
}

.header-section-1:not(.scrolled) .header-bar-3 .bar {
    background: #ffffff;
}

/* Scrolled: dark text (over white background) */
.header-section-1.scrolled .main-menu-2>ul>li>a,
.header-section-1.scrolled .header-info-content span,
.header-section-1.scrolled .header-info-content p a {
    color: #1a1a1a;
}

.header-section-1.scrolled .header-info-icon i {
    color: #0E430B;
}

.header-section-1.scrolled .header-bar-3 .bar {
    background: #1a1a1a;
}

/* Top-bar collapse animation on scroll (keeps the "Global Save Sapiens Day" strip) */
.header-section-1 .top-bar {
    transition: max-height 0.35s ease, opacity 0.35s ease;
    max-height: 80px;
    overflow: hidden;
}

.header-section-1.scrolled .top-bar {
    max-height: 0;
    opacity: 0;
}

/* Mobile: top-bar is already hidden on <md; no need for extra rules */
@media (max-width: 767px) {
    .header-section-1 .top-bar {
        display: none !important;
    }

    /* On mobile keep the header solid white always (better UX on small screens) */
    .header-section-1 {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .header-section-1 .main-menu-2>ul>li>a,
    .header-section-1 .header-info-content span,
    .header-section-1 .header-info-content p a {
        color: #1a1a1a !important;
    }

    .header-section-1 .header-bar-3 .bar {
        background: #1a1a1a !important;
    }
}

/* ============================================================
   YWOL — Universal Black Text Override
   Forces all text to black, with exceptions for dark backgrounds
   ============================================================ */

/* ---- 1. Base reset — everything black by default ---- */
html, body {
    color: #000000 !important;
}

p, h1, h2, h3, h4, h5, h6, span, li, a, label, td, th, dt, dd,
strong, em, b, small, blockquote, cite, figcaption,
.common-subtitle span,
.common-title h2,
.common-title h3,
.text p,
.detail-text p,
.details-content p,
.details-content li,
.benefits ul li,
.service p,
.service i,
.widget p,
.card-content p,
.card-content h5,
.author-info h5,
.author-info p {
    color: #000000 !important;
}

/* ---- 2. Input fields & textareas (typed text) ---- */
input, textarea, select {
    color: #000000 !important;
}

/* ---- 3. FOOTER (dark background — must stay light) ---- */
.footer-section,
.footer-section .footer-widget,
.footer-section .about-widget,
.footer-section .text p,
.footer-section .info p,
.footer-section .info span,
.footer-section .footer-copyright,
.footer-section .get-in-touch .text p,
.footer-section .get-in-touch .text h6,
.footer-section ul li a,
.footer-section .footer-bottom-menu ul li a {
    color: #c8d0c6 !important;
}

.footer-section h3.w-title {
    color: #ffffff !important;
}

.footer-section a:hover,
.footer-section .footer-copyright a {
    color: #7dc57a !important;
}

/* ---- 4. HERO / BREADCRUMB on dark backgrounds ---- */
.hero-slider-active-1,
.hero-slider-active-1 h1,
.hero-slider-active-1 p,
.hero-slider-active-1 span,
.hero-slider-active-1 .subtitle span,
.hero-slider-active-1 .author-info h5,
.hero-slider-active-1 .author-info p,
.hero-slider-active-1 .text p {
    color: #ffffff !important;
}

.breadcrumb-wrapper,
.breadcrumb-wrapper *,
.breadcrumb-title,
.breadcrumb-list a,
.breadcrumb-list li {
    color: #ffffff !important;
}

.breadcrumb-section .breadcrumb-title h2,
.breadcrumb-section .breadcrumb-nav a,
.breadcrumb-section .breadcrumb-nav li {
    color: #ffffff !important;
}

/* ---- 5. Buttons — keep white text on colored backgrounds ---- */
.e-primary-btn,
.e-primary-btn *,
.e-primary-btn span,
.e-primary-btn i,
.review-btn,
.review-btn *,
.top-btn,
.top-btn *,
.theme-btn,
.theme-btn *,
button.btn,
.btn-admin-primary,
.btn-login {
    color: #ffffff !important;
}

/* Buttons that are outlined/light — keep theme's dark text */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger {
    color: #000000 !important;
}

/* ---- 6. Dark overlay / completed-project-top sections ---- */
.completed-project-top,
.completed-project-top *,
.completed-project-top .common-title h2,
.completed-project-top .common-subtitle span {
    color: #ffffff !important;
}

/* ---- 7. Alerts — keep semantic colors ---- */
.alert-success,
.alert-success * { color: #0E430B !important; }

.alert-danger,
.alert-danger *  { color: #721c24 !important; }

.alert-warning,
.alert-warning * { color: #856404 !important; }

.alert-info,
.alert-info *    { color: #0c5460 !important; }

/* ---- 8. Badges — preserve bg/text contrast ---- */
.badge.bg-success,
.badge.bg-success *,
.badge.bg-danger,
.badge.bg-danger *,
.badge.bg-info,
.badge.bg-info *,
.badge.bg-primary,
.badge.bg-primary *,
.badge.bg-secondary,
.badge.bg-secondary *  { color: #ffffff !important; }

.badge.bg-warning,
.badge.bg-warning *    { color: #333333 !important; }

/* ---- 9. Hero slide content overlay in old theme ---- */
.hero-side,
.hero-side *,
.hero-content-1,
.hero-content-1 * {
    color: #ffffff !important;
}

/* ---- 10. Footer newsletter input (dark bg) ---- */
.footer-newsletter-form input,
.footer-section .subscribe-form input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .15) !important;
}

.footer-section .subscribe-form input::placeholder {
    color: rgba(255, 255, 255, .6) !important;
}

/* ============================================================
   Header Top-Bar: white text + black-on-hover button
   ============================================================ */

/* --- 1. Make the top-bar message text white --- */
.top-bar .text-wrap,
.top-bar .text-wrap span {
    color: #ffffff !important;
}

/* If the calendar icon uses SVG stroke/fill and disappears, force it white too */
.top-bar .text-wrap img {
    filter: brightness(0) invert(1);
}

/* --- 2. Button (The YWOL Method) — normal state --- */
.top-bar .top-btn,
.top-bar .top-btn * {
    color: #ffffff !important;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

/* --- 3. Button — HOVER state: text becomes black --- */
.top-bar .top-btn:hover,
.top-bar .top-btn:focus,
.top-bar .top-btn:hover *,
.top-bar .top-btn:focus * {
    color: #000000 !important;
}