/* ===========================================================================
   Klaviyo sign-up form — design-system override

   Third-party form (company TkWQCc, form RFUqNG) injected by main.js. Its
   markup and dashboard styling are not ours; this file re-skins it to the
   PURO system, and fixes what Klaviyo does to it on a phone.

   MODELLED ON the CSPL league prompt (LeagueUpdatesPopup.tsx + the shared
   control classes in Modal.tsx), which is the same system written down:
   bone ground, one heavy rule, transparent bordered field, black primary
   button in upright condensed, utility type for labels.

   WHY EVERYTHING IS !important
   Klaviyo writes its design as inline style attributes on every node, and an
   inline style beats any normal stylesheet rule. Remove one !important and
   that declaration silently stops applying.

   WHICH SELECTORS ARE SAFE
   Classes like `go1898909958` are build-hashed and change without notice —
   never select on them. Stable: .klaviyo-form, .klaviyo-form-richtext,
   .klaviyo-emailinput, .klaviyo-form-button, .klaviyo-close-form, and the
   [data-testid="..."] attributes.

   The pop-up renders into our document, so tokens.css gives it :root and the
   self-hosted faces for free, and the global square/no-shadow reset there is
   what removes the drop shadow and the circular close button.
   =========================================================================== */

/* The scrim. Klaviyo ships rgba(20,20,20,0.6), which is a second ground
   fighting a bone card. CSPL's modal uses ink at 25% with a blur; same here,
   so the page reads as dimmed rather than replaced. */
[data-kl-scroll-locking-modal="true"] {
    background-color: color-mix(in srgb, var(--black) 25%, transparent) !important;
    backdrop-filter: blur(3px) !important;
}

/* The panel. Bone ground and one heavy rule — the system's way of saying
   "this is a separate sheet" without a shadow or a colour change.

   Padding is deliberately NOT touched on desktop: the photo column bleeds to
   the panel edge on a -20px margin tuned to Klaviyo's 20px, and moving one
   without the other opens a gap. */
form.klaviyo-form {
    background-color: var(--surface) !important;
    border: var(--rule-heavy-w) solid var(--rule-heavy) !important;
}

/* Klaviyo paints the field's wrapper with the old #A1CBCC — the teal doing
   the one thing the system forbids, a second ground inside a surface that
   already has one. These wrappers are pure layout, so they are all cleared. */
[data-testid="form-component"] {
    background-color: transparent !important;
}

/* --- Type ----------------------------------------------------------------
   Ground is bone now, so everything that was white becomes --ink. */

/* "JOIN / THE CLUB" names a section, so it takes the oblique rule. The span
   carries its own inline Arial Black and must be overridden separately or it
   wins over the h1. */
.klaviyo-form-richtext h1,
.klaviyo-form-richtext h1 span {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    font-size: var(--t-h1) !important;
    line-height: var(--lh-h1) !important;
    letter-spacing: var(--ls-h1) !important;
}

.klaviyo-form-richtext p,
.klaviyo-form-richtext p span {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: var(--lh-body) !important;
    color: var(--ink-secondary) !important;
}

/* Klaviyo appends a hidden <input type="submit"> to every form and leaves it
   on the browser default, which is Arial. It never paints, but it is the last
   Arial left in the document and cheap to close. */
form.klaviyo-form input {
    font-family: var(--font-body) !important;
}

/* --- Field ---------------------------------------------------------------
   CSPL's fieldClass: a transparent box delineated by a hairline, body face,
   44px minimum so it is a comfortable touch target. */
.klaviyo-emailinput input[type="email"] {
    background-color: transparent !important;
    border: var(--rule-w) solid var(--hairline) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: var(--t-body) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    min-height: 44px !important;
    padding: 10px 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.klaviyo-emailinput input[type="email"]:focus {
    border-color: var(--court) !important;
    outline: none !important;
}

/* Klaviyo styles the placeholder separately from the input — Arial Black at
   2px tracking — so inheriting from the field is not enough; the face has to
   be restated here or the placeholder alone stays off-system. */
.klaviyo-emailinput input[type="email"]::placeholder {
    color: var(--ink-tertiary) !important;
    font-family: var(--font-body) !important;
    font-size: var(--t-body) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* --- Buttons -------------------------------------------------------------
   Buttons are names of THINGS, so they are upright condensed, not oblique
   and not Courier. Black fill, bone type, red on hover — CSPL's buttonPrimary
   exactly. */
.klaviyo-form-button {
    background-color: var(--black) !important;
    color: var(--ink-inverse) !important;
    border: none !important;
    font-family: var(--font-display) !important;
    font-style: normal !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    min-height: 44px !important;
    padding: var(--s3) var(--s4) !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 150ms !important;
}

.klaviyo-form-button:hover {
    background-color: var(--red) !important;
}

/* Secondary ("NOT TODAY"). Both buttons carry the same stable class, so the
   dismiss is identified by its row being the last in the column. A decline
   should not compete with the action, so it drops to fine print — which is
   utility type, per the system.
   Its data-action-id is 01KKMGSN1VS6CAB76TW1BJQCG5 if a more literal hook is
   ever wanted, but that id is regenerated whenever the form is rebuilt in the
   dashboard, where this structural rule survives. */
[data-testid="form-row"]:last-child .klaviyo-form-button {
    background-color: transparent !important;
    color: var(--ink-secondary) !important;   /* interactive: 6.7:1, not the 3.1:1 tertiary */
    font-family: var(--font-util) !important;
    font-size: var(--t-label) !important;
    font-weight: 400 !important;
    letter-spacing: var(--ls-label) !important;
    min-height: 0 !important;
    padding: var(--s2) 0 !important;
}

[data-testid="form-row"]:last-child .klaviyo-form-button:hover {
    background-color: transparent !important;
    color: var(--ink) !important;
    text-decoration: underline !important;
}

/* --- Close ---------------------------------------------------------------
   The circle was filled with the old #A1CBCC. tokens.css has already squared
   it; this empties the fill. On desktop the control sits over the photo, so
   the mark stays light there and flips to ink on mobile where the photo is
   not shown. */
.klaviyo-close-form {
    height: 32px !important;
    width: 32px !important;
    margin: var(--s2) var(--s2) 0 0 !important;
}

.klaviyo-close-form svg circle {
    fill: transparent !important;
    stroke: transparent !important;
}

.klaviyo-close-form svg path {
    stroke: var(--ink-inverse) !important;
}

form.klaviyo-form :focus-visible,
.klaviyo-close-form:focus-visible {
    outline: 2px solid var(--court) !important;
    outline-offset: 2px !important;
}

/* ===========================================================================
   Teaser

   Dismissing the form leaves a tab on screen. Klaviyo ships it centred on the
   bottom edge, rounded at the top, with its label set in Arial Black — three
   things this system does not do. It becomes a plain black tab in the corner,
   labelled like every other button: upright condensed, not oblique.

   tokens.css has already squared the 10px top corners and the circular close.
   =========================================================================== */

/* The site's #navigation is sticky to the bottom of the viewport at every
   breakpoint, and this tab is position:fixed, so anchoring it to bottom:0
   would park it on top of the nav. --nav-height is published by
   trackNavHeight() in main.js and falls back to 0 when the nav is not up
   (the splash screen, or a standalone page that has no nav at all). */
[class*="kl-teaser"] {
    left: auto !important;
    right: var(--s5) !important;
    bottom: calc(var(--nav-height, 0px) + var(--s3)) !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
}

[class*="kl-teaser"] [class*="Teaser-pointer"] {
    background-color: var(--black) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    /* Right padding clears the close control, which is brought inside the tab
       below rather than left floating above it on the page ground. */
    padding: var(--s3) var(--s7) var(--s3) var(--s5) !important;
}

/* The label is inline Arial Black. A teaser names a thing, so it takes the
   upright condensed cut that every button on the site uses. */
[class*="kl-teaser"] span,
[class*="kl-teaser"] div {
    font-family: var(--font-display) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-inverse) !important;
}

/* Klaviyo hangs the close 16px outside the tab, where it sits on the page
   ground with nothing behind it. Brought inside and centred on the black. */
[class*="kl-teaser"] .klaviyo-close-form {
    top: 50% !important;
    right: var(--s3) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    height: 20px !important;
    width: 20px !important;
    margin: 0 !important;
}

[class*="kl-teaser"] .klaviyo-close-form svg path {
    stroke: var(--ink-inverse) !important;
}

/* --- The phone variant ------------------------------------------------------
   Klaviyo picks the teaser by user agent, and phones get a different one: a
   120px square pinned to the TOP-LEFT, clipped to a triangle, with the label
   rotated 45 degrees and split across two lines ("SIGN UP" / "NOW!") in
   Arial Black. Everything below undoes that geometry so the phone sees the
   same black corner tab as the desktop: bottom-right, one line, above the
   nav. Copy for the split label is mapped in main.js (KLAVIYO_TEASER_COPY). */
[class*="kl-teaser"] {
    top: auto !important;
    height: auto !important;
}

[class*="kl-teaser"] [data-testid="animated-teaser"] {
    height: auto !important;
    width: auto !important;
}

[class*="kl-teaser"] [class*="Teaser-pointer"] {
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* The rotated, offset inner box becomes a plain block. */
[class*="kl-teaser"] [class*="Teaser-pointer"] > div {
    transform: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    background-color: transparent !important;
}

/* The two stacked label lines sit on one row. */
[class*="kl-teaser"] [id^="rich-text"] {
    display: flex !important;
    justify-content: center !important;
    gap: 0.3em !important;
    width: auto !important;
}

[class*="kl-teaser"] [id^="rich-text"] > div {
    white-space: nowrap !important;
}

[class*="kl-teaser"] strong {
    font-weight: 700 !important;
}

/* The nested wrappers each carry a body line-height; flatten them so the
   tab is the same 44px as the desktop one. */
[class*="kl-teaser"] [class*="Teaser-pointer"] div,
[class*="kl-teaser"] [class*="Teaser-pointer"] span,
[class*="kl-teaser"] [class*="Teaser-pointer"] strong {
    line-height: 1 !important;
}

/* ===========================================================================
   Narrow

   Klaviyo does not serve a mobile form. It ships the same 600px desktop panel
   and shrinks it with `transform: scale(0.65)` plus -105px side margins, so
   15px body copy lands at about 9.7px and the touch targets shrink with it.

   Undoing that scale is the single biggest fix in this file. What replaces it
   is CSPL's mobile treatment: a full-width sheet on the bottom edge carrying
   one heavy rule along its top.
   =========================================================================== */

@media screen and (max-width: 700px) {

    /* Kill the scale hack and the negative margins that compensated for it. */
    [data-kl-scroll-locking-modal="true"] > div {
        transform: none !important;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        align-self: flex-end !important;
    }

    /* Sit the sheet on the bottom edge. */
    [data-kl-scroll-locking-modal="true"] {
        align-items: flex-end !important;
        justify-content: stretch !important;
        backdrop-filter: blur(2px) !important;
    }

    [data-testid="POPUP"],
    [data-testid="modal-form-container"] {
        width: 100% !important;
    }

    /* One rule along the top edge only: the other three sides are the screen. */
    form.klaviyo-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        border: none !important;
        border-top: var(--rule-heavy-w) solid var(--rule-heavy) !important;
        padding: var(--s5) var(--s4) var(--s4) !important;
    }

    /* The left column carries a 400px minimum for the desktop photo to sit
       against. On a sheet that is just dead space. */
    form.klaviyo-form > div:first-of-type {
        min-height: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* The photo column: 200px against a 600px panel, unreadable at 390px and
       it would push the field below the fold. */
    form.klaviyo-form > div:last-of-type {
        display: none !important;
    }

    .klaviyo-form-richtext h1,
    .klaviyo-form-richtext h1 span {
        font-size: var(--t-h2) !important;
        line-height: var(--lh-h2) !important;
    }

    /* Over bone now that the photo is gone. Scoped to the modal container so
       it cannot reach the teaser's own close, which stays light on black. */
    [data-testid="modal-form-container"] .klaviyo-close-form svg path {
        stroke: var(--ink) !important;
    }
}

/* The teaser is deliberately NOT restyled per breakpoint: it is the same
   black corner tab at every width. Only the sheet behind it changes shape. */

/* ===========================================================================
   Phones: the tab lives in the header, top-left.

   The header row on a phone is [ logo, centred ] [ cart badge, right ], and
   its left third is empty. A one-line tab would run into the logo, so the
   label sits on two lines -- which is how Klaviyo's own phone variant splits
   it -- and the tab is vertically centred on the header the way the cart
   badge is. Up here it covers no scrolling content and never meets the nav.
   Overrides the corner placement above; the base rules still supply the
   colours, faces and the close mark. Later in the file, so it wins.
   =========================================================================== */
@media screen and (max-width: 600px) {
    [class*="kl-teaser"] {
        top: 10vh !important;            /* the condensed header is 20vh tall */
        bottom: auto !important;
        left: 10px !important;           /* the cart badge's inset, mirrored */
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    [class*="kl-teaser"] [class*="Teaser-pointer"] {
        height: auto !important;
        min-height: 44px !important;
        max-width: 108px !important;
        /* 28px on the right is the 20px close mark plus its 8px inset. */
        padding: var(--s2) 28px var(--s2) var(--s3) !important;
    }

    /* Two lines: the phone variant's two nodes stack; the single-node variant
       wraps inside the same width. */
    [class*="kl-teaser"] [id^="rich-text"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    [class*="kl-teaser"] [id^="rich-text"] > div {
        white-space: normal !important;
        text-align: left !important;
    }

    [class*="kl-teaser"] span,
    [class*="kl-teaser"] div,
    [class*="kl-teaser"] strong {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    [class*="kl-teaser"] .klaviyo-close-form {
        right: var(--s2) !important;
    }
}