/* Site header: emblem + ministry name, search, co-brand logo, and three tools
   (skip to main content, translate, accessibility).

   Small screens (under 992px), stacked in this order:
     1. tools (3 icons, right aligned)
     2. emblem + website title
     3. co-brand logo
     4. search field
   Desktop (992px+): everything on one row.
   Colours come from the dbim-theme tokens. */

.site-header {
    --hdr-gov-size: 2rem;
    --hdr-name-size: 1.75rem;
    --hdr-emblem-height: 6rem;
    --hdr-cobrand-height: 6rem;
    --hdr-icon-size: 2.5rem;
    --hdr-tool-margin: 0.25rem;

    background: var(--white);
    color: var(--black);
    font-family: "Noto Sans", sans-serif;
    border-bottom: 1px solid var(--bright-gray);
}

header.site-header {
    position: static;
}

/* Small screens: one column, stacked rows */
.site-header .hdr-inner {
    width: calc(100% - 2rem);
    max-width: 1590px;
    margin-inline: auto;
    padding-block: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "tools"
        "brand"
        "cobrand"
        "search";
    align-items: center;
    gap: 0.75rem;
}

.site-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Emblem + names */
.site-header .hdr-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--black);
    text-decoration: none;
}

.site-header .hdr-brand img {
    display: block;
    height: var(--hdr-emblem-height);
    width: auto;
    /* keeps proportion */
    flex: none;
    padding-right: 0.5rem;
}

.site-header .hdr-gov {
    margin: 0 0 0.125rem;
    font-size: var(--hdr-gov-size);
    line-height: 1.3;
}

.site-header .hdr-name {
    margin: 0;
    font-size: var(--hdr-name-size);
    font-weight: 700;
    line-height: 1.2;
}

.site-header .hdr-brand:focus-visible {
    outline: 2px solid var(--key);
    outline-offset: 4px;
}

/* Search: full width on small screens */
.site-header .hdr-search {
    grid-area: search;
    display: flex;
    background: var(--white);
    border: 1px solid var(--bright-gray);
    border-bottom: 3px solid var(--key);
    border-radius: 0.25rem 0.25rem 0 0;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    padding-right: 1.5rem;
    padding-left: 0.5rem;
    padding-top: 0.35rem;
}

.site-header .hdr-search input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: transparent;
    color: var(--black);
    border: 0;
    font: inherit;
    font-size: 1rem;
}

.site-header .hdr-search input::placeholder {
    color: var(--rhythm);
    opacity: 1;
}

.site-header .hdr-search input:focus-visible {
    outline: 2px solid var(--key);
    outline-offset: -2px;
}

.site-header .hdr-search button {
    flex: none;
    width: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.site-header .hdr-search button:hover {
    background: var(--azureish-white-bg);
}

.site-header .hdr-search button:focus-visible {
    outline: 2px solid var(--key);
    outline-offset: -2px;
}

/* Single-colour icons, recoloured with the key colour */
.site-header .ico {
    display: block;
    width: var(--hdr-icon-size);
    height: var(--hdr-icon-size);
    margin: auto;
    background-color: var(--key);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-header .ico-search {
    -webkit-mask-image: url("../../assets/images/icons/search.svg");
    mask-image: url("../../assets/images/icons/search.svg");
}

.site-header .ico-skip {
    -webkit-mask-image: url("../../assets/images/icons/skip_to_content.svg");
    mask-image: url("../../assets/images/icons/skip_to_content.svg");
}

.site-header .ico-trans {
    -webkit-mask-image: url("../../assets/images/icons/language.svg");
    mask-image: url("../../assets/images/icons/language.svg");
}

.site-header .ico-access {
    -webkit-mask-image: url("../../assets/images/icons/accessibility.svg");
    mask-image: url("../../assets/images/icons/accessibility.svg");
}

/* Co-brand logo: visible on all screens, centred when stacked */
.site-header .hdr-cobrand {
    grid-area: cobrand;
    display: block;
    justify-self: center;
}

.site-header .hdr-cobrand img {
    display: block;
    height: var(--hdr-cobrand-height);
    width: auto;
}

.site-header .hdr-cobrand:focus-visible {
    outline: 2px solid var(--key);
    outline-offset: 4px;
}

/* Tools: skip to content, translate, accessibility, with thin dividers.
   On small screens they sit on the top row, aligned right. */
.site-header .hdr-tools {
    grid-area: tools;
    justify-self: end;
    display: flex;
    align-items: center;
}

.site-header .hdr-tools li {
    display: flex;
    align-items: center;
}

.site-header .hdr-tools li+li::before {
    content: "";
    width: 1px;
    /* height: 2rem; */
    height: var(--hdr-icon-size);
    background: var(--key);
}

.site-header .hdr-tool {
    display: grid;
    place-items: center;
    width: calc(var(--hdr-icon-size) + 0.75rem);
    height: calc(var(--hdr-icon-size) + 0.75rem);
    /* height: auto; */
    /* width: 2.75rem;
    /* easy to tap */
    /* height: 2.75rem; */
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    margin: var(--hdr-tool-margin);
}

.site-header .hdr-tool:hover {
    background: var(--azureish-white-bg);
}

.site-header .hdr-tool:focus-visible {
    outline: 2px solid var(--key);
    outline-offset: -2px;
}

/* Tablet: larger text and images, still stacked */
@media (min-width: 768px) {
    .site-header {
        --hdr-gov-size: 2.25rem;
        --hdr-name-size: 2.5rem;
        --hdr-emblem-height: 7rem;
        --hdr-cobrand-height: 7rem;
        --hdr-icon-size: 2.75rem;
        --hdr-tool-margin: 1rem;
    }
}

/* Desktop: one row.
   To keep the stacked layout for longer, change 992px to 1200px. */
@media (min-width: 992px) {
    .site-header {
        --hdr-gov-size: 2.5rem;
        --hdr-name-size: 2.75rem;
        --hdr-emblem-height: 8rem;
        --hdr-cobrand-height: 8rem;
        --hdr-icon-size: 4rem;
        --hdr-tool-margin: 2rem;
    }

    .site-header .hdr-inner {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
        grid-template-areas: "brand search cobrand . tools";
        column-gap: 3.5rem;
    }

    .site-header .hdr-brand img {
        padding-right: 1.3rem;
    }

    .site-header .hdr-search {
        justify-self: end;
        max-width: 22rem;
    }
}

@media (min-width: 1200px) {
    .site-header .hdr-inner {
        width: 88%;
    }
}