/* ==========================================================================
   KILLA X PABLO — redesign design system
   Premium / minimal / high-whitespace. No Tailwind, no framework.
   Loaded only on templates that opt in (kxp_redesign_assets()).
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    /* Colour — white/black/light-grey core, red used strictly as accent */
    --kxp-white:      #ffffff;
    --kxp-black:      #0a0a0a;
    --kxp-grey-50:    #f5f5f5;
    --kxp-grey-100:   #ebebeb;
    --kxp-grey-300:   #d4d4d4;
    --kxp-grey-500:   #8a8a8a;
    --kxp-grey-700:   #4a4a4a;
    --kxp-accent:     #e10600;
    --kxp-accent-dk:  #b30500;

    /* Type — overridden live by the font picker */
    --kxp-font-display: 'Archivo', system-ui, sans-serif;
    --kxp-font-body:    'Inter', system-ui, sans-serif;

    /* Fluid type scale. Ceilings are deliberate: on an ultrawide the vw terms
       would otherwise run the display sizes past what reads as premium. */
    --kxp-step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
    --kxp-step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
    --kxp-step-1:  clamp(1.20rem, 1.05rem + 0.70vw, 1.45rem);
    --kxp-step-2:  clamp(1.60rem, 1.25rem + 1.60vw, 2.25rem);
    --kxp-step-3:  clamp(2.20rem, 1.40rem + 3.60vw, 3.60rem);
    --kxp-step-4:  clamp(3.00rem, 1.20rem + 8.00vw, 5.75rem);

    /* Space */
    --kxp-gutter:  clamp(1.5rem, 4vw, 3rem);
    --kxp-section: clamp(5rem, 12vw, 11rem);
    --kxp-max:     1520px;
    --kxp-max-text: 62ch;

    /* Motion */
    --kxp-ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --kxp-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --kxp-dur:     0.7s;

    /* The octagon chamfer — brand signature, see .kxp-cta / .kxp-card */
    --kxp-chamfer: 10px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--kxp-white);
    color: var(--kxp-black);
    font-family: var(--kxp-font-body);
    font-size: var(--kxp-step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--kxp-font-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; }
p { margin: 0; }
::selection { background: var(--kxp-accent); color: var(--kxp-white); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.kxp-shell   { width: 100%; max-width: var(--kxp-max); margin-inline: auto; padding-inline: var(--kxp-gutter); }
.kxp-section { padding-block: var(--kxp-section); }
.kxp-section--grey { background: var(--kxp-grey-50); }
.kxp-section--dark { background: var(--kxp-black); color: var(--kxp-white); }

/* ── Type helpers ───────────────────────────────────────────────────────── */
.kxp-eyebrow {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-h1 { font-size: var(--kxp-step-4); text-transform: uppercase; }
.kxp-h2 { font-size: var(--kxp-step-3); text-transform: uppercase; }
.kxp-h3 { font-size: var(--kxp-step-2); }
.kxp-lead { font-size: var(--kxp-step-1); line-height: 1.5; color: var(--kxp-grey-700); max-width: var(--kxp-max-text); }
.kxp-body { max-width: var(--kxp-max-text); color: var(--kxp-grey-700); }
.kxp-section--dark .kxp-lead,
.kxp-section--dark .kxp-body { color: var(--kxp-grey-300); }

/* ── CTA — chamfered corner nods to the octagon ─────────────────────────── */
.kxp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1.05em 2.4em;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--kxp-black);
    color: var(--kxp-white);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
    transition: background var(--kxp-dur) var(--kxp-ease), transform 0.35s var(--kxp-ease);
    will-change: transform;
}
.kxp-cta:hover  { background: var(--kxp-accent); transform: translateY(-2px); }
.kxp-cta:active { transform: translateY(0); }
.kxp-cta--light { background: var(--kxp-white); color: var(--kxp-black); }
.kxp-cta--light:hover { background: var(--kxp-accent); color: var(--kxp-white); }
.kxp-cta__arrow { transition: transform 0.35s var(--kxp-ease); }
.kxp-cta:hover .kxp-cta__arrow { transform: translateX(4px); }

/* ── Focus — visible, never removed ─────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--kxp-accent);
    outline-offset: 3px;
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.kxp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--kxp-ease), transform 0.9s var(--kxp-ease);
    transition-delay: var(--kxp-delay, 0ms);
}
.kxp-reveal.is-in { opacity: 1; transform: none; }

/* Masked line-by-line rise, used on the big statements */
.kxp-rise { display: block; overflow: hidden; }
.kxp-rise > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1s var(--kxp-ease);
    transition-delay: var(--kxp-delay, 0ms);
}
.kxp-rise.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .kxp-reveal { opacity: 1; transform: none; }
    .kxp-rise > span { transform: none; }
}

/* ── Screen-reader-only text ────────────────────────────────────────────────
   WordPress and WooCommerce mark up text meant only for screen readers with
   this class and expect the theme to hide it. The redesign never defined it,
   so every price range printed its spoken version on screen as well —
   "8.90 € – 79.00 €Price range: 8.90 € through 79.00 €" (#122). Clipped
   rather than display:none, which would take it away from screen readers too. */
.screen-reader-text,
.wc-block-components-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}