/*
 * 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-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. Here it is the
   line naming what is being measured, not a search form. */
.header-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-text);
    font-size: var(--font-sm);
}

/* Two trailing buttons rather than the reference's one; they stay a group so
   the mobile rules below reach both. */
.header-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-small);
}

.header-actions 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;
}

/* ========================================
   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-button-font-size: var(--font-base);
    }
}

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

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

    /* The project line would push the buttons off a phone; it moves under them. */
    .header-content {
        flex-wrap: wrap;
    }

    .header-title {
        order: 3;
        flex-basis: 100%;
    }

    /* Text buttons become icon-only; the label is hidden, not removed. */
    .header-actions button,
    .settings-button {
        min-width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-actions button::before,
    .settings-button::before {
        font-family: "bootstrap-icons";
        font-size: 16px;
        line-height: 1;
    }

    #shareButton::before {
        content: "\f470";   /* bi-link-45deg */
    }

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