/*
 * Header restyle: solid red -> white, black nav text with red hover/active.
 *
 * The header itself (logo, menu, search, socials) is rendered by TagDiv
 * Composer from a database template (legacy/Newspaper/header.php ->
 * do_shortcode() against td_util::get_header_template_content()) - it is
 * NOT theme markup, so structure is left untouched here. Only restyled via
 * CSS, targeting the stable component classes TDC always emits
 * (tdb_header_logo, tdb_header_menu, tdb_header_search, tdm_block_socials,
 * .td-element-style) rather than the tdi_NN instance IDs, which TDC
 * regenerates every time the header template is re-saved in the builder.
 *
 * Selectors are scoped under .td-header-template-wrap so nothing here can
 * leak into the homepage content area (grid/sidebar), which is a later phase.
 *
 * Breakpoints (767 / 1018 / 1140) mirror TagDiv Composer's own responsive
 * tiers, visible in its inline <style> blocks, so this stays in step with
 * how the header itself already collapses on tablet/mobile.
 */

/* ---- Row backgrounds: red -> white (desktop, mobile, both sticky variants) ---- */
.td-header-template-wrap .td-element-style,
.td-header-template-wrap .td-element-style:after {
    background-color: #ffffff !important;
}

/* subtle separation now that header and page are both white */
.td-header-template-wrap .td-header-desktop-wrap > .tdc-zone > .tdc-row,
.td-header-template-wrap .td-header-mobile-wrap > .tdc-zone > .tdc-row {
    box-shadow: 0 1px 0 0 rgba(17, 17, 17, 0.08);
}

/* ---- Accent color used by TDC's own menu underline / hover styles ---- */
.td-header-template-wrap {
    --td_theme_color: #dd0000;
}

/* ---- Primary nav: black text, red hover + active ---- */
.td-header-template-wrap .tdb_header_menu .tdb-menu > li > a,
.td-header-template-wrap .tdb_header_menu .td-subcat-more {
    color: #111111 !important;
}

.td-header-template-wrap .tdb_header_menu .tdb-menu > li:hover > a,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li.tdb-hover > a,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li.current-menu-item > a,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li.current-menu-ancestor > a,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li.current-category-ancestor > a,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li.current-page-ancestor > a {
    color: #dd0000 !important;
}

.td-header-template-wrap .tdb_header_menu .tdb-menu > li > a .tdb-sub-menu-icon-svg svg,
.td-header-template-wrap .tdb_header_menu .tdb-menu > li > a .tdb-sub-menu-icon-svg svg * {
    fill: #111111 !important;
}

/* ---- Mobile hamburger + search toggle icons: white -> black, red on hover ---- */
.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob {
    color: #111111 !important;
}

.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button svg,
.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button svg *,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob svg,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob svg * {
    fill: #111111 !important;
}

.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button:hover,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob:hover {
    color: #dd0000 !important;
}

.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button:hover svg,
.td-header-template-wrap .tdb_mobile_menu .tdb-mobile-menu-button:hover svg *,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob:hover svg,
.td-header-template-wrap .tdb_mobile_search .tdb-header-search-button-mob:hover svg * {
    fill: #dd0000 !important;
}

/* ---- Desktop search + social icons: white -> black, red on hover ---- */
.td-header-template-wrap .tdb_header_search svg,
.td-header-template-wrap .tdb_header_search svg *,
.td-header-template-wrap .tdm_block_socials svg,
.td-header-template-wrap .tdm_block_socials svg *,
.td-header-template-wrap .tdb_header_search,
.td-header-template-wrap .tdm_block_socials a {
    color: #111111 !important;
    fill: #111111 !important;
}

.td-header-template-wrap .tdb_header_search a:hover svg,
.td-header-template-wrap .tdb_header_search a:hover svg *,
.td-header-template-wrap .tdm_block_socials a:hover svg,
.td-header-template-wrap .tdm_block_socials a:hover svg * {
    fill: #dd0000 !important;
}

/* ---- Spacing / alignment ---- */
.td-header-template-wrap .td-header-desktop-wrap .tdc-row,
.td-header-template-wrap .td-header-mobile-wrap .tdc-row {
    min-height: 78px;
}

@media (min-width: 768px) and (max-width: 1018px), (min-width: 1019px) and (max-width: 1140px) {
    .td-header-template-wrap .td-header-desktop-wrap .tdc-row {
        min-height: 66px;
    }
}

@media (max-width: 767px) {
    .td-header-template-wrap .td-header-mobile-wrap .tdc-row {
        min-height: 54px;
    }
}

/*
 * ---- Desktop nav: single row, no wrap ----
 *
 * TDC saves the desktop header row's 3 columns (logo / menu / search+social)
 * as fixed inline widths (20% / 60% / 20%, !important). With 12 menu items
 * (Home, Art & Design, Collab & Advertising, Creators & Influencers, Writing
 * & blogging, Music, Life, Fashion, Beauty, Acting, Comedy, Money) that 60%
 * isn't enough at typical desktop widths, so the floated <li>s wrap to a
 * second row. Fixed only here, scoped to .td-header-desktop-wrap and its
 * sticky duplicate (.td-header-desktop-sticky-wrap) - .td-header-mobile-wrap
 * and the <=1018px tablet/mobile tiers are untouched, per TDC's own
 * mobile/desktop split.
 *
 * :has() targets columns by the stable block class they contain
 * (tdb_header_logo / tdb_header_menu / tdm_block_socials / tdb_header_search)
 * rather than the tdi_NN column IDs, which TDC regenerates on every header
 * template save.
 */

/* Columns size to content instead of TDC's fixed 20/60/20, so the menu
   column can claim the width the logo/social columns don't need. */
.td-header-desktop-wrap .tdc-row > .vc_column:has(.tdb_header_logo),
.td-header-desktop-sticky-wrap .tdc-row > .vc_column:has(.tdb_header_logo) {
    width: auto !important;
    flex: 0 0 auto !important;
}

.td-header-desktop-wrap .tdc-row > .vc_column:has(.tdb_header_menu),
.td-header-desktop-sticky-wrap .tdc-row > .vc_column:has(.tdb_header_menu) {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* lets this flex child shrink below the menu's natural width instead of forcing the row wider */
}

.td-header-desktop-wrap .tdc-row > .vc_column:has(.tdm_block_socials),
.td-header-desktop-wrap .tdc-row > .vc_column:has(.tdb_header_search),
.td-header-desktop-sticky-wrap .tdc-row > .vc_column:has(.tdm_block_socials),
.td-header-desktop-sticky-wrap .tdc-row > .vc_column:has(.tdb_header_search) {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto; /* keeps search + social pinned to the far right as the menu grows/shrinks */
}

/* Logo: slightly smaller on full desktop to free up room for the menu.
   130px sits between TDC's own 1019-1140 value (120px) and what the column
   would otherwise render at (up to ~240px, unconstrained above 1140px). */
.td-header-desktop-wrap .tdb_header_logo .tdb-logo-img,
.td-header-desktop-sticky-wrap .tdb_header_logo .tdb-logo-img {
    max-width: 130px !important;
}

/* Menu: flex row instead of floated <li>s, so items sit on one line and
   shrink instead of wrapping to a second row. */
.td-header-desktop-wrap .tdb_header_menu .tdb-menu,
.td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto; /* safety net only: lets the row scroll horizontally rather than wrap or hide items if content still doesn't fit at narrower desktop widths */
    scrollbar-width: none;
}

.td-header-desktop-wrap .tdb_header_menu .tdb-menu::-webkit-scrollbar,
.td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu::-webkit-scrollbar {
    display: none;
}

.td-header-desktop-wrap .tdb_header_menu .tdb-menu > li,
.td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu > li {
    float: none !important;
    flex: 0 0 auto;
    margin-right: 4px !important;
}

.td-header-desktop-wrap .tdb_header_menu .tdb-menu > li:last-child,
.td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu > li:last-child {
    margin-right: 0 !important;
}

.td-header-desktop-wrap .tdb_header_menu .tdb-menu > li > a,
.td-header-desktop-wrap .tdb_header_menu .td-subcat-more,
.td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu > li > a,
.td-header-desktop-sticky-wrap .tdb_header_menu .td-subcat-more {
    padding: 0 6px !important;
    white-space: nowrap !important;
}

@media (min-width: 1019px) and (max-width: 1140px) {
    .td-header-desktop-wrap .tdb_header_logo .tdb-logo-img,
    .td-header-desktop-sticky-wrap .tdb_header_logo .tdb-logo-img {
        max-width: 110px !important;
    }

    .td-header-desktop-wrap .tdb_header_menu .tdb-menu > li,
    .td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu > li {
        margin-right: 2px !important;
    }

    .td-header-desktop-wrap .tdb_header_menu .tdb-menu > li > a,
    .td-header-desktop-wrap .tdb_header_menu .td-subcat-more,
    .td-header-desktop-sticky-wrap .tdb_header_menu .tdb-menu > li > a,
    .td-header-desktop-sticky-wrap .tdb_header_menu .td-subcat-more {
        padding: 0 4px !important;
    }
}