/* ============================================================================
   footer.css  (theme update v9, 2026-10-12)
   Footer 4 "Flavor Wall". Markup: footer.php. Data: inc/footer.php.
   Loads after brand-refresh.css (inc/footer.php enqueues it).

   The ink surface and blush accents continue the "Ink luxe" header (D1),
   so the page opens and closes on the same colour. Flavour colour appears
   only where the contract puts it: the tiles, at full strength, with text
   from --on (never mixed toward black, never a fill without all three
   values). The top strip is the wall's own fills, printed by footer.php.

   Motion is progressive: scroll-driven reveals only where the browser
   supports animation-timeline, nothing at all under reduced motion, and no
   animation that runs while the footer is off screen.
   ========================================================================== */

.cd-footer {
    --cd-ink:     #16100C;
    --cd-ink-2:   #1C120D;
    --cd-cream:   #FFF9F5;
    --cd-blush:   #FFB9CD;
    --cd-rose:    #E4738E;
    --cd-text:    rgba(255, 249, 245, 0.72);
    --cd-muted:   rgba(255, 249, 245, 0.62);
    --cd-faint:   rgba(255, 249, 245, 0.56);
    --cd-line:    rgba(255, 249, 245, 0.10);
    --cd-ease:    cubic-bezier(.22, .61, .36, 1);
    --cd-display: var(--font-display, 'Frank Ruhl Libre', Georgia, serif);
    --cd-body:    var(--font-body, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);

    position: relative;
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(255, 185, 205, 0.07), transparent 65%),
        linear-gradient(180deg, var(--cd-ink-2) 0%, var(--cd-ink) 100%);
    color: var(--cd-cream);
    font-family: var(--cd-body);

    /* The footer is below the fold on every page: skip its layout and paint
       until it is about to scroll into view (a free INP/LCP win). */
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
}

.cd-footer a { color: inherit; text-decoration: none; }
.cd-footer a:visited { color: inherit; }
/* Tile text always comes from the contract, never from the footer's cream */
.cd-footer a.cd-footer__rank-link,
.cd-footer a.cd-footer__rank-link:visited { color: var(--on); }
.cd-footer :focus-visible {
    outline: 3px solid var(--cd-blush);
    outline-offset: 3px;
}


/* ============================================================
   STRIP: the eight tile colours, in rank order
============================================================ */

.cd-footer__strip {
    height: 4px;
    background: var(--cd-strip, linear-gradient(90deg, var(--cd-blush), var(--cd-rose)));
    transform-origin: left center;
}


/* ============================================================
   TOP: brand + wall
============================================================ */

.cd-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
    padding-block: clamp(52px, 6vw, 80px) clamp(40px, 5vw, 60px);
}

.cd-footer__logo {
    display: inline-block;
    font-family: var(--cd-display);
    font-weight: 900;
    font-size: clamp(2.75rem, 4.4vw, 3.75rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--cd-cream);
}
.cd-footer__logo em { font-style: normal; color: var(--cd-blush); }

.cd-footer__tag {
    margin-top: 18px;
    max-width: 30ch;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 249, 245, 0.66);
}

/* "On the menu now": live dates from crumbledrop_week_range() */
.cd-footer__now {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 26px;
    padding: 11px 18px 11px 14px;
    border: 1px solid rgba(255, 249, 245, 0.16);
    border-radius: 999px;
    background: rgba(255, 249, 245, 0.04);
    font-size: 0.8125rem;
    transition: border-color 300ms ease, background-color 300ms ease;
}
.cd-footer__now:hover { border-color: rgba(255, 185, 205, 0.55); background: rgba(255, 185, 205, 0.06); }
.cd-footer__now-label { color: var(--cd-muted); }
.cd-footer__now-date  { color: var(--cd-cream); font-weight: 700; white-space: nowrap; }

.cd-footer__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cd-blush);
}
.cd-footer__pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--cd-blush);
    opacity: 0;
}


/* ============================================================
   THE WALL
============================================================ */

.cd-footer__wall { container-type: inline-size; min-width: 0; }

.cd-footer__wall-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 18px;
}
.cd-footer__wall-title {
    margin: 0;
    font-family: var(--cd-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--cd-cream);
}
.cd-footer__wall-more {
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--cd-blush);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.cd-footer__wall-more:hover { color: var(--cd-blush); }

.cd-footer__ranks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@container (min-width: 620px) {
    .cd-footer__ranks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cd-footer__rank { display: flex; min-width: 0; }

.cd-footer__rank-link {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 136px;
    padding: 16px 18px 18px;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--flavor-color);
    color: var(--on);
    /* hairline so very dark or very pale fills still end against the ink */
    box-shadow: inset 0 0 0 1px rgba(255, 249, 245, 0.12);
    transition: transform 500ms var(--cd-ease), box-shadow 500ms var(--cd-ease);
}

.cd-footer__rank-no {
    position: relative;
    z-index: 1;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on) 72%, transparent);
}

/* Flavour names: Plus Jakarta Sans 800, -0.035em, line-height 1.0 (locked) */
.cd-footer__rank-name {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 18px;
    max-width: 80%;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
    text-wrap: balance;
    hyphens: manual;
}

.cd-footer__rank-count {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    max-width: 62%;
    font-size: 0.71875rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--on) 72%, transparent);
}

/* The cookie, sitting on its own colour (D7), tucked into the corner */
.cd-footer__rank-art {
    position: absolute;
    z-index: 0;
    right: -13%;
    bottom: -22%;
    width: 50%;
    aspect-ratio: 1;
    transform: rotate(-10deg);
    transition: transform 700ms var(--cd-ease);
    pointer-events: none;
}
.cd-footer__rank-art img,
.cd-footer__rank-art svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(22, 16, 12, 0.28));
}

/* Light sweep on hover */
.cd-footer__rank-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 46%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .cd-footer__rank-link:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 0 0 1px rgba(255, 249, 245, 0.18), 0 22px 40px -18px rgba(0, 0, 0, 0.75);
    }
    .cd-footer__rank-link:hover .cd-footer__rank-art { transform: rotate(0deg) scale(1.07); }
    .cd-footer__rank-link:hover::after {
        transform: translateX(120%);
        transition: transform 900ms var(--cd-ease);
    }
}

.cd-footer__wall-note {
    margin-top: 14px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cd-faint);
}


/* ============================================================
   LINK COLUMNS
============================================================ */

.cd-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    padding-block: 44px;
    border-top: 1px solid var(--cd-line);
}

.cd-footer__col-h {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-blush);
}

.cd-footer__links { margin: 0; padding: 0; list-style: none; }
.cd-footer__links li + li { margin-top: 12px; }

/* Underline draws in from the left on hover (blush on dark, D11) */
.cd-footer__link {
    display: inline;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--cd-text);
    background-image: linear-gradient(var(--cd-blush), var(--cd-blush));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    padding-bottom: 3px;
    transition: color 250ms ease, background-size 400ms var(--cd-ease);
}
.cd-footer__link:hover { color: var(--cd-cream); background-size: 100% 2px; }


/* ============================================================
   LEGAL
============================================================ */

.cd-footer__legal {
    margin: 0;
    padding: 22px 26px;
    border: 1px solid rgba(255, 249, 245, 0.12);
    border-radius: 18px;
    background: rgba(255, 249, 245, 0.03);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--cd-muted);
}
.cd-footer__legal a {
    color: rgba(255, 249, 245, 0.86);
    text-decoration: underline;
    text-decoration-color: var(--cd-blush);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.cd-footer__legal a:hover { color: var(--cd-cream); }

.cd-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block: 26px 34px;
    font-size: 0.8125rem;
    color: var(--cd-faint);
}
.cd-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cd-footer__legal-links a { color: rgba(255, 249, 245, 0.66); transition: color 250ms ease; }
.cd-footer__legal-links a:hover { color: var(--cd-cream); }


/* ============================================================
   >= 860px
============================================================ */

@media (min-width: 860px) {
    .cd-footer__nav { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .cd-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
    .cd-footer__rank-link { min-height: 152px; padding: 18px 20px 20px; }
    .cd-footer__rank-name { font-size: 1.25rem; }
}

@media (min-width: 1020px) {
    .cd-footer__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); align-items: start; }
    .cd-footer__top--solo { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   MOTION (progressive, and none at all under reduced motion)
============================================================ */

@media (prefers-reduced-motion: no-preference) {

    .cd-footer__pulse::after { animation: cd-pulse 2.4s var(--cd-ease) infinite; }

    @supports (animation-timeline: view()) {
        .cd-footer__strip {
            animation: cd-draw linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }
        .cd-footer__rank {
            animation: cd-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-footer__rank-link,
    .cd-footer__rank-art,
    .cd-footer__rank-link::after,
    .cd-footer__link { transition: none; }
}

@keyframes cd-pulse {
    0%   { transform: scale(0.6); opacity: 0.7; }
    80%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes cd-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes cd-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}


/* ============================================================
   ACCESSIBILITY AND PRINT
============================================================ */

@media (forced-colors: active) {
    .cd-footer__rank-link { border: 1px solid CanvasText; }
    .cd-footer__strip { display: none; }
}

@media print {
    .cd-footer { background: none; color: #000; content-visibility: visible; }
    .cd-footer__strip,
    .cd-footer__now,
    .cd-footer__wall,
    .cd-footer__nav { display: none; }
    .cd-footer__legal { border: 0; padding: 0; color: #000; }
}