/*
 * Giappichelli theme for the SimpleSAMLphp pages (discovery, error, signed out).
 * Tokens: bd-shared tokens.css values, plus SSP-only sizes. Self-hosted, no web fonts:
 * the font stacks fall back to system fonts, as in the approved mockups.
 * The SSP Content-Security-Policy forbids inline styles: every rule lives here.
 */

/* --- Tokens ---------------------------------------------------------------- */

:root {
    --bd-blue:          #001E60;
    --bd-blue-dark:     #00153F;
    --bd-blue-light:    #9BAEE4;
    --bd-blue-tint:     #EAF1FC;
    --bd-blue-wash:     #F3F5FB;
    --bd-white:         #FFFFFF;
    --bd-surface:       #FAFAFD;
    --bd-border:        #DDE2F1;
    --bd-border-strong: #7B8EC9;
    --bd-text:          #022A61;
    --bd-text-heading:  #001E60;
    --bd-text-slate:    #1E3351;
    --bd-text-subtle:   #5F6B94;
    --bd-text-muted:    #5A6989;
    --bd-text-invert:   #FFFFFF;
    --bd-success-ink:   #007E3F;
    --bd-success-soft:  #E9F6EE;
    --bd-danger:        #B3261E;
    --bd-danger-soft:   #FBEAE8;

    --bd-font-serif: "Tiempos Headline", Georgia, "Times New Roman", serif;
    --bd-font-sans:  Karla, Helvetica, Arial, sans-serif;
    --bd-font-mono:  Consolas, "Courier New", monospace;
    --bd-lh:         1.5;
    --bd-fs-lg: 17px;
    --bd-fs-h3: 18px;
    --bd-fs-md: 15px;
    --bd-fs-sm: 13px;
    --bd-fs-xs: 11px;
    --bd-fw-heading:       700;
    --bd-fw-heading-serif: 500;
    --bd-fw-medium:        600;

    --bd-radius:        4px;
    --bd-radius-circle: 50%;
    --bd-btn-radius:    3px;
    --bd-btn-h:         44px;
    --bd-space-xs:  4px;
    --bd-space-sm:  8px;
    --bd-space:    12px;
    --bd-space-md: 16px;
    --bd-space-lg: 24px;
    --bd-space-xl: 40px;

    --gp-frame:   1280px;
    --gp-navy:    #001D57;

    --sso-gutter:     16px;
    --sso-header-h:   80px;
    --sso-logo-h:     40px;
    --sso-fs-title:   34px;
    --sso-lh-title:   1.2;
    --sso-icon:       24px;
    --sso-icon-lg:    40px;
    --sso-check:      20px;
    --sso-list-max-h: 384px;
    --sso-accent-w:   4px;
    --sso-step:       28px;
    --sso-card-pad:   40px;
}

@media (max-width: 767px) {
    :root {
        --bd-fs-h3:       16px;
        --sso-header-h:   64px;
        --sso-logo-h:     30px;
        --sso-fs-title:   26px;
        --sso-list-max-h: 320px;
        --sso-card-pad:   16px;
    }
}

/* --- Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.sso-page {
    margin: 0;
    background: var(--bd-white);
    color: var(--bd-text);
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-md);
    line-height: var(--bd-lh);
}

.sso-page img {
    max-width: 100%;
}

/* One frame for header, footer and every band. */
.frame {
    width: min(var(--gp-frame), 100% - 2 * var(--sso-gutter));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: var(--sso-gutter);
    top: -100px;
    z-index: 10;
    padding: var(--bd-space-sm) var(--bd-space-md);
    background: var(--bd-white);
    color: var(--bd-blue);
    font-weight: var(--bd-fw-heading);
}

.skip-link:focus {
    top: var(--bd-space-sm);
    outline: 2px solid var(--bd-blue);
    outline-offset: 2px;
}

.bd-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[hidden] {
    display: none !important;
}

/* --- Page shell: the band fills the viewport, the footer sits at the bottom - */

.sso-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sso-main {
    flex: 1 0 auto;
    background: var(--bd-blue-wash);
}

/* --- Header ---------------------------------------------------------------- */

.sso-header {
    background: var(--bd-white);
    border-bottom: 1px solid var(--bd-border);
}

.sso-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-md);
    min-height: var(--sso-header-h);
}

.sso-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-md);
    min-height: 44px;
    color: var(--bd-text-heading);
    text-decoration: none;
}

.sso-header__logo {
    display: block;
    width: auto;
    height: var(--sso-logo-h);
}

.sso-header__product {
    padding-left: var(--bd-space-md);
    border-left: 1px solid var(--bd-border-strong);
    font-family: var(--bd-font-serif);
    font-size: var(--bd-fs-h3);
    font-weight: var(--bd-fw-heading-serif);
    line-height: 1.2;
}

.sso-header__brand:hover .sso-header__product {
    text-decoration: underline;
}

.sso-header__brand:focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: 4px;
}

.sso-header__context {
    margin: 0;
    color: var(--bd-text-subtle);
    font-size: var(--bd-fs-sm);
    font-weight: var(--bd-fw-medium);
}

@media (max-width: 599px) {
    .sso-header__context {
        display: none;
    }

    .sso-header__brand {
        gap: var(--bd-space);
    }

    .sso-header__product {
        padding-left: var(--bd-space);
        font-size: var(--bd-fs-md);
    }
}

/* --- Footer legal line ----------------------------------------------------- */

.site-footer {
    background: var(--bd-blue);
    color: var(--bd-text-invert);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-sm) var(--bd-space-lg);
    margin: 0;
    padding-block: var(--bd-space-md);
    font-size: var(--bd-fs-sm);
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bd-text-invert);
    text-decoration: underline;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--bd-white);
    outline-offset: 2px;
}

.sso-footer__copy {
    margin: 0;
}

.sso-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--bd-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Band and the two-column layout: card + aside fill the frame together - */

.sso-band {
    padding-block: var(--bd-space-xl);
}

.sso-layout {
    display: grid;
    gap: var(--bd-space-lg);
    align-items: start;
}

@media (min-width: 960px) {
    .sso-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--bd-space-xl);
    }
}

.sso-card {
    padding: var(--sso-card-pad);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    background: var(--bd-white);
}

/* Stock SSP pages (admin, tests) rendered inside the theme chrome. */
.sso-legacy {
    overflow-x: auto;
}

.sso-kicker {
    margin: 0 0 var(--bd-space-sm);
    color: var(--bd-text-subtle);
    font-size: var(--bd-fs-xs);
    font-weight: var(--bd-fw-heading);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sso-title {
    margin: 0 0 var(--bd-space);
    font-family: var(--bd-font-serif);
    font-size: var(--sso-fs-title);
    font-weight: var(--bd-fw-heading);
    line-height: var(--sso-lh-title);
    color: var(--gp-navy);
}

.sso-lead {
    margin: 0 0 var(--bd-space-lg);
    color: var(--bd-text-slate);
    font-size: var(--bd-fs-lg);
}

.sso-text {
    margin: 0 0 var(--bd-space-md);
    color: var(--bd-text-slate);
}

.sso-card a:not(.gp-btn) {
    color: var(--bd-blue);
    font-weight: var(--bd-fw-medium);
}

.sso-card a:not(.gp-btn):hover {
    color: var(--bd-blue-dark);
    text-decoration-thickness: 2px;
}

.sso-card a:not(.gp-btn):focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: 2px;
}

/* --- Aside: the navy panel of the platform's home tiles -------------------- */

.sso-aside {
    padding: var(--sso-card-pad);
    border-radius: var(--bd-radius);
    background: var(--bd-blue);
    color: var(--bd-text-invert);
}

.sso-aside h2 {
    margin: 0 0 var(--bd-space-md);
    font-family: var(--bd-font-serif);
    font-size: var(--bd-fs-h3);
    font-weight: var(--bd-fw-heading);
    line-height: 1.3;
}

.sso-aside h2:not(:first-child) {
    margin-top: var(--bd-space-lg);
    padding-top: var(--bd-space-lg);
    border-top: 1px solid var(--bd-blue-light);
}

.sso-aside p {
    margin: 0 0 var(--bd-space-md);
}

.sso-aside p:last-child {
    margin-bottom: 0;
}

.sso-aside a {
    color: var(--bd-text-invert);
    font-weight: var(--bd-fw-medium);
    text-decoration: underline;
}

.sso-aside a:hover {
    text-decoration-thickness: 2px;
}

.sso-aside a:focus-visible {
    outline: 2px solid var(--bd-white);
    outline-offset: 2px;
}

.sso-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sso-step;
}

.sso-steps li {
    position: relative;
    min-height: var(--sso-step);
    padding-left: calc(var(--sso-step) + var(--bd-space));
    counter-increment: sso-step;
}

.sso-steps li + li {
    margin-top: var(--bd-space-md);
}

.sso-steps li::before {
    content: counter(sso-step);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sso-step);
    height: var(--sso-step);
    border-radius: var(--bd-radius-circle);
    background: var(--bd-white);
    color: var(--bd-blue);
    font-size: var(--bd-fs-sm);
    font-weight: var(--bd-fw-heading);
}

/* --- Buttons --------------------------------------------------------------- */

.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bd-btn-h);
    padding: 0 var(--bd-space-lg);
    border: 1px solid transparent;
    border-radius: var(--bd-btn-radius);
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-md);
    font-weight: var(--bd-fw-heading);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gp-btn:focus-visible {
    outline: 2px solid var(--gp-navy);
    outline-offset: 2px;
}

.gp-btn--ghost {
    border-color: var(--bd-blue);
    background-color: var(--bd-white);
    color: var(--bd-blue);
    font-weight: var(--bd-fw-medium);
}

.gp-btn--ghost:hover,
.gp-btn--ghost:focus-visible,
.gp-btn--ghost:active {
    background-color: var(--bd-blue);
    color: var(--bd-text-invert);
}

.sso-btn--primary {
    border-color: var(--bd-blue);
    background-color: var(--bd-blue);
    color: var(--bd-text-invert);
}

.sso-btn--primary:hover,
.sso-btn--primary:active {
    border-color: var(--bd-blue-dark);
    background-color: var(--bd-blue-dark);
}

.sso-btn--primary:focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: 2px;
}

.sso-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bd-space);
    margin-top: var(--bd-space-lg);
}

@media (max-width: 599px) {
    .sso-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Form controls --------------------------------------------------------- */

.sso-field {
    margin-bottom: var(--bd-space-md);
}

.sso-label {
    display: block;
    margin-bottom: var(--bd-space-xs);
    color: var(--bd-text-heading);
    font-weight: var(--bd-fw-heading);
}

.sso-hint {
    margin: 0 0 var(--bd-space-sm);
    color: var(--bd-text-subtle);
    font-size: var(--bd-fs-sm);
}

.sso-search {
    position: relative;
}

.sso-search svg {
    position: absolute;
    left: var(--bd-space);
    top: 50%;
    width: var(--sso-check);
    height: var(--sso-check);
    transform: translateY(-50%);
    color: var(--bd-text-subtle);
    pointer-events: none;
}

.sso-input {
    width: 100%;
    min-height: var(--bd-btn-h);
    padding: 0 var(--bd-space) 0 calc(var(--sso-check) + 2 * var(--bd-space));
    border: 1px solid var(--bd-border-strong);
    border-radius: var(--bd-radius);
    background: var(--bd-white);
    color: var(--bd-text);
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-md);
}

.sso-input::placeholder {
    color: var(--bd-text-muted);
}

.sso-input:hover {
    border-color: var(--bd-blue);
}

.sso-input:focus-visible {
    border-color: var(--bd-blue);
    outline: 2px solid var(--bd-blue);
    outline-offset: 2px;
}

/* --- Institution list ------------------------------------------------------ */

.sso-idp-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sso-idp-count {
    margin: 0 0 var(--bd-space-sm);
    color: var(--bd-text-subtle);
    font-size: var(--bd-fs-sm);
}

.sso-idp-list {
    max-height: var(--sso-list-max-h);
    margin: 0;
    padding: var(--bd-space-xs);
    overflow-y: auto;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    background: var(--bd-white);
    list-style: none;
}

.sso-idp-group.is-invalid .sso-idp-list {
    border-color: var(--bd-danger);
    box-shadow: inset 0 0 0 1px var(--bd-danger);
}

.sso-idp-list li + li {
    margin-top: 2px;
}

.sso-idp {
    display: flex;
    align-items: center;
    gap: var(--bd-space);
    min-height: 48px;
    padding: var(--bd-space-sm) var(--bd-space);
    border-left: var(--sso-accent-w) solid transparent;
    border-radius: var(--bd-radius);
    color: var(--bd-text);
    cursor: pointer;
}

.sso-idp:hover {
    background: var(--bd-blue-tint);
}

.sso-idp input {
    flex: 0 0 auto;
    width: var(--sso-check);
    height: var(--sso-check);
    margin: 0;
    accent-color: var(--bd-blue);
}

.sso-idp input:focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: 2px;
}

.sso-idp:has(input:checked) {
    border-left-color: var(--bd-blue);
    background: var(--bd-blue-tint);
    color: var(--bd-text-heading);
    font-weight: var(--bd-fw-heading);
}

.sso-idp:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--bd-blue);
}

.sso-idp__name {
    flex: 1 1 auto;
    min-width: 0;
}

.sso-idp__hint {
    flex: 0 0 auto;
    color: var(--bd-text-subtle);
    font-size: var(--bd-fs-sm);
    font-weight: var(--bd-fw-medium);
}

.sso-idp-empty {
    margin: 0;
    padding: var(--bd-space-md);
    color: var(--bd-text-slate);
}

.sso-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--bd-space-sm);
    margin: var(--bd-space-sm) 0 0;
    color: var(--bd-danger);
    font-weight: var(--bd-fw-medium);
}

.sso-field-error svg {
    flex: 0 0 auto;
    width: var(--sso-check);
    height: var(--sso-check);
}

.sso-status {
    margin: var(--bd-space-md) 0 0;
    color: var(--bd-success-ink);
    font-weight: var(--bd-fw-medium);
}

.sso-status:empty {
    display: none;
}

/* --- Alerts and result icons ----------------------------------------------- */

.sso-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--bd-space);
    margin: 0 0 var(--bd-space-lg);
    padding: var(--bd-space-md);
    border-left: var(--sso-accent-w) solid var(--bd-danger);
    border-radius: var(--bd-radius);
    background: var(--bd-danger-soft);
    color: var(--bd-text-slate);
}

.sso-alert svg {
    flex: 0 0 auto;
    width: var(--sso-icon);
    height: var(--sso-icon);
    color: var(--bd-danger);
}

.sso-alert p {
    margin: 0;
}

.sso-alert strong {
    display: block;
    color: var(--bd-danger);
}

.sso-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sso-icon-lg);
    height: var(--sso-icon-lg);
    margin-bottom: var(--bd-space-md);
    border-radius: var(--bd-radius-circle);
    background: var(--bd-success-soft);
    color: var(--bd-success-ink);
}

.sso-result-icon svg {
    width: var(--sso-icon);
    height: var(--sso-icon);
}

/* --- Technical details (collapsed) ----------------------------------------- */

.sso-details {
    margin-top: var(--bd-space-lg);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    background: var(--bd-surface);
}

.sso-details summary {
    display: flex;
    align-items: center;
    gap: var(--bd-space-sm);
    min-height: 48px;
    padding: 0 var(--bd-space-md);
    color: var(--bd-blue);
    font-weight: var(--bd-fw-heading);
    cursor: pointer;
    list-style: none;
}

.sso-details summary::-webkit-details-marker {
    display: none;
}

.sso-details summary::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.sso-details[open] summary::before {
    transform: rotate(45deg);
}

.sso-details summary:hover {
    background: var(--bd-blue-tint);
}

.sso-details summary:focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: -2px;
}

.sso-details__body {
    padding: 0 var(--bd-space-md) var(--bd-space-md);
}

.sso-details__body p {
    margin: 0 0 var(--bd-space);
    color: var(--bd-text-slate);
    font-size: var(--bd-fs-sm);
}

.sso-dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--bd-space-xs) var(--bd-space-md);
    margin: 0;
    font-size: var(--bd-fs-sm);
}

.sso-dl dt {
    color: var(--bd-text-subtle);
}

.sso-dl dd {
    margin: 0;
    color: var(--bd-text);
    font-family: var(--bd-font-mono);
    overflow-wrap: anywhere;
}

@media (max-width: 599px) {
    .sso-dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .sso-dl dd + dt {
        margin-top: var(--bd-space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-btn,
    .sso-details summary::before {
        transition: none;
    }
}