/* ==========================================================
   CSDI HEADER — isolated, dedicated stylesheet.
   Deliberately a NEW filename (not csdi-design-system.css) and
   loaded LAST of all stylesheets, so there is no ambiguity about
   caching or load order. If the header still doesn't match after
   this file is in place, the file itself is not reaching the
   browser — see verification steps.
   ========================================================== */

.header-wrap {
    position: sticky;
    top: 0;
    background: #0F2A22 !important;
    box-shadow: none;
}

.header-wrap.sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.header-wrap .header-top {
    display: none;
}

.header-wrap .header-bottom {
    padding: 14px 0;
    background: transparent !important;
}

.header-wrap.sticky .header-bottom {
    padding: 10px 0;
}

".header-wrap .nav-link {
    color: #ffffff !important;
    font-weight: 500;
}

.header-wrap .nav-item:hover .nav-link,
.header-wrap .nav-item.active .nav-link {
    color: #0B6B2D !important;
}

.header-wrap .dropdown-menu {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.header-wrap .dropdown-menu .nav-link {
    color: #0F172A !important;
}

.header-wrap .dropdown-menu .nav-item:hover .nav-link {
    color: #0B6B2D !important;
}

.header-wrap .searchbox {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-wrap .searchbox input {
    background: transparent;
    border: none;
    color: #fff;
}

.header-wrap .searchbox input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* .search-area is a floating dropdown panel that pops out OVER page
   content — it needs to stay a solid, opaque white panel regardless
   of the header's own color, not the translucent treatment above.
   The previous version incorrectly applied the same translucent style
   to both, making this panel look washed out against whatever page
   content sits behind it. */
.header-wrap .search-area {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.header-wrap .search-area input {
    background: transparent;
    border: 1px solid var(--csdi-border);
    color: var(--csdi-navy-text);
}

.header-wrap .search-area input::placeholder {
    color: var(--csdi-text-subtle);
}

.header-wrap .search-area button {
    color: var(--csdi-green-primary);
}

.header-wrap .searchbtn,
.header-wrap .mobile-menu a {
    color: #0F172A;
}

.header-wrap .btn.style1 {
    background: var(--csdi-green-primary);
    color: #fff;
    border-radius: 15px 0 15px 0;
    font-weight: 600;
    border: none;
    padding: 0.7rem 1.6rem;
}

.header-wrap .btn.style1:hover {
    background: #094f22;
    color: #fff;
}

/* Transparent-overlay-on-homepage-hero logic removed — background is
   now guaranteed solid dark green everywhere via an inline style on
   the <header> tag itself (beats any possible external CSS conflict).
   Simpler and reliable beats a visual flourish that was compounding
   the debugging difficulty here. */

/* Mobile collapsed menu has its own light background (#EDF5F3)
   independent of the header — keep nav text dark/readable there */
@media only screen and (max-width: 991px) {
    .header-wrap .main-menu-wrap .nav-link {
        color: #0F172A !important;
    }

    .header-wrap .main-menu-wrap .nav-item:hover .nav-link,
    .header-wrap .main-menu-wrap .nav-item.active .nav-link {
        color: #0B6B2D !important;
    }

    .header-wrap .mobile-bar-wrap .searchbtn,
    .header-wrap .mobile-menu a {
        color: #fff;
    }
}

/* ==========================================================
   SITEWIDE button color fix — placed here (loaded dead last of
   all stylesheets) for maximum cascade priority, matching how
   the header issues were finally resolved earlier.
   The theme's generic .btn.style1/.style2 base colors (#338F7A
   teal, #F59946 orange) were never part of the CSDI brand, but
   every "Send Message"/"Register Now" button across Farm/
   Schools/Community/Contact/Events inherits from these exact
   base rules — not a scoped variant — so this is what actually
   reaches every one of them in a single change.
   ========================================================== */
.btn.style1,
.btn.style2 {
    background-color: #0B6B2D !important;
    color: #fff !important;
    border-radius: 15px 0 15px 0 !important;
}

.btn.style1:hover,
.btn.style2:hover {
    background-color: #094f22 !important;
    color: #fff !important;
}

/* ==========================================================
   EMERGENCY SAFETY NET — deploying live today, nav text still
   not visible despite the correct color fix. This forces
   visibility on every property that could possibly be hiding
   text (not just color), targeting the nav as broadly as
   possible with maximum specificity/priority. If nav items are
   STILL invisible after this, the cause is not CSS at all — it
   means the CMS 'header' menu itself has no items configured
   (a data problem, not a styling one). See deployment notes.
   ========================================================== */
.header-wrap,
.header-wrap .navbar,
.header-wrap .navbar-collapse,
.header-wrap .navbar-nav,
.header-wrap .navbar-nav .nav-item,
.header-wrap .navbar-nav .nav-link,
.header-wrap nav {
    visibility: visible !important;
    opacity: 1 !important;
}

.header-wrap .navbar-nav {
    display: flex !important;
}

.header-wrap .navbar-nav .nav-item {
    display: list-item !important;
}

".header-wrap a.nav-link,
.header-wrap .navbar-nav .nav-item a {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Nav text is white everywhere, all the time — matches the header
   background now being guaranteed solid dark green on every page via
   the inline style, with no more per-page conditional logic to fail. */

/* ==========================================================
   Desktop nav text: white on the dark-green header bar.
   Scoped to desktop so the mobile light menu (which has its
   own dark text rule above) is unaffected.
   ========================================================== */
@media only screen and (min-width: 992px) {
    .header-wrap .main-menu-wrap .nav-link,
    .header-wrap .main-menu-wrap .nav-item > a,
    .header-wrap .header-bottom .nav-link {
        color: #ffffff !important;
    }
    .header-wrap .main-menu-wrap .nav-item:hover .nav-link,
    .header-wrap .main-menu-wrap .nav-item.active .nav-link {
        color: #bfe3cf !important;
    }
    /* dropdown panel is white, so its links stay dark */
    .header-wrap .main-menu-wrap .dropdown-menu .nav-link {
        color: #0F172A !important;
    }
}

/* ==========================================================
   Dropdown submenu links sit on a WHITE panel, so they must be
   dark — the broad "nav text is white" rule above was turning
   them white-on-white (the faded/invisible dropdown text).
   Placed last for cascade priority; high specificity to win.
   ========================================================== */
.header-wrap .navbar-nav .nav-item .dropdown-menu li a,
.header-wrap .navbar-nav .nav-item .dropdown-menu .nav-link,
.header-wrap .main-menu-wrap .dropdown-menu li a,
.header-wrap .main-menu-wrap .dropdown-menu .nav-link {
    color: #0F172A !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.header-wrap .navbar-nav .nav-item .dropdown-menu li a:hover,
.header-wrap .navbar-nav .nav-item .dropdown-menu li a.active,
.header-wrap .main-menu-wrap .dropdown-menu li a:hover,
.header-wrap .main-menu-wrap .dropdown-menu li a.active {
    color: #0B6B2D !important;
}