/**
 * RP Framework — design tokens, primitives and utilities for the Rankers Blueprint.
 * Kadence child theme: assets/css/rp-framework.css
 *
 * Loaded BEFORE style.css (see functions.php) so every BEM block can consume
 * these tokens. All values are extracted from the SOURCE site
 * (rankersparadise.com — GeneratePress palette + Elementor kit post-9738),
 * so styling stays replica-faithful by construction: change a token here and
 * every consumer follows.
 *
 * Layers (in order):
 *   1. TOKENS      — :root custom properties (--rp-*). The single source of truth.
 *   2. PRIMITIVES  — shared BEM component blocks (.rp-btn, .rp-card).
 *   3. UTILITIES   — small purpose-based helpers (.rp-u-*). Use sparingly.
 *   4. LAYOUT FIX  — restores Gutenberg's native "constrained" content width
 *                    inside Kadence Full-Width page templates (see below).
 *
 * Rules of use:
 *   - New component CSS goes in style.css as its own BEM block and should
 *     reference var(--rp-*) instead of hard-coded literals.
 *   - Never restyle Kadence/WooCommerce globals from here — this framework
 *     manages CUSTOM styling only; the theme owns its own chrome.
 *   - Blueprint propagation: everything here flows into every spawned site.
 */

/* ------------------------------------------------------------------
 * 1. TOKENS
 * ------------------------------------------------------------------ */
:root {
    /* -- Colour · brand / chrome ---------------------------------------
     * 2026-07-06 palette redesign (user design system). Chrome = the dark
     * navy/indigo header, footer, popups. */
    --rp-color-brand:          #150F3D;  /* Deep Indigo — header / footer / popup bg */
    --rp-color-on-brand:       #FFFFFF;  /* Paper White — text/icons on dark chrome */
    --rp-color-canvas:         #0D0B2E;  /* Void Navy — the page canvas behind content */

    /* -- Colour · calls to action --------------------------------------- */
    --rp-color-cta:            #6C4DFF;  /* Violet Pulse — filled buttons */
    --rp-color-cta-hover:      #5A3AE6;  /* darker Violet Pulse for hover */
    --rp-color-on-cta:         #FFFFFF;
    --rp-color-on-cta-hover:   #FFFFFF;

    /* -- Colour · links & vibrant accents ------------------------------- */
    --rp-color-link:           #2F6FFF;  /* Electric Blue — links, primary accent */
    --rp-color-link-hover:     #6C4DFF;  /* Violet Pulse — link hover (readable on white) */
    --rp-color-highlight:      #00E5FF;  /* Cyan Pop — highlights / badges */
    --rp-color-price:          #FFD500;  /* Signal Yellow — prices, ratings, callouts */
    --rp-color-secondary-cta:  #FF8A00;  /* Blaze Orange — secondary CTA / urgency */
    --rp-color-sale:           #FF3B30;  /* Alert Red — sale badges / discounts */

    /* -- Colour · text -------------------------------------------------
     * On the white cards: dark navy text. On the dark canvas/chrome: white
     * (use --rp-color-on-brand). */
    --rp-color-text:           #0D0B2E;  /* Void Navy — body copy on white cards */
    --rp-color-heading:        #0D0B2E;  /* Void Navy — card/product titles */
    --rp-color-contrast:       #0D0B2E;
    --rp-color-contrast-2:     #4A4470;  /* muted indigo — secondary text */
    --rp-color-contrast-3:     #6E6A90;  /* lighter muted indigo */
    --rp-color-meta:           #4A4470;  /* entry meta, secondary text */

    /* -- Colour · surfaces ---------------------------------------------- */
    --rp-color-bg:             #0D0B2E;  /* Void Navy — page canvas (alias of --rp-color-canvas) */
    --rp-color-base:           #EFEFF6;  /* light lavender-grey — subtle light fills */
    --rp-color-base-2:         #F7F7FB;  /* near-white — lighter fills */
    --rp-color-surface:        #FFFFFF;  /* Paper White — cards, content boxes */

    /* -- Colour · forms -------------------------------------------------- */
    --rp-color-input-text:     #0D0B2E;
    --rp-color-input-bg:       #FFFFFF;
    --rp-color-input-border:   #C9C7DA;
    --rp-color-input-focus:    var(--rp-color-link);

    /* -- Typography ------------------------------------------------------
     * Body: GeneratePress (PT Sans). Headings/display: Elementor kit
     * (Roboto 600 / Roboto Slab 400). Fall back to system stack. */
    --rp-font-body:    "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rp-font-heading: "Roboto", "PT Sans", sans-serif;
    --rp-font-display: "Roboto Slab", Georgia, serif;

    --rp-weight-light:    300;   /* source h1, nav links */
    --rp-weight-normal:   400;
    --rp-weight-medium:   500;
    --rp-weight-semibold: 600;   /* source Elementor headings, prices */

    /* Type scale (source: GP h1 40/h2 ~25/h3 20, body 17 on local Kadence) */
    --rp-text-xs:   13px;
    --rp-text-sm:   14px;
    --rp-text-base: 16px;
    --rp-text-md:   17px;
    --rp-text-lg:   20px;
    --rp-text-xl:   25px;
    --rp-text-2xl:  30px;
    --rp-text-3xl:  40px;

    --rp-leading-tight: 1.2;
    --rp-leading:       1.5;   /* source body line-height */

    /* -- Spacing scale -----------------------------------------------------
     * Source rhythm: 10/16/20/24/30/40/48/50px. Named steps, 4px base. */
    --rp-space-3xs: 4px;
    --rp-space-2xs: 8px;
    --rp-space-xs:  10px;
    --rp-space-sm:  16px;
    --rp-space-md:  20px;
    --rp-space-lg:  24px;
    --rp-space-xl:  32px;
    --rp-space-2xl: 40px;
    --rp-space-3xl: 48px;

    /* -- Layout ------------------------------------------------------------ */
    --rp-container:        1055px;  /* GP .grid-container width */
    --rp-container-wide:   1140px;  /* Elementor boxed-section width */
    --rp-section-pad:      48px;    /* vertical section rhythm (30px on mobile) */
    --rp-content-pad:      50px;    /* GP inside-article padding (30px on mobile) */

    /* -- Shape & elevation --------------------------------------------------- */
    --rp-radius-sm: 3px;    /* buttons (established local usage) */
    --rp-radius:    6px;
    --rp-shadow-sm: 0 2px 2px -2px rgba(0, 0, 0, 0.2);  /* source sticky-nav shadow */
    --rp-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);

    /* -- Motion --------------------------------------------------------------- */
    --rp-transition: 200ms ease;
}

/* Mobile rhythm follows the source (50px→30px content padding at 768px). */
@media (max-width: 768px) {
    :root {
        --rp-section-pad: 30px;
        --rp-content-pad: 30px;
    }
}

/* ------------------------------------------------------------------
 * 2. PRIMITIVES — shared BEM component blocks
 * ------------------------------------------------------------------ */

/* .rp-btn — button block matching the source site's two button styles.
 * Default = brand (GP global button); --cta = product ORDER NOW purple. */
.rp-btn {
    display: inline-block;
    background: var(--rp-color-brand);
    color: var(--rp-color-on-brand);
    font-weight: var(--rp-weight-semibold);
    line-height: 1;
    padding: 11px 15px;
    border: 0;
    border-radius: var(--rp-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--rp-transition), color var(--rp-transition);
}
.rp-btn:hover,
.rp-btn:focus {
    background: var(--rp-color-brand);
    color: var(--rp-color-on-brand);
}
.rp-btn--cta {
    background: var(--rp-color-cta);
    color: var(--rp-color-on-cta);
}
.rp-btn--cta:hover,
.rp-btn--cta:focus {
    background: var(--rp-color-cta-hover);
    color: var(--rp-color-on-cta-hover);
}
.rp-btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* .rp-card — plain white content card on the grey page background. */
.rp-card {
    background: var(--rp-color-surface);
    padding: var(--rp-space-sm);
    border-radius: 0; /* source cards are square-cornered */
}

/* ------------------------------------------------------------------
 * 3. UTILITIES — purpose-based helpers, .rp-u-* prefix
 * ------------------------------------------------------------------ */
.rp-u-container {
    max-width: var(--rp-container);
    margin-left: auto;
    margin-right: auto;
}
.rp-u-section {
    padding-top: var(--rp-section-pad);
    padding-bottom: var(--rp-section-pad);
}
.rp-u-surface   { background: var(--rp-color-surface); }
.rp-u-bg        { background: var(--rp-color-bg); }
.rp-u-text-meta { color: var(--rp-color-meta); }
.rp-u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
 * 4. LAYOUT FIX — restore constrained content width on Full-Width templates
 *
 * Kadence's own assets/css/content.min.css only applies its .alignwide /
 * .alignfull width rules inside `.content-container` (block/FSE templates).
 * On a classic "Full Width" page template (used here so a section's
 * background can bleed edge-to-edge, e.g. the Home page's grey Featured
 * section) there is no `.content-container` ancestor, Kadence's own
 * `.entry-content` width constraint is intentionally stripped by that
 * template, AND core WordPress's generic fallback rule for plain children
 * of `.is-layout-constrained` never gets enqueued either — so ordinary
 * (non-aligned) block content inside an alignfull group renders at
 * near-full viewport width instead of the theme's real content width,
 * drifting out of alignment with the header/logo.
 *
 * This restores that missing default using the theme's own native content-
 * size variable (already correctly derived from the Customizer's Content
 * Width + Content Edge Spacing settings — see kadence-edit-settings), so it
 * always tracks whatever those settings are, never a hard-coded pixel value.
 * ------------------------------------------------------------------ */
.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: var(--wp--style--global--content-size, 100%);
    margin-left: auto;
    margin-right: auto;
}
.is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size, var(--wp--style--global--content-size, 100%));
}

/* Full-bleed colour bands (alignfull group blocks — e.g. the homepage's
 * Featured/Popular sections) sit flush against each other and against
 * whatever follows, with no gap. WordPress core gives every top-level block
 * a default ~32px bottom margin (the block-gap fallback); that shows through
 * as an unwanted strip of the page background between two full-bleed bands.
 * Scoped to .alignfull only — ordinary content blocks keep their normal
 * spacing, this just removes the gap for the "stacked colour band" pattern. */
.wp-block-group.alignfull {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * 5. PALETTE CANVAS (2026-07-06 redesign)
 * Dark Void Navy canvas behind all content. White content cards / boxed
 * areas keep their own light background (Kadence palette9 + --rp-color-surface),
 * so the navy shows as the page frame around them. There is no Kadence
 * site-background theme-mod on this install, so it is set here.
 * ------------------------------------------------------------------ */
body,
.wp-site-blocks {
    background-color: var(--rp-color-canvas);
}