/* Shared utilities for all navigation styles */
/* Use these CSS custom properties in your style variant files */

:root {
    /* Navigation layout */
    --nav-height: 72px;
    --nav-spacing: 16px;
    --nav-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Color mappings for sections */
    --section-guidebook-primary: var(--primary-color);
    --section-guidebook-accent: var(--accent-color);
    --section-marketplace-primary: #e91e8c;
    --section-marketplace-accent: #ff6b9d;
    --section-localguide-primary: #0ea5e9;
    --section-localguide-accent: #06b6d4;
}

/* Reset the legacy guidebook.css grid — nav styles own the layout from here */
.gb-app {
    display: block;
    padding-bottom: 0;
}

/* Base section wrapper class */
.gb-nav-section {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gb-nav-content {
    flex: 1;
    padding-bottom: var(--nav-height);
    background: var(--bg-card);
}

/* Dark mode previously had no explicit background here (effectively
   transparent) — keep that unchanged rather than inheriting the light-mode
   white above. */
html.dark .gb-nav-content {
    background: transparent;
}

/* Clear guidebook.css's top:0 so nav styles can position via bottom:0 without stretching full height */
.gb-section-switcher {
    top: auto;
}

/* Wherever the nav-style gear button appears (guidebook AND local guide
   layouts — both wrap in .gb-nav-section, only guidebook has .gb-app) it
   sits at top-right; align the locale switcher beside it, not under it. */
body:has(.gb-nav-section) .gb-locale-switcher {
    top: 16px;
    right: 64px; /* 40px button + 8px gap + 16px button-right */
}

.gb-nav-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

/* Accessibility: skip to main content */
.gb-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 100;
}

.gb-skip-link:focus {
    top: 0;
}

/* Responsive utilities */
@media (max-width: 768px) {
    :root {
        --nav-height: 64px;
        --nav-spacing: 12px;
    }
}

@media (max-width: 480px) {
    :root {
        --nav-height: 60px;
        --nav-spacing: 8px;
    }
}

/* Desktop: no sidebar — hero and nav stay full-bleed/horizontal at every
   width, matching the reference prototype. .gb-main (in guidebook.css) is
   the only element that gets a centered max-width. */
@media (min-width: 768px) {
    .gb-nav-content {
        padding-bottom: 0;
    }
}