/* ═══════════════════════════════════════════════════════════════
   ABL Common UI Navbar
   ═══════════════════════════════════════════════════════════════ */

.abl-common-ui-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--abl-nav-bg);
    border-bottom: 1px solid var(--abl-nav-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    box-sizing: border-box;
}

.abl-common-ui-navbar *,
.abl-common-ui-navbar *::before,
.abl-common-ui-navbar *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.abl-common-ui-navbar a {
    color: inherit;
    text-decoration: none;
}

/* Generic reset for unstyled <button>s in the navbar (e.g. the hamburger).
   Excludes .abl-common-ui-navbar-btn so the primary/ghost pill classes keep
   their background + border — otherwise the mobile Sign Out button ends up
   invisible (white text on no-background on the white mobile menu). */
.abl-common-ui-navbar button:not(.abl-common-ui-navbar-btn) {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

.abl-common-ui-navbar--scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.abl-common-ui-navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    height: 64px;
    gap: 1rem;
}

/* ── Brand ── */
.abl-common-ui-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.abl-common-ui-navbar-logo-img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
/* Logo swap: light variant by default, dark variant in dark mode */
.abl-common-ui-navbar-logo--dark { display: none; }
[data-theme-mode="dark"] .abl-common-ui-navbar-logo--light { display: none; }
[data-theme-mode="dark"] .abl-common-ui-navbar-logo--dark { display: block; }

.abl-common-ui-navbar-name {
    font-size: 1.25rem;
    font-weight: 700;
    /* Use --abl-nav-text (navbar-scoped, mode-aware) instead of
       --abl-heading. The blog product locally remaps --abl-heading
       to a dark paper-brown which would otherwise leak into the
       navbar and make the company name unreadable on the dark navbar
       background. --abl-nav-text stays correct in both modes. */
    color: var(--abl-nav-text);
    transition: color 0.3s ease;
}

/* ── Desktop links ── */
.abl-common-ui-navbar-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.abl-common-ui-navbar-link {
    padding: 0.5rem 0.75rem;
    color: var(--abl-nav-text);
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: 0.375rem;
    transition: color 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.abl-common-ui-navbar-link:hover {
    color: var(--abl-nav-btn-primary-bg);
    background: var(--abl-nav-btn-highlight-bg);
}

.abl-common-ui-navbar-link--user {
    color: var(--abl-nav-btn-primary-bg);
    font-weight: 600;
}

/* ── Actions (theme + auth) ── */
.abl-common-ui-navbar-actions {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

/* ── Theme selector ── */
.abl-common-ui-navbar-theme-selector {
    position: relative;
}

.abl-common-ui-navbar-theme-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 9999px;
    background: var(--abl-nav-btn-highlight-bg);
    border: 1px solid var(--abl-nav-border);
    color: var(--abl-nav-text);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.abl-common-ui-navbar-theme-btn:hover {
    border-color: var(--abl-nav-btn-primary-bg);
    background: var(--abl-nav-btn-highlight-bg);
}

.abl-common-ui-navbar-theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.abl-common-ui-navbar-theme-label {
    line-height: 1;
}

.abl-common-ui-navbar-theme-chevron {
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s;
    flex-shrink: 0;
}

.abl-common-ui-navbar-theme-btn[aria-expanded="true"] .abl-common-ui-navbar-theme-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.abl-common-ui-navbar-theme-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--abl-card);
    border: 1px solid var(--abl-border);
    border-radius: 12px;
    padding: 4px;
    box-shadow: var(--abl-card-shadow), 0 8px 32px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    min-width: 150px;
    z-index: 100;
}

.abl-common-ui-navbar-theme-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.abl-common-ui-navbar-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--abl-text);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}

.abl-common-ui-navbar-theme-option:hover {
    background: var(--abl-nav-btn-highlight-bg);
}

.abl-common-ui-navbar-theme-option--active {
    background: var(--abl-nav-btn-highlight-bg);
    font-weight: 600;
}

.abl-common-ui-navbar-theme-option-label {
    line-height: 1;
}

/* ── Auth buttons in navbar ── */
.abl-common-ui-navbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    height: 36px;
    cursor: pointer;
}

.abl-common-ui-navbar-btn--primary {
    background: var(--abl-nav-btn-primary-bg);
    color: var(--abl-nav-btn-primary-text);
    border: none;
}

.abl-common-ui-navbar-btn--primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: var(--abl-nav-btn-primary-text);
}

.abl-common-ui-navbar-btn--ghost {
    background: transparent;
    color: var(--abl-nav-btn-ghost-text);
    border: 1px solid var(--abl-nav-btn-ghost-border);
}

.abl-common-ui-navbar-btn--ghost:hover {
    background: var(--abl-nav-btn-highlight-bg);
    color: var(--abl-nav-btn-ghost-text);
}

.abl-common-ui-navbar-logout-form {
    display: inline;
}

/* ── Hamburger ── */
.abl-common-ui-navbar-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.abl-common-ui-navbar-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--abl-nav-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.abl-common-ui-navbar-hamburger--open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.abl-common-ui-navbar-hamburger--open span:nth-child(2) {
    opacity: 0;
}

.abl-common-ui-navbar-hamburger--open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile menu ── */
.abl-common-ui-navbar-mobile {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem 1.5rem;
    background: var(--abl-nav-bg);
    border-top: 1px solid var(--abl-nav-border);
}

.abl-common-ui-navbar-mobile--open {
    display: flex;
}

.abl-common-ui-navbar-mobile-link {
    display: block;
    padding: 0.6rem 0;
    color: var(--abl-nav-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.abl-common-ui-navbar-mobile-link:hover {
    /* Stays neutral — see --abl-nav-btn-primary-bg comment in
       abl-common-ui-themes.css for why we don't use --abl-accent here. */
    color: var(--abl-nav-accent);
}

.abl-common-ui-navbar-mobile-divider {
    height: 1px;
    background: var(--abl-nav-border);
    margin: 0.5rem 0;
}

/* Auth row: two equal-width pills side by side (ghost + primary). Used
   for both logged-out (Log In / Sign Up) and logged-in (My Account /
   Sign Out) states so the auth actions always feel like siblings. */
.abl-common-ui-navbar-mobile-auth-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.abl-common-ui-navbar-mobile-auth-row > * {
    flex: 1;
    min-width: 0;
}
/* The logout form is a flex child — its button should stretch to fill it. */
.abl-common-ui-navbar-mobile-form {
    margin: 0;
    display: flex;
}
.abl-common-ui-navbar-mobile-form .abl-common-ui-navbar-mobile-cta {
    flex: 1;
}

/* Modern pill CTA used in the auth row. 44px touch target, subtle
   shadow on the primary variant, hover lift. Overrides the compact 36px
   desktop pill so tap targets are comfortable on mobile. */
.abl-common-ui-navbar-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease;
}
.abl-common-ui-navbar-mobile-cta.abl-common-ui-navbar-btn--primary {
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--abl-nav-btn-primary-bg) 55%, transparent);
}
.abl-common-ui-navbar-mobile-cta:hover,
.abl-common-ui-navbar-mobile-cta:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.abl-common-ui-navbar-mobile-cta.abl-common-ui-navbar-btn--primary:hover,
.abl-common-ui-navbar-mobile-cta.abl-common-ui-navbar-btn--primary:focus-visible {
    box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--abl-nav-btn-primary-bg) 65%, transparent);
}
.abl-common-ui-navbar-mobile-cta:active {
    transform: translateY(0);
}

.abl-common-ui-navbar-mobile-themes {
    padding: 0.5rem 0;
}

.abl-common-ui-navbar-mobile-themes-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--abl-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.abl-common-ui-navbar-mobile-themes-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.abl-common-ui-navbar-mobile-themes-grid .abl-common-ui-navbar-theme-option {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    justify-content: flex-start;
    border: 1px solid var(--abl-border);
    border-radius: 10px;
    gap: 8px;
}

.abl-common-ui-navbar-mobile-themes-grid .abl-common-ui-navbar-theme-option--active {
    border-color: var(--abl-nav-btn-primary-bg);
    background: var(--abl-nav-btn-highlight-bg);
}

/* ── Desktop breakpoint ── */
@media (min-width: 768px) {
    .abl-common-ui-navbar-links {
        display: flex;
    }

    .abl-common-ui-navbar-actions {
        display: flex;
    }

    .abl-common-ui-navbar-hamburger {
        display: none;
    }

    .abl-common-ui-navbar-mobile {
        display: none !important;
    }
}