/*
 * SPS shared header/footer chrome.
 * Ported from the sps2 WordPress estate (nhs-theme/src/theme-styles.css,
 * nhs-theme/assets/css/sps-nav.css, sps2-plugin header logo CSS and the
 * sps2-cookies footer pill) so every SPS app presents the same header
 * and footer. Loaded after /css/nhsuk.css; some rules deliberately
 * override that older nhsuk-frontend build (float-based header, grey
 * footer) to match the current sps.nhs.uk chrome.
 */

/* sps2 widens the NHS width container beyond the 960px default */
@media (min-width: 1080px) {
    .nhsuk-width-container {
        max-width: 1120px;
    }
}

/* ============================= Header ============================= */

.nhsuk-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 16px 0;
}
.nhsuk-header__container:after {
    content: none;
}
@media (max-width: 40.0525em) {
    .nhsuk-header__container {
        margin: 0;
        padding: 16px;
    }
}

.nhsuk-header__service {
    display: flex;
    margin-right: auto;
    /* let the lockup shrink instead of overflowing on narrow screens
       (nhsuk-frontend v10 responsive model) */
    min-width: 0;
}

.nhsuk-header__service-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 0;
}
.nhsuk-header__service-logo:focus {
    outline: 4px solid #ffeb3b;
    outline-offset: 4px;
    background-color: transparent;
}

.nhsuk-header__service .nhsuk-header__logo {
    float: none;
    max-width: none;
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* Tool title, shown after the SPS wordmark per the NHS design system's
   service-name pattern; separated by the same divider as the wordmark.
   max-width:none clears the 220px clamp in the older bundled nhsuk.css. */
.nhsuk-header__service .nhsuk-header__service-name {
    display: block;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.1875rem;
    line-height: 1.2;
    font-weight: 400;
    /* nhsuk v10: cap the measure and balance the wrapped lines; the
       bare max-width also clears the 220px clamp in the older bundled
       nhsuk.css */
    max-width: 54ch;
    text-wrap: balance;
}

.sps-header__logo-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.sps-header__logo {
    height: 30px;
    width: auto;
    display: block;
}
.sps-header__logo path {
    fill: #fff;
}

@media (max-width: 640px) {
    .nhsuk-header__service .nhsuk-header__logo {
        height: 32px;
        min-width: 80px;
        width: 80px;
    }
    .sps-header__logo {
        height: 24px;
    }
    .sps-header__logo-wrap {
        margin-left: 8px;
        padding-left: 12px;
    }
    .nhsuk-header__service .nhsuk-header__service-name {
        margin-left: 12px;
        padding-left: 12px;
        font-size: 1rem;
    }
}

/* Utility links (About SPS / Log in). sps2 hides these below 768px and
   moves them into the nav drawer; this app has no drawer for guests, so
   they stay visible and wrap instead. */
.nhs-header__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    padding-right: 1.5rem;
}
/* direct children only — descendant `a` would also hit the links
   inside the Profile dropdown card and paint them white-on-white */
.nhs-header__utility > a,
.nhs-header__utility-link {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.nhs-header__utility > a:hover,
.nhs-header__utility-link:hover {
    text-decoration: underline;
}
/* :focus on plain links, :focus-visible on the dropdown toggles (buttons
   keep :focus after a mouse click and would stay stuck yellow) */
.nhs-header__utility > a:focus,
a.nhs-header__utility-link:focus {
    background-color: #ffeb3b;
    box-shadow: 0 0 0 4px #ffeb3b, 0 4px 0 4px #212b32;
    color: #212b32;
    outline: 4px solid transparent;
}
@media (max-width: 640px) {
    .nhs-header__utility {
        padding-right: 0;
        gap: 0.75rem;
    }
}

/* Signed-in utility dropdowns — Profile and My apps share these classes,
   mirroring sps2's sps-nav.css (self-contained: the .nhsuk-button base the
   sps2 menu items lean on is inlined into .nhs-header__account-button). */
.nhs-header__account {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nhs-header__account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}
.nhs-header__account-toggle:hover {
    text-decoration: underline;
}
/* :focus-visible so a mouse click doesn't leave the toggle stuck yellow;
   keyboard users still get the full NHS focus state */
.nhs-header__account-toggle:focus-visible {
    background-color: #ffeb3b;
    box-shadow: 0 0 0 4px #ffeb3b, 0 4px 0 4px #212b32;
    color: #212b32;
    outline: 4px solid transparent;
}
.nhs-header__account-icon {
    fill: currentColor;
}
.nhs-header__account-chevron {
    fill: currentColor;
    transition: transform 0.15s ease;
}
.nhs-header__account-toggle[aria-expanded="true"] .nhs-header__account-chevron {
    transform: rotate(180deg);
}
.nhs-header__account-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 260px;
    /* Never wider than the viewport on narrow phones. */
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #d8dde0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 300;
    padding: 4px 0;
    color: #212b32;
    text-align: left;
}
.nhs-header__account-menu[hidden] {
    display: none;
}
.nhs-header__account-identity {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #4c6272;
    border-bottom: 1px solid #d8dde0;
}
.nhs-header__account-identity strong {
    color: #212b32;
    font-weight: 600;
    word-break: break-all;
}
/* Menu items rendered as compact grey secondary NHS buttons */
.nhs-header__account-button {
    display: block;
    position: relative;
    top: 0;
    margin: 8px 16px 0;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: #f0f4f5;
    box-shadow: 0 4px #929fa5;
    color: #212b32;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.nhs-header__account-button:visited {
    color: #212b32;
}
.nhs-header__account-button:hover {
    background-color: #dbe0e1;
    color: #212b32;
    text-decoration: none;
}
.nhs-header__account-button:active {
    top: 4px;
    background-color: #dbe0e1;
    box-shadow: none;
}
.nhs-header__account-button:focus-visible {
    background-color: #ffeb3b;
    box-shadow: 0 4px #212b32;
    color: #212b32;
    outline: 4px solid transparent;
    text-decoration: none;
}
.nhs-header__account-button:last-child {
    margin-bottom: 8px;
}
.nhs-header__account-button[aria-disabled="true"] {
    cursor: default;
}

/* ============================= Footer ============================= */

.nhs-theme-footer {
    border-top: 3px solid #008232;
    background: #f0f4f5;
    padding: 32px 0;
}

.nhs-theme-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
}
.nhs-theme-footer__row + .nhs-theme-footer__row {
    margin-top: 32px;
    font-size: 14px;
    align-items: baseline;
}

.nhs-theme-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nhs-theme-footer__brand img {
    max-width: 140px;
    height: auto;
    width: auto;
}
.nhs-theme-footer__brand svg {
    float: none;
    min-width: 0;
    max-width: none;
    height: 24px;
    width: auto;
}
.nhs-theme-footer__divider {
    align-self: stretch;
    width: 1px;
    background: #6a716f80;
}

.nhs-theme-footer__copyright {
    margin: 0;
    font-size: 14px;
    color: #212b32;
}

.nhs-theme-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__social li {
    display: flex;
    align-items: center;
    margin: 0;
}
.nhs-theme-footer__social a {
    display: flex;
    align-items: center;
    line-height: 0;
}
.nhs-theme-footer__social svg {
    display: block;
    width: 50px;
    height: 50px;
}

.nhs-theme-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__links li {
    margin: 0;
}
.nhs-theme-footer__links a {
    white-space: nowrap;
}
.nhs-theme-footer .nhsuk-footer__list {
    /* the older nhsuk.css floats this at 75% width on desktop */
    float: none;
    width: auto;
    padding-bottom: 0;
}
.nhs-theme-footer .nhsuk-footer__list-item-link {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:visited {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:hover {
    color: #212b32;
}
.nhs-theme-footer__row + .nhs-theme-footer__row .nhs-theme-footer__links a {
    font-size: 14px;
}

@media (max-width: 767px) {
    .nhs-theme-footer__row {
        justify-content: flex-start;
    }
    .nhs-theme-footer__row:first-child {
        justify-content: space-between;
    }
}
@media (max-width: 640px) {
    .nhs-theme-footer__brand {
        flex-wrap: wrap;
        gap: 12px;
    }
    .nhs-theme-footer__brand img {
        max-width: 120px;
    }
    .nhs-theme-footer__brand svg {
        height: 20px;
    }
}
@media (max-width: 500px) {
    .nhs-theme-footer__row:first-child {
        display: block;
    }
    .nhs-theme-footer__brand {
        margin-bottom: 32px;
    }
}

/* Cookies link, dressed as a small outlined button with a sliders icon
   so it reads as an action rather than another document (from
   sps2-cookies/assets/css/cookies.css) */
#sps2-cookie-footer-link {
    background-color: transparent;
    border: 1px solid #005eb8;
    border-radius: 24px;
    color: #005eb8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.5;
    padding: 6px 18px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#sps2-cookie-footer-link::before {
    background-color: currentColor;
    content: '';
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
#sps2-cookie-footer-link:visited {
    color: #005eb8;
}
#sps2-cookie-footer-link:hover {
    background-color: #005eb8;
    color: #fff;
    text-decoration: none;
}
#sps2-cookie-footer-link:focus,
#sps2-cookie-footer-link:focus-visible {
    background-color: #ffeb3b;
    border-color: transparent;
    box-shadow: 0 4px 0 #212b32;
    color: #212b32;
    outline: 4px solid transparent;
    text-decoration: none;
}

/* ======================= Full-width chrome ======================== */

/* The header and footer span the full viewport width with a left-aligned
   lockup (estate standard, first shipped on ndo-laravel); only the page
   content keeps the centered width container. The header's inner
   nav band inherits the same edge padding. */
.nhsuk-header .nhsuk-width-container,
.nhs-theme-footer .nhsuk-width-container {
    max-width: none;
    margin: 0;
}
.nhsuk-header__container {
    padding: 16px;
}
.nhs-theme-footer .nhsuk-width-container {
    padding: 0 16px;
}
@media (min-width: 48.0625em) {
    .nhsuk-header__container {
        padding: 16px 24px;
    }
    .nhs-theme-footer .nhsuk-width-container {
        padding: 0 24px;
    }
}