/* ============================================================
 * Summer Kickoff Rewards — ARCO
 *
 * Beach theme. Background is rebuilt responsively in CSS/SVG (no full
 * background image): a gradient sky + an SVG sand dune + planted
 * umbrella/flip-flop PNGs, with a separate mobile (<768px) layout.
 * Brand difference vs Marathon is the font (this repo: din-2014).
 * ============================================================ */
@import url("https://use.typekit.net/uye6wda.css");

:root {
    /* Summer Kickoff palette (client: yellow #f2911b, blue #27a4db) */
    --primary-color:   #f2911b;   /* warm CTA/accent */
    --secondary-color: #27a4db;   /* sky-blue accent */
    --sand-color:      #f3cf94;
    --text-color:      #0b3552;   /* dark text over the light beach */
    --text-on-accent:  #ffffff;
    --card-bg:         #ffffff;
    --inverted-text-color: #0b3552;
    --inverted-background-color: #ffffff;
    --text-small-color: #5a6b78;

    /* DESKTOP sky: top-left sun + right glow + vertical base */
    --sky:
        radial-gradient(20% 88% at 0% 0%,
          #ffffff 0%, #ffffff 11%, rgba(255,255,255,0.40) 28%,
          rgba(255,255,255,0.15) 47%, rgba(255,255,255,0.10) 82%, rgba(255,255,255,0) 100%),
        radial-gradient(29% 90% at 100% 0%,
          rgba(231,247,251,0.94) 0%, rgba(231,247,251,0) 72%),
        linear-gradient(to bottom, #bbebf4 0%, #73c9ed 100%);
    /* MOBILE sky: deep top-middle, near-white highlights both top corners */
    --sky-mobile:
        radial-gradient(46% 120% at 100% 0%,
          rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0) 100%),
        radial-gradient(30% 110% at 0% 0%,
          rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0) 100%),
        linear-gradient(to bottom, #58bde8 0%, #afe5f2 100%);

    /* reserved bottom band so content never sits on top of the beach graphics */
    --scene-h: 360px;
}

html { height: 100%; }
body {
    min-height: 100%;
    overflow-x: hidden;
    color: var(--text-color);
    font-family: "din-2014", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: #bbebf4; /* sky fallback behind the .scene layer */
}

/* ---- fixed beach backdrop (content scrolls over it) ---- */
.scene  { position: fixed; inset: 0; background: var(--sky); z-index: 0; }
.stage-back  { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
               width: 100%; max-width: 1180px; height: 0; z-index: 1; pointer-events: none; }
.sand   { position: fixed; left: 0; bottom: 0; width: 100%;
          height: clamp(96px, 15vh, 180px); z-index: 2; display: block; }
.stage-front { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
               width: 100%; max-width: 1180px; height: 0; z-index: 3; pointer-events: none; }
.stage-back img, .stage-front img { position: absolute; display: block; }
.umbrella  { right: -6px; bottom: clamp(8px, 2vh, 36px);  width: clamp(260px, 36vw, 300px); }
.flipflops { left: 14px; bottom: clamp(30px, 6vh, 84px);  width: clamp(125px, 18vw, 150px); }
.sand-mobile { display: none; }

/* ---- content sits above the scene ---- */
.hero-section, main, footer { position: relative; z-index: 10; }
footer { padding: 0 20px calc(var(--scene-h) + 24px); font-size: 0.9rem; text-align: center; }

main.container { max-width: 700px; }

p, h1, h2, h3, h4, h5, h6 { color: var(--text-color); }
a, a:hover, a:visited, a:active, a:focus { color: var(--text-color); text-decoration: none; }
.lead { font-size: 1.5rem; font-weight: 800; }

/* ---- hero / title art ---- */
.hero-section { padding-top: 24px; }
.hero-title { display: block; width: 86%; max-width: 540px; height: auto; margin: 12px auto 8px; }

/* ============================================================
 * Offer cards + reveal mechanic (coin-sun reveal wired in Stage 2;
 * structure carried from the working 12days layout, re-themed light)
 * ============================================================ */
.day {
    border: 2px solid var(--secondary-color);
    padding: 2rem;
    margin-bottom: 70px;
    position: relative;
    background-color: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(11,53,82,.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.day.day-today {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-color);
    flex-direction: column;
    justify-content: center;
}
.day.active { flex-direction: column; justify-content: center; }
.day.day-today.active {
    background-color: var(--card-bg);
    border: 2px solid var(--secondary-color);
    color: var(--text-color);
}

/* Day Label */
.day .day-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 20px;
    border-radius: 999px;
    background-color: var(--secondary-color);
    color: var(--text-on-accent);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Unwrap Button */
.day-button { order: 5; }
.day-button .btn-unwrap {
    padding: 10px 20px;
    color: var(--text-on-accent);
    background-color: var(--primary-color);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 800;            /* match the View Offer buttons (bold + uppercase) */
    text-transform: uppercase;
}
.day-button .btn-unwrap:hover { background-color: var(--secondary-color); color: var(--text-on-accent); }
.day.day-today .day-button .btn-unwrap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -50px;
}
.day.active .day-button .btn-unwrap { display: none; }

/* Day Image */
.day .day-image { width: 50%; order: 9; pointer-events: none; }
.day.day-today .day-image { width: 75%; order: 1; }
.day.active .day-image { position: absolute; bottom: 0; right: 0; width: 24%; }
.day.active .day-image img { transform: translate(8px, 22%); }
.day .day-image .open-image { display: none; }
.day .day-image .closed-image { display: block; }
.day.active .day-image .open-image { display: block; }
.day.active .day-image .closed-image { display: none; }
.day.day-today:not(.active) .day-image {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 100%; padding: 0 12.5%; overflow: hidden;  /* both axes hidden: avoid overflow-x-only computing overflow-y to auto (scrollbar) */
    pointer-events: auto; cursor: pointer;  /* coin-sun block is clickable → same reveal as the button */
}
/* Coin-sun reveal teaser — rays spin, coin static on top (replaces the gift) */
.coinsun { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 10px auto;
           /* clip the spinning rays' square box: its corners swing past the
              container as it rotates and would otherwise trigger a scrollbar.
              Only transparent corners are clipped (rays live in the inscribed circle). */
           overflow: hidden; }
.coinsun .coinsun-rays, .coinsun .coinsun-coin { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coinsun .coinsun-rays { animation: coinspin 30s linear infinite; transform-origin: 50% 50%; }
.coinsun-sm { max-width: 120px; margin: 0 auto; }
@keyframes coinspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .coinsun .coinsun-rays { animation: none; } }

/* Day Content */
.day .day-content { display: none; }
.day.active .day-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.day .day-content .content-text { font-size: 1.4rem; font-weight: 800; line-height: 1.25; color: var(--text-color); text-align: center; }
.day .day-content .small { font-size: 0.8rem; font-weight: 400; color: var(--text-small-color); max-width: 60%; margin: 0 auto; padding-left: 1.25em; text-align: left; list-style: disc outside; }
.day .day-content .small li { margin: 0.15em 0; }

/* Activation Button */
.day .day-content .btn-link {
    padding: 10px 20px; font-size: 1.2rem; font-weight: 800; text-decoration: none;
    color: var(--text-on-accent); background-color: var(--primary-color);
    text-transform: uppercase; border-radius: 999px;
}
.day .day-content:hover .btn-link { background-color: var(--secondary-color); color: var(--text-on-accent); }

/* Coming up next */
.coming-up-next { margin-bottom: 70px; padding: 15px 0; border: 2px solid var(--secondary-color); border-radius: 14px; background: rgba(255,255,255,.6); }
.coming-up-next h2 { margin: 15px; font-size: 1.5rem; font-weight: 800; color: var(--text-color); text-align: center; }
/* Centered + wrapping so the row stays balanced whether there's 1 or 5
   upcoming tiles, and reflows to fewer-per-row on narrow/mobile widths
   (was a left-aligned no-wrap strip with a right-fade mask, built for the
   12-day version that had many more tiles). */
.coming-up-days {
    display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start;
    gap: 14px 26px; min-width: 100%;
}
.coming-up-days .day-next {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
.coming-up-days .day-next .day-label {
    padding: 5px 20px; border-radius: 999px; background-color: var(--primary-color);
    color: var(--text-on-accent); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; order: 9;
}
.coming-up-days .day-next .day-image { order: 1; }

/* ============================================================
 * MOBILE (<768px) — portrait beach layout
 * ============================================================ */
@media (max-width: 767px) {
    :root { --scene-h: 150px; }
    .scene { background: var(--sky-mobile); }
    .sand-desktop { display: none; }
    .sand-mobile  { display: block; }
    /* Low sand: same dune curve at ~natural aspect (12vw ≈ undistorted), short
       enough that its lowest dip sits ~30px off the bottom (taller, ~45px, on
       the left where the flip-flops sit). */
    .sand { height: clamp(40px, 12vw, 56px); }
    /* Small umbrella (≤120px tall) tucked down behind the sand, on the right. */
    .umbrella  { left: auto; right: 8%; transform: none;
                 bottom: 10px; height: 120px; width: auto; }
    /* Flip-flops ~half size, low on the left in the tallest part of the sand. */
    .flipflops { left: 8%; bottom: 6px; width: 15vw; max-width: 92px; }
}