/* ============================================================================
   NAVIGATION BAR COMPONENT
   ============================================================================

   Fixed top navigation bar with left and right text-link sections.

   Layout: [Left labels]  ···  [Right labels]

   ============================================================================ */

/* ============================================================================
   NAVIGATION BAR
   ============================================================================ */

.navigation-bar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: var(--nav-height);
    background-color: var(--color-sand);
    box-shadow: var(--shadow-nav);
    z-index: var(--z-nav);
}


/* ============================================================================
   NAVIGATION CONTENT
   ============================================================================ */

.nav-content {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    gap: var(--space-4);
}


/* ============================================================================
   BRAND MARK
   ============================================================================ */

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-md);
    color: var(--color-primary-darker, #6B3410);
    font-family: var(--font-primary);
    /* Never squeezed by the link row next to it. */
    flex: 0 0 auto;
    transition: var(--transition-bg, background-color .2s ease);
}

.nav-brand:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nav-brand-mark {
    display: inline-flex;
    line-height: 0;
}

.nav-brand-name {
    /* 1.75x the previous 1.15rem. */
    font-size: 2.01rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    /* Amiri sets a tall default line box; without this the taller wordmark
       pushes the 60px bar out of vertical alignment. */
    line-height: 1;
}


/* ============================================================================
   NAVIGATION LINKS

   One row, distributed evenly across whatever space is left beside the brand.
   ============================================================================ */

.nav-links {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: var(--space-2);
}


/* ============================================================================
   TEXT BUTTONS

   Styled as discrete buttons rather than bare text so each destination reads
   as its own target.
   ============================================================================ */

.nav-text-button {
    cursor: pointer;
    padding: 7px 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.nav-label {
    /* Matches the wordmark rather than the UI sans. */
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}

/* Hover */
.nav-text-button:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
}

.nav-text-button:hover .nav-label {
    color: var(--color-text-primary);
}

.nav-text-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active — the filled state carries the indication now, so the old
   ::after underline is gone; it read oddly inside a rounded box. */
.nav-text-button.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.nav-text-button.active .nav-label {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
}

.nav-text-button.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}


/* The match-density legend used to live here. It moved into the reader's
   footer, beneath the كثافة slider it explains — see .density-legend in
   footer-navigation.css. */