/* ==========================================================================
   Header / Nav — clean sticky chrome (Yahoo Sports-style layout reference)
   Logo is now a text wordmark (logo_setting=title), not an image.
   ========================================================================== */

#main-nav.menu-style-solid-bg .main-menu-wrapper {
    background: #fff !important;
}

#main-nav.menu-style-solid-bg {
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 6px rgba(22, 35, 60, 0.05);
}

/* nav-main.php prints an inline style="line-height:XXXpx" on <nav id="main-
   nav"> itself (computed from the old configured logo height + margins),
   which children inherit — reset it so text doesn't inherit a huge value. */
#main-nav {
    line-height: normal !important;
}

/* Text wordmark instead of the old 480x63 image logo — theme default is a
   huge 50px, way too big for a compact single-row bar. */
.logo-text {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #16233c !important;
    white-space: nowrap;
}

#logo {
    margin: 0 !important;
}

#main-nav.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

/* ---------- Desktop only: merge logo + menu + search into one row ----------
   header_layout is "1" (logo lives inside #main-nav, left of the menu)
   instead of its own separate row above. .main-menu-wrapper is table/
   table-cell by default (tuned for a big standalone logo row), and the
   theme's real mobile menu (hamburger + off-canvas) lives in the separate
   .mobile-header-components blocks — these rules must stay desktop-only or
   they fight that native mobile behaviour and force the full desktop menu
   + search to render inline on small screens too. */
@media (min-width: 861px) {
    /* Three-column layout so the nav links can sit in the true centre of the
       bar regardless of how wide the logo or the search block are, rather
       than just being pushed flush against the search box. #menu-components-
       wrap used to be a single flex item holding both the menu and the
       search/components together; display:contents unwraps it so its two
       children (the menu and ul.components) become direct grid items here
       and can be placed independently. */
    #main-nav .main-menu-wrapper {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center !important;
        padding: 12px 0 !important;
    }

    .header-layout-1-logo {
        grid-column: 1;
        width: auto !important;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* .header-layout-1 #menu-components-wrap in the parent theme's own CSS
       (class + ID) otherwise beats a plain #menu-components-wrap selector
       and forces display:flex back, so this needs !important. */
    #menu-components-wrap {
        display: contents !important;
    }

    #menu-components-wrap .main-menu.main-menu-wrap {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        overflow-x: auto;
    }

    #menu-components-wrap ul.components {
        grid-column: 3;
        justify-self: end;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    /* Descendant (not direct-child) selector — the menu items sit under an
       extra ul#menu-main-menu wrapper, so > li > a never matched */
    #main-nav #main-nav-menu a {
        color: #16233c !important;
        font-weight: 600;
        font-size: 14px;
    }

    #main-nav #main-nav-menu a:hover {
        color: #e0141c !important;
    }

    /* Search — rounded pill input + circular accent button. Scoped under
       #main-nav to out-specificity the theme's own #main-nav #search-submit
       rules, which otherwise win over a bare #search-submit selector. */
    #main-nav #search {
        display: flex;
        align-items: center;
        background: #f7f8fa;
        border: 1px solid #e5e5e5;
        border-radius: 999px;
        overflow: hidden;
        height: 38px;
    }

    #main-nav #search-input {
        border: none !important;
        background: transparent !important;
        padding: 0 16px !important;
        font-size: 14px;
        height: 100%;
        min-width: 180px;
        box-shadow: none !important;
    }

    #main-nav #search-input:focus {
        outline: none;
    }

    #main-nav #search-submit {
        background: #e0141c !important;
        border: none !important;
        color: #fff !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        margin: 0 3px;
        flex-shrink: 0;
    }

    #main-nav #search-submit .tie-icon-search {
        color: #fff !important;
        font-size: 13px;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
    #main-nav.is-stuck {
        position: static;
    }

    /* This holds the full desktop menu + inline search pill — the theme's
       real mobile nav is the separate hamburger + search-trigger icons in
       .mobile-header-components, which are untouched and already correct. */
    #menu-components-wrap {
        display: none !important;
    }

    .logo-text {
        font-size: 17px !important;
    }
}