/* Navigation and Breadcrumb Styling */

/* Ensure nav has proper z-index */
nav {
    position: relative;
    z-index: 100;
}

/* Logo container - wraps nav to keep logo and nav items on same line */
.logo-nav-container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Logo styling - positioned outside nav to avoid Pico CSS flexbox conflicts */
.logo-nav-container .nav-logo {
    height: 5.5rem;
    width: auto;
}

/* Nav within logo container needs flex: 1 to take remaining space */
.logo-nav-container nav {
    flex: 1;
}

/*
 * NAVIGATION RIGHT MENU ISSUES
 *
 * Logo blocking issue (FIXED in PR #576):
 * - Styling logo image inside nav <ul> created overlapping bounding box
 * - Solution: Moved logo outside <nav> into .logo-nav-container
 *
 * Right menu clickable area (Issue #577):
 * - Both profile link and logout button clickable areas don't extend properly below text
 * - Hover area only works at top and above text, not underneath
 * - Affects all items in navigation third <ul> (right-aligned menu)
 * - See Issue #577 for investigation and proposed solutions
 */

/* Logout form styling - minimal styles to avoid layout interference */
nav form[action="/logout"] {
    margin: 0;
    padding: 0;
    display: block;
    border: none;
    background: none;
}

/* Logout button styling - matches nav link appearance
 * Note: Right menu clickable area issue (profile link + logout button) tracked in Issue #577 */
nav button[type="submit"] {
    all: unset;
    color: var(--pico-del-color);
    cursor: pointer;
    transition: text-shadow 0.2s ease;
    display: block; /* Changed from inline-block to block for full width */
    padding: 0.5rem 0; /* Vertical padding for better click area */
    width: 100%; /* Ensure full width for maximum clickable area */
    text-align: left; /* Align text to match nav links */
}

nav button[type="submit"]:hover {
    text-shadow: 0 0 0.75rem var(--pico-del-color);
}

/* Active navigation state */
nav a[aria-current="page"] {
    font-weight: calc(var(--pico-font-weight) * 1.5);
    color: var(--pico-primary);
}

/* Admin dropdown styling - using Pico CSS role="link" pattern
 * The summary has role="link" which makes it look like a navigation link
 * instead of a button, following Pico CSS conventions.
 * We use a Unicode arrow (▾) in the template instead of Pico's ::after arrow
 * for simplicity and reliability across framework updates. */
nav details.dropdown summary::after {
    display: none;
}

/* Breadcrumb navigation */
nav.breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 0.95em; /* Consistent with pagination elements */
}

nav.breadcrumb small {
    color: var(--pico-muted-color);
}

nav.breadcrumb a {
    color: var(--pico-muted-color);
    text-decoration: none;
}

nav.breadcrumb a:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}