/**
 * Main Styles
 * File: /wp-content/themes/wrestlerfinder/assets/css/main.css
 *
 * Global layout, nav, header, footer, and utility classes.
 * Depends on design-system.css for all custom property tokens.
 *
 * @package WrestlerFinder
 */

/* =============================================================================
   Button system — global base for nav, CTAs, and any page that doesn't ship
   its own .wf-btn overrides. Page-specific CSS files (profile.css, editor.css,
   college.css, dashboard.css, welcome.css) load AFTER main.css and can layer
   their own .wf-btn rules on top. This base set is load-bearing for the site
   header CTA on every page.
============================================================================= */

.wf-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--space-2);
    padding:          var(--space-3) var(--space-5);
    border-radius:    var(--radius-md);
    font-size:        var(--text-sm);
    font-weight:      600;
    font-family:      var(--font-body);
    cursor:           pointer;
    border:           2px solid transparent;
    text-decoration:  none;
    transition:       background var(--transition-fast),
                      color var(--transition-fast),
                      border-color var(--transition-fast),
                      filter var(--transition-fast);
    min-height:       44px;
    white-space:      nowrap;
    line-height:      1;
}

.wf-btn--primary {
    background:   var(--color-primary);
    color:        var(--color-bg);
    border-color: var(--color-primary);
}

.wf-btn--primary:hover,
.wf-btn--primary:focus-visible {
    filter:       brightness(1.08);
    color:        var(--color-bg);
}

.wf-btn--ghost {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-border);
}

.wf-btn--ghost:hover,
.wf-btn--ghost:focus-visible {
    background:   var(--color-surface-2);
    border-color: var(--color-primary);
    color:        var(--color-text);
}

.wf-btn--sm {
    font-size:  var(--text-xs);
    padding:    var(--space-2) var(--space-3);
    min-height: 32px;
}

/* =============================================================================
   Site header nav CTA — primary action button in the site header actions row.
   Desktop only; on mobile it's hidden and the same CTA renders inside the
   hamburger drawer via .wf-site-nav__mobile-cta (see below).
============================================================================= */

.wf-nav-cta {
    /* Desktop sizing matches .wf-btn--sm density so it lines up visually
       with the Dashboard / Log Out ghost buttons next to it. */
    font-size:  var(--text-xs);
    padding:    var(--space-2) var(--space-4);
    min-height: 32px;
}

/* =============================================================================
   Mobile header — single-row layout + hamburger drawer
   ===========================================================================

   Design contract for max-width: 767px:
     1. Header row shows ONLY the logo (left) and hamburger toggle (right).
        .wf-site-header__actions (theme toggle + Dashboard/Log Out/Log In
        buttons) and .wf-nav-cta are display:none'd. Keeps the row a clean
        two-element flex layout that can never wrap.
     2. .wf-site-nav was already display:none on mobile via design-system.css.
        Here we reassert it and restyle it as a drawer that slides down from
        under the header when .wf-site-nav--open is toggled on (by main.js
        hamburger click handler). Positioned absolute relative to the parent
        .wf-site-header so it overlays page content without creating an
        intermediate positioning/stacking context on descendants — important
        because the profile editor has a sticky step bar nested inside <main>
        and any ancestor stacking context could break sticky.
     3. .wf-site-nav__mobile-extra holds the auth links + CTA that the desktop
        shows inline. It's display:none above 768px and visible inside the
        drawer on mobile.
============================================================================= */

/* .wf-site-nav__mobile-extra is mobile-only — hide it on desktop so the
   auth links only render once (inside the .wf-site-header__actions row). */
.wf-site-nav__mobile-extra {
    display: none;
}

@media ( max-width: 767px ) {
    /* === Row 1 — logo + hamburger only, never wraps =====================

       Visible flex children of .wf-site-header__inner on mobile:
         1. .wf-site-header__logo               — pushed all the way left
         2. .wf-site-nav                        — absolute, out of flow
         3. .wf-site-header__actions            — display:none
         4. .wf-site-header__menu-toggle        — pushed all the way right
         5. .wf-nav-cta                         — display:none

       The logo gets margin-right: auto so the hamburger (the only other
       in-flow visible child) is shoved to the far right edge. This works
       without needing justify-content on the parent, which might affect
       desktop layout. */

    .wf-site-header__actions {
        display: none;
    }

    /* Extra specificity so any later-loaded page-specific stylesheet
       can't accidentally un-hide the CTA on mobile. Pairs .wf-nav-cta
       with its grandparent selector so specificity is (0,2,0) — enough
       to beat a bare `.wf-nav-cta` rule declared later in the cascade.
       Also uses `!important` as final belt-and-suspenders because this
       exact bug (CTA leaking into the mobile header) has been reported
       multiple times and it's not worth another debug cycle over CSS
       specificity. */
    .wf-site-header__inner .wf-nav-cta {
        display: none !important;
    }

    .wf-site-header__logo {
        margin-right: auto;
    }

    /* === Mobile drawer — the hamburger target ========================== */

    /* Override the `display: none` that design-system.css sets on
       .wf-site-nav at this breakpoint. We still want the primary menu items
       hidden at rest, but now as a closed drawer, not as nothing at all.
       `visibility: hidden` + `pointer-events: none` + `max-height: 0`
       (instead of display:none) so we can animate the open/close.
       Absolute positioning keeps the drawer out of normal flow so it
       doesn't shift the header row or push content down. */
    .wf-site-nav {
        display:         block;
        position:        absolute;
        top:             100%;
        left:            0;
        right:           0;
        background:      var(--color-surface);
        border-top:      1px solid var(--color-border);
        border-bottom:   1px solid var(--color-border);
        max-height:      0;
        overflow:        hidden;
        visibility:      hidden;
        pointer-events:  none;
        transition:      max-height var(--transition-base),
                         visibility 0s linear var(--transition-base);
        z-index:         99; /* below site-header (100) so sticky editor
                                 header doesn't render on top of drawer */
    }

    .wf-site-nav.wf-site-nav--open {
        max-height:     calc(100vh - var(--wf-site-header-height));
        visibility:     visible;
        pointer-events: auto;
        overflow-y:     auto;
        /* Drop shadow separates the drawer from the page content beneath
           it. Only applied when the drawer is open — a shadow on the
           closed state would leak out from behind the header edge.
           Border-bottom is already set on the base .wf-site-nav rule
           above, so the crisp 1px edge is always present. */
        box-shadow:     0 4px 12px rgba(0, 0, 0, 0.4);
        transition:     max-height var(--transition-base),
                        visibility 0s linear 0s;
    }

    /* Reset .wf-site-nav__list so the admin-managed primary menu items
       stack vertically in the drawer instead of sitting in an inline row. */
    .wf-site-nav__list {
        display:        flex;
        flex-direction: column;
        gap:            0;
        padding:        var(--space-2) 0;
        margin:         0;
    }

    .wf-site-nav__list a {
        display:         block;
        padding:         var(--space-4) var(--space-6);
        font-size:       var(--text-base);
        color:           var(--color-text);
        text-transform:  none;
        letter-spacing:  normal;
        font-weight:     600;
        border-bottom:   1px solid var(--color-border-subtle);
    }

    .wf-site-nav__list a:hover {
        background: var(--color-surface-2);
        color:      var(--color-primary);
    }

    /* === Mobile-drawer-only auth + CTA section ========================= */

    .wf-site-nav__mobile-extra {
        display:        flex;
        flex-direction: column;
        padding:        var(--space-4) var(--space-6) var(--space-6);
        gap:            var(--space-2);
        border-top:     1px solid var(--color-border-subtle);
    }

    .wf-site-nav__mobile-link {
        display:         block;
        padding:         var(--space-3) 0;
        font-size:       var(--text-base);
        font-weight:     600;
        color:           var(--color-text);
        text-decoration: none;
    }

    .wf-site-nav__mobile-link:hover {
        color: var(--color-primary);
    }

    .wf-site-nav__mobile-cta {
        /* Full-width fat tap target for Upgrade / Join Now */
        width:      100%;
        margin-top: var(--space-3);
        font-size:  var(--text-base);
        min-height: 48px;
    }
}