/* SPH primary palette. We host this service ourselves (not on DfE Azure),
   so the visual identity is intentionally distinct from the DfE / GOV.UK
   navy — bright magenta primary + a darker shade for hover / interaction
   states. GOV.UK Frontend ships its components in the standard GDS palette;
   the overrides below recolour the surfaces that signal "I am a gov service"
   (header bg, link colour, section dividers, primary CTAs) while leaving
   the rest of the GDS component palette untouched. */
:root {
    --sph-primary: #B000F9;
    --sph-primary-dark: #8000C0;
}

/* DfE Design System mandates Inter for any education.gov.uk service. Override
   GOV.UK Frontend's GDS Transport default at the root so every component picks
   it up — broad selector list because GOV.UK Frontend resets the font-family
   on most of its component classes individually. */
html, body, .govuk-template, .govuk-body, .govuk-body-l, .govuk-body-s,
.govuk-heading-xl, .govuk-heading-l, .govuk-heading-m, .govuk-heading-s,
.govuk-label, .govuk-hint, .govuk-input, .govuk-select, .govuk-textarea,
.govuk-button, .govuk-link, .govuk-table, .govuk-header, .govuk-footer,
.govuk-service-navigation, .govuk-tag, .govuk-notification-banner,
.govuk-error-message, .govuk-error-summary {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--sph-primary);
}

/* Override the GOV.UK Frontend default link colour (#1d70b8). govuk-frontend
   ships its own .govuk-link { color: #1d70b8 } rule; we win because app.css
   loads after govuk-frontend.min.css. Visited stays the same — only the
   resting + hover colours track our primary. Anchors inside the magenta
   header keep their inherited white via the explicit colour:#ffffff rules
   on .govuk-header__service-name + .govuk-header__navigation-item links. */
.govuk-link,
.govuk-link:link {
    color: var(--sph-primary);
}
.govuk-link:hover {
    color: var(--sph-primary-dark);
}
.govuk-link:focus {
    /* Preserve the GOV.UK yellow focus ring — accessibility-critical, not
       a brand element. */
    color: #0b0c0c;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* SPH header — bright magenta band with the service name promoted as the
   brand mark (no DfE Crown / Department logo; we're not GOV.UK). */
.govuk-header {
    background-color: var(--sph-primary);
    border-bottom: 0;
}

/* Single-row layout: service name (promoted as the brand) flush left,
   account nav flush right via margin-left:auto. */
.govuk-header__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    /* Swap GOV.UK's 10px padding + 10px yellow border-bottom for a single
       22px padding strip. The contrasting yellow underline reads as
       "GOV.UK service" and we want subtle distance from that. */
    padding-bottom: 22px;
    border-bottom: 0;
}
.govuk-header__service-name-wrapper {
    flex: 0 1 auto;
}
.govuk-header__service-name {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    /* Promoted from "GOV.UK service name" sub-text size up to a heading-style
       title since it's now carrying the brand. */
    font-size: 1.5rem;
    line-height: 1.2;
}
.govuk-header__service-name:hover {
    text-decoration: underline;
}
.govuk-header__navigation {
    margin-bottom: 0;
    margin-left: auto;
}

/* Drop the 30px (desktop) / 20px (mobile) bottom margin GOV.UK Frontend
   gives the service nav — pages render their h1 immediately below, and
   the heading already provides its own bottom spacing. */
.govuk-service-navigation {
    margin-bottom: 0;
}

/* Tighten per-item vertical padding so wrapped rows sit close together.
   GOV.UK Frontend defaults to 20px top + 20px bottom on each item, which
   produces a 40px gap between wrap rows. 8px each gives a 16px gap —
   still readable, far less wasteful when the nav has six+ items. */
.govuk-service-navigation__item {
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Active item: 3px padding + 5px underline-border = 8px total bottom,
   matching the inactive items so wrapped rows stay aligned. */
.govuk-service-navigation__item--active {
    padding-bottom: 3px;
}

/* Table rows containing buttons (Remove / Manage / Approve / Reject) were
   computing to ~91px tall because:
     (a) GOV.UK govuk-button has margin-bottom:22px by default — useful in a
         vertical form, wasted inside a table cell.
     (b) cell padding defaults to 10px top + 10px bottom.
     (c) buttons baseline-align with adjacent text rather than centring.
   Tighten all three so row height is driven by content + sensible padding. */
.govuk-table__cell .govuk-button {
    margin-bottom: 0;
}
.govuk-table__cell,
.govuk-table__header {
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: middle;
}
.govuk-header__navigation-list {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.govuk-header__navigation-item {
    border-bottom: 0;
    padding: 0;
    margin: 0;
}
.govuk-header__navigation-item .govuk-header__link {
    color: #ffffff;
}

/* DfE Lead's hub-context secondary band — sits below the admin nav whenever
   a DfE Lead is on a /hub/{eysphId}/* URL. Contains a hub-switcher dropdown
   and the hub-scoped nav items so the Lead can move between hubs / hub-tools
   without losing the admin nav above. */
.sph-hub-context-band {
    border-top: 4px solid var(--sph-primary);
    border-bottom: 1px solid #b1b4b6;
    padding: 0.5rem 0;
    background-color: #f3f2f1;
}
.sph-hub-context-band label {
    color: #505a5f;
    font-weight: normal;
}

/* Native <dialog> styling for the admin edit modals. GOV.UK Design System
   doesn't ship a modal component, so the styling here matches the existing
   inline edit panel: light grey border, white background, modest padding.
   max-width keeps long forms readable on wide screens; auto top margin keeps
   the dialog centred (browser default for <dialog>[open]).
   ::backdrop dims the page behind the modal — Esc-to-close is browser native. */
.sph-modal-dialog {
    border: 1px solid #b1b4b6;
    background-color: #ffffff;
    padding: 1.5rem;
    width: min(560px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
}
.sph-modal-dialog::backdrop {
    background-color: rgba(11, 12, 12, 0.5);
}
/* Floating-Close behaviour — when a dialog's content overflows its
   max-height and the inline Close button is scrolled out of view, the
   <p> wrapping that button sticks to the bottom of the dialog viewport
   so the user can always close without scrolling back. The negative
   bottom + negative side margins flush the sticky strip to the dialog's
   inner edges (cancelling the dialog's 1.5rem padding on three sides);
   the top border + white background hide the content that would
   otherwise show through. On short dialogs sticky behaviour doesn't
   activate so this looks identical to the prior inline button. */
.sph-modal-dialog > p:last-of-type {
    position: sticky;
    bottom: -1.5rem;
    background-color: #ffffff;
    padding: 1rem 1.5rem 1.5rem;
    margin: 1rem -1.5rem -1.5rem;
    border-top: 1px solid #b1b4b6;
}

/* Compact filter strip on /hub/{id}/matching — period selector, three include
   toggles and the refresh button on a single row. The GOV.UK form-group
   bottom margins are zeroed inside this container so the row stays tight. */
.app-match-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.app-match-filters > .govuk-form-group,
.app-match-filters .govuk-fieldset,
.app-match-filters .govuk-button {
    margin-bottom: 0 !important;
}
.app-match-includes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1rem;
}
.app-match-includes .govuk-checkboxes__item {
    margin-bottom: 0;
}

/* Allocations matching grid (/hub/{id}/matching). Setting rows × EYSPA columns,
   each cell showing per-skill ✓/✗ and an overall % match. Band colours pick up
   on the parent <td> so the radio + skills + tag share one tint. */
.app-match-grid-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.app-match-grid {
    table-layout: fixed;
}
.app-match-grid__setting-col {
    min-width: 200px;
}
.app-match-grid__eyspa-col {
    min-width: 180px;
}
.app-match-grid .govuk-table__cell {
    vertical-align: top;
}
/* Band tints — subtle background only, no border change. */
.app-match-grid .match-high   { background-color: #e8f5ec; }
.app-match-grid .match-medium { background-color: #fff7d6; }
.app-match-grid .match-low    { background-color: #fbecea; }

.app-match-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Visible native checkbox sitting at the top of each cell. We deliberately
   don't reuse the GOV.UK radio/checkbox component here — its absolute-positioned
   input + label-mask leaves nothing clickable inside a flex column without the
   full govuk-radios__item / govuk-checkboxes__item wrapper, and the matrix
   layout wants a compact tick at known coordinates. */
.app-match-checkbox {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.app-match-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

/* Adjacent GOV.UK buttons sit flush by default (the framework expects a
   govuk-button-group wrapper to space them). In tables we render bare buttons,
   so add space around them so they don't blend into each other, both
   horizontally when they sit side-by-side and vertically when they wrap or are
   explicitly stacked.

   - margin-top: 2px lifts each button off the 2px box-shadow drop of the
     button above it; without this the lower button visually overlaps the
     shadow even when margin-bottom is applied.
   - white-space: nowrap stops the button text wrapping inside the button when
     the containing cell is narrow (otherwise "Open hub view" wraps to 2-3
     lines instead of the button itself wrapping to a new line).
   - !important is intentional — GOV.UK Frontend ships a `.govuk-button[role="button"]`
     selector for anchor-styled buttons that has higher specificity than our
     class-only rule and was winning the cascade. */
.govuk-button {
    margin: 2px 8px 8px 0 !important;
    white-space: nowrap;
    vertical-align: top;
}
.govuk-button:last-child {
    margin-right: 0 !important;
}

/* Sortable column header button — looks like the surrounding <th> text but is
   a real <button> so keyboard / screen-reader users can sort. Dotted underline
   hints "this is interactive" without the heavy blue-button styling that the
   default .govuk-button rule would add. */
.app-sort-header {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.app-sort-header:hover,
.app-sort-header:focus {
    text-decoration-style: solid;
    outline: 3px solid transparent;
}
.app-sort-header:focus-visible {
    background-color: #fd0;
    outline: 3px solid #fd0;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}

/* Narrow numeric column — used for the per-period allocation buckets on
   /admin/eysphs so the table can fit five short counts without sprawling.
   Header text is short ("Prior", "Prev", "Current", "Next", "Unalloc.") with
   a full description in the title attribute. */
.app-narrow-col {
    width: 1%;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
}
/* Type-mismatch cells (EYSPA's cap for this setting type is zero) — desaturate
   so the user can see the skill match info but can't accidentally click. */
.app-match-grid .app-match-disabled {
    background-color: #f3f2f1 !important;
    opacity: 0.5;
}
.app-match-grid .app-match-disabled input[type="checkbox"] {
    cursor: not-allowed;
}
.app-match-skills {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}
.app-match-skills li {
    margin-bottom: 0.125rem;
}
.app-match-score {
    margin-top: auto;
}
.app-skill-yes {
    color: #00703c;
    font-weight: 700;
}
.app-skill-no {
    color: #d4351c;
    font-weight: 700;
}

/* Shared hub/setting profile sub-nav — magenta 4px top rule, mid-grey 1px
   bottom rule, lifted slightly to sit close under the page title. The
   1.8 line-height gives the wrapped link rows breathing room on narrow
   viewports without looking sparse when the links fit on one line. */
.sph-sub-nav {
    border-top: 4px solid var(--sph-primary);
    border-bottom: 1px solid #b1b4b6;
    padding: 0.5rem 0;
    margin-top: -0.5rem;
    line-height: 1.8;
}

/* Global override of GOV.UK Frontend's `-margin-bottom-6` utility — the
   responsive 20px (mobile) / 30px (desktop) gap was too much in every
   place it appeared (sub-navs, account menu, hub-sections nav), so kill
   it project-wide. `!important` needed because the utility itself ships
   with `!important`. Backslash escapes the literal `!` in the selector. */
.govuk-\!-margin-bottom-6 {
    margin-bottom: 0 !important;
}

/* Halve the GOV.UK main-wrapper top padding on desktop (40px → 20px).
   Mobile already sits at 20px so it stays as-is. Matched media query
   so the override beats govuk-frontend's class+breakpoint rule without
   needing !important. */
@media (min-width: 40.0625em) {
    .govuk-main-wrapper {
        padding-top: 20px;
    }
}

/* Heading rhythm overrides. GOV.UK Frontend's defaults (50px under h1,
   30px under h2) are heavier than we want on the compact SPH admin
   pages. Halve the h1, zero the h2's bottom margin, then re-introduce
   30px as a TOP margin so an h2 still breathes when content precedes it
   but sits flush when it follows the h1 directly. Element+class
   selectors out-specify govuk-frontend's class-only rules. */
h1.govuk-heading-xl,
h1.govuk-heading-l {
    margin-bottom: 25px;
}
h2.govuk-heading-xl,
h2.govuk-heading-l,
h2.govuk-heading-m,
h2.govuk-heading-s {
    margin-bottom: 0;
}
/* Base section-break rule — any h2 that has a preceding sibling gets a
   3px GOV.UK-blue rule above it (can't be confused with the 1px mid-grey
   borders used on data tables/form inputs; matches .sph-hub-context-band
   so the cue is consistent app-wide) plus 20px between the line and the
   heading text. */
* + h2.govuk-heading-xl,
* + h2.govuk-heading-l,
* + h2.govuk-heading-m,
* + h2.govuk-heading-s {
    padding-top: 20px;
    border-top: 3px solid var(--sph-primary);
}

/* 30px top gap on top of the base rule, BUT only when the preceding
   sibling isn't a sub-nav — sub-navs already carry their own blue
   bottom border, so the h2 line should sit flush against it rather
   than floating with a 30px gap above. */
:not(nav) + h2.govuk-heading-xl,
:not(nav) + h2.govuk-heading-l,
:not(nav) + h2.govuk-heading-m,
:not(nav) + h2.govuk-heading-s {
    margin-top: 30px;
}

/* Toast notification — ephemeral bottom-right success banner. Fixed
   positioning so it stays anchored to the viewport regardless of scroll;
   pointer-events:none so it never blocks clicks underneath. GOV.UK green
   (#00703c) matches the success notification-banner colour family. */
.app-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    padding: 12px 20px;
    background: #00703c;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.app-toast--show {
    opacity: 1;
    transform: translateY(0);
}

/* Button styled to look like a govuk-link. Used where we need link visuals
   but want a button's semantics — e.g. Contents jump-links on /help, where
   any real <a href="#..."> gets intercepted by Blazor's enhanced-nav click
   delegate and routed against <base href="/"> to /, not the current page. */
.app-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--sph-primary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1em;
}

.app-link-button:hover {
    color: var(--sph-primary-dark);
    text-decoration-thickness: max(3px, .1875rem, .12em);
}

.app-link-button:focus {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: #fd0;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
    text-decoration: none;
}

/* Floating "Back to top" button — fixed bottom-right. Hidden by default
   (opacity 0 + pointer-events none so it doesn't block clicks on whatever
   sits beneath it); back-to-top.js adds the --visible modifier when the
   user scrolls past the threshold. z-index below .app-toast (9999) so a
   toast notification always wins. */
.app-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--sph-primary);
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.app-back-to-top--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.app-back-to-top:hover {
    background: var(--sph-primary-dark);
}

.app-back-to-top:focus {
    outline: 3px solid #fd0;
    outline-offset: 0;
    color: #0b0c0c;
    background-color: #fd0;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}

/* Footer attribution block — "Made to support the Department for Education"
   stacks above the DfE wordmark logo (block layout, right-aligned).
   The link itself is `display: block` so the anchor fills the attribution
   meta-item; `text-decoration: none` kills the govuk-footer__link
   underline that otherwise renders as a stray vertical line beside the
   logo when the anchor is inline-flex (John's feedback). Hover still
   underlines the text via the dedicated rule below.
   `flex-shrink: 0` on the wrapping meta-item keeps the attribution at
   its natural width so it doesn't squeeze the inline support-links list
   and bump "Contact" onto a second line. Support-list items each get
   `white-space: nowrap` so individual link labels never break mid-word. */
.sph-footer-attribution {
    flex-shrink: 0;
}
.govuk-footer__inline-list-item {
    white-space: nowrap;
}
.sph-footer-attribution .sph-footer-dfe-link {
    display: block;
    text-decoration: none;
}
.sph-footer-attribution .sph-footer-dfe-link:hover .sph-footer-attribution__text {
    text-decoration: underline;
}
.sph-footer-attribution__text {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25;
    text-align: right;
    color: inherit;
    margin-bottom: 0.5rem;
}
.sph-footer-attribution__logo {
    display: block;
    height: 36px;
    width: auto;
    margin-left: auto; /* right-align the block to mirror the right-aligned text above */
    border: 0; /* defeat any browser default border on linked images */
}