/* ============================================================
   Dan Tutoring — Countdown page styles
   Palette: cream base, orange accent band, dark footer.
   ============================================================ */

:root {
    --orange: #FF5500;
    --cream:  #FFF8F3;
    --ink:    #1A0F0A;
    --muted:  #8A6F5C;
}

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

/* Full-height column so the footer sits at the bottom */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--cream);
    color: var(--ink);
    font-family: "Roboto", sans-serif;
    text-align: center;
}

/* ---- Heading band (the orange block) ---- */
#attention {
    background-color: var(--orange);
    color: var(--cream);
    padding: 2.5rem 1.5rem;
}

#attention h1 {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    line-height: 1.1;
    /* scales smoothly between phone and desktop */
    font-size: clamp(1.5rem, 5vw, 2.75rem);
}

#attention .accent-line {
    color: var(--ink);   /* second line in dark for contrast */
}

/* ---- Main content ---- */
main {
    flex: 1;                 /* takes remaining space, pushing footer down */
    display: flex;
    font-family:courier;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
}

.lead {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--muted);
    max-width: 40ch;
}

.label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 1rem;
}

/* ---- Countdown ---- */
#countdown {
    display: flex;
    gap: clamp(0.5rem, 4vw, 2rem);
    justify-content: center;
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
}

.value {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2rem, 9vw, 3.5rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;  /* digits don't shift width */
}

.unit-label {
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: var(--muted);
}

.launched {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(1.25rem, 5vw, 2rem);
    color: var(--orange);
}

/* ---- Footer ---- */
footer {
    background-color: var(--ink);
    color: var(--cream);
    padding: 1.5rem;
}

#ig {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--orange);          /* now actually applies */
    text-decoration: none;
    font-weight: 500;
}

#ig:hover { text-decoration: underline; }

#ig img {
    width: 24px;
    height: auto;
}

.copyright {
    font-family:'Courier New', Courier, monospace
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---- Small phones: stack countdown 2x2 if it gets cramped ---- */
@media (max-width: 360px) {
    #countdown {
        flex-wrap: wrap;
        max-width: 200px;
        margin: 0 auto;
    }
    .unit { flex: 1 0 40%; }
}