/*
 * zhik_theme: light values, buttons, font, and the search-first header.
 * Spec: docs/superpowers/specs/2026-09-23-dam-theme-foundation-header-design.md
 * The header follows the approved mockup (light grey band, variant B) as closely as RS's markup allows.
 * Loaded after RS core CSS (include/plugin_functions.php get_plugin_css).
 * `:root:root` outranks RS's `html.mode-blue` value block.
 */

/* ---- Font: Outfit (SIL OFL, fonts/OFL.txt), self-hosted ---- */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Same selectors as RS's css/fonts/<font>.css, which loads earlier */
h1, h2, h3, h4, h5, h6, .Title,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget,
body, input, textarea, select, button {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

/* ---- Values (light) ---- */
:root:root {
    --colour-brand-primary-default: #1f2937;
    --colour-brand-primary-hover: #111827;
    --colour-brand-primary-dark: #111827;
    --colour-brand-primary-darkest: #0b1220;
    --colour-brand-primary-light: #e9ecef;
    --colour-brand-primary-lightest: #f1f3f5;
    --colour-surface-header-background: #f1f3f5;
    --colour-surface-page-title-background: #f1f3f5;
    --colour-surface-view-background: #f7f8f9;

    --zt-button-bg: #dfe3e8;
    --zt-button-bg-hover: #d3d8de;
    --zt-button-bg-active: #c7cdd4;
    --zt-button-ink: #1f2937;
    --zt-header-line: #dfe3e8;
    --zt-ink: #0f172a;
    --zt-muted: #566173; /* mockup #64748b darkened to reach 4.5:1 on the grey band */
    --zt-icon-hover: #e6e9ed;
    --zt-soft: #e9ecef;
    --zt-soft-line: #bcc3cc;
    --zt-search-bg: #ffffff;
    --zt-badge: #d93025;
    --zt-radius: 10px;
}

/* ---- Primary action buttons: light grey with dark text ----
   Same selectors RS paints with the brand colour (css/light.css:413, css/global.css:4215,4672,4908,
   uppy in css/light.css:462). Small selected-state controls keep the brand fill with white text. */
button,
input[type=submit],
input[type=button],
.RecordPanel .RecordDownloadSpace .DownloadDBlend a,
.UploadButton a,
.button input[type=submit],
.button input[type=button],
.header-search-field #searchbutton,
#header-container a.UploadButton,
.uppy-DashboardContent-back,
.uppy-DashboardContent-back:focus,
.uppy-DashboardContent-addMore,
.uppy-DashboardContent-addMore:focus {
    background-color: var(--zt-button-bg);
    color: var(--zt-button-ink);
    box-shadow: none;
}

.button input[type=submit]:hover,
.button input[type=button]:hover,
.header-search-field #searchbutton:hover,
#header-container a.UploadButton:hover {
    background-color: var(--zt-button-bg-hover);
}

.button input[type=submit]:active,
.button input[type=button]:active,
.header-search-field #searchbutton:active,
#header-container a.UploadButton:active {
    background-color: var(--zt-button-bg-active);
}


/* ==== Header: row 1 logo + tabs + actions, row 2 search (phones: tabs get row 3) ==== */
header:not(.LoginHeader) {
    border-bottom: 1px solid var(--zt-header-line);
}

header:not(.LoginHeader) #header-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "logo   nav    actions"
        "search search search";
    align-items: center;
    column-gap: var(--space-24);
    row-gap: 0;
    padding: 0 20px;
    font-size: 13px;
}

/* ---- Row 1: logo (the Zhik logo is set in config.overrides.php) ---- */
header:not(.LoginHeader) #header-container .logo {
    grid-area: logo;
    justify-self: start;
    height: 60px;
    max-height: 60px;
    width: auto;
}

header:not(.LoginHeader) #header-container .logo img {
    max-height: 30px;
}

/* ---- Row 1: menu links as tabs ---- */
header:not(.LoginHeader) #header-container > nav.primary-navigation {
    grid-area: nav;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    margin-left: 0;
}

header:not(.LoginHeader) #header-container > nav.primary-navigation > ul {
    height: 100%;
    align-items: center;
    gap: var(--space-4);
}

header:not(.LoginHeader) #header-container > nav.primary-navigation > ul > li:not(.menu-overflow) {
    font-size: 13px;
    line-height: 1;
}

header:not(.LoginHeader) #header-container > nav.primary-navigation > ul > li:not(.menu-overflow) > a {
    display: flex;
    align-items: center;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--zt-muted);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
}

header:not(.LoginHeader) #header-container > nav.primary-navigation > ul > li:not(.menu-overflow) > a:hover,
header:not(.LoginHeader) #header-container > nav.primary-navigation > ul > li:not(.menu-overflow) > a:focus-visible,
header:not(.LoginHeader) #header-container > nav.primary-navigation > ul > li:not(.menu-overflow) > a.zt-active {
    color: var(--zt-ink);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--zt-ink);
}

header:not(.LoginHeader) #header-container > nav.primary-navigation > button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--zt-radius);
    font-size: 19px;
    color: var(--zt-muted);
    background: transparent;
}

/* ---- Row 1: actions (Upload, Admin, Messages, Account) ---- */
header:not(.LoginHeader) #header-container .actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    max-height: 60px;
}

header:not(.LoginHeader) #header-container a.UploadButton {
    order: -1; /* before Admin / Messages / Account, as in the mockup */
    width: auto;
    height: auto;
    gap: 6px;
    margin: 0 6px 0 0;
    padding: 8px 14px;
    border-radius: var(--zt-radius);
    font-size: 13px;
    font-weight: 600;
}

header:not(.LoginHeader) #header-container a.UploadButton > span {
    display: flex;
}

/* Upload icon: Lucide arrow-up-to-line, as in the mockup */
header:not(.LoginHeader) #header-container a.UploadButton i {
    font-size: 16px;
}

header:not(.LoginHeader) #header-container a.UploadButton i::before {
    content: "\e45b";
}

/* Admin / Messages / Account: bare 36px icons, no tile */
header:not(.LoginHeader) #header-container .actions .get-menu-content {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--zt-radius);
    background: transparent;
    color: var(--zt-muted);
    font-size: 19px;
}

header:not(.LoginHeader) #header-container .actions .get-menu-content:hover,
header:not(.LoginHeader) #header-container .actions .get-menu-content:focus-visible {
    background: var(--zt-icon-hover);
    color: var(--zt-ink);
}

header:not(.LoginHeader) #header-container .actions .get-menu-content .wrap-icon {
    position: relative;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: inherit;
}

header:not(.LoginHeader) #header-container .actions .get-menu-content .wrap-icon > i {
    font-size: 19px;
}

header:not(.LoginHeader) #header-container .actions .get-menu-content .ProfileImage {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* Count badges: small red pills, top-right of the icon */
header:not(.LoginHeader) #header-container .actions .get-menu-content .wrap-icon > .Pill {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--zt-badge);
    color: #fff;
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* Phones: keep RS's collapse-on-scroll working (js/header.js adds .is-collapsed) */
header:not(.LoginHeader) #header-container .is-collapsed {
    max-height: 0;
}

/* The phone ☰ copy of the menu: every link it holds is in the visible tabs */
header:not(.LoginHeader) #header-container .actions > nav.primary-navigation {
    display: none;
}

/* ---- Row 2: search box = [magnifier] [input] [Filters] [Search] ---- */
header:not(.LoginHeader) #header-container .header-search-field {
    grid-area: search;
    width: 100%;
    margin-left: 0;
    padding: 4px 0 12px;
}

header:not(.LoginHeader) .header-search-field .input-wrapper {
    min-width: 0;
    height: 48px;
    max-height: 48px;
    gap: 10px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--zt-header-line);
    border-radius: 12px;
    background: var(--zt-search-bg);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* Decorative magnifier on the left (the real submit button is "Search" on the right) */
header:not(.LoginHeader) .header-search-field .input-wrapper::before {
    content: "\e151";
    font-family: "lucide";
    font-size: 18px;
    line-height: 1;
    color: var(--zt-muted);
}

header:not(.LoginHeader) .header-search-field .input-wrapper:focus-within {
    outline: 2px solid var(--form-focus);
    outline-offset: 2px;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > input {
    height: 100%;
    background: transparent;
    font-size: 14px;
    color: var(--zt-ink);
}

header:not(.LoginHeader) .header-search-field .input-wrapper > input::placeholder {
    color: var(--zt-muted);
    opacity: 1;
}

/* Both buttons: text + icon pills; labels are added by hooks/all.php as <span class="zt-label"> */
header:not(.LoginHeader) .header-search-field .input-wrapper > button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button .zt-label {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    pointer-events: none; /* js/header.js matches clicks on the button itself */
}

/* Filters: outlined, Lucide list-filter icon, highlighted while open */
header:not(.LoginHeader) .header-search-field .input-wrapper > button[aria-controls="search-filters-panel"] {
    order: 2;
    border: 1px solid var(--zt-header-line);
    background: transparent;
    color: var(--zt-ink);
    font-weight: 500;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button[aria-controls="search-filters-panel"]:not(.icon-circle-x)::before {
    content: "\e460";
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button[aria-controls="search-filters-panel"]:hover {
    background: var(--zt-icon-hover);
    color: var(--zt-ink);
    padding: 7px 10px;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button[aria-controls="search-filters-panel"][aria-expanded="true"] {
    background: var(--zt-soft);
    border-color: var(--zt-soft-line);
    color: var(--zt-ink);
}

/* Search: grey text button, no icon (desktop) */
header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit] {
    order: 3;
    padding: 8px 14px;
    background: var(--zt-button-bg);
    color: var(--zt-button-ink);
    font-weight: 600;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit]::before {
    display: none;
}

header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit]:hover {
    background: var(--zt-button-bg-hover);
    color: var(--zt-button-ink);
    padding: 8px 14px;
}

/* Filters panel drops below the header band */
header:not(.LoginHeader) .header-search-field #search-filters-panel {
    border-radius: 0 0 var(--zt-radius) var(--zt-radius);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.12);
}

/* Content area height follows the real header height at 768px and up
   (RS hardcodes 144px / 80px; hooks/all.php keeps the variable current). */
@media (min-width: 768px) {
    :root:root {
        --uicenter-height: calc(100% - var(--js-header-container-bottom, 125px));
    }
}

/* ---- Phones: logo + actions / search / tabs ---- */
@media (max-width: 767.98px) {
    header:not(.LoginHeader) #header-container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo   actions"
            "search search"
            "nav    nav";
        padding: 0 12px;
        column-gap: var(--space-8);
    }

    header:not(.LoginHeader) #header-container .logo {
        height: 54px;
    }

    header:not(.LoginHeader) #header-container .actions {
        gap: 2px;
    }

    /* Upload: icon only, accent colour */
    header:not(.LoginHeader) #header-container a.UploadButton {
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
        background: transparent;
    }

    header:not(.LoginHeader) #header-container a.UploadButton > span {
        display: none;
    }

    header:not(.LoginHeader) .header-search-field .input-wrapper {
        height: 44px;
        max-height: 44px;
    }

    /* Icon-only buttons on phones; the Search button stays (as an icon) so submitting is still one tap */
    header:not(.LoginHeader) .header-search-field .input-wrapper > button .zt-label {
        display: none;
    }

    header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit]::before {
        display: inline;
    }

    header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit],
    header:not(.LoginHeader) .header-search-field .input-wrapper > button[type=submit]:hover {
        padding: 7px 9px;
        background: transparent;
    }

    header:not(.LoginHeader) #header-container > nav.primary-navigation {
        height: 44px;
    }

    header:not(.LoginHeader) #header-container > nav.primary-navigation > ul {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* RS sizes the Upload label itself; match the mockup's 13px */
header:not(.LoginHeader) #header-container a.UploadButton > span {
    font-size: 13px;
    font-weight: 600;
}

/* ==== List menus (Admin, System, My account) — enabled by $tilenav = false in config ==== */
.VerticalNav.TileReflow ul {
    list-style: none;
    max-width: 560px;
    margin: var(--space-8) 0 var(--space-16);
    padding: 4px;
    border: 1px solid var(--zt-header-line);
    border-radius: var(--zt-radius);
    background: var(--zt-search-bg);
}

.VerticalNav.TileReflow li {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

.VerticalNav.TileReflow li + li {
    border-top: 1px solid var(--zt-soft);
}

.VerticalNav.TileReflow li > a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--zt-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.VerticalNav.TileReflow li > a:hover,
.VerticalNav.TileReflow li > a:focus-visible {
    background: var(--zt-soft);
    text-decoration: none;
}

.VerticalNav.TileReflow li > a i {
    min-width: 20px;
    padding: 0;
    font-size: 18px;
    color: var(--zt-muted);
}

/* resourcespace_mcp's menu item uses Font Awesome (fa-plug), which RS 11 doesn't load: map it to Lucide plug */
.VerticalNav a[href*="/plugins/resourcespace_mcp/"] i.fa-plug::before,
.TileNav a[href*="/plugins/resourcespace_mcp/"] i.fa-plug::before {
    content: "\e37f";
    font-family: "lucide";
    font-style: normal;
}

.VerticalNav.TileReflow .Pill {
    position: static;
    margin: 0 12px 0 auto;
    border-radius: 999px;
    background: var(--zt-badge);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* RS core bug (css/global.css:1800/1807): width:100% plus 16px side margins overflows by 32px on screens
   up to 1366px wide, which shows a horizontal scrollbar on Featured collections and home */
@media (max-width: 1366px) {
    #HomePanelContainer,
    .FeaturedSimpleLinks {
        width: auto;
    }
}