/*
 * Shared top-nav styles — the ECOTRAIN public navbar.
 * Linked by both layouts.public and layouts.app so every page (public, auth,
 * admin/user dashboards) renders the same navbar. One canonical definition (U5).
 */

.topnav {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(31,77,46,0.08);
    padding: 14px 0;
    position: sticky; top: 0; z-index: 50;
}
.topnav .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-shrink: 0; line-height: 1; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand-wordmark { font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--epccd-forest); }
.brand-wordmark-accent { color: var(--epccd-accent); }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); }

.topnav-links { display: flex; align-items: center; gap: 14px; }
.topnav-links a.nav-link {
    font-size: 14px; font-weight: 600; color: var(--neutral-700);
    padding: 4px 0; position: relative;
    white-space: nowrap; flex-shrink: 0;
}
.topnav-links a.nav-link:hover { color: var(--epccd-forest); }
.topnav-links a.nav-link.active { color: var(--epccd-forest); }
.topnav-links a.nav-link.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; background: var(--epccd-forest); border-radius: 2px;
}

.topnav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topnav-cta { display: flex; align-items: center; gap: 10px; }
.btn-outline { padding: 9px 18px; border: 1.5px solid var(--epccd-forest); color: var(--epccd-forest); border-radius: 8px; font-weight: 600; font-size: 14px; background: transparent; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn-outline:hover { background: var(--epccd-forest); color: #fff; }
.btn-solid { padding: 9px 18px; background: var(--epccd-forest); color: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1.5px solid var(--epccd-forest); text-decoration: none; display: inline-block; white-space: nowrap; }
.btn-solid:hover { background: var(--epccd-forest-dark); border-color: var(--epccd-forest-dark); color: #fff; }
.mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: none; font-size: 20px; color: var(--epccd-forest); cursor: pointer; flex-shrink: 0; }
.mobile-menu-btn .fa-xmark { display: none; }
.topnav.nav-open .mobile-menu-btn .fa-bars { display: none; }
.topnav.nav-open .mobile-menu-btn .fa-xmark { display: inline-block; }

/* === Nav dropdown === */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 4px 0; margin: 0;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--neutral-700);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.nav-dropdown-toggle:hover { color: var(--epccd-forest); }
.nav-dropdown-toggle .fa-chevron-down { font-size: 10px; transition: transform 0.15s ease; }
.nav-dropdown.open .nav-dropdown-toggle .fa-chevron-down { transform: rotate(180deg); }
.nav-dropdown-menu {
    display: none;
    min-width: 240px;
    background: #fff;
    border: 1px solid rgba(31,77,46,0.08);
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(15,31,20,0.14);
    padding: 6px;
    z-index: 60;
}
.nav-dropdown-menu a {
    display: block; padding: 10px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: var(--neutral-700);
}
.nav-dropdown-menu a:hover { background: var(--neutral-100); color: var(--epccd-forest); }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
@media (min-width: 981px) {
    .nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 10px; }
    .nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
}

/* === Responsive === */
@media (max-width: 1180px) {
    .topnav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border-bottom: 1px solid rgba(31,77,46,0.08);
        box-shadow: 0 12px 24px rgba(15,31,20,0.1);
        padding: 10px 24px 16px;
    }
    .topnav-links a.nav-link { padding: 12px 4px; border-bottom: 1px solid rgba(31,77,46,0.06); }
    .topnav-links a.nav-link.active::after { display: none; }
    .topnav.nav-open .topnav-links { display: flex; }
    .mobile-menu-btn { display: flex; }
}
@media (max-width: 640px) {
    .topnav .container { flex-wrap: wrap; }
    .brand { flex: 1 1 100%; }
    .topnav-right { flex: 1 1 100%; justify-content: flex-end; gap: 6px; margin-top: 8px; }
    .topnav-cta .btn-outline,
    .topnav-cta .btn-solid { padding: 7px 12px; font-size: 13px; }
    .topnav-cta .btn-outline { display: none; }
}