/* ========================================
   STANDALONE NAVBAR STYLES
   Extracted from shared.css for use on pages
   that cannot load the full stylesheet
   (e.g. Designer Radar Next.js static export)
   ======================================== */

/* ========================================
   DESIGN TOKENS (scoped to navbar container)
   ======================================== */

#navbar-container {
    /* Colors - Light Theme */
    --bg-primary: #FAF9F5;
    --bg-secondary: #FFFFFF;
    --text-primary: #2c1810;
    --text-secondary: #8b6f47;
    --text-light: #a0845c;
    --accent: #c44b00;
    --accent-hover: #a03900;
    --accent-alpha-25: rgba(196, 75, 0, 0.33);
    --text-primary-alpha20: rgba(44, 24, 16, 0.20);
    --border-light: #e8e2d8;
    --border-medium: #d4c4a8;

    /* Mobile Menu Colors */
    --menu-bg: #2A2018;
    --menu-border: #3B3128;
    --menu-text: #D4B896;
    --menu-resume-bg: #E7823E;
    --menu-resume-border: #E7823E;
    --menu-resume-text: #FFFFFF;
    --menu-bg-light: #FFFFFF;
    --menu-border-light: #E8E2D8;
    --menu-text-light: #2C1810;
    --menu-resume-bg-light: #C44B00;
    --menu-resume-border-light: #C44B00;
    --menu-resume-text-light: #FFFFFF;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(44, 24, 16, 0.08);
    --shadow-md: 0 4px 20px rgba(44, 24, 16, 0.12);
    --shadow-lg: 0 10px 40px rgba(44, 24, 16, 0.15);
    --menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-primary: 'Lora', Georgia, serif;
    --font-secondary: 'Inter', sans-serif;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Layout */
    --container-max-width: 1200px;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --menu-border-radius: 16px;
}

/* Dark Theme - System Preference */
@media (prefers-color-scheme: dark) {
    #navbar-container:not(.light-override) {
        --bg-primary: #1a1612;
        --bg-secondary: #242018;
        --text-primary: #ffffff;
        --text-secondary: #d4b896;
        --text-light: #b8956f;
        --accent: #e6823e;
        --accent-hover: #ff9652;
        --accent-alpha-25: rgba(230, 130, 62, 0.33);
        --text-primary-alpha20: rgba(255, 255, 255, 0.20);
        --border-light: #3a3128;
        --border-medium: #4a3f32;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Manual Dark Mode - body class (main site) */
body.dark-mode #navbar-container {
    --bg-primary: #1a1612 !important;
    --bg-secondary: #242018 !important;
    --text-primary: #ffffff !important;
    --text-secondary: #d4b896 !important;
    --text-light: #b8956f !important;
    --accent: #e6823e !important;
    --accent-hover: #ff9652 !important;
    --accent-alpha-25: rgba(230, 130, 62, 0.33) !important;
    --text-primary-alpha20: rgba(255, 255, 255, 0.20) !important;
    --border-light: #3a3128 !important;
    --border-medium: #4a3f32 !important;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Manual Dark Mode - data-theme attribute (Designer Radar) */
[data-theme="dark"] #navbar-container {
    --bg-primary: #1a1612 !important;
    --bg-secondary: #242018 !important;
    --text-primary: #ffffff !important;
    --text-secondary: #d4b896 !important;
    --text-light: #b8956f !important;
    --accent: #e6823e !important;
    --accent-hover: #ff9652 !important;
    --accent-alpha-25: rgba(230, 130, 62, 0.33) !important;
    --text-primary-alpha20: rgba(255, 255, 255, 0.20) !important;
    --border-light: #3a3128 !important;
    --border-medium: #4a3f32 !important;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Manual Light Mode - body class (main site) */
body.light-mode #navbar-container {
    --bg-primary: #FAF9F5 !important;
    --bg-secondary: #FFFFFF !important;
    --text-primary: #2c1810 !important;
    --text-secondary: #8b6f47 !important;
    --text-light: #a0845c !important;
    --accent: #c44b00 !important;
    --accent-hover: #a03900 !important;
    --border-light: #e8e2d8 !important;
    --border-medium: #d4c4a8 !important;
}

/* Manual Light Mode - data-theme attribute (Designer Radar) */
[data-theme="light"] #navbar-container {
    --bg-primary: #FAF9F5 !important;
    --bg-secondary: #FFFFFF !important;
    --text-primary: #2c1810 !important;
    --text-secondary: #8b6f47 !important;
    --text-light: #a0845c !important;
    --accent: #c44b00 !important;
    --accent-hover: #a03900 !important;
    --border-light: #e8e2d8 !important;
    --border-medium: #d4c4a8 !important;
}

/* ========================================
   NAVBAR CONTAINER
   ======================================== */

#navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    animation: navbarFadeIn 0.8s ease-out 0.1s forwards;
}

@keyframes navbarFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   SKIP NAV (Accessibility)
   ======================================== */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: var(--space-xs) var(--space-md);
    border-radius: 4px;
    z-index: 10001;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-nav:focus {
    top: var(--space-xs);
}

/* ========================================
   NAV ELEMENT
   ======================================== */

#navbar-container nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    background: rgba(250, 249, 245, 0.95) !important;
    backdrop-filter: blur(10px);
    z-index: 99999 !important;
    border-bottom: 1px solid var(--border-light) !important;
    transition: all 0.3s ease;
    height: 80px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    #navbar-container nav {
        background: rgba(26, 22, 18, 0.95) !important;
    }
}

body.dark-mode #navbar-container nav {
    background: rgba(26, 22, 18, 0.95) !important;
}

[data-theme="dark"] #navbar-container nav {
    background: rgba(26, 22, 18, 0.95) !important;
}

body.light-mode #navbar-container nav {
    background: rgba(250, 249, 245, 0.95) !important;
}

[data-theme="light"] #navbar-container nav {
    background: rgba(250, 249, 245, 0.95) !important;
}

#navbar-container nav.scrolled {
    box-shadow: var(--shadow-sm);
}

/* ========================================
   NAV CONTAINER LAYOUT
   ======================================== */

#navbar-container .nav-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #navbar-container .nav-container {
        padding: var(--space-md) var(--space-sm);
    }
}

/* ========================================
   NAV LOGO
   ======================================== */

#navbar-container .nav-logo {
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    display: block;
}

/* ========================================
   NAV LINKS
   ======================================== */

#navbar-container .nav-links {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-left: auto;
}

#navbar-container .desktop-nav {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
}

#navbar-container .nav-links a {
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 19px;
    margin: 0;
}

#navbar-container .nav-text-link {
    margin: 0 var(--space-xs);
}

#navbar-container .nav-text-link.nav-active {
    color: var(--accent);
    font-weight: 500;
}

#navbar-container .nav-links a:hover {
    color: var(--accent);
}

/* ========================================
   NAV DIVIDER
   ======================================== */

#navbar-container .nav-divider {
    width: 1px;
    height: 32px;
    background: var(--border-light);
    margin: 0;
}

body.dark-mode #navbar-container .nav-divider,
[data-theme="dark"] #navbar-container .nav-divider {
    background: var(--border-medium);
}

/* ========================================
   SOCIAL LINKS
   ======================================== */

#navbar-container .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: var(--border-radius-sm);
    margin: 0;
}

#navbar-container .social-link:hover {
    color: var(--accent);
    transform: scale(1.05);
}

#navbar-container .social-link svg {
    width: 20px;
    height: 20px;
}

#navbar-container .social-link.linkedin svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   THEME TOGGLE
   ======================================== */

#navbar-container .theme-toggle-container {
    display: flex;
    align-items: center;
    margin: 0 var(--space-xs) 0 0;
    height: 32px;
}

#navbar-container .nav-container .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar-container .theme-toggle {
    background: none;
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    position: relative;
}

#navbar-container .toggle-track {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 4px;
    width: 56px;
    height: 32px;
    background: #E8E2D8;
    border: 1px solid #D4C4A8 !important;
    border-radius: 40px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode #navbar-container .toggle-track,
[data-theme="dark"] #navbar-container .toggle-track {
    background: #3A3128 !important;
    border: 1px solid #4A3F32 !important;
}

#navbar-container .toggle-thumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
    width: 24px;
    height: 24px;
    border-radius: 40px;
    position: absolute;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    left: 4px;
    top: 4px;
}

#navbar-container .sun-thumb {
    background: #FAF9F5;
    border: 1px solid #D4C4A8 !important;
    opacity: 1;
    transform: translateX(0) rotate(0deg);
    order: 0;
    flex-grow: 0;
}

#navbar-container .moon-thumb {
    background: transparent;
    border: none !important;
    opacity: 0;
    transform: translateX(0) rotate(0deg);
    order: 1;
    flex-grow: 0;
}

body.dark-mode #navbar-container .sun-thumb,
[data-theme="dark"] #navbar-container .sun-thumb {
    background: transparent;
    border: none !important;
    opacity: 0;
    transform: translateX(0) rotate(720deg);
}

body.dark-mode #navbar-container .moon-thumb,
[data-theme="dark"] #navbar-container .moon-thumb {
    background: #1A1612;
    border: 1px solid #4A3F32 !important;
    opacity: 1;
    transform: translateX(22px) rotate(720deg);
}

/* Sun Icon */
#navbar-container .sun-icon {
    width: 16px;
    height: 16px;
    stroke: #2C1810;
    stroke-width: 2px;
    transition: stroke 0.3s ease;
    margin: auto;
}

/* Moon Icon */
#navbar-container .moon-icon {
    width: 16px;
    height: 16px;
    stroke: #D4B896;
    stroke-width: 2px;
    transition: stroke 0.3s ease;
    margin: auto;
}

body.dark-mode #navbar-container .sun-icon,
[data-theme="dark"] #navbar-container .sun-icon {
    stroke: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

body.dark-mode #navbar-container .moon-icon,
[data-theme="dark"] #navbar-container .moon-icon {
    stroke: #D4B896;
    color: var(--text-primary);
}

/* Theme Toggle Hover */
#navbar-container .theme-toggle:hover .toggle-track {
    transform: scale(1.05);
    background: #F0E8D8 !important;
    border-color: #C4B498 !important;
}

body.dark-mode #navbar-container .theme-toggle:hover .toggle-track,
[data-theme="dark"] #navbar-container .theme-toggle:hover .toggle-track {
    background: #4A3F32 !important;
    border-color: #5A4F42 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Icon Spin Animation */
#navbar-container .theme-toggle .sun-icon.spinning,
#navbar-container .theme-toggle .moon-icon.spinning {
    animation: navIconSpin 0.6s ease-out;
}

@keyframes navIconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ========================================
   MOBILE MENU TOGGLE (Hamburger)
   ======================================== */

#navbar-container .mobile-menu {
    display: none;
}

#navbar-container .mobile-menu-toggle {
    --bar-h: 2px;
    --offset: 6px;
    --duration: 240ms;
    --ease: cubic-bezier(.4,0,.2,1);

    display: none;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none !important;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

#navbar-container .mobile-menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: var(--bar-h);
    background: var(--text-primary);
    border-radius: 1px;
    transform-origin: 50% 50%;
    transition: transform var(--duration) var(--ease),
                opacity var(--duration) var(--ease);
    transform: translate(-50%, -50%);
}

/* Hamburger (closed) */
#navbar-container .mobile-menu-toggle:not(.active) span:nth-child(1) {
    transform: translate(-50%, calc(-50% - var(--offset)));
}
#navbar-container .mobile-menu-toggle:not(.active) span:nth-child(2) {
    transform: translate(-50%, -50%);
}
#navbar-container .mobile-menu-toggle:not(.active) span:nth-child(3) {
    transform: translate(-50%, calc(-50% + var(--offset)));
}

/* X (open) */
#navbar-container .mobile-menu-toggle.active span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}
#navbar-container .mobile-menu-toggle.active span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#navbar-container .mobile-menu-toggle.active span:nth-child(2) {
    transform: translate(-50%, -50%) scaleX(0.2);
    opacity: 0;
}

/* Prep class */
#navbar-container .mobile-menu-toggle.prep span {
    transition: none !important;
}
#navbar-container .mobile-menu-toggle.prep span:nth-child(1),
#navbar-container .mobile-menu-toggle.prep span:nth-child(2),
#navbar-container .mobile-menu-toggle.prep span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(0) !important;
    opacity: 1 !important;
}

/* ========================================
   FOCUS INDICATORS (Accessibility)
   ======================================== */

#navbar-container *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    #navbar-container .nav-container .mobile-menu-toggle {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1002 !important;
        position: relative !important;
        margin-left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #navbar-container button.mobile-menu-toggle {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #navbar-container .nav-container .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-sm) !important;
        margin-left: auto !important;
    }

    #navbar-container .nav-container .desktop-nav {
        display: none !important;
    }

    #navbar-container .mobile-menu {
        display: block;
        width: 100%;
        background: var(--menu-bg);
        backdrop-filter: blur(64px);
        border-bottom: 1px solid var(--menu-border) !important;
        border-radius: 0px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        max-height: 0;
        transition: max-height 0.3s ease, box-shadow 0.3s ease;
        box-shadow: none;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        pointer-events: none;
        opacity: 0;
        animation: navBackdropFadeIn 0.3s ease forwards;
    }

    body.dark-mode.mobile-menu-open::before,
    [data-theme="dark"] body.mobile-menu-open::before {
        background: rgba(0, 0, 0, 0.3);
    }

    @keyframes navBackdropFadeIn {
        to { opacity: 1; }
    }

    #navbar-container .mobile-menu.active {
        max-height: 500px;
        box-shadow: 0 16px 16px 4px rgba(0, 0, 0, 0.05);
        overflow: visible;
    }

    #navbar-container .mobile-menu-item {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 16px;
        gap: 10px;
        width: 100%;
        height: 56px;
        border-bottom: 1px solid var(--menu-border) !important;
    }

    #navbar-container .mobile-menu-item:last-of-type {
        border-bottom: none !important;
    }

    #navbar-container .mobile-menu-link {
        width: 100%;
        height: 24px;
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--menu-text) !important;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    #navbar-container .mobile-menu-link:hover {
        color: var(--accent) !important;
    }

    #navbar-container .mobile-menu-link.nav-active {
        color: var(--accent) !important;
    }

    /* Bottom section */
    #navbar-container .mobile-bottom-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        gap: 10px;
        width: 100%;
        height: 64px;
    }

    #navbar-container .mobile-social-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 16px;
        width: 80px;
        height: 32px;
    }

    #navbar-container .mobile-social-link {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 2px;
        gap: 10px;
        width: 32px;
        height: 32px;
        color: var(--menu-text) !important;
        transition: color 0.2s ease;
        text-decoration: none;
    }

    #navbar-container .mobile-social-link:hover {
        color: var(--accent) !important;
    }

    #navbar-container .mobile-social-link svg {
        width: 24px;
        height: 24px;
    }

    #navbar-container .mobile-theme-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Touch targets */
    #navbar-container .nav-links a,
    #navbar-container .mobile-menu-link,
    #navbar-container .social-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #navbar-container .theme-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: var(--space-sm) !important;
    }
}

@media (max-width: 360px) {
    #navbar-container .theme-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: var(--space-sm) !important;
        transform: scale(0.9) !important;
    }
}

/* ========================================
   DARK MODE MOBILE MENU BACKGROUNDS
   ======================================== */

@media (prefers-color-scheme: dark) {
    #navbar-container .mobile-menu {
        background: var(--menu-bg) !important;
    }
}

body.dark-mode #navbar-container .mobile-menu,
[data-theme="dark"] #navbar-container .mobile-menu {
    background: var(--menu-bg) !important;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    #navbar-container,
    #navbar-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   BODY PADDING for fixed navbar
   (Only applies when this standalone CSS is used)
   ======================================== */

body.has-shared-navbar {
    padding-top: 80px;
}

/* ========================================
   HIDE LEGACY APP HEADER
   When the shared navbar is present, hide
   the Designer Radar's built-in header
   ======================================== */

body.has-shared-navbar header.border-b {
    display: none !important;
}

/* ========================================
   FIX BOTTOM WHITESPACE
   Adjust min-h-screen to account for the
   fixed navbar height
   ======================================== */

body.has-shared-navbar .min-h-screen {
    min-height: calc(100vh - 80px) !important;
}

/* ========================================
   PAGE TITLE BAR
   Injected by shared-navbar.js for pages
   that need a heading below the navbar
   ======================================== */

.page-title-bar {
    text-align: center;
    padding: 24px 20px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page-title-bar h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #0a0a0a;
    letter-spacing: -0.01em;
}

.page-title-bar p {
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
    color: #71717a;
    letter-spacing: 0.01em;
}

/* Dark mode - body class */
body.dark-mode .page-title-bar h1 {
    color: #fafafa;
}

body.dark-mode .page-title-bar p {
    color: #a1a1aa;
}

/* Dark mode - data-theme attribute (Designer Radar) */
[data-theme="dark"] .page-title-bar h1 {
    color: #fafafa;
}

[data-theme="dark"] .page-title-bar p {
    color: #a1a1aa;
}