/*
 * Shared hero: the map with a white sheet over it (index, startgame, find,
 * guess, unsubscribe). On phones the sheet docks to the top of the page
 * (below the site header), not partway down -- a sliver of map used to show
 * above it, but that pushed the sheet's own min-height calculation (a plain
 * 100vh) past the real visible area on Safari, cutting off the bottom of
 * longer content like the start-game form.
 */
.hero-section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* tracks the real visible viewport; ignored where unsupported */
    overflow: visible; /* allow downstream content (like ads) to remain scrollable */
    background: var(--map-water);
}

#map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--color-text);
    /* The map here is frozen, so it reads like the map behind a popup:
       the same navy dim the map popups use (styles/pages/map-sheets.css). */
    background: rgba(20, 33, 61, 0.45);
    padding-top: var(--space-7);
}

.hero-content {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: var(--space-7);
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-sheet);
    text-align: left;
    z-index: 3;
}

/* Home: the eyebrow and title are one <h1>, so "mission call" is in the headline */
.hero-heading {
    margin: 0;
    color: inherit;
    font: inherit;
}

.hero-heading .hero-eyebrow,
.hero-heading .hero-title {
    display: block;
}

.hero-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hero-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: var(--font-weight-bold);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.hero-subtitle {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-lg);
    line-height: 1.5;
    color: var(--color-text-tertiary);
}

.hero-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2-5);
}

.hero-buttons .hero-btn.primary {
    grid-column: 1 / -1;
}

.hero-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    height: 48px;
    padding: 0 var(--space-4);
    box-sizing: border-box;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-btn:hover {
    background: var(--color-surface-soft);
    border-color: var(--color-border-mid);
}

.hero-btn.primary {
    height: 52px;
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: var(--color-text-inverse);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-extrabold);
}

.hero-btn.primary:hover {
    background: var(--color-primary-2-hover);
    border-color: var(--color-primary-2-hover);
}

.hero-btn:disabled {
    opacity: 0.6;
    cursor: default;
}


/* Form Section Styles (for startgame.html and find.html) */
.form-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.form-input {
    height: 50px;
    padding: 0 var(--space-3-5);
    box-sizing: border-box;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder {
    color: var(--color-text-faint);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-a10);
}

/* Custom select dropdown styling */
select.form-input:invalid,
select.form-input option[value=""] {
    color: var(--color-text-faint);
}

select.form-input option {
    color: var(--color-text);
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 50px;
}

.name-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.form-textarea {
    height: auto;
    padding: var(--space-3) var(--space-3-5);
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
}

/* Stats strip (index.html) */
.mobile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-1);
    background: var(--color-surface-soft);
    border-radius: var(--radius-lg);
    text-align: center;
}

.mobile-stat-number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.mobile-stat-label {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: lowercase;
}

/* Phones: the sheet docks to the bottom like the mission drawer
   (map-sheets.css), map showing in a strip above it. Sized the same way the
   drawer is -- a percentage of the viewport, not 100vh minus a fixed pixel
   count -- so there's no px arithmetic to overshoot the real visible area on
   Safari. The old px-based version is the fallback for browsers without dvh;
   browsers that have it get the dvh-percentage pair below instead, which is
   the version that actually matters here. */
@media (max-width: 768px) {
    .hero-overlay {
        padding-top: 72px;
        padding-top: 4dvh;
    }

    .hero-content {
        max-width: none;
        min-height: calc(100vh - 56px - 72px);
        min-height: 96dvh;
        padding: var(--space-6) 22px var(--space-5);
        border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
        box-shadow: 0 -10px 30px rgba(20, 33, 61, 0.18);
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: var(--font-size-md);
        margin-bottom: var(--space-5);
    }

    .name-inputs {
        grid-template-columns: 1fr;
    }
}