/*
 * The site header (views/partials/site_header.ejs, the redesign accepted on 30 Sep 2026).
 *
 * A 56px bar -- brand, nav, theme button, account -- and, on the home page, a band
 * under it with the task heading and the search. Below 72rem the nav and the theme
 * button move into a sheet the menu button opens (views/js/site_header.js), so the
 * bar keeps to one line: brand, account, menu. Below 60rem (a phone) the bar's
 * pieces shrink further.
 *
 * No track of the bar is narrower than what it holds, so its pieces never sit on
 * top of each other: the nav's track is at least as wide as the nav, the account's
 * as wide as the account (which signin.css caps at 17rem, whatever its label says),
 * and in compact mode the search is the piece that gives up room. 72rem leaves the
 * search at least 10rem beside the widest account and the nav with "Help & feedback".
 *
 * In compact mode (result pages and the pages beside the checker) the band folds
 * into the bar: the search sits between the brand and the nav, and the III.A.2
 * agreement line shows under it while it has focus. The markup is the same in
 * both modes (partials/site_header.ejs), so the scanner switches without a reload.
 *
 * Every page has it now; the rules still name [data-header-mode], so a page that
 * brings its own header markup keeps base.css's plain band.
 */

.site-header[data-header-mode] {
    --bar-height: 3.5rem;
    position: relative;
}

/* the bar's colour across the full width, behind the first row */
.site-header[data-header-mode]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--bar-height);
    background: var(--header-bar-bg);
}

.site-header-in {
    position: relative;
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: max-content minmax(max-content, 1fr) max-content auto;
    grid-template-rows: var(--bar-height);
    align-items: center;
    column-gap: var(--space-2);
}


/* brand */

.site-brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    margin-right: var(--space-4);
    color: inherit;
    font-weight: 700;
    font-size: var(--fs-md-plus);
    line-height: 1.2;
    white-space: nowrap;
}

.site-brand:hover {
    color: inherit;
}

.site-brand picture {
    flex: none;
}

.site-brand .sci-logo {
    display: block;
    width: 2rem;
    /* the width and height attributes only reserve the space; keep it square */
    height: auto;
}

.site-brand-text {
    display: grid;
}

.site-brand-by {
    font-weight: 500;
    font-size: var(--fs-3xs);
    letter-spacing: .02em;
    color: var(--header-muted);
}


/* nav and theme button: a row in the bar, a sheet on a phone */

.site-menu {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.site-menu .theme-toggle {
    margin-left: auto;
}

.site-nav {
    display: flex;
    gap: 2px;
}

.site-nav a {
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--header-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: background var(--speed) ease, color var(--speed) ease;
}

.site-nav a:hover,
.site-nav a[aria-current] {
    color: var(--header-text);
    background: var(--header-control-bg);
}

.site-nav a[aria-current] {
    font-weight: 600;
}

.site-account {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-account:empty {
    display: none;
}

.site-menu-button {
    grid-column: 4;
    grid-row: 1;
    display: none;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    color: inherit;
    background: var(--header-control-bg);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--speed) ease;
}

.site-menu-button:hover,
.site-menu-button[aria-expanded="true"] {
    background: var(--header-control-bg-hover);
}

.site-menu-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.site-menu-button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* 34px square; on a touch screen its hit area reaches 44px (WCAG 2.5.8) */
@media (pointer: coarse) {
    .site-menu-button {
        position: relative;
    }

    .site-menu-button::before {
        content: "";
        position: absolute;
        inset: -5px;
    }
}


/* the home band: the task, the search, what it takes, and the agreement */

.site-band {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-block: 1.75rem 1.6rem;
}

.site-band-in {
    display: grid;
    gap: var(--space-3);
    max-width: 42.5rem;
    margin-inline: auto;
}

.site-band h1 {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.005em;
    text-wrap: balance;
}

.site-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: .3rem;
    background: var(--search-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

/* the field draws no ring of its own; the whole search does, white on the red band */
.site-search:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.site-search-icon {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .45rem;
    fill: var(--text-muted);
}

.site-search input {
    flex: 1 1 0;
    min-width: 0;
    padding: .55rem .25rem;
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
}

.site-search input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.site-search-go {
    flex: none;
    padding: .7rem 1.15rem;
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1;
    color: var(--on-accent);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--speed) ease;
}

.site-search-go:hover {
    background: var(--accent-strong);
}

.site-search-go:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* the "/" hint and the button's second word are for the compact bar and the band */
.site-search-key {
    display: none;
}

.site-search-formats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--header-muted);
}

.site-search-formats code {
    padding: .05em .45em;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .95em;
    color: var(--header-text);
    background: var(--header-control-bg);
}

/* YouTube API Services policy III.A.2: agreement comes before use, directly under the search */
.site-header .search-agreement {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--header-muted);
}

/* "Paste a channel's @handle, URL or ID" under the field after an empty submit (search_hint.js) */
.site-header .search-error {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--header-text);
}

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

.site-header .search-agreement a,
.site-header .noscript-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.site-header .noscript-note {
    margin: 0;
    font-size: var(--fs-sm);
}


/* tablet and phone: brand, account, menu; the nav and theme button in a sheet */

@media (width < 72rem) {
    .site-header-in {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .site-account {
        grid-column: 2;
    }

    .site-menu-button {
        grid-column: 3;
        display: inline-grid;
    }

    /* Placed across the bar's row, from its top edge: just under the bar. The -1rem
       reach the screen's edges past the container's gutter. */
    .site-menu {
        position: absolute;
        z-index: 20;
        grid-column: 1 / -1;
        top: var(--bar-height);
        left: -1rem;
        right: -1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-2) 1rem var(--space-4);
        background: var(--header-bar-bg);
        box-shadow: var(--shadow-2);
    }

    .site-menu[data-open] {
        display: flex;
    }

    .site-nav {
        flex-direction: column;
    }

    .site-nav a {
        padding: .7rem .75rem;
        font-size: var(--fs-base);
    }

    /* in the sheet the theme button says its state in words as well */
    .site-menu .theme-toggle {
        display: flex;
        justify-content: flex-start;
        width: auto;
        height: auto;
        margin-left: 0;
        padding: .7rem .75rem;
        background: transparent;
    }

    .site-menu .theme-toggle:hover {
        background: var(--header-control-bg);
    }

    .site-menu .theme-toggle-mode {
        gap: .6rem;
    }

    .site-menu .theme-toggle .visually-hidden {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}


/* phone: a smaller brand without "by Freedom!", a tighter band */

@media (width < 60rem) {
    .site-brand {
        margin-right: 0;
        white-space: normal;
        font-size: var(--fs-md);
    }

    .site-brand-by {
        display: none;
    }

    .site-band {
        padding-block: 1.25rem 1.1rem;
    }

    /* the button takes its own row, full width: a bigger target than the field's end */
    .site-search-go {
        flex: 1 0 100%;
        padding-block: .8rem;
    }
}


/* compact: the bar alone, with the search in it */

.site-header[data-header-mode="compact"] {
    background: var(--header-bar-bg);
}

/* The search takes what the brand, the nav and the account leave, up to 26rem;
   the nav's track never gets narrower than the nav, so nothing overlaps it. */
.site-header[data-header-mode="compact"] .site-header-in {
    grid-template-columns: max-content minmax(10rem, 26rem) minmax(max-content, 1fr) max-content auto;
}

/* the band's pieces become the bar's */
.site-header[data-header-mode="compact"] .site-band,
.site-header[data-header-mode="compact"] .site-band-in {
    display: contents;
}

.site-header[data-header-mode="compact"] .site-brand-by,
.site-header[data-header-mode="compact"] .site-search-formats,
.site-header[data-header-mode="compact"] .noscript-note {
    display: none;
}

/* a result page keeps the scanner's heading for screen readers */
.site-header[data-header-mode="compact"] .site-band h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-header[data-header-mode="compact"] .site-menu {
    grid-column: 3;
}

.site-header[data-header-mode="compact"] .site-account {
    grid-column: 4;
}

.site-header[data-header-mode="compact"] .site-menu-button {
    grid-column: 5;
}

/* Indicators folds into Guides in the bar; a phone's sheet still lists both */
.site-header[data-header-mode="compact"] .site-nav a[href="/indicators"] {
    display: none;
}

.site-header[data-header-mode="compact"] .site-search {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: var(--space-1);
    min-width: 0;
    height: 2.25rem;
    padding: 0 .2rem 0 .6rem;
    color: var(--header-text);
    background: var(--header-field-bg);
    border: 1px solid var(--header-field-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.site-header[data-header-mode="compact"] .site-search:focus-within {
    background: var(--header-field-bg-focus);
    border-color: var(--header-text);
}

.site-header[data-header-mode="compact"] .site-search-icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0;
    fill: currentColor;
}

.site-header[data-header-mode="compact"] .site-search input {
    padding: .3rem .25rem;
    /* 16px, or a phone's browser zooms the page in on focus */
    font-size: var(--fs-base);
    color: var(--header-text);
}

.site-header[data-header-mode="compact"] .site-search input::placeholder {
    color: var(--header-placeholder);
}

.site-header[data-header-mode="compact"] .site-search-key {
    display: inline-block;
    flex: none;
    padding: 0 .35rem;
    border: 1px solid var(--header-field-border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: var(--fs-3xs);
    line-height: 1.5;
    color: var(--header-placeholder);
}

/* while typing the hint has done its job */
.site-header[data-header-mode="compact"] .site-search:focus-within .site-search-key {
    display: none;
}

.site-header[data-header-mode="compact"] .site-search-go {
    padding: .4rem .65rem;
    font-size: var(--fs-xs);
}

.site-header[data-header-mode="compact"] .site-search-go-more {
    display: none;
}

.site-header[data-header-mode="compact"] .site-search-go:focus-visible {
    outline-color: var(--header-text);
}

/* YouTube API Services policy III.A.2: agreement still comes before use. The line
   drops down under the field while the search has focus, and stays while the
   pointer or focus is on it, so its links can be followed. */
.site-header[data-header-mode="compact"] .search-agreement {
    position: absolute;
    z-index: 25;
    grid-column: 2;
    grid-row: 1;
    top: calc(var(--bar-height) - .25rem);
    left: 0;
    display: none;
    width: max-content;
    max-width: min(34rem, 100vw - 2rem);
    padding: var(--space-2) var(--space-3);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--header-bar-bg);
    box-shadow: var(--shadow-2);
}

.site-header[data-header-mode="compact"] .site-search:focus-within ~ .search-agreement,
.site-header[data-header-mode="compact"] .search-agreement:hover,
.site-header[data-header-mode="compact"] .search-agreement:focus-within {
    display: block;
}

/* In the bar, the empty-search hint drops down under the field in the agreement's place;
   the agreement comes back once the reader types, which hides the hint (search_hint.js). */
.site-header[data-header-mode="compact"] .search-error {
    position: absolute;
    z-index: 25;
    grid-column: 2;
    grid-row: 1;
    top: calc(var(--bar-height) - .25rem);
    left: 0;
    width: max-content;
    max-width: min(34rem, 100vw - 2rem);
    padding: var(--space-2) var(--space-3);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--header-bar-bg);
    box-shadow: var(--shadow-2);
}

.site-header[data-header-mode="compact"] .search-error:not([hidden]) ~ .search-agreement {
    display: none;
}

/* tablet and phone: brand, search, account, menu; the nav in the sheet */
@media (width < 72rem) {
    .site-header[data-header-mode="compact"] .site-header-in {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .site-header[data-header-mode="compact"] .site-account {
        grid-column: 3;
    }

    .site-header[data-header-mode="compact"] .site-menu-button {
        grid-column: 4;
    }

    .site-header[data-header-mode="compact"] .site-menu {
        grid-column: 1 / -1;
    }

    .site-header[data-header-mode="compact"] .site-nav a[href="/indicators"] {
        display: block;
    }
}

@media (width < 60rem) {
    /* the logo alone; the name stays the link's text for screen readers */
    .site-header[data-header-mode="compact"] .site-brand-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* the phone keyboard's own Search key submits; the field keeps the room, and a
       shorter placeholder (site_header.js) */
    .site-header[data-header-mode="compact"] .site-search-icon,
    .site-header[data-header-mode="compact"] .site-search-key,
    .site-header[data-header-mode="compact"] .site-search-go {
        display: none;
    }

    .site-header[data-header-mode="compact"] .search-agreement {
        grid-column: 1 / -1;
        left: -1rem;
        right: -1rem;
        width: auto;
        max-width: none;
        border-radius: 0;
    }
}