@import url('colori.css');

/* ── Community header search ─────────────────────────────────────────────
   Shared between Library, View, and any other community page that wants
   the centred search bar in the site header. Apply by adding the
   --search modifier to .site-header__inner and using the structure:
     .site-header__left  (logo + brand)
     .site-header__search-form  (centred search input)
     .site-header__legal-link, .site-header__support-link (kept on the right) */

.site-header__inner--search {
    /* The shared flex layout (logo+brand left, support pushed right via
       margin-left:auto) is kept. We override the auto on support and put
       auto margins on the search instead: with no other auto margins in
       the row, the search's left/right autos absorb the remaining space
       equally — so the search is centred in the GAP between the side
       items, not on the page. The flex gap reserves a minimum 24-px
       breathing space on either side of the search so it never collides
       with the logo or support link on narrow viewports. */
    gap: 24px;
}

.site-header__left {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header__inner--search .site-header__legal-link {
    /* Drop the shared margin-left:auto so the search's autos win. */
    margin-left: 0;
    flex: 0 0 auto;
}

.site-header__inner--search .site-header__support-link {
    /* Cancel out the container's 24px gap for this one pair so LEGAL→SUPPORT
       spacing matches the non-search pages (where it's just LEGAL's own
       20px padding-right, with no flex gap involved). */
    margin-left: -24px;
    flex: 0 0 auto;
}

.site-header__search-form {
    /* Auto margins consume remaining space equally on both sides → the
       form sits at the midpoint between left items and support link. */
    margin: 0 auto;
    /* Preferred 640 (caps at 480 via max-width); shrinks on narrow
       viewports so the form never overflows the gap. */
    flex: 0 1 640px;
    min-width: 0;
    max-width: 480px;
}

.header-search {
    position: relative;
}

/* The header is dark in both modes, but the search input adapts to the
   user's colour scheme so it contrasts crisply with its own text:
     • light mode → near-white pill with dark text
     • dark mode  → opaque dark pill with white text */
.header-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #5a5a5a;
    pointer-events: none;
}

.header-search__input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 16px 8px 42px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.header-search__input::placeholder {
    color: #6a6a6a;
}

.header-search__input:focus {
    border-color: rgba(0, 0, 0, 0.4);
    background-color: rgba(255, 255, 255, 1);
}

@media (prefers-color-scheme: dark) {
    .header-search__icon {
        color: hsla(0, 0%, 100%, 0.55);
    }

    .header-search__input {
        border: 1px solid hsla(0, 0%, 100%, 0.12);
        background-color: rgba(0, 0, 0, 0.45);
        color: #f1f1f3;
    }

    .header-search__input::placeholder {
        color: hsla(0, 0%, 100%, 0.55);
    }

    .header-search__input:focus {
        border-color: hsla(0, 0%, 100%, 0.4);
        background-color: rgba(0, 0, 0, 0.65);
    }
}

/* Total height of the fixed community header. Pages that pad content under
   the header (library.css, view.css) read this so they follow the taller
   two-row header on mobile. */
:root {
    --community-header-height: 55px;
}

/* .page-container's 770-px min-width is for the page body. The header never
   needs it, and it pushed LEGAL/SUPPORT off-screen on narrow viewports. */
@media (max-width: 770px) {
    .site-header__inner--search.page-container {
        min-width: 0;
    }
}

/* ── Mobile: two-row header ──────────────────────────────────────────────
   Row 1: smaller logo + brand on the left, LEGAL/SUPPORT on the right.
   Row 2: full-width search bar. */
@media (max-width: 640px) {
    :root {
        /* 55 (row 1) + 36 (search input) + 10 (bottom padding) */
        --community-header-height: 101px;
    }

    .site-header__inner--search.page-container {
        padding: 0 16px 10px;
    }

    /* Doubled class: library.css/share.css re-@import colori.css after this
       file, so a single-class selector would lose to its height: 55px. */
    .site-header__inner.site-header__inner--search {
        flex-wrap: wrap;
        height: auto;
        column-gap: 12px;
        row-gap: 0;
    }

    .site-header__inner--search .site-header__left {
        height: 55px;
        /* Push LEGAL/SUPPORT to the right edge of row 1 (the search form's
           auto margins no longer do this once it wraps to row 2). */
        margin-right: auto;
    }

    .site-header__inner--search .site-header__logo {
        height: 16px;
    }

    .site-header__inner--search .site-header__brand {
        font-size: 22px;
        margin-left: 5px;
    }

    .site-header__inner--search .site-header__legal-link,
    .site-header__inner--search .site-header__support-link {
        font-size: 14px;
        padding-right: 0;
    }

    .site-header__inner--search .site-header__support-link {
        /* Undo the desktop -24px pull; the 12px column gap separates them. */
        margin-left: 4px;
    }

    .site-header__inner--search .site-header__search-form {
        order: 1;
        flex: 1 1 100%;
        max-width: none;
        margin: 0;
    }

    .site-header__inner--search .header-search__input {
        height: 36px;
        /* 16px stops iOS Safari zooming the page when the input is focused. */
        font-size: 16px;
    }
}

/* Very narrow phones (e.g. 320px): shrink row 1 a bit more so SUPPORT
   doesn't wrap under the logo. */
@media (max-width: 359px) {
    .site-header__inner.site-header__inner--search {
        column-gap: 8px;
    }

    .site-header__inner--search .site-header__logo {
        height: 14px;
    }

    .site-header__inner--search .site-header__brand {
        font-size: 19px;
        margin-left: 4px;
    }

    .site-header__inner--search .site-header__legal-link,
    .site-header__inner--search .site-header__support-link {
        font-size: 13px;
    }
}