/* ==========================================================================
   Kogi State BECE Result Portal - public site
   --------------------------------------------------------------------------
   Styles the public shell (navigation + footer) and the landing page.
   Loaded after kogi-green.css, which supplies the --kg-* palette tokens.

   This file replaces the bought-in "Kolaso" template for the public pages,
   in the same way the administrator sign-in page was rebuilt. Everything is
   scoped with a ks- prefix so it cannot collide with the admin template.
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px; /* clears the sticky header on anchor jumps */
}

body.ks-body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--kg-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ks-body img { max-width: 100%; display: block; }

.ks-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.ks-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--kg-050);
    border: 1px solid var(--kg-100);
    color: var(--kg-700);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ks-section-head {
    max-width: 660px;
    margin: 0 auto 48px;
    text-align: center;
}

.ks-section-head h2 {
    margin: 18px 0 12px;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--kg-ink);
}

.ks-section-head p {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--kg-muted);
}

/* --------------------------------------------------------------------------
   Notice band
   -------------------------------------------------------------------------- */

.ks-notice {
    position: relative;
    background: linear-gradient(135deg, var(--kg-900) 0%, var(--kg-700) 60%, var(--kg-500) 100%);
    color: #EAF4EE;
    font-size: 13.5px;
    font-weight: 300;
}

.ks-notice-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 48px 11px 24px;
    text-align: center;
}

.ks-notice svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--kg-300); }

.ks-notice strong { font-weight: 600; color: #fff; }

.ks-notice a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ks-notice-close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ks-notice-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

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

.ks-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--kg-line);
    transition: box-shadow .2s ease;
}

.ks-header.is-scrolled { box-shadow: 0 6px 22px -16px rgba(6, 53, 29, .5); }

.ks-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 74px;
}

.ks-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-right: auto;
}

.ks-brand img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }

.ks-brand-line1 {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-800);
    line-height: 1.2;
}

.ks-brand-line2 {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 300;
    color: var(--kg-muted);
    line-height: 1.3;
}

.ks-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ks-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--kg-body);
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.ks-menu a:hover { color: var(--kg-700); background: var(--kg-050); }

.ks-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--kg-700) 0%, var(--kg-500) 100%);
    box-shadow: 0 10px 22px -12px rgba(11, 93, 51, .75);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ks-nav-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(11, 93, 51, .8); }
.ks-nav-cta svg { width: 15px; height: 15px; }

.ks-burger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kg-line);
    border-radius: 10px;
    background: #fff;
    color: var(--kg-800);
    cursor: pointer;
}

.ks-burger svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ks-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 88px;
    background:
        radial-gradient(820px 460px at 8% 4%, rgba(31, 163, 107, .14), transparent 60%),
        radial-gradient(700px 420px at 96% 90%, rgba(18, 128, 90, .12), transparent 62%),
        linear-gradient(180deg, #F7FBF9 0%, #FFFFFF 100%);
}

.ks-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(11, 93, 51, .09) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(170deg, rgba(0, 0, 0, .6), transparent 55%);
    mask-image: linear-gradient(170deg, rgba(0, 0, 0, .6), transparent 55%);
    pointer-events: none;
}

.ks-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
}

.ks-hero h1 {
    margin: 20px 0 0;
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--kg-ink);
}

.ks-hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--kg-700), var(--kg-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ks-hero-bio {
    margin: 20px 0 0;
    max-width: 520px;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--kg-body);
}

.ks-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ks-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.ks-btn svg { width: 17px; height: 17px; transition: transform .18s ease; }

.ks-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--kg-700) 0%, var(--kg-500) 100%);
    box-shadow: 0 14px 30px -14px rgba(11, 93, 51, .8);
}

.ks-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(11, 93, 51, .85); }
.ks-btn--primary:hover svg { transform: translateX(3px); }

.ks-btn--ghost {
    color: var(--kg-700);
    background: #fff;
    border: 1.5px solid var(--kg-100);
    box-shadow: var(--kg-shadow-sm);
}

.ks-btn--ghost:hover { color: var(--kg-800); background: var(--kg-050); border-color: var(--kg-200); transform: translateY(-2px); }

.ks-hero-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--kg-muted);
}

.ks-hero-trust svg { width: 15px; height: 15px; color: var(--kg-500); flex: 0 0 15px; }

/* Hero photograph.
   hero.jpg is a composite: a gold arc and a pale blue field are baked in
   alongside the photograph. The offsets below crop to the clean photographic
   region on the right of the file, leaving the arc outside the frame.
   They are percentages of the frame, so the crop holds at any size. */
.ks-hero-photo {
    position: relative;
    overflow: hidden;
    width: 100%; /* the img inside is absolutely positioned, so this must not be content-sized */
    aspect-ratio: 43 / 52;
    border-radius: 26px;
    background: var(--kg-050);
    box-shadow: 0 40px 80px -40px rgba(6, 53, 29, .55), 0 4px 12px rgba(6, 53, 29, .06);
}

.ks-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1.5px var(--kg-200);
    pointer-events: none;
}

.ks-hero-photo img {
    position: absolute;
    left: -392%;
    top: -12.7%;
    width: 492%;
    max-width: none;
    height: auto;
}

.ks-hero-figure { position: relative; }

.ks-hero-badge {
    position: absolute;
    left: -26px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--kg-line);
    box-shadow: 0 20px 44px -22px rgba(6, 53, 29, .45);
}

.ks-hero-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--kg-050);
    color: var(--kg-600);
    flex: 0 0 40px;
}

.ks-hero-badge-icon svg { width: 20px; height: 20px; }

.ks-hero-badge-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kg-muted);
}

.ks-hero-badge-value {
    display: block;
    margin-top: 1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kg-ink);
}

/* --------------------------------------------------------------------------
   Quick action cards
   -------------------------------------------------------------------------- */

.ks-section { padding: 84px 0; }

.ks-section--tint { background: var(--kg-050); }

.ks-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ks-action {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--kg-line);
    box-shadow: var(--kg-shadow-sm);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ks-action:hover {
    transform: translateY(-4px);
    border-color: var(--kg-200);
    box-shadow: 0 26px 50px -28px rgba(6, 53, 29, .5);
}

.ks-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--kg-700), var(--kg-500));
    color: #fff;
    box-shadow: 0 10px 20px -12px rgba(11, 93, 51, .8);
}

.ks-action-icon svg { width: 22px; height: 22px; }

.ks-action h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--kg-ink);
}

.ks-action p {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--kg-muted);
}

.ks-action-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--kg-600);
}

.ks-action-go svg { width: 14px; height: 14px; transition: transform .18s ease; }
.ks-action:hover .ks-action-go svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   How to check your result
   -------------------------------------------------------------------------- */

.ks-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* connecting rule behind the step numbers */
.ks-steps::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, var(--kg-200), var(--kg-300), var(--kg-200));
    border-radius: 999px;
}

.ks-step { position: relative; text-align: center; }

.ks-step-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kg-700), var(--kg-500));
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 0 0 8px var(--kg-050), 0 12px 24px -14px rgba(11, 93, 51, .8);
}

.ks-section--tint .ks-step-num { box-shadow: 0 0 0 8px var(--kg-050), 0 12px 24px -14px rgba(11, 93, 51, .8); }

.ks-step h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--kg-ink);
}

.ks-step p {
    margin: 0 auto;
    max-width: 300px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--kg-muted);
}

.ks-steps-note {
    margin: 44px auto 0;
    max-width: 720px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--kg-100);
    border-left: 3px solid var(--kg-500);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--kg-body);
    display: flex;
    gap: 12px;
}

.ks-steps-note svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--kg-500); margin-top: 2px; }
.ks-steps-note strong { font-weight: 600; color: var(--kg-800); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.ks-faq { max-width: 800px; margin: 0 auto; }

.ks-faq details {
    margin-bottom: 12px;
    border: 1px solid var(--kg-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ks-faq details[open] {
    border-color: var(--kg-200);
    box-shadow: var(--kg-shadow-sm);
}

.ks-faq summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--kg-ink);
    cursor: pointer;
    list-style: none;
}

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

.ks-faq summary::after {
    content: "";
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 2px solid var(--kg-500);
    border-bottom: 2px solid var(--kg-500);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.ks-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.ks-faq summary:hover { background: var(--kg-050); }

.ks-faq-q {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    background: var(--kg-050);
    color: var(--kg-600);
    font-size: 12px;
    font-weight: 700;
}

.ks-faq-body {
    padding: 0 22px 20px 64px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--kg-muted);
}

.ks-faq-body a { color: var(--kg-600); font-weight: 500; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ks-footer {
    position: relative;
    overflow: hidden;
    padding: 72px 0 0;
    color: rgba(234, 244, 238, .78);
    background:
        radial-gradient(900px 500px at 6% 0%, rgba(31, 163, 107, .22), transparent 62%),
        linear-gradient(160deg, var(--kg-900) 0%, var(--kg-800) 55%, var(--kg-700) 100%);
}

.ks-footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr;
    gap: 48px;
}

.ks-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.ks-footer-brand img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}

.ks-footer-brand-line1 {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}

.ks-footer-brand-line2 {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 300;
    color: rgba(234, 244, 238, .7);
    max-width: 240px;
    line-height: 1.5;
}

.ks-footer p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.8;
    max-width: 330px;
}

.ks-footer h4 {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.ks-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.ks-footer-links a {
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(234, 244, 238, .78);
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}

.ks-footer-links a:hover { color: #fff; padding-left: 4px; }

.ks-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.ks-contact-item { display: flex; gap: 14px; align-items: flex-start; }

.ks-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--kg-300);
}

.ks-contact-icon svg { width: 18px; height: 18px; }

.ks-contact-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(234, 244, 238, .55);
}

.ks-contact-value {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(234, 244, 238, .9);
    line-height: 1.6;
}

a.ks-contact-value { text-decoration: none; }
a.ks-contact-value:hover { color: #fff; }

.ks-footer-bottom {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ks-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(234, 244, 238, .6);
}

.ks-footer-bottom a { color: rgba(234, 244, 238, .75); text-decoration: none; }
.ks-footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .ks-actions { grid-template-columns: repeat(2, 1fr); }
    .ks-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ks-hero-grid { gap: 36px; }
}

@media (max-width: 880px) {
    .ks-menu { display: none; }
    .ks-burger { display: flex; }

    /* menu revealed by the burger */
    .ks-menu.is-open {
        display: flex;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        background: #fff;
        border-bottom: 1px solid var(--kg-line);
        box-shadow: 0 20px 40px -24px rgba(6, 53, 29, .5);
    }

    .ks-header { position: sticky; }
    .ks-nav { position: relative; }

    .ks-hero-grid { grid-template-columns: 1fr; }
    /* Centre with justify-self, not `margin: 0 auto`: auto margins on a grid
       item switch off stretch alignment, which would collapse this figure to
       zero width because its contents are absolutely positioned. */
    .ks-hero-figure { order: -1; width: 100%; max-width: 420px; justify-self: center; }
    .ks-hero-badge { left: 0; bottom: -18px; }
    .ks-hero { padding: 48px 0 72px; }
    .ks-section { padding: 64px 0; }
    .ks-steps { grid-template-columns: 1fr; gap: 36px; }
    .ks-steps::before { display: none; }
    .ks-faq-body { padding-left: 22px; }
}

@media (max-width: 560px) {
    .ks-container { padding: 0 18px; }
    .ks-actions { grid-template-columns: 1fr; }
    .ks-footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .ks-footer-bottom-inner { flex-direction: column; text-align: center; }
    .ks-brand-line2 { display: none; }
    .ks-nav-cta span { display: none; }
    .ks-nav-cta { padding: 11px 13px; }
    .ks-hero-actions .ks-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}