/**
 * Navbar Utility Icons (Dark Mode Toggle & Search Link)
 * Accessible buttons/links for navbar utility functions
 * Integrates with navbar and respects UCB branding
 *
 * @version 1.1
 * @requires theme.css
 */

/* ==========================================================================
   Search Link in Navbar
   ========================================================================== */

.search-link-container {
    display: inline-block;
    margin: 0;
    padding: 0;
    align-self: stretch; /* Stretch to fill navbar height */
}

.search-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                        /* WCAG 2.1 minimum touch target */
    min-height: 44px;                   /* WCAG 2.1 minimum touch target */
    height: 100%;                       /* Fill parent (navbar) height */
    padding: 10px;                      /* Match navbar link padding */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base, 0.2s ease);
    color: var(--nav-text, #EEEEEE);
    text-decoration: none;
}

.search-link:hover {
    background: var(--nav-dropdown-hover-bg, rgba(128, 128, 128, 0.333));
    color: var(--nav-text-hover, #ffffff);
    text-decoration: none;
}

/* WCAG 2.1 AA Focus Indicator - 3px minimum */
.search-link:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--color-focus, #CFB87C);
    outline-offset: var(--focus-outline-offset, 2px);
    background: var(--nav-dropdown-hover-bg, rgba(128, 128, 128, 0.333));
}

/* Remove focus outline for mouse users */
.search-link:focus:not(:focus-visible) {
    outline: none;
}

/* Active state */
.search-link:active {
    background: rgba(128, 128, 128, 0.5);
}

/* Search icon styling */
.search-link svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base, 0.2s ease);
    transform: translate(1px, -1px); /* Slight adjustment: right and up */
}

/* Subtle scale on hover */
.search-link:hover svg {
    transform: translate(1px, -1px) scale(1.1);
}

/* Active state */
.search-link:active svg {
    transform: translate(1px, -1px) scale(0.95);
}

/* Screen reader text for search */
.search-link .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile responsive - search link (only in scroll wrapper, not utility row) */
@media (max-width: 768px) {
    .mobile-menu-scroll-wrapper .search-link-container {
        display: block;
        width: 100%;
    }

    .mobile-menu-scroll-wrapper .search-link {
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-3, 0.75rem) var(--spacing-2, 0.5rem);
    }

    .mobile-menu-scroll-wrapper .search-link svg {
        margin-right: var(--spacing-2, 0.5rem);
    }

    /* Show text label on mobile (only in scroll wrapper) */
    .mobile-menu-scroll-wrapper .search-link .search-label {
        display: inline;
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
    }

    .mobile-menu-scroll-wrapper .search-link .visually-hidden {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@media (min-width: 769px) {
    /* Hide text label on desktop (icon only) */
    .search-link .search-label {
        display: none;
    }
}

/* High contrast mode for search link */
@media (prefers-contrast: high) {
    .search-link {
        border: 2px solid currentColor;
    }

    .search-link:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* Reduced motion for search link */
@media (prefers-reduced-motion: reduce) {
    .search-link,
    .search-link svg {
        transition: none;
    }

    .search-link:hover svg,
    .search-link:active svg {
        transform: none;
    }
}

/* ==========================================================================
   Toggle Container in Navbar
   ========================================================================== */

.dark-mode-toggle-container {
    display: inline-block;
    margin: 0;
    padding: 0;
    align-self: stretch; /* Stretch to fill navbar height */
}

/* ==========================================================================
   Toggle Button
   ========================================================================== */

.dark-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                        /* WCAG 2.1 minimum touch target */
    min-height: 44px;                   /* WCAG 2.1 minimum touch target */
    height: 100%;                       /* Fill parent (navbar) height */
    padding: 10px;                      /* Match navbar link padding */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base, 0.2s ease);
    color: var(--nav-text, #EEEEEE);
}

.dark-mode-toggle:hover {
    background: var(--nav-dropdown-hover-bg, rgba(128, 128, 128, 0.333));
    color: var(--nav-text-hover, #ffffff);
}

/* WCAG 2.1 AA Focus Indicator - 3px minimum */
.dark-mode-toggle:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--color-focus, #CFB87C);
    outline-offset: var(--focus-outline-offset, 2px);
    background: var(--nav-dropdown-hover-bg, rgba(128, 128, 128, 0.333));
}

/* Remove focus outline for mouse users */
.dark-mode-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* Active state */
.dark-mode-toggle:active {
    background: rgba(128, 128, 128, 0.5);
}

/* ==========================================================================
   Icon Visibility Based on Theme
   ========================================================================== */

/* Default (light mode): Show moon icon, hide sun icon */
.dark-mode-toggle .sun-icon {
    display: none;
}

.dark-mode-toggle .moon-icon {
    display: block;
}

/* Dark mode: Show sun icon, hide moon icon */
[data-theme="dark"] .dark-mode-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .dark-mode-toggle .moon-icon {
    display: none;
}

/* ==========================================================================
   Icon Styling
   ========================================================================== */

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform var(--transition-base, 0.2s ease);
}

/* Subtle rotation on hover */
.dark-mode-toggle:hover svg {
    transform: rotate(15deg);
}

/* Active state */
.dark-mode-toggle:active svg {
    transform: rotate(30deg) scale(0.95);
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dark-mode-toggle,
    .dark-mode-toggle svg {
        transition: none;
    }

    .dark-mode-toggle:hover svg,
    .dark-mode-toggle:active svg {
        transform: none;
    }
}

/* ==========================================================================
   Screen Reader Text
   ========================================================================== */

.dark-mode-toggle .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* Ensure toggle is visible in mobile menu */
    .dark-mode-toggle-container {
        display: block;
        width: 100%;
    }

    .dark-mode-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-3, 0.75rem) var(--spacing-2, 0.5rem);
    }

    .dark-mode-toggle svg {
        margin-right: var(--spacing-2, 0.5rem);
    }

    /* Show text label on mobile */
    .dark-mode-toggle .theme-label {
        display: inline;
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
    }

    .dark-mode-toggle .visually-hidden {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@media (min-width: 769px) {
    /* Hide text label on desktop (icon only) */
    .dark-mode-toggle .theme-label {
        display: none;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .dark-mode-toggle {
        border: 2px solid currentColor;
    }

    .dark-mode-toggle:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* ==========================================================================
   Loading State (Optional)
   ========================================================================== */

.dark-mode-toggle.loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.dark-mode-toggle.loading svg {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dark-mode-toggle.loading svg {
        animation: none;
    }
}