/*
 * Link-in-bio page (/links/).
 *
 * A standalone stylesheet, not part of custom.css, because inc/links-page.php
 * dequeues every other stylesheet and script on this route. The page is opened
 * in the Instagram and TikTok in-app browsers on mobile data, and the site's
 * normal payload is ~278KB for a logged-out visitor — 207KB of which is three
 * ABCDiatype weights this page does not use, since it renders in a system font
 * stack on purpose. Loading the whole design system to draw six buttons is the
 * kind of thing that costs taps.
 */
/* ===========================================================================
   Link-in-bio page (/links/, template-links.php)

   Opened almost entirely inside the Instagram and TikTok in-app browsers, on a
   phone, by someone who intends to tap once and leave. So: one column, large
   targets, no site chrome, and the discount code above the links because it is
   the highest-value thing this audience can do.
   =========================================================================== */
.kp-links-page {
    margin: 0;
    background: #00452c;
    background: linear-gradient(170deg, #00452c 0%, #001d13 100%);
    min-height: 100vh;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.kp-links {
    max-width: 520px;
    margin: 0 auto;
    padding: 26px 20px 44px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kp-links__head {
    text-align: center;
}

.kp-links__brand img {
    display: block;
    margin: 0 auto;
    width: 150px;
    /* Explicit, and matching the SVG's 331x125 viewBox. This file carries
       preserveAspectRatio="none", so it stretches to fill whatever box it is
       given rather than fitting inside it — any mismatched height silently
       distorts the wordmark instead of letterboxing it, which is why this was
       squashed and why `height: auto` did not save us. */
    height: 57px;
    /* The green logo would vanish on a green field. */
    filter: brightness(0) invert(1);
}


/* Hero. One unit: eyebrow, headline, code chip — the whole thing is the link to
   /discounts/. This borrows the sidebar discount widget's structure, which is
   already the site's language for this offer, but drops its explanatory
   paragraph: that paragraph is what makes the widget 400px tall, and nobody
   reads a paragraph on a page they scan in four seconds. */
.kp-links__hero {
    display: block;
    text-align: center;
    text-decoration: none;
    background: rgba(78, 235, 169, 0.07);
    border: 1px solid rgba(78, 235, 169, 0.3);
    border-radius: 16px;
    padding: 15px 16px 17px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kp-links__hero:hover,
.kp-links__hero:focus-visible {
    background: rgba(78, 235, 169, 0.12);
    border-color: rgba(78, 235, 169, 0.55);
}

/* This line carries the whole claim, so it is set as a headline rather than a
   label. It replaced an uppercase eyebrow plus a "Save on every paddle"
   slogan: the slogan was the biggest type on the page and the only line that
   said nothing, and it promised paddles when the code works everywhere. */
.kp-links__hero-eyebrow {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #ffffff;
    /* No max-width: at 20px this fits one line inside the 480px content box,
       and wrapping it cost a whole row in a block that has to stay short. */
    margin: 0 0 12px;
}


/* A button, not a text link. Every other block on this page carries a chevron
   that says "tap me"; the hero has none, so without a filled control it reads
   as a banner and the /discounts/ page never gets opened. Solid fill rather
   than an outline so it cannot be confused with the dashed code chip. */
.kp-links__hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 999px;
    background: #4eeba9;
    color: #0d3a25;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.1px;
    text-align: center;
    transition: background 0.15s ease;
}

.kp-links__hero:hover .kp-links__hero-cta,
.kp-links__hero:focus-visible .kp-links__hero-cta {
    background: #6cf3bb;
}

/* Chip over button, both full width. Side by side was tried and abandoned: the
   page is capped at 520px, and "Use code KITCHEN" plus "See all our discounts"
   cannot both hold their text inside that, so they wrapped anyway — just
   unpredictably, at two different heights depending on viewport. Stacking is
   what actually happens at every width, so it is what the CSS now says. */
.kp-links__hero-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* The chip itself: dashed mint, matching the discount banner elsewhere on the
   site so the two read as the same offer in two places. */
.kp-links__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #4eeba9;
    border-radius: 12px;
    padding: 10px 16px;
}

.kp-links__code-icon {
    color: #4eeba9;
    flex: 0 0 auto;
}

.kp-links__code-label {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.kp-links__code-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #4eeba9;
}

.kp-links__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Translucent rather than solid white. Six white blocks on a dark field read as
   a stack of unrelated buttons pasted onto the page; letting the background
   through ties them to it, and the mint border on the featured card then has
   somewhere to sit. No backdrop-filter — there is nothing behind these but a
   flat gradient, so it would cost GPU time on cheap phones and change nothing
   visually. */
.kp-links__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 15px 16px 15px 18px;
    text-decoration: none;
    /* Comfortably above the 44px minimum tap target, because this page is
       nothing but tap targets. */
    min-height: 60px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kp-links__item:hover,
.kp-links__item:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(78, 235, 169, 0.55);
    transform: translateY(-2px);
}

/* The discounts slot earns a stronger treatment: it is the highest-value tap on
   the page and the reason this page exists instead of a Linktree. */
.kp-links__item-text {
    min-width: 0;
}

.kp-links__item-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: -0.1px;
}

/* Inline with the label rather than on its own line, so announcing something
   costs no extra height on a page where height is the budget. */
.kp-links__item-badge {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #4eeba9;
    color: #00301f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kp-links__item-sub {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    /* 0.72 rather than 0.58: at 0.58 on this dark green the sub was close to
       the WCAG AA floor and read as disabled text. It still sits clearly below
       the white label, which is what keeps the label scannable. */
    color: rgba(255, 255, 255, 0.72);
    margin-top: 4px;
}

/* A chevron reads as "this goes somewhere" without needing a word for it. */
.kp-links__item-chev {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease, transform 0.15s ease;
}

.kp-links__item:hover .kp-links__item-chev,
.kp-links__item:focus-visible .kp-links__item-chev {
    color: #4eeba9;
    transform: translateX(2px);
}

/* Foot of the page, under the links. Mint rather than white so they read as
   secondary to the white link cards above — at full white and up under the
   wordmark they behaved like a second nav bar competing with the hero. */
.kp-links__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.kp-links__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 40px clears a thumb target once the 10px gap is counted, and keeps the
       row on one line at 320px. */
    width: 40px;
    height: 40px;
    color: #4eeba9;
    border: 1px solid rgba(78, 235, 169, 0.35);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kp-links__social svg {
    display: block;
}

.kp-links__social a:hover,
.kp-links__social a:focus-visible {
    background: rgba(78, 235, 169, 0.14);
    border-color: rgba(78, 235, 169, 0.6);
}

.kp-links__foot {
    text-align: center;
    margin: 18px 0 0;
}

.kp-links__foot a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .kp-links__item,
    .kp-links__item-chev {
        transition: none;
    }
    .kp-links__item:hover,
    .kp-links__item:focus-visible,
    .kp-links__item:hover .kp-links__item-chev {
        transform: none;
    }
}