/* =============================================================================
   Design tokens — the single source of truth for the colours, spacing, sizes,
   radii, shadows and z-index that WE own (the bits added on top of the cloned
   Elementor site). Change a value here and it updates everywhere our own CSS/JS
   uses it.

   Scope: these tokens govern our layer only (site.css, the hand-written blocks in
   _Layout.cshtml, and inline styles set by site.js). The generated Elementor CSS
   under /wp-content and /wp-includes is vendor/read-only and is NOT tokenised.

   Naming: --kk-<group>-<name>.  kk = Kanakia (our prefix, never clashes with
   Elementor's --e-* / theme vars).
   ============================================================================= */
:root {
    /* -- Brand colours ----------------------------------------------------- */
    --kk-brand: #2fa59f;            /* teal — buttons, accents, close bar      */
    --kk-brand-hover: #268b86;      /* darker teal — hover state               */
    --kk-on-brand: #fff;            /* text/icon on a brand-coloured surface   */

    /* -- Surfaces & effects ------------------------------------------------ */
    --kk-header-frost: rgba(255, 255, 255, 0.6);   /* scrolled header backdrop  */
    --kk-header-blur: 10px;
    --kk-shadow-header: 0 2px 14px rgba(0, 0, 0, .08);
    --kk-shadow-float: 0 6px 18px rgba(0, 0, 0, .22);   /* back-to-top button   */
    --kk-focus-ring: rgba(47, 165, 159, .4);            /* brand @ 40% — focus  */

    /* -- Spacing ----------------------------------------------------------- */
    --kk-space-sm: 16px;
    --kk-space-md: 22px;
    --kk-space-lg: 24px;

    /* -- Radii ------------------------------------------------------------- */
    --kk-radius-md: 8px;            /* footer map, cards                       */
    --kk-radius-round: 50%;         /* circular FAB                            */

    /* -- Typography (mirror the Elementor global kit families) ------------- */
    --kk-font-heading: "Poppins", sans-serif;
    --kk-font-body: "Lato", sans-serif;

    /* -- Layout ------------------------------------------------------------ */
    --kk-content-max: 1140px;      /* boxed content width (Elementor default)  */

    /* -- Sizes ------------------------------------------------------------- */
    --kk-fab-size: 46px;           /* floating back-to-top button (desktop)   */
    --kk-fab-size-sm: 42px;        /* …on small screens                       */
    --kk-footer-map-min-h: 220px;  /* footer contact map min height           */
    --kk-hero-mobile-min-h: 200px; /* school hero video min height on mobile  */
    --kk-footer-logo-h: 42px;      /* footer accreditation logo height        */

    /* -- Header height (live values set by the auto-hide header script) ----- */
    --kk-hdr-h: 0px;               /* VISIBLE header height (0 when hidden)    */
    --kk-hdr-full: 0px;            /* full header height (flow spacer)         */

    /* -- Enquire Now CTA (peach/brown highlight, client-requested) --------- */
    --kk-enquire-bg: #e8b58c;
    --kk-enquire-bg-hover: #dba372;
    --kk-enquire-on: #3a2418;

    /* -- Generic surface / ink (popup card) --------------------------------- */
    --kk-surface: #fff;
    --kk-ink: #172422;

    /* -- Z-index scale ----------------------------------------------------- */
    --kk-z-header: 100;
    --kk-z-fab: 9990;
    --kk-z-popup: 100000;

    /* -- Breakpoints (reference only — CSS @media can't read custom props;
          keep these in sync with the media queries in site.css) ------------ */
    --kk-bp-mobile-max: 767px;     /* <= mobile  |  >= 768px is tablet/desktop */
}