/*
 * Site nav styles. Loaded site-wide by layouts/app.blade.php for partials/nav.blade.php.
 * The .nav-proto* class prefix is retained from the redesign this shipped from.
 * Covers the wing-logo brand, the Browse Tours/Albums mega-menus, and the search box.
 */

/* --- Brand: wing logo + "Setlists" wordmark --------------------------------- */
.nav-proto-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.nav-proto-brand__logo {
    height: 38px;
    width: auto;
    display: block;
}
.nav-proto-brand__sub {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.18em;
    color: #c8102e;
    padding-left: 10px;
    border-left: 2px solid rgba(0, 0, 0, 0.12);
}

/* --- Browse mega-menu ------------------------------------------------------- */
.nav-proto .container { position: relative; }      /* containing block for the panel */

.nav-proto-mega {
    /* data-bs-display="static" + Bootstrap's .dropdown-menu[data-bs-popper] rule
       leave the panel mis-positioned; force a full-width drop below the navbar.
       !important beats the higher-specificity Bootstrap selector. */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    margin-top: 0;
}
.nav-proto-mega__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    padding: 18px 22px;
    max-height: 70vh;
    overflow-y: auto;
}
.nav-proto-mega__col {
    flex: 1 1 150px;
    min-width: 140px;
    max-width: 200px;
}
.nav-proto-mega__decade {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    color: #c8102e;
    border-bottom: 2px solid rgba(200, 16, 46, 0.25);
    margin-bottom: 6px;
    padding-bottom: 2px;
}
.nav-proto-mega__group {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8a8a;
    margin: 9px 0 3px;
}
.nav-proto-mega__link {
    display: block;
    font-size: 0.82rem;
    color: #2c2c2c;
    text-decoration: none;
    padding: 2px 0;
    line-height: 1.3;
}
.nav-proto-mega__link:hover { color: #c8102e; }
.nav-proto-mega__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 12px 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f6f6f6;
    border-radius: 0 0 8px 8px;
}
.nav-proto-mega__footer a {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c2c2c;
    text-decoration: none;
}
.nav-proto-mega__footer a:hover { color: #c8102e; }

/* --- Bigger search with a leading magnifier --------------------------------- */
.nav-proto-search { min-width: 260px; }
.nav-proto-search .form-control {
    padding-left: 34px;
    padding-right: 34px;   /* room for the "/" hint */
    border-radius: 999px;
    background-color: #fff;
}
.nav-proto-search__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9a9a9a;
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 2;
}

/* --- Spacing between the main nav items (Tours / Albums / Aerosmith TV / More) ---
   Bootstrap's default leaves only 16px between labels, which reads as one run of text.
   Desktop only: the collapsed menu stacks them vertically anyway. */
@media (min-width: 992px) {
    .nav-proto .navbar-nav.me-auto { gap: .25rem; }
    .nav-proto .navbar-nav.me-auto > .nav-item > .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
        white-space: nowrap;   /* "Aerosmith TV" must never break onto two lines */
    }
    /* Same for the account link ("Sign in" / username) on the right. */
    .nav-proto .navbar-nav.ms-lg-3 > .nav-item > .nav-link { white-space: nowrap; }
}
/* Just above the breakpoint, the search box gives up some width so everything fits on
   one line (before this, "Sign in" wrapped and the bar grew to 80px at 992–1199px). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-proto-search { min-width: 190px; }
}
/* Full spacing once there's room for it (just above the breakpoint the search box
   and account menu leave too little width). */
@media (min-width: 1200px) {
    .nav-proto .navbar-nav.me-auto { gap: .5rem; }
    .nav-proto .navbar-nav.me-auto > .nav-item > .nav-link {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* --- Collapsed (mobile) menu ------------------------------------------------ */
@media (max-width: 991.98px) {
    .nav-proto-search { min-width: 0; width: 100%; margin: 8px 0; }
    /* In the collapsed menu, let the mega-menu flow inline (no overlay).
       !important to beat the forced-absolute desktop rule above. */
    .nav-proto-mega { position: static !important; box-shadow: none; border: none; }
    .nav-proto-mega__inner { max-height: 50vh; }
}