/**
 * BRAWT Navigation Component — Styles v1.0
 * ═══════════════════════════════════════════════════════════
 * Responsive stylesheet for the BRAWT universal navigation.
 * Uses the existing TiffanyGray.com design tokens (CSS vars).
 *
 * Breakpoints:
 *   Desktop: 769px+   — full horizontal nav
 *   Tablet:  481-768px — condensed, smaller text
 *   Mobile:  0-480px  — hamburger + slide-out menu
 *
 * SAFE TO DEPLOY: All selectors are prefixed with .brawt-
 * to avoid collisions with existing page styles.
 * ═══════════════════════════════════════════════════════════
 */

/* ── CSS Variables (fallbacks in case page doesn't define them) ── */
.brawt-nav-wrapper {
    --teal: #00b8b8;
    --teal-dark: #009999;
    --coral: #e07a5f;
    --coral-dark: #c45a3a;
    --coral-light: rgba(224, 122, 95, 0.1);
    --charcoal: #2d3636;
    --slate-dark: #404d4d;
    --slate-mid: #6a7e87;
    --border: #d1d9e0;
    --cloud: #f4f6fc;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

    font-family: 'Poppins', sans-serif;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   PRIMARY BAR
   ════════════════════════════════════════════════════════════ */

.brawt-primary {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brawt-primary-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.brawt-primary-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo */
.brawt-logo {
    font-size: 15px;
    font-weight: 600;
    color: var(--charcoal);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.brawt-logo:hover {
    color: var(--teal);
}

/* ════════════════════════════════════════════════════════════
   SECONDARY BAR (contextual)
   ════════════════════════════════════════════════════════════ */

.brawt-secondary {
    background: var(--cloud);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 44px;
    display: flex;
    align-items: center;
}

.brawt-secondary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.brawt-secondary-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.brawt-secondary-left > a {
    font-size: 13px;
    font-weight: 400;
    color: var(--slate-mid);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
}

.brawt-secondary-left > a:hover {
    color: var(--teal-dark);
    background: rgba(0, 184, 184, 0.08);
}

.brawt-secondary-left > a.active {
    color: var(--teal-dark);
    font-weight: 500;
    background: rgba(0, 184, 184, 0.1);
}

.brawt-secondary-right {
    display: flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════
   DROPDOWN (shared pattern)
   ════════════════════════════════════════════════════════════ */

.brawt-dropdown {
    position: relative;
}

.brawt-dropdown-inline {
    display: inline-flex;
}

.brawt-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    padding: 6px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.brawt-dropdown-trigger:hover {
    border-color: var(--teal);
}

.brawt-dropdown-trigger svg {
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* User trigger */
.brawt-user-trigger {
    border-color: var(--border);
    color: var(--charcoal);
}

/* Linked program trigger (in secondary bar) */
.brawt-linked-trigger {
    border: none;
    padding: 6px 12px;
    color: var(--slate-mid);
    font-weight: 400;
}

.brawt-linked-trigger:hover {
    border: none;
    color: var(--teal-dark);
    background: rgba(0, 184, 184, 0.08);
}

/* Admin trigger — CORAL COLOURED */
.brawt-admin-trigger {
    border-color: var(--coral);
    color: var(--coral);
    background: var(--coral-light);
}

.brawt-admin-trigger:hover {
    background: var(--coral);
    color: var(--white);
}

/* Dropdown menu */
.brawt-dropdown-menu {
    display: none;
    position: fixed;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    z-index: 2000;
    border-radius: 4px;
    overflow: hidden;
}

.brawt-dropdown-menu.open {
    display: block;
}

.brawt-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--slate-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.brawt-dropdown-menu a:hover {
    background: var(--cloud);
    color: var(--teal-dark);
}

.brawt-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

/* Admin dropdown menu — coral accent */
.brawt-admin-menu a:hover {
    background: var(--coral-light);
    color: var(--coral-dark);
}

/* General admin links below the divider — always coral */
.brawt-admin-menu a.brawt-admin-general {
    color: var(--coral);
}
.brawt-admin-menu a.brawt-admin-general:hover {
    color: var(--coral-dark);
    background: var(--coral-light);
}

/* Sign out link */
.brawt-signout {
    color: var(--slate-mid) !important;
    font-size: 12px !important;
}

.brawt-signout:hover {
    color: var(--coral) !important;
}

/* ════════════════════════════════════════════════════════════
   HAMBURGER BUTTON (hidden on desktop)
   ════════════════════════════════════════════════════════════ */

.brawt-hamburger {
    display: none;  /* Hidden on desktop */
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--charcoal);
    line-height: 0;
}

.brawt-hamburger:hover {
    color: var(--teal);
}

/* ════════════════════════════════════════════════════════════
   MOBILE SLIDE-OUT MENU
   ════════════════════════════════════════════════════════════ */

.brawt-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2999;
}

.brawt-mobile-overlay.open {
    display: block;
}

.brawt-mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: var(--white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 3000;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding: 0;
}

.brawt-mobile-menu.open {
    right: 0;
}

.brawt-mobile-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--slate-mid);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.brawt-mobile-close:hover {
    color: var(--charcoal);
}

/* Mobile: user info */
.brawt-mobile-user {
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.brawt-mobile-username {
    font-size: 16px;
    font-weight: 600;
    color: var(--charcoal);
}

.brawt-mobile-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Mobile: sections */
.brawt-mobile-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.brawt-mobile-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-mid);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 20px 8px;
}

.brawt-mobile-section a {
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--slate-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.brawt-mobile-section a:hover,
.brawt-mobile-section a.active {
    background: var(--cloud);
    color: var(--teal-dark);
}

/* Mobile: admin section — coral accent */
.brawt-mobile-admin .brawt-mobile-section-title {
    color: var(--coral);
}

.brawt-mobile-admin a:hover,
.brawt-mobile-admin a.active {
    background: var(--coral-light);
    color: var(--coral-dark);
}

/* Mobile: sign out */
.brawt-mobile-signout-section {
    border-bottom: none;
}

.brawt-mobile-signout {
    color: var(--slate-mid) !important;
    font-size: 13px !important;
}

.brawt-mobile-signout:hover {
    color: var(--coral) !important;
    background: none !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── Tablet (481px – 768px) ── */
@media (max-width: 768px) {
    .brawt-primary {
        padding: 0 20px;
        height: 52px;
    }

    .brawt-secondary {
        padding: 0 20px;
        height: 40px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .brawt-secondary-left > a {
        font-size: 12px;
        padding: 5px 8px;
    }

    .brawt-logo {
        font-size: 14px;
    }

    .brawt-dropdown-trigger {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* ── Mobile (0 – 480px) ── */
@media (max-width: 480px) {
    .brawt-primary {
        padding: 0 16px;
        height: 48px;
    }

    .brawt-logo {
        font-size: 13px;
    }

    /* Hide desktop elements */
    .brawt-user-trigger {
        display: none;
    }

    .brawt-secondary {
        display: none;  /* All secondary nav moves into hamburger menu */
    }

    /* Show hamburger */
    .brawt-hamburger {
        display: flex;
    }
}

/* ════════════════════════════════════════════════════════════
   UTILITY: Hide existing nav when brawt-nav is active
   ════════════════════════════════════════════════════════════
   When the BRAWT nav is present, hide the old hand-coded
   headers to prevent double navigation. This is opt-in:
   add class="brawt-nav-active" to <body> to enable.
   ════════════════════════════════════════════════════════════ */

/* Hide old navigation when brawt-nav is loaded.
   The JS adds .brawt-nav-active to <body>. These rules
   target every old-nav class found across the /my/ pages. */

body.brawt-nav-active .training-header,
body.brawt-nav-active .account-header,
body.brawt-nav-active .dashboard-header,
body.brawt-nav-active .mp-header,
body.brawt-nav-active .admin-header,
body.brawt-nav-active .quick-nav,
body.brawt-nav-active header.site-header,
body.brawt-nav-active .sub-nav,
body.brawt-nav-active nav.program-nav,
body.brawt-nav-active .admin-nav,
body.brawt-nav-active .header,
body.brawt-nav-active header.header,
body.brawt-nav-active .oip-header,
body.brawt-nav-active header.oip-header {
    display: none !important;
}