/*
 * phase1-polish.css
 * Loaded LAST after all other stylesheets.
 * Covers: brand fonts, keyboard-nav focus-within, site-search styles.
 */

/* =========================================================
   TASK 4 — BRAND FONTS
   Apply Poppins (headings) and Roboto (body) with enough
   specificity to override anything upstream.
   ========================================================= */

html body,
body {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* =========================================================
   TASK 3 — KEYBOARD NAV: focus-visible outlines + :focus-within
   dropdown reveal (mirrors the :hover rule in components.css).
   The dropdown-menu uses visibility/opacity transition.
   ========================================================= */

/* Ensure visible focus outlines on all interactive nav elements */
nav#mainNav a:focus-visible,
nav#mainNav button:focus-visible,
.site-search-input:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Open dropdowns on keyboard focus-within (desktop) */
@media (min-width: 1025px) {
    .has-dropdown:focus-within .dropdown-menu {
        visibility: visible;
        opacity: 1;
    }

    .has-dropdown:focus-within > a::after {
        transform: rotate(-180deg);
    }

    .has-dropdown:focus-within > a {
        color: var(--color-primary, #005fcc);
    }
}

/* Update aria-expanded state when dropdown is open via keyboard */
.has-dropdown > a[aria-expanded="true"] ~ .dropdown-menu {
    visibility: visible;
    opacity: 1;
}

/* =========================================================
   TASK 9 — SITE SEARCH BOX
   ========================================================= */

/* Visually hidden label utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

.site-search-input {
    width: 200px;
    padding: 0.35rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 0.875rem;
    font-family: 'Roboto', system-ui, sans-serif;
    background: #fff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s, width 0.3s;
    outline: none;
}

.site-search-input:focus {
    border-color: #005fcc;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
    width: 260px;
}

/* Dark theme support */
[data-bs-theme="dark"] .site-search-input {
    background: #2a2a2a;
    color: #f0f0f0;
    border-color: #555;
}

.site-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

[data-bs-theme="dark"] .site-search-results {
    background: #1e1e1e;
    border-color: #444;
}

.site-search-results[hidden] {
    display: none;
}

.site-search-results li {
    margin: 0;
    padding: 0;
}

.site-search-results li a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #222;
    text-decoration: none;
    transition: background 0.15s;
}

[data-bs-theme="dark"] .site-search-results li a {
    color: #e0e0e0;
}

.site-search-results li a:hover,
.site-search-results li a:focus,
.site-search-results li[aria-selected="true"] a {
    background: #f0f5ff;
    color: #005fcc;
    outline: none;
}

[data-bs-theme="dark"] .site-search-results li a:hover,
[data-bs-theme="dark"] .site-search-results li a:focus {
    background: #2c3e5c;
}

.site-search-results .search-result-category {
    font-size: 0.75rem;
    color: #666;
    margin-left: 0.25rem;
}

.site-search-no-results {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #666;
}

/* Responsive: collapse search on small screens */
@media (max-width: 1024px) {
    .site-search-wrapper {
        display: none;
    }
}