/* ==========================================================================
   THE KOMANDO CLUB — LANDING CHROME
   The landing page's PHP-rendered header and footer (.kc-lp-nav, .kc-lp-footer,
   rendered by kcRenderLandingNav() / kcRenderLandingFooter()), their scope
   tokens, and the button system they share with the landing's own Buttons
   blocks.

   ⚠⚠ THIS IS A SEPARATE FILE FOR ONE REASON: IT IS THE ONLY PART OF OUR CSS
   THAT HAS TO SURVIVE ON A MEMBERPRESS READYLAUNCH PAGE.
   MeprReadyLaunchCtrl::remove_styles() walks $wp_styles->queue and deregisters
   every handle not on its allowlist, so the main bundle
   (dist/css/frontend/style.css) is simply absent on the checkout and thank-you
   screens — where Kc\Membership\KcMemberPressReadyLaunch injects this very nav
   and footer in place of MemberPress's own blue bar. Built standalone to
   dist/css/frontend/landing-chrome.css and allowlisted by handle, it is the
   smallest thing that can be, at ~200 lines against club.css's 2,200.

   ⚠ HOW THIS BROKE ONCE, so it is not reintroduced: these rules used to live in
   the Customizer's Additional CSS, which survives ReadyLaunch because
   wp_custom_css_cb() PRINTS a <style> tag instead of enqueueing. When the
   landing CSS moved into the theme on 2026-08-13 the Customizer copy was
   emptied — and the checkout pages silently lost every one of these rules,
   rendering the nav as a line of unstyled blue text on white. Diagnostic
   signature: the landing nav markup is present in the HTML but has no styling
   at all, only on /register/<product>/ and /thank-you/.

   Imported by components/index.css BEFORE club.css, so the landing page itself
   is unchanged: the tokens are still declared ahead of everything that reads
   them, and every selector here is uniquely prefixed.
   ========================================================================== */

/* --- Scope tokens (shared with .kc-lp) --------------------------------- */
/* ⚠ EVERY CROSS-FILE TOKEN CARRIES A LITERAL FALLBACK, and that is what makes
   this file work on its own. komando-club.css declares --kc-* on :root and is
   one of the stylesheets ReadyLaunch strips, so on a checkout page `var(--kc-navy)`
   resolves to NOTHING — which invalidated .kc-lp-nav's gradient and left a
   transparent bar with a white logo and white links on it, i.e. an invisible nav.
   Measured: backgroundImage computed to `none`. Do not "tidy" these fallbacks
   away; the comment below about inheriting from :root is true only in the main
   bundle. */
.kc-lp,
.kc-lp-nav,
.kc-lp-footer {
    --kcl-navy:        var(--kc-navy, #002664);
    --kcl-navy-2:      #0A3B85;
    --kcl-navy-3:      #001740;
    --kcl-cyan:        var(--kc-cyan, #07D7FC);
    --kcl-violet:      #7B61FF;
    --kcl-teal:        #14B8A6;
    --kcl-coral:       #FF6B6B;
    --kcl-bg:          #F3F6FC;
    --kcl-surface:     #FFFFFF;
    --kcl-ink:         #0E1A33;
    --kcl-muted:       #66738C;
    --kcl-border:      #E4E9F4;
    --kcl-radius:      var(--kc-radius-lg, 20px);
    --kcl-radius-sm:   var(--kc-radius-md, 14px);
    --kcl-wrap:        1180px;
    --kcl-pad:         32px;

    --kcl-font-display: var(--kc-font-display, 'Sora', system-ui, sans-serif);
    --kcl-font-body:    var(--kc-font-body, 'Inter', system-ui, sans-serif);
    --kcl-font-mono:    var(--kc-font-mono, 'IBM Plex Mono', ui-monospace, monospace);

    font-family: var(--kcl-font-body);
    color: var(--kcl-ink);
    -webkit-font-smoothing: antialiased;
}

.kc-lp h1,
.kc-lp h2,
.kc-lp h3,
.kc-lp h4,
.kc-lp-nav h1,
.kc-lp-footer h2 {
    font-family: var(--kcl-font-display);
}

/* --- 7.2 Nav (PHP-rendered chrome) ------------------------------------- */

.kc-lp-nav {
    background: linear-gradient(175deg, var(--kcl-navy-3) 0%, var(--kcl-navy) 60%, var(--kcl-navy-2) 100%);
    box-shadow: 0 30px 50px -20px rgba(0, 23, 64, 0.45);
    position: sticky;
    top: 0;
    /* Above MemberPress's floating field labels on the ReadyLaunch checkout
       (label.placeholder-text is position:absolute; z-index:999 in
       memberpress/css/ui/theme.css) — at 500 a focused field's label scrolled
       over this bar. Still far under the admin bar (99999) and MemberPress's
       own menus (99998+). */
    z-index: 1000;
}
.kc-lp-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px var(--kcl-pad);
    max-width: var(--kcl-wrap);
    margin: 0 auto;
}
.kc-lp-nav a { text-decoration: none; }
.kc-lp-logo img,
.kc-lp-logo { display: block; }
.kc-lp-logo img { height: 46px; width: auto; }
.kc-lp-nav-links { display: flex; align-items: center; gap: 32px; }
/* :visited is named explicitly on every nav link. MemberPress's ReadyLaunch
   theme.css ships `a:visited { color: #06429E }`, and a class plus a
   pseudo-class outranks a bare class — so on the checkout chrome, "Sign in"
   went navy-on-navy for anyone who had ever been to /login (i.e. every member
   changing plans). Reported 2026-09-04 as "too faint to read". */
.kc-lp-nav-links a,
.kc-lp-nav-links a:visited {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.15s ease;
}
.kc-lp-nav-links a:hover,
.kc-lp-nav-links a:focus-visible { color: #fff; }
.kc-lp-nav-right { display: flex; align-items: center; gap: 18px; }
.kc-lp-signin,
.kc-lp-signin:visited {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}
.kc-lp-signin:hover,
.kc-lp-signin:focus-visible { color: #fff; }

/* --- 7.3 Buttons ------------------------------------------------------- */
/* Core Buttons block (.wp-block-button + kc-btn-* className) and the
   PHP-rendered nav/footer anchors (.kc-lp-btn) share one look. */

.kc-lp-btn,
.kc-lp .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--kcl-radius-sm);
    font-family: var(--kcl-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.kc-lp .wp-block-button__link {
    padding: 14px 28px;
    font-size: 15px;
}

/* cyan — primary CTA (:visited for the same ReadyLaunch a:visited reason as the nav links) */
.kc-lp-btn-cta,
.kc-lp-btn-cta:visited,
.kc-lp .kc-btn-cta .wp-block-button__link {
    background: linear-gradient(135deg, var(--kcl-cyan), #4FE3F7);
    color: var(--kcl-navy-3);
    box-shadow: 0 8px 22px rgba(7, 215, 252, 0.35);
}
.kc-lp-btn-cta:hover,
.kc-lp .kc-btn-cta .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(7, 215, 252, 0.45);
    color: var(--kcl-navy-3);
}

/* ghost — on light backgrounds */
.kc-lp .kc-btn-ghost .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--kcl-border);
    color: var(--kcl-ink);
}
.kc-lp .kc-btn-ghost .wp-block-button__link:hover {
    border-color: var(--kcl-navy);
    color: var(--kcl-ink);
}

/* panel — translucent, on navy backgrounds */
.kc-lp-btn-panel,
.kc-lp .kc-btn-panel .wp-block-button__link {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.kc-lp-btn-panel:hover,
.kc-lp .kc-btn-panel .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Core Buttons container spacing */
.kc-lp .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
    margin-bottom: 30px;
}
.kc-lp .wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

/* --- 7.11 Footer (PHP-rendered chrome) ------------------------------- */

.kc-lp-footer {
    background: var(--kcl-navy-3);
    padding: 40px 0;
}
.kc-lp-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--kcl-wrap);
    margin: 0 auto;
    padding: 0 var(--kcl-pad);
}
.kc-lp-footer img {
    height: 16px;
    width: auto;
    display: block;
}
.kc-lp-footer p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 !important;
}
.kc-lp-footer-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.kc-lp-footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
.kc-lp-footer-links a:hover {
    color: #fff;
}

/* --- Responsive (chrome only; the rest is in club.css 7.12) ----------- */

@media screen and (max-width: 920px) {
    .kc-lp-nav-links {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .kc-lp-footer-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kc-lp-btn {
        transition: none;
    }
    .kc-lp-btn:hover {
        transform: none;
    }
}