/* itseqr-v3 — Aurora Grid login theme */

@font-face {
    font-family: "Arboria-Black";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Arboria-Black.woff2") format("woff2"),
         url("../fonts/Arboria-Black.woff") format("woff");
}
@font-face {
    font-family: "Arboria-Book";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Arboria-Book.woff2") format("woff2"),
         url("../fonts/Arboria-Book.woff") format("woff");
}
@font-face {
    font-family: "Arboria-Light";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Arboria-Light.woff2") format("woff2"),
         url("../fonts/Arboria-Light.woff") format("woff");
}
@font-face {
    font-family: "Armada-Bold";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Armada-Bold.woff2") format("woff2"),
         url("../fonts/Armada-Bold.woff") format("woff");
}

:root {
    --av-ink: #12181b;
    --av-ink-2: #1a2226;
    --av-blue: #228ebb;
    --av-blue-deep: #155f7d;
    --av-blue-bright: #3dabd9;
    --av-gold: #866d23;
    --av-gold-light: #b28f3b;
    --av-grey: #666968;
    --av-card: #ffffff;
    /* Hero panel colors, matched to platform.dev.itseqr.net's login screen */
    --av-hero-top: #0a141c;
    --av-hero-mid: #123a52;
    --av-hero-bottom: #12496b;
    --av-panel-bg: #eef1f3;
    --av-font-display: "Armada-Bold", "Arial Black", sans-serif;
    --av-font-heavy: "Arboria-Black", Arial, sans-serif;
    --av-font-body: "Arboria-Book", Helvetica, Arial, sans-serif;
    --av-font-light: "Arboria-Light", Helvetica, Arial, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--av-font-body);
    background: var(--av-ink);
}

* { box-sizing: border-box; }

/* ---------- shell ---------- */

.av-shell {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100vh;
}

.av-hero {
    position: relative;
    padding: clamp(56px, 8vh, 120px) clamp(52px, 9vw, 160px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    color: #eef4f6;
    background: linear-gradient(180deg, var(--av-hero-top) 0%, var(--av-hero-mid) 55%, var(--av-hero-bottom) 100%);
}

.av-mark { position: relative; z-index: 1; }

.av-logo {
    height: 50px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(34, 142, 187, .5));
}

.av-squares {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(300px, 34vw, 700px);
    max-width: 100%;
    height: auto;
    margin: 16px 0 0 0;
}

.av-headline { position: relative; z-index: 1; margin-top: auto; }

.av-headline h2 {
    font-family: var(--av-font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 14px;
}

.av-headline h2 em {
    font-style: normal;
    color: var(--av-blue-bright);
}

.av-headline p {
    font-family: var(--av-font-light);
    color: #aebcc0;
    font-size: 15px;
    line-height: 1.6;
    max-width: 40ch;
    margin: 0;
}

.av-tagline {
    position: relative;
    z-index: 1;
    font-family: var(--av-font-display);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--av-gold-light);
    text-transform: uppercase;
}

/* ---------- right panel ---------- */

.av-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 6vw, 100px);
    background: var(--av-panel-bg);
}

.av-lang {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    border: 1.5px solid #cfdadd;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    z-index: 2;
}

.av-lang button {
    border: none;
    background: transparent;
    font-family: var(--av-font-heavy);
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    color: var(--av-ink);
}

.av-lang button.active {
    background: var(--av-ink);
    color: #fff;
}

.av-lang button:focus-visible {
    outline: 2px solid var(--av-blue);
    outline-offset: -2px;
}

.login-pf-page {
    width: 100%;
    max-width: 380px;
}

/* ---------- card ---------- */

.card-pf {
    width: 100%;
    background: var(--av-card);
    color: var(--av-ink);
    border-radius: 16px;
    padding: 36px 32px 30px;
    box-shadow: 0 20px 40px -16px rgba(18, 24, 27, .25);
    text-align: center;
}

#kc-page-title {
    font-family: var(--av-font-display);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--av-ink);
    margin: 0 0 8px;
}

.av-identifier-hint {
    color: var(--av-grey);
    font-family: var(--av-font-body);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 24px;
}

#kc-locale {
    text-align: right;
    margin-bottom: 8px;
}

#kc-current-locale-link {
    font-family: var(--av-font-body);
    font-size: 12.5px;
    color: var(--av-grey);
    cursor: pointer;
    background: none;
    border: none;
}

#kc-username {
    font-family: var(--av-font-body);
    font-size: 13px;
    color: var(--av-grey);
    margin-bottom: 18px;
}

/* ---------- form ---------- */

.form-group { margin-bottom: 18px; text-align: left; }

.pf-c-form__label,
.pf-c-form__label-text {
    display: block;
    font-family: var(--av-font-heavy);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #495157;
    margin-bottom: 6px;
    text-align: center;
}

.pf-c-form-control {
    width: 100%;
    font-family: var(--av-font-body);
    font-size: 14.5px;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1.5px solid #dbe2e4;
    background: #fbfcfc;
    color: var(--av-ink);
    text-align: center;
}

.pf-c-form-control:focus-visible {
    outline: 2px solid var(--av-blue);
    outline-offset: 1px;
    border-color: var(--av-blue);
}

.pf-c-input-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.pf-c-input-group .pf-c-form-control { flex: 1; }

.pf-c-form-password-visibility-button,
button[data-password-toggle] {
    border: 1.5px solid #dbe2e4;
    border-radius: 8px;
    background: #fbfcfc;
    color: var(--av-grey);
    padding: 0 12px;
    cursor: pointer;
}

.pf-c-form__helper-text.pf-m-error,
#input-error,
#input-error-username {
    display: block;
    color: #b3261e;
    font-family: var(--av-font-body);
    font-size: 12px;
    margin-top: 6px;
    text-align: center;
}

#kc-form-options {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}

.checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--av-font-body);
    font-size: 12.5px;
    color: var(--av-grey);
    cursor: pointer;
}

#kc-form-buttons { margin-bottom: 4px; }

.pf-c-button {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: var(--av-font-heavy);
    font-size: 14.5px;
    letter-spacing: .01em;
    cursor: pointer;
    transition: filter .15s ease;
}

.pf-c-button.pf-m-primary {
    color: #fff;
    background: var(--av-blue);
}

.pf-c-button.pf-m-primary:hover { background: var(--av-blue-deep); }

.pf-c-button:focus-visible {
    outline: 2px solid var(--av-ink);
    outline-offset: 2px;
}

.pf-c-button.pf-m-control {
    width: auto;
    background: #fff;
    color: var(--av-ink);
    border: 1.5px solid #dbe2e4;
}

/* ---------- links ---------- */

a {
    color: var(--av-blue-deep);
    font-family: var(--av-font-body);
    text-decoration: none;
    font-weight: 600;
}

a:hover { text-decoration: underline; }

#kc-registration,
#kc-registration-container {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #edf1f2;
    font-family: var(--av-font-body);
    font-size: 12.5px;
    color: var(--av-grey);
    text-align: center;
}

#try-another-way { display: inline-block; margin-top: 8px; }

/* ---------- alerts ---------- */

.pf-c-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    text-align: left;
    font-family: var(--av-font-body);
    font-size: 13px;
}

.alert-error   { background: #fdecea; color: #7a1913; }
.alert-warning { background: #fdf3e3; color: #7a5a13; }
.alert-success { background: #e9f6ee; color: #14532d; }
.alert-info    { background: #eaf4f8; color: #14425c; }

.pf-c-alert__icon { flex: none; display: flex; align-items: center; }

/* ---------- social / home-idp provider list ---------- */

#kc-social-providers {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #edf1f2;
}

#kc-social-providers h4,
#kc-social-providers h2,
#hidpd-select-provider-title {
    font-family: var(--av-font-heavy);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--av-grey);
    margin: 0 0 12px;
}

.kc-social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.kc-social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid #dbe2e4;
    background: #fff;
    color: var(--av-ink);
    font-family: var(--av-font-body);
    font-size: 13.5px;
}

.kc-social-item:hover { border-color: var(--av-blue); text-decoration: none; }

/* ---------- OTP tiles / recovery codes (baseline) ---------- */

.pf-c-tile {
    border: 1.5px solid #dbe2e4;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

ul, ol { text-align: left; }

li {
    font-family: var(--av-font-body);
    color: var(--av-ink);
    font-size: 13.5px;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
    .av-shell { grid-template-columns: 1fr; }
    .av-hero { padding: 36px 28px; }
    .av-panel { padding: 28px; }
    .login-pf-page { max-width: 420px; }
}