/* =============================================================================
   THE BRO COACH(R) PODCAST - HEADER
   Loaded AFTER design-system.css, and deliberately overrides the MULC nav.

   Every value here was read from the old site's compiled theme.css and its
   rendered markup, not estimated. The Bro Coach header differs from the MULC one
   in four STRUCTURAL ways, which is why this is its own file rather than a few
   token tweaks:

     1. WHITE, not dark.   .uk-navbar-container:not(.uk-navbar-transparent)
                           { background:#fff }   The logo is dark artwork
                           (transparent PNG, 99% dark pixels), so it REQUIRES a
                           light header. On a dark header it disappears.
     2. FULL WIDTH.        The header uses .uk-container-expand
                           { max-width:none }, so the bar spans the viewport
                           while page content stays boxed at 1200px.
     3. NOT STICKY.        The theme config sets navbar.sticky = 0. The header
                           scrolls away with the page. The MULC nav is
                           position:fixed with hide-on-scroll, which is why the
                           116px fixed-nav offsets do NOT apply on this site.
     4. OUTLINE CTA.       .uk-button-default { background:transparent;
                           color:#000; border:2px solid #c84141 } filling solid
                           red on hover. The MULC nav CTA is solid red.

   Toolbar: .tm-toolbar-default { background:#262626 }, 10px vertical padding,
   15px font, three social links right-aligned (YouTube, X, Instagram).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SELF-CONTAINED BASELINE

   header.js emits these class names, and their styles used to come from
   design-system.css. Ported pages no longer load that file (it forces the MULC
   dark theme onto a page whose sections are white), so without the rules below
   they render completely unstyled. Symptoms this fixes:

     .skip-link         "Skip to main content" showing as a red link at the top
                        of every page instead of being hidden until focused
     .nav__toggle       the mobile hamburger visible next to the desktop logo
     .nav__cta-*        BOTH label variants rendering, so the button read
                        "GET COACHING GETCOACHING"

   Copied from design-system.css rather than reinvented, so behaviour matches
   MULC exactly.
   ----------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-6);
    margin: 0;
    overflow: visible;
    clip: auto;
    z-index: 9999;
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
}

.nav__toggle {
    display: none;            /* desktop: hidden. Shown in the mobile block. */
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    touch-action: manipulation;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #000000;      /* dark, for the white Bro Coach header */
    transition: all var(--transition-fast);
}

.nav__cta-desktop { display: inline; }
.nav__cta-mobile { display: none !important; }

/* -----------------------------------------------------------------------------
   TOOLBAR (maps to the MULC announcement bar)
   ----------------------------------------------------------------------------- */
.announcement-bar {
    background: #262626;          /* .tm-toolbar-default */
    border-bottom: none;
    padding: 10px 0;              /* .tm-toolbar */
    position: static;             /* not sticky: see note 3 above */
    font-size: 15px;
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;    /* social: "toolbar-right:end" */
    max-width: none;              /* full width, matching the header */
    padding: 0 40px;
}

.announcement-bar__socials {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.announcement-bar__social-link {
    color: #ffffff;
    opacity: 0.85;
    display: flex;
}

.announcement-bar__social-link:hover {
    opacity: 1;
    color: var(--color-primary);
}

.announcement-bar__social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* -----------------------------------------------------------------------------
   NAVBAR: white, full width, static
   ----------------------------------------------------------------------------- */
.nav {
    position: static;             /* overrides the MULC position:fixed */
    top: auto;
    background: #ffffff;          /* .uk-navbar-container */
    border-bottom: none;
    box-shadow: none;
    z-index: auto;
}

/* Full-bleed bar. .uk-container-expand sets max-width:none, keeping only the
   side padding, so the logo sits hard left and the CTA hard right. */
.nav > .container {
    max-width: none;
    padding: 0 40px;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 80px;
}

.nav__logo {
    display: flex;
    align-items: center;
}

/* Live markup serves the logo at 297x60 desktop and 247x50 mobile. */
.nav__logo img {
    height: 60px;
    width: auto;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    margin-left: auto;
    padding: 0;
    list-style: none;
}

.nav__item {
    position: relative;
}

/* .uk-navbar-nav>li>a: colour #000, weight 600, uppercase, 0 letter-spacing,
   10px horizontal padding. */
.nav__link {
    display: flex;
    align-items: center;
    color: #000000;
    font-family: var(--font-nav);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
    padding: 0 10px;
    min-height: 80px;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.nav__link:hover {
    color: var(--color-primary);
}

/* Dropdown: light panel to match the white header, not the MULC dark one. */
.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--space-4) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.nav__item:hover .nav__dropdown,
.nav__item--open .nav__dropdown {
    opacity: 1;
    visibility: visible;
}

.nav__dropdown-link {
    display: block;
    padding: var(--space-2) var(--space-5);
    color: #000000;
    font-family: var(--font-nav);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
}

.nav__dropdown-link:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.03);
}

/* -----------------------------------------------------------------------------
   CTA: outline, fills red on hover (.uk-button-default)
   ----------------------------------------------------------------------------- */
.nav__cta {
    /* Self-sufficient on purpose. This used to lean on .btn / .btn--primary from
       design-system.css, which ported pages no longer load, leaving it with no
       display value: vertical padding on an inline <a> does not lay out. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: transparent;
    background-color: transparent;
    color: #000000;
    border: 2px solid var(--color-primary);
    border-radius: 0;
    padding: 12px 30px;
    font-family: var(--font-nav);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    box-shadow: none;
    animation: none;
    margin-left: var(--space-5);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__cta:hover {
    background: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: none;
    transform: none;
}

.nav-divider {
    display: none;
}

/* -----------------------------------------------------------------------------
   MOBILE (theme breakpoint "m" = 768px; logo drops to 247x50)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .announcement-bar__inner { padding: 0 20px; }

    .nav > .container { padding: 0 20px; }

    .nav__inner { min-height: 64px; }

    /* Hamburger appears, and the CTA swaps to its stacked two-line label. */
    .nav__toggle { display: flex; }
    .nav__cta-desktop { display: none !important; }
    .nav__cta-mobile {
        display: flex !important;
        flex-direction: column;
        line-height: 1.1;
    }

    .nav__logo img {
        height: 50px !important;
        max-height: 50px !important;
    }

    .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        padding: var(--space-4) 0;
        display: none;
    }

    .nav__links--open { display: flex; }

    .nav__link {
        min-height: 48px;
        padding: 0 20px;
    }

    .nav__dropdown {
        position: static;
        opacity: 1;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        border: none;
        box-shadow: none;
        padding: 0;
        background: rgba(0, 0, 0, 0.03);
    }

    .nav__item--open .nav__dropdown {
        visibility: visible;
        height: auto;
        padding: var(--space-2) 0;
    }

    .nav__toggle span { background: #000000; }
}