/* 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 - remove box, match navigation links */
nav details.dropdown {
    --nav-link-padding: 10.5px;
}

nav details.dropdown summary {
    /* Remove Pico's default button/box styling */
    background: none;
    border: none;
    box-shadow: none;

    /* Match regular navigation link styling */
    display: inline-block;
    padding: var(--nav-link-padding);
    margin: calc(-1 * var(--nav-link-padding));
    font-weight: 600;
    color: var(--pico-color);
    cursor: pointer;
}

nav details.dropdown summary:hover {
    background: none;
    border: none;
    box-shadow: none;
}

/* Remove dropdown arrow/indicator */
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;
}