@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600&display=swap');

@font-face {
    font-family: "OrganettoBoldExt";
    src: url('../fonts/OrganettoBoldExt/font.woff2') format('woff2'), url('../fonts/OrganettoBoldExt/font.woff') format('woff');
}

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

:root {
    --dark:      #5F544A;
    --darker:    #37322E;
    --text:      #ffffff;
    --muted:     #888888;
    --border:    #3a3a3a;
    --input-bg:  #252525;
    --red:       #e8231a;
    --font-head: 'OrganettoBoldExt', sans-serif;
    --font-body: 'OrganettoBoldExt', sans-serif;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--darker);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ── Full-page layout ─────────────────────────────── */
.page {
    min-height: 100vh;
    background-image: var(--bg-image);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px; /* space for fixed header */
}

/* ── Mobile hero image ────────────────────────────── */
.hero-image-mobile {
    display: none; /* desktop: background is the fixed page bg, no extra element needed */
}

/* ── Content column ──────────────────────────────── */
.content-wrap {
    width: 100%;
    max-width: 460px;
    background: transparent;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1; /* stay above the footer bleed */
    flex: 1;
}

/* ── Section gap (hero → lower panel) ───────────── */
.section-divider {
    display: none; /* gap is created by margin-top on .instructions instead */
}

/* ── Site header (fixed, full-width, over background image) ─ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 12px;
    /* transparent on desktop — logos float over the background photo */
}

.clif-logo {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.clif-logo img {
    height: 100px;
    width: auto;
    display: block;
}

.header-right {
    display: flex;
    flex-direction: column;   /* marathon logo stacked ABOVE country select */
    align-items: flex-end;
    gap: 8px;
}

.partner-logo {
    display: flex;
    align-items: start;
    justify-content: flex-end;
}

.partner-logo img {
    height: 80px;
    width: auto;
    display: block; 
    max-width: 160px;
    object-fit: contain;
}

.partner-logo-text {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: right;
    color: var(--text);
    max-width: 110px;
}

/* Country select */
.country-select {
    position: relative;
}

.country-select select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--darker);
    padding: 5px 24px 5px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.country-select select option {
    background: #222;
    color: var(--text);
}

.country-select::after {
    content: '▾';
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 10px;
    color: var(--darker);
}

/* ── Hero section ─────────────────────────────────── */
.hero {
    background: var(--darker);
    padding: 36px 24px 32px;
    text-align: center;
}

.hero__headline {
    font-family: var(--font-head);
    font-size: clamp(36px, 16vw, 40px);
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero__prize-main {
    font-family: var(--font-head);
    font-size: clamp(17px, 4.5vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    margin-bottom: 20px;
}


.hero__prize-label {
    font-family: var(--font-head);
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.hero__prize-secondary {
    font-family: var(--font-head);
    font-size: clamp(17px, 4.5vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
}

/* ── Arrow divider (mobile only) ─────────────────── */
.arrow-divider {
    display: none;
}

/* ── Instructions ─────────────────────────────────── */
.instructions {
    background: var(--darker);
    margin-top: 16px; /* gap — background image shows through here */
    padding: 28px 24px 28px;
    text-align: center;
}

.instructions__title {
    font-family: var(--font-head);
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.instructions__text {
    font-family: var(--font-head);
    font-size: clamp(14px, 3.5vw, 17px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
}

/* ── Form section ─────────────────────────────────── */
.form-section {
    background: var(--darker);
    padding: 24px 18px 36px;
    flex: 1;
}

.form-field {
    position: relative;
    margin-bottom: 10px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.form-input {
    width: 100%;
    background: #fff;
    color: var(--darker);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    border-radius: 0;
    -webkit-appearance: none;
}

.form-input::placeholder {
    color: var(--darker);
    text-transform: uppercase;
    font-size: 12px;
}

.form-input:focus {
    border-color: #5a5a5a;
}

.form-input[aria-invalid="true"] {
    border-color: var(--red);
}

.field-error {
    color: var(--red);
    font-size: 11px;
    margin-top: 4px;
    display: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.form-field.has-error .field-error {
    display: block;
}

/* ── Upload area ──────────────────────────────────── */
.upload-wrap {
    position: relative;
    margin-bottom: 10px;
}

.upload-area {
    border: 1px solid var(--border);
    background: #fff;
    padding: 28px 16px 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
    display: block;
}

.upload-area:hover {
    border-color: #5a5a5a;
}

.upload-area.drag-over {
    border-color: var(--text);
}

.upload-area.has-file {
    border-color: #5cb85c;
}

.upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.upload-icon {
    font-family: 'Courier New', Courier, monospace;
    font-size: 40px;
    font-weight: 100;
    line-height: 1;
    color: #fff;
    margin: 0 auto 10px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--darker);
    border-radius: 50%;

}

.upload-area.has-file .upload-icon {
    color: #5cb85c;
}

.upload-preview {
    display: none;
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    margin-bottom: 8px;
}

.upload-area.has-preview .upload-preview {
    display: block;
}

.upload-area.has-preview .upload-icon {
    display: none;
}

.upload-label-text {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--darker);
}

.upload-filename {
    display: none;
    font-size: 12px;
    color: var(--text);
    margin-top: 6px;
    word-break: break-all;
}

.upload-area.has-file .upload-filename {
    display: block;
}

.upload-area.has-file .upload-label-text {
    display: none;
}

.upload-error {
    color: var(--red);
    font-size: 11px;
    margin-top: 4px;
    display: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.upload-wrap.has-error .upload-error {
    display: block;
}

.upload-wrap.has-error .upload-area {
    border-color: var(--red);
}

/* ── Checkbox ─────────────────────────────────────── */
.form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    cursor: pointer;
}

.form-check__input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    background: #fff;
    margin-top: 4px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}

.form-check__input:checked {
    background: var(--text);
    border-color: var(--text);
}

.form-check__input:checked::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 13px;
    border-right: 2px solid var(--darker);
    border-bottom: 2px solid var(--darker);
    transform: translate(-50%, -60%) rotate(45deg);
}

.form-check__input[aria-invalid="true"] {
    border-color: var(--red);
}

.form-check__input:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.form-check__label {
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--darker);
    cursor: pointer;
}

.form-check__label a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.check-error {
    color: var(--red);
    font-size: 11px;
    margin-top: -8px;
    display: none;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
}

.form-check.has-error .check-error {
    display: block;
}

/* ── Submit button ────────────────────────────────── */
.btn-submit {
    width: 100%;
    background: var(--darker);
    color: #fff;
    border: 1px solid #fff;
    padding: 12px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
}

.btn-submit:hover:not(:disabled) {
    opacity: 0.88;
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

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

/* ── Global error alert ───────────────────────────── */
.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.alert-error {
    background: rgba(232, 35, 26, 0.1);
    border: 1px solid rgba(232, 35, 26, 0.4);
    color: #ff6b6b;
}

.alert-success {
    background: rgba(92, 184, 92, 0.1);
    border: 1px solid rgba(92, 184, 92, 0.4);
    color: #5cb85c;
}

/* ── Main element growth (keeps footer at bottom) ── */
.form-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.success-main {
    flex: 1;
}

/* ── Success state ────────────────────────────────── */
.success-state {
    background: var(--darker);
    padding: 48px 24px;
    text-align: center;
}

.success-state__icon {
    font-size: 52px;
    margin-bottom: 20px;
    display: block;
}

.success-state h2 {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.success-state p {
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
}

.success-state p strong {
    color: var(--text);
}

/* ── Footer ───────────────────────────────────────── */
.site-footer {
    width: 100%;
    background: var(--dark);
    padding: 22px 24px 20px;
    text-align: center;
    margin-top: -60px; /* bleed up slightly behind the bottom of the form section */
    padding-top: 80px; /* compensate so text isn't hidden behind the overlap */
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}

.footer-social svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 459px) {
    .footer-links {
            gap: 0;
            flex-direction: column;
        }
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    padding: 2px 8px;
    transition: color 0.15s;
}

.footer-links a:hover {
    color: var(--muted);
}

/* ── Focus styles (accessibility) ────────────────── */
.form-input:focus-visible {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 0;
}

/* ── Verify page ──────────────────────────────────── */
.verify-page {
    background: var(--darker);
    padding: 60px 24px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.verify-page h1 {
    font-family: var(--font-head);
    font-size: clamp(20px, 6vw, 36px);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 16px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.verify-page p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
    max-width: 340px;
    overflow-wrap: break-word;
}

.verify-page .icon-large {
    font-size: 64px;
    margin-bottom: 24px;
    display: block;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 459px) {
    /* On mobile: no fixed background — show bg as a hero image section instead */
    .page {
        background-image: none;
        background-color: var(--darker);
        position: relative; /* anchor for absolutely-positioned header */
        padding-top: 0;     /* no header offset — header overlays the hero photo */
    }

    /* Header is transparent, overlaid on top of the hero photo */
    .site-header {
        position: absolute;  /* override fixed — sits over hero image */
        background: transparent;
        flex-direction: column;
        align-items: center;
    }

    /* Mobile hero: background photo shown as a real visible section */
    .hero-image-mobile {
        display: block;
        width: 100%;
        height: 56vw;
        min-height: 220px;
        max-height: 360px;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
    }

    /* Content column fills remaining viewport */
    .content-wrap {
        flex: 1;
        max-width: 100%;
    }

    .site-footer {
        background-color: var(--darker);
    }

    .arrow-divider {
        display: flex;
        justify-content: center;
        background: var(--darker);
        padding: 8px 0 4px 0;
    }

    .arrow-divider img {
        height: 50px;
        width: auto;
    }
}