/* Akola group 35th anniversary — registration page
   Flat, hard-edged geometry. No gradients, no drop shadows, 2px radius. */

@font-face {
    font-family: 'Jeko';
    src: url('/static/fonts/Jeko-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Jeko';
    src: url('/static/fonts/Jeko-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Jeko';
    src: url('/static/fonts/Jeko-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Jeko';
    src: url('/static/fonts/Jeko-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --navy: #103C6D;
    --navy-deep: #0B2A4E;
    --cyan: #20C0D8;
    --white: #FFFFFF;
    --paper: #F4F6F8;
    --line: #D8DFE7;
    --muted: #5A6B7D;
    --error: #E2564D;
    --radius: 2px;
    --font: 'Jeko', Arial, Helvetica, sans-serif;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--navy-deep);
    background: var(--navy);
}

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

.shell { display: block; }

@media (min-width: 1024px) {
    /* On desktop the layout fills the viewport exactly and the window itself
       never scrolls — only the form panel scrolls, inside its own column. */
    html, body { height: 100%; overflow: hidden; }

    .shell {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        height: 100vh;
    }
}

/* ---------- brand panel ---------- */

.panel-brand {
    position: relative;
    background: var(--navy);
    color: var(--white);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .panel-brand {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
    }
    /* seam between the navy and white panels */
    .panel-brand::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;
        height: 100%;
        background: var(--cyan);
    }
}

.panel-brand-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px 24px 48px;
}

@media (min-width: 1024px) {
    /* Centred, not left-hugging. The form panel centres a column of its own, so
       a brand panel stretched across the full half left a wide navy void on the
       right of a large monitor and the artwork read as pushed into the corner.
       The block is sized so its content box is exactly the 520px the artwork and
       the facts table already use — that keeps the artwork's left edge flush
       with the heading and the facts below it. */
    .panel-brand-inner {
        padding: 56px;
        max-width: 632px;   /* 520 content + 56 padding each side */
        margin: 0 auto;
        max-height: 100vh;
        overflow-y: auto;
    }
}

.lang-switch {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 2px solid var(--cyan);
    border-radius: var(--radius);
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    background: rgba(11, 42, 78, 0.6);
}

.lang-switch:hover,
.lang-switch:focus-visible { background: var(--cyan); color: var(--navy); }

@media (min-width: 1024px) {
    /* Pinned to the window's top-left, mirroring the admin link at the top-right.
       Absolute inside the brand panel put it against the seam in the middle of
       the screen, where it read as stranded rather than as a corner control.
       Fixed for the same reason the admin link is: each column scrolls on its
       own, and an absolute chip would scroll away with the panel. */
    .lang-switch {
        position: fixed;
        top: 20px;
        left: 20px;
        right: auto;
        z-index: 20;
        background: var(--navy);
    }
}

.brand-artwork {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 40px 0 32px;
}

@media (min-width: 1024px) {
    .brand-artwork { margin: 0 0 40px; }
}

.kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cyan);
}

.brand-title {
    margin: 0 0 32px;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    /* Wide enough that both the Lithuanian and the (longer) English title wrap
       to two lines. At 15ch the English one broke to three, and because the
       panel centres its content vertically that shifted the whole column. */
    max-width: 24ch;
    /* Reserve two lines regardless of how a language actually wraps, so the
       artwork and facts sit at identical positions on /  and /en. */
    min-height: 2.3em;
}

.facts {
    margin: 0 0 28px;
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 520px;
}

@media (min-width: 560px) {
    /* Columns sized to their content: the date string is much longer than the
       time, so equal thirds break "2026 m. spalio 15 d." across two lines. */
    .facts { grid-template-columns: 1.15fr 0.7fr 1.15fr; }
}

.fact { background: var(--navy); padding: 16px 18px; }

.fact dt {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
}

.fact dd { margin: 0; font-size: 17px; font-weight: 700; }

.fact-sub {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
}

.deadline {
    margin: 0;
    padding-top: 20px;
    border-top: 2px solid var(--cyan);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
}

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

.panel-form { background: var(--white); }

.form-wrap, .notice {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

@media (min-width: 1024px) {
    /* The form column is the only scrolling region on desktop. */
    .panel-form {
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .form-wrap, .notice { padding: 72px 56px 96px; }
}

/* Short desktop windows (laptops around 768px tall): tighten the brand panel so
   its content still fits without a second scrollbar competing with the form. */
@media (min-width: 1024px) and (max-height: 860px) {
    /* The block keeps the full 520px content width even though the artwork
       shrinks: narrowing it to match would squeeze the facts table until
       "Vilnius Town Hall" wrapped mid-name. */
    .panel-brand-inner { padding: 32px 56px; }
    .brand-artwork { max-width: 400px; margin-bottom: 24px; }
    .brand-title { font-size: 28px; margin-bottom: 20px; }
    .facts { margin-bottom: 20px; }
    .fact { padding: 12px 14px; }
    .deadline { padding-top: 14px; }
}

.form-head { margin-bottom: 32px; }

.form-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
}

.form-note { margin: 0; font-size: 13px; color: var(--muted); }

.req { color: var(--error); }

/* ---------- fields ---------- */

.field { margin-bottom: 24px; border: 0; padding: 0; }

.field > label, .field legend {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-deep);
    padding: 0;
}

input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--navy-deep);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.12s linear, background-color 0.12s linear;
}

textarea { resize: vertical; min-height: 64px; }

input:hover, select:hover, textarea:hover { border-color: var(--muted); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-color: var(--navy);
    background: var(--white);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); }

.field-choice.has-error .choice-ui { border-color: var(--error); }

.select-wrap { position: relative; }

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
}

.select-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--navy);
}

.field-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.field-error {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--error);
}

/* ---------- radio choices ---------- */

.choice-stack { display: grid; gap: 8px; }

.choice { display: block; cursor: pointer; }

.choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice-ui {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-weight: 500;
    min-height: 44px;
}

.choice-mark {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--muted);
    border-radius: 50%;
}

.choice:hover .choice-ui { border-color: var(--muted); }

.choice input:focus-visible + .choice-ui {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.choice input:checked + .choice-ui {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    font-weight: 600;
}

.choice input:checked + .choice-ui .choice-mark {
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: inset 0 0 0 4px var(--navy);
}

.subsection-title {
    margin: 32px 0 16px;
    padding-top: 20px;
    border-top: 2px solid var(--navy);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

/* ---------- consent ---------- */

.consent { margin: 32px 0 24px; }

.consent-text {
    max-height: 190px;
    overflow-y: auto;
    padding: 16px;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.consent-text p { margin: 0 0 12px; }
.consent-text p:last-child { margin-bottom: 0; }

.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
}

.consent-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.consent-box {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
}

.consent-check input:checked + .consent-box {
    background: var(--navy);
    /* checkmark drawn with a rotated pseudo-border */
    position: relative;
}

.consent-check input:checked + .consent-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--cyan);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.consent-check input:focus-visible + .consent-box {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.has-error .consent-box { border-color: var(--error); }

/* ---------- submit ---------- */

.submit {
    width: 100%;
    padding: 18px 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--navy);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.12s linear, color 0.12s linear;
}

.submit:hover:not(:disabled) {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy);
}

.submit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.submit:disabled { opacity: 0.5; cursor: not-allowed; }

.form-error {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: rgba(226, 86, 77, 0.1);
    border-left: 4px solid var(--error);
    font-size: 14px;
    font-weight: 600;
    color: var(--error);
}

.contact {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

/* ---------- notices ---------- */

.notice-title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
}

.notice-lead { margin: 0; font-size: 15px; color: var(--muted); }

.notice--inline {
    max-width: none;
    margin: 0 0 28px;
    padding: 20px;
    background: var(--paper);
    border-left: 4px solid var(--cyan);
}

.notice--inline .notice-title { font-size: 18px; }

/* ---------- success overlay ---------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--navy);
    color: var(--white);
    overflow-y: auto;
}

.overlay[hidden] { display: none; }

.overlay-inner { width: 100%; max-width: 520px; }

.overlay-mark {
    margin: 0 0 8px;
    font-size: clamp(72px, 18vw, 140px);
    font-weight: 700;
    line-height: 0.85;
    color: var(--cyan);
}

.overlay-title { margin: 0 0 12px; font-size: 30px; font-weight: 700; }

.overlay-lead {
    margin: 0 0 28px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.82);
}

.overlay-details {
    margin: 0 0 28px;
    border-top: 2px solid var(--cyan);
}

.overlay-details div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.overlay-details dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
}

.overlay-details dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.overlay-footer { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- admin entry point ---------- */

.admin-link {
    display: block;
    padding: 18px 24px 0;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.admin-link:hover { color: var(--navy); }

.admin-link:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    /* Pinned to the window's top-right. Fixed rather than absolute because the
       form column is its own scrolling region — absolute would scroll away. */
    .admin-link {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 20;
        padding: 14px 22px;
        background: var(--white);
    }
}