/*
 * File: header.css
 * Description: The application header — logo, middle element, trailing buttons.
 */

header {
    /* Header-specific sizing; the media queries below override only these. */
    --header-padding: var(--space-large);
    --header-gap: var(--space-large);
    --header-logo-size: 50px;
    --header-form-gap: var(--space-small);
    --header-input-padding: var(--space-small);
    --header-input-font-size: var(--font-md);
    --header-button-padding: 10px 20px;
    --header-button-font-size: var(--font-md);

    background-color: var(--header-bg);
    padding: var(--header-padding);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* The inner wrapper is what lines the header up with the content column. */
.header-content {
    display: flex;
    align-items: center;
    gap: var(--header-gap);
    max-width: var(--content-max-width);
    width: 100%;
    padding: 0 var(--content-padding);
    margin: 0 auto;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    width: var(--header-logo-size);
    height: auto;
    display: block;
}

/* The middle element takes the remaining width, whatever it is. */
.search-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--header-form-gap);
}

.search-input-wrapper {
    flex: 1;
    position: relative;      /* Anchor for the suggestions dropdown */
}

.search-input-wrapper input {
    width: 100%;
    padding: var(--header-input-padding);
    font-size: var(--header-input-font-size);
}

.search-form button,
.settings-button {
    padding: var(--header-button-padding);
    font-size: var(--header-button-font-size);
}

/* A button carrying state shows an accent dot rather than changing colour. */
.settings-button {
    position: relative;
}

.settings-button::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-normal) var(--ease-out);
}

.settings-button.has-filter::after {
    opacity: 1;
}

/* ========================================
   SUGGESTIONS DROPDOWN
   Visible only when JS has filled it — no state class needed.
   ======================================== */
.search-suggestions {
    position: absolute;
    top: calc(100% + var(--space-minimal));
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--frame-border);
    z-index: 1001;
    max-height: var(--dropdown-max-height);
    overflow-y: auto;
    display: none;
}

.search-suggestions:not(:empty) {
    display: block;
}

.search-suggestions ul {
    list-style: none;
    animation: fadeIn var(--transition-normal) var(--ease-out) both;
}

.search-suggestions li {
    padding: var(--space-small);
    cursor: pointer;
}

.search-suggestions li.is-active,
.search-suggestions li:hover {
    background-color: var(--accent-hover);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Hardcoded px: custom properties do not work in media query conditions.
   Desktop 1200px+, tablet 768-1199px, mobile <=767px.
   ======================================== */
@media (max-width: 1199px) {
    header {
        --header-padding: var(--space-medium);
        --header-gap: var(--space-small);
        --header-logo-size: 44px;
        --header-input-font-size: var(--font-base);
        --header-button-font-size: var(--font-base);
    }
}

@media (max-width: 767px) {
    header {
        --header-padding: var(--space-small);
        --header-gap: var(--space-small);
        --header-form-gap: var(--space-minimal);
        --header-input-font-size: var(--font-sm);
        --header-button-padding: 10px 12px;
        --header-button-font-size: var(--font-sm);
    }

    .header-content {
        padding: 0 var(--content-padding-mobile);
    }

    .search-form {
        width: 100%;
        flex-wrap: nowrap;
    }

    /* Text buttons become icon-only; the label is hidden, not removed. */
    .search-form button[type="submit"],
    .settings-button {
        min-width: 44px;
        padding: 0;
        /* Matches the input: font-size + (padding x 2) + 1px border top and bottom */
        height: calc(var(--header-input-font-size) + (var(--header-input-padding) * 2) + 2px);
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-form button[type="submit"]::before,
    .settings-button::before {
        font-family: "bootstrap-icons";
        font-size: 16px;
        line-height: 1;
    }

    .search-form button[type="submit"]::before {
        content: "\f52a";   /* bi-search */
    }

    .settings-button::before {
        content: "\f3e5";   /* bi-gear */
    }
}