/* =============================================================================
   kc-global.css — Kelley Construction global layer (W4): tokens, utilities and
   the small components shared by the site header and footer.
   Track P (no build). Loaded first of the kc- files, after Elementor's CSS (C12).
   Loaded only where an Elementor Theme Builder header or footer renders
   (inc/kc-assets.php, C4).

   Primitives mirror the Kelley design system (Designs/ds/tokens.css, --ds-*),
   extracted from kelleyconstructioninc.com on 2026-11-05.

   Elementor kit aliases (T9): Elementor declares its global colours on
   body.elementor-kit-{id}, not on :root (Elementor doc §5), so the token block is
   declared on ":root, body". At :root the aliases fall back to the hex value; on
   body they read the kit, so editing a kit colour reaches these tokens.
   ============================================================================= */

:root,
body {
    /* --- Primitives (only this file reads them) --------------------------- */
    --kc-color-green-600: var(--e-global-color-primary, #00833c);   /* kit "Primary" */
    --kc-color-green-800: #006b31;                                   /* design system: hover / text on tint */
    --kc-color-red-700: #b83a2f;                                     /* design system: AA-safe action fill */
    --kc-color-red-800: #9e3128;                                     /* action hover */
    --kc-color-ink-900: var(--e-global-color-text, #2c2c2c);         /* kit "Text" */
    --kc-color-grey-600: #686868;                                    /* body copy on the live site */
    --kc-color-grey-300: #ccc;
    --kc-color-grey-200: var(--e-global-color-2f05fc1, #e4e7ec);     /* kit custom "Border Color" */
    --kc-color-grey-100: #efefef;                                    /* tinted bands */
    --kc-color-white: #fff;
    --kc-color-gold-600: #c98a00;                                    /* rating stars (decorative) */

    /* --- Semantic colours (components read these) ------------------------- */
    /* Allowed pairs (T11, H8):
       text-inverse on brand 4.87:1 · text-inverse on action 5.70:1 ·
       text on surface 13.97:1 · text-muted on surface-tint 4.85:1 ·
       link-on-tint on surface-tint 5.8:1 (brand on surface-tint is 4.24:1: large text only) */
    --kc-color-brand: var(--kc-color-green-600);
    --kc-color-brand-strong: var(--kc-color-green-800);
    --kc-color-action: var(--kc-color-red-700);
    --kc-color-action-hover: var(--kc-color-red-800);
    --kc-color-text: var(--kc-color-ink-900);
    --kc-color-text-muted: var(--kc-color-grey-600);
    --kc-color-text-inverse: var(--kc-color-white);
    --kc-color-surface: var(--kc-color-white);
    --kc-color-surface-tint: var(--kc-color-grey-100);
    --kc-color-surface-muted: var(--kc-color-grey-200);
    --kc-color-border: var(--kc-color-grey-200);
    --kc-color-border-strong: var(--kc-color-grey-300);
    --kc-color-link-on-tint: var(--kc-color-green-800);
    --kc-color-rating: var(--kc-color-gold-600);
    --kc-color-on-brand-subtle: rgb(255 255 255 / 15%);              /* icon discs on the green bar */

    /* --- Fonts (theme assets/fonts/style.css; Jost is the design-file stand-in) */
    --kc-font-display: "Futura PT", "Jost", sans-serif;              /* only weight 900 is loaded */
    --kc-font-body: "Futura PT Book", "Futura PT", "Jost", sans-serif;
    --kc-font-ui: "Roboto", sans-serif;                              /* Elementor kit font */

    /* --- Fluid type scale (T13): new scale built on top of the site's type.
       Each token grows linearly from 375px to 1280px; min and max in rem. ---- */
    --kc-font-size-xs: clamp(0.75rem, 0.75rem, 0.75rem);                        /* 12 → 12 */
    --kc-font-size-sm: clamp(0.8125rem, 0.7866rem + 0.1105vw, 0.875rem);       /* 13 → 14 */
    --kc-font-size-base: clamp(0.9375rem, 0.9116rem + 0.1105vw, 1rem);         /* 15 → 16 */
    --kc-font-size-md: clamp(1rem, 0.9741rem + 0.1105vw, 1.0625rem);           /* 16 → 17 */
    --kc-font-size-lg: clamp(1.0625rem, 1.0366rem + 0.1105vw, 1.125rem);       /* 17 → 18 */
    --kc-font-size-xl: clamp(1.1875rem, 1.1616rem + 0.1105vw, 1.25rem);        /* 19 → 20 */
    --kc-font-size-2xl: clamp(1.625rem, 1.5732rem + 0.221vw, 1.75rem);         /* 26 → 28 */
    --kc-line-height-tight: 1.1;
    --kc-line-height-snug: 1.3;
    --kc-line-height-body: 1.45;

    /* --- Space (design system scale, 4px base) ------------------------------ */
    --kc-space-1: 0.25rem;  /* 4 */
    --kc-space-2: 0.5rem;   /* 8 */
    --kc-space-3: 0.75rem;  /* 12 */
    --kc-space-4: 1rem;     /* 16 */
    --kc-space-5: 1.5rem;   /* 24 */
    --kc-space-6: 2rem;     /* 32 */
    --kc-space-7: 3rem;     /* 48 */

    /* --- Layout ------------------------------------------------------------- */
    --kc-container-max: 100rem;       /* 1600px header/footer frame (round 1 #1; HF-01 drew 1280px) */
    --kc-control-height: 3rem;        /* 48px buttons */
    --kc-control-height-lg: 3.25rem;  /* 52px phone action buttons */
    --kc-border-width-strong: 2px;    /* button outline on the green bar (design HF-01 D) */
    --kc-border-width-accent: 3px;    /* office card accent rule (design HF-03) */

    /* --- Effects, motion, layers, focus --------------------------------------- */
    --kc-shadow-panel: 0 0.875rem 1.5rem rgb(0 0 0 / 8%);
    --kc-duration-fast: 200ms;
    --kc-ease-standard: ease;
    --kc-z-action-bar: 98;
    --kc-z-header: 99;
    --kc-focus-width: 3px;
    --kc-focus-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Utility: kc-visually-hidden — text for screen readers only.
   ----------------------------------------------------------------------------- */
.kc-visually-hidden {
    position: absolute !important; /* utilities may use !important (S4) */
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* -----------------------------------------------------------------------------
   Block: kc-rating — star rating link. Used in the header utility bar and the
   footer brand column. Public tokens: --kc-rating-font-size.
   ----------------------------------------------------------------------------- */
:root {
    --kc-rating-font-size: var(--kc-font-size-sm);
}

.kc-rating {
    font-size: var(--kc-rating-font-size);
    color: var(--kc-color-text);
    text-decoration: underline;
}

.kc-rating__stars {
    display: inline-block;
    margin-inline-end: var(--kc-space-1);
    letter-spacing: 1px; /* optical spacing between star glyphs */
    color: var(--kc-color-rating);
    text-decoration: none;
}