/* =============================================================================
   PRC Freedom Run 2026 — public certificate portal
   Independence Day palette: saffron, white, India green, Ashoka navy.
   ========================================================================== */

:root {
    --saffron:      #FF6B1A;
    --saffron-soft: #FFF1E7;
    --green:        #128A3C;
    --green-soft:   #E9F7EE;
    --navy:         #102048;
    --navy-mid:     #22376F;
    --navy-soft:    #EDF1FA;

    --paper:        #FBFAF7;
    --card:         #FFFFFF;
    --ink:          #16203A;
    --ink-muted:    #62708C;
    --line:         #E3E7F0;

    --danger:       #C62828;
    --danger-soft:  #FFF3F3;

    --radius:       14px;
    --radius-sm:    9px;
    --shadow:       0 10px 40px rgba(16, 32, 72, 0.10);
    --shadow-sm:    0 2px 10px rgba(16, 32, 72, 0.07);

    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;

    /* ---------------------------------------------------------------------
       Vertical rhythm.

       The lookup page is meant to sit on one screen with no scrolling, on a
       short laptop viewport as much as on a tall desktop one. Every vertical
       gap is therefore a clamp() with a vh middle term: generous when there is
       room, tight when there is not, and never smaller than the floor.
       --------------------------------------------------------------------- */
    --space-page:  clamp(0.7rem,  2.6vh, 2.5rem);  /* page top / bottom       */
    --space-block: clamp(0.7rem,  2.1vh, 2rem);    /* between major blocks    */
    --space-mid:   clamp(0.55rem, 1.7vh, 1.35rem); /* inside a block          */
    --space-tight: clamp(0.35rem, 1.1vh, 1rem);    /* label to control        */
}

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

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

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh; /* excludes mobile browser chrome where supported */
    display: flex;
    flex-direction: column;
}

/* Faint saffron / green wash in the page corners, echoing the certificate */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(760px 420px at -8% -12%, rgba(255, 107, 26, 0.16), transparent 62%),
        radial-gradient(760px 420px at 108% 112%, rgba(18, 138, 60, 0.16), transparent 62%);
}

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

a { color: var(--navy-mid); }

/* =============================================================================
   TRICOLOUR RULE — used as the page's top edge and as a section divider
   ========================================================================== */

/* The middle band is a hair off pure white and carries a hairline, so the
   strip still reads as one continuous flag against a white page. */
.tricolour {
    height: 5px;
    background: linear-gradient(
        to right,
        var(--saffron) 0 33.33%,
        #F3F1EC     33.33% 66.66%,
        var(--green) 66.66% 100%
    );
    box-shadow: inset 0 -1px 0 rgba(16, 32, 72, 0.07);
}

/* =============================================================================
   HEADER
   ========================================================================== */

.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(0.5rem, 1.5vh, 0.9rem) 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header__logo { height: clamp(28px, 4.5vh, 38px); width: auto; }

.site-header__meta {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: right;
}

.site-header__meta strong { display: block; color: var(--navy); font-size: 0.8rem; }

/* =============================================================================
   LAYOUT
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-page) 1.25rem;
    flex: 1;
}

.wrap--narrow { max-width: 660px; }

/* =============================================================================
   HERO
   ========================================================================== */

.hero { text-align: center; margin-bottom: var(--space-block); }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--saffron-soft);
    color: #B84403;
    border: 1px solid rgba(255, 107, 26, 0.28);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: var(--space-mid);
}

.hero__eyebrow .chakra { flex: none; color: var(--navy); }

/* Scales with the shorter of the two axes, so it never eats the page height */
.hero__title {
    font-size: clamp(1.75rem, min(6.5vw, 7.2vh), 3.4rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.hero__title .saffron { color: var(--saffron); }

.hero__tagline {
    margin-top: var(--space-tight);
    font-size: clamp(0.9rem, 2.4vw, 1.1rem);
    color: var(--ink-muted);
    font-weight: 500;
}

.hero__tagline .green { color: var(--green); font-weight: 600; }

.hero__facts {
    margin-top: var(--space-mid);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.fact {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    box-shadow: var(--shadow-sm);
}

.fact__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fact__dot--saffron { background: var(--saffron); }
.fact__dot--navy    { background: var(--navy); }
.fact__dot--green   { background: var(--green); }

/* =============================================================================
   CARD
   ========================================================================== */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card__body { padding: clamp(1.05rem, 3vh, 1.75rem); }

.card__title {
    font-size: clamp(1.05rem, 2.6vh, 1.15rem);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.card__sub {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-mid);
}

/* =============================================================================
   FORM
   ========================================================================== */

.field { margin-bottom: var(--space-mid); }

.field label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: var(--space-tight);
}

.field input[type="text"],
.field input[type="search"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.field input:focus {
    border-color: var(--saffron);
    background: var(--card);
    box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.14);
}

.field__hint {
    margin-top: var(--space-tight);
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* =============================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.8rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}

.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }

.btn--primary { background: var(--saffron); color: #FFFFFF; }
.btn--primary:hover { background: #E85C0D; }

.btn--navy { background: var(--navy); color: #FFFFFF; }
.btn--navy:hover { background: var(--navy-mid); }

.btn--green { background: var(--green); color: #FFFFFF; }
.btn--green:hover { background: #0E6F30; }

.btn--ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--navy); background: var(--navy-soft); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

/* =============================================================================
   ALERTS
   ========================================================================== */

.alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    padding: clamp(0.6rem, 1.8vh, 0.9rem) 1.05rem;
    font-size: 0.87rem;
    line-height: 1.5;
    margin-bottom: var(--space-mid);
    border: 1px solid;
}

.alert__icon { flex: none; font-size: 1.05rem; line-height: 1.35; }

.alert--error   { background: var(--danger-soft); border-color: #F5C9C9; color: var(--danger); }
.alert--warn    { background: var(--saffron-soft); border-color: #FAD3B8; color: #A63C02; }
.alert--success { background: var(--green-soft);  border-color: #B9E4C7; color: #0C6B2E; }
.alert--info    { background: var(--navy-soft);   border-color: #CBD8F2; color: var(--navy-mid); }

.alert strong { display: block; margin-bottom: 0.15rem; }

/* =============================================================================
   NAME PICKER — shown when one contact has several runners against it
   ========================================================================== */

/* A large family can push this past the fold, so the list itself scrolls
   rather than the page. Most groups are two or three names and never hit it. */
.picker {
    list-style: none;
    display: grid;
    gap: clamp(0.4rem, 1.2vh, 0.65rem);
    max-height: calc(100vh - 360px);
    overflow-y: auto;
}

.picker__item { margin: 0; }

.picker__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    font-family: inherit;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    padding: clamp(0.55rem, 1.6vh, 0.85rem) 1.1rem;
    cursor: pointer;
    color: var(--ink);
    transition: border-color 0.15s, background 0.15s;
}

.picker__btn:hover { border-color: var(--saffron); background: var(--card); }

.picker__btn[disabled] { cursor: not-allowed; opacity: 0.72; }
.picker__btn[disabled]:hover { border-color: var(--line); background: var(--paper); }

/* Name and city share one line so a whole family fits without scrolling */
.picker__who {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.picker__name {
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker__meta {
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker__meta::before { content: '· '; }

.pill {
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.pill--finisher { background: var(--green-soft); color: #0C6B2E; }
.pill--pending  { background: var(--navy-soft);  color: var(--navy-mid); }

/* =============================================================================
   CERTIFICATE RESULT
   ========================================================================== */

.result { text-align: center; }

/* The fit layout turns .card__body into a column flex container, where a
   stretch default would blow the pill out to the full card width. */
.result .hero__eyebrow { align-self: center; }

.result__crest {
    width: clamp(44px, 7vh, 62px);
    height: clamp(44px, 7vh, 62px);
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.35rem, 3.4vh, 1.9rem);
    margin: 0 auto var(--space-tight);
}

.result__name {
    font-size: clamp(1.3rem, min(4vw, 3.6vh), 1.9rem);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.result__sub { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0.2rem; }

/* The preview is capped by viewport height as well as width, so the whole
   result — name, certificate and download buttons — stays on one screen.
   On roomy viewports .wrap--fit takes over and sizes it by leftover space. */
.cert-frame {
    margin: var(--space-mid) auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: var(--card);
    width: fit-content;
    max-width: 100%;
}

.cert-frame img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 46vh;
}

/* -----------------------------------------------------------------------------
   FIT-TO-SCREEN RESULT

   Rather than guessing a vh cap for the certificate, let flexbox do it: the
   card fills the space between header and footer, and the certificate takes
   whatever is left once the name and the download buttons have been laid out.
   The preview is then always as large as it can be without causing a scroll.
   -------------------------------------------------------------------------- */

@media (min-width: 700px) and (min-height: 560px) {

    /* A definite body height is what makes the shrinking below possible —
       min-height alone would just let the page grow past the viewport. */
    body.is-fit { height: 100vh; height: 100dvh; }

    .wrap--fit,
    .wrap--fit .card,
    .wrap--fit .card__body { display: flex; flex-direction: column; min-height: 0; }

    .wrap--fit .card,
    .wrap--fit .card__body { flex: 1 1 auto; }

    .wrap--fit .cert-frame {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        /* The frame styling moves onto the image, which now hugs it exactly. */
        border: 0;
        box-shadow: none;
        background: none;
        overflow: visible;
    }

    /* Capping both axes and leaving width/height auto keeps the aspect ratio
       intact, so the border always hugs the artwork rather than letterboxing. */
    .wrap--fit .cert-frame img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
    }
}

/* =============================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--card);
    padding: clamp(0.6rem, 1.6vh, 1.1rem) 1.25rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 1.2vh, 0.8rem);
}

/* --- Event sponsor ------------------------------------------------------- */
/* The artwork ships on a white ground, so this row stays white to match.
   Label and logo sit side by side, which costs a third of the height a
   stacked lock-up would. */

.sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.sponsor__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.sponsor__logo {
    width: clamp(105px, 16vh, 150px);
    height: auto;
}

.site-footer__main { line-height: 1.45; }

.site-footer strong { color: var(--navy); }

.site-footer__credit { display: block; font-size: 0.76rem; }

.site-footer a { color: var(--green); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* =============================================================================
   RESPONSIVE — WIDTH
   ========================================================================== */

@media (max-width: 560px) {
    .wrap        { padding: var(--space-page) 1rem; }
    .card__body  { padding: 1.15rem; }
    .btn-row .btn { flex: 1 1 100%; }
    .site-header__inner { padding: 0.7rem 1rem; }
    .site-header__meta  { font-size: 0.66rem; }
}

/* =============================================================================
   RESPONSIVE — HEIGHT

   Short laptop viewports get a tighter page so the lookup form, the sponsor
   and the footer all stay above the fold. Nothing unique is dropped: the fact
   pills below repeat the date and city already shown in the header, and the
   distance is stated in the field hint.
   ========================================================================== */

@media (max-height: 760px) {
    .hero__facts { display: none; }

    /* On the result page the trophy and the "Certificate of Participation"
       badge are decoration — the certificate below says both. Drop them and
       give the height to the certificate itself. */
    .result .result__crest,
    .result .hero__eyebrow { display: none; }
}

@media (max-height: 700px) {
    .cert-frame img { max-height: 40vh; }
}

/* An error message needs the room more than the eyebrow and the tagline do,
   and it only ever appears on the retry pass. Browsers without :has() simply
   scroll a little — no worse than before. */
@media (max-height: 740px) {
    .wrap:has(.alert) .hero__eyebrow,
    .wrap:has(.alert) .hero__tagline { display: none; }
}

@media (max-height: 660px) {
    .hero__eyebrow   { font-size: 0.68rem; padding: 0.25rem 0.75rem; }
    .hero__tagline   { font-size: 0.88rem; }
    .card__sub       { font-size: 0.85rem; }
    .field__hint     { font-size: 0.76rem; }

    .site-footer        { gap: 0.3rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .site-footer__main  { font-size: 0.74rem; }
    .site-footer__credit { font-size: 0.7rem; }
    .sponsor__logo      { width: 92px; }
    .sponsor__label     { font-size: 0.58rem; }
}

/* Anything shorter than this cannot fit the page whatever we do — let it
   scroll rather than shrinking the form into something unusable. */
@media (max-height: 520px) {
    .hero__title { font-size: 1.6rem; }
}