/* =============================================================================
   site.css — our own CSS layer, on top of the cloned Elementor site. Every value
   that is ours comes from tokens.css (loaded before this file). We never edit the
   generated Elementor CSS under /wp-content or /wp-includes.

   Sections:
     1. Hero video fixes (mobile height + decorative iframe guard)
     2. Auto-hide sticky header
     3. Footer contact (address + map, school pages)
     4. School-tenant hiding (drop other-school references)
     5. Back-to-top floating button
   ============================================================================= */

/* -- 1. Hero video fixes ---------------------------------------------------- */
/* Three school hero background-video sections (ICSE Mira Road, IGCSE Bhayandar,
   CBSE Mahuva) kept their desktop 565px min-height on mobile, making the hero a
   too-tall portrait crop. Match the other school pages (~200px) on small screens
   so the video keeps a normal landscape ratio. */
@media (max-width: 767px) {
    .elementor-element-0787926, /* Kanakia International School (CISCE) Mira Road */
    .elementor-element-d055c83, /* Kanakia International School (IGCSE) Bhayandar */
    .elementor-element-0e0357d { /* RBK Hanumant High School (CBSE) Mahuva */
        min-height: var(--kk-hero-mobile-min-h) !important;
        height: auto !important;
    }
    /* The theme sets overflow-x:hidden on the body element but not html, so any
       stray element width still scrolls the page horizontally on mobile. Clip
       html too. clip keeps position:sticky working (unlike hidden); hidden is the
       fallback for older browsers. */
    html { overflow-x: hidden; overflow-x: clip; }
}
/* Decorative hero videos must never expose interactive YouTube chrome. */
.elementor-background-video-container iframe,
.elementor-background-video-embed { pointer-events: none !important; }
/* Hotspot/timeline widget (main page "Our Legacy"): its markers are direct
   children of a static .elementor-widget-container (no positioned .e-hotspots
   wrapper in this markup), so the percentage-positioned markers had no containing
   block, scattered, and pushed the page into horizontal scroll on phones. Make the
   container their containing block and clip any marker sitting at the very edge. */
.elementor-widget-hotspot .elementor-widget-container { position: relative; overflow: hidden; }

/* -- 2. Auto-hide sticky header --------------------------------------------- */
/* Near the top the header is DOCKED: it scrolls away WITH the page like an in-flow
   header. Once fully scrolled out — past its own height — the reveal-on-scroll-UP /
   hide-on-scroll-DOWN behaviour takes over (transform driven from site.js). It is
   position:FIXED throughout (not sticky): the promo popup's scroll-lock turns the
   body into a clipped viewport-height box, which breaks position:sticky. fixed is
   viewport-relative and immune to that; #kk-hdr-spacer reserves the header's height
   in normal flow so content never jumps under the out-of-flow header.
   --kk-hdr-full = the header's full height (spacer); --kk-hdr-h = its VISIBLE height
   (0 when hidden) so a page's sticky sub-nav sits just below the header. */
body header.elementor-location-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--kk-z-header); will-change: transform;
}
#kk-hdr-spacer { height: var(--kk-hdr-full, 0px); flex: 0 0 auto; }
/* The landing header is transparent (overlaid on the hero). Once the page is
   scrolled it would otherwise show page content bleeding through — so give it a
   frosted ~60%-opaque background then. It stays fully transparent at the very top. */
body.kk-hdr-stuck header.elementor-location-header {
    background: var(--kk-header-frost);
    -webkit-backdrop-filter: blur(var(--kk-header-blur)); backdrop-filter: blur(var(--kk-header-blur));
    box-shadow: var(--kk-shadow-header);
}
@media print { body header.elementor-location-header { position: static; transform: none; } }
/* Mobile: the header just scrolls away WITH the page like any other block — no fixed
   overlay, no frosted background, no JS-driven show/hide. Real mobile browsers fire resize
   events during ordinary scrolling (address-bar chrome collapsing/expanding) that made the
   fixed + auto-hide behaviour above unreliable there; an ordinary in-flow header sidesteps
   the problem entirely instead of chasing it. #kk-hdr-spacer only exists to reserve space
   for the FIXED header, so it's redundant once the header is back in normal flow — without
   this it would double the gap above the hero (the header's own flow height AND the spacer). */
@media (max-width: 767px) {
    /* will-change:auto matters as much as the position reset. will-change:transform
       creates a stacking context on its own, and a static element's z-index is
       ignored — so the header became a z-index:auto context that TRAPPED the open
       nav dropdown (z-index 9997) inside it. The hero sits later in the document at
       the same root level, so its background video painted straight over the menu.
       Nothing here animates transform anyway (initStickyHeader returns early on
       mobile), so the hint is pure cost. */
    body header.elementor-location-header {
        position: static; transform: none !important; will-change: auto;
    }
    #kk-hdr-spacer { display: none; }
}

/* -- 3. Footer contact (address + map, school pages) ------------------------ */
/* Two equal columns: [ logo strip + address ] | [ map ]. The .kis-footer-* markup
   is injected by site.js only on a school page, so these rules are inert elsewhere. */
.kis-footer-contact { display: flex; flex-wrap: wrap; gap: var(--kk-space-lg); align-items: stretch; }
.kis-footer-contact > .kis-footer-left,
.kis-footer-contact > .kis-footer-map { flex: 1 1 0; min-width: 0; }
.kis-footer-map { min-height: var(--kk-footer-map-min-h); }
.kis-footer-map iframe { display: block; width: 100%; height: 100%; min-height: var(--kk-footer-map-min-h); border: 0; border-radius: var(--kk-radius-md); }
/* Logos: modest, grouped; the strip wraps to a second line on very narrow screens. */
.kis-footer-left > *:has(> .elementor-widget-image) { flex-wrap: wrap !important; }
.kis-footer-left .elementor-widget-image { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; }
.kis-footer-left .elementor-widget-image img { height: var(--kk-footer-logo-h) !important; width: auto !important; max-width: 100% !important; }
@media (min-width: 768px) {
    /* Give the contact its own full-width row (social column wraps below). */
    footer .e-con-inner { flex-wrap: wrap !important; }
    footer .e-con-inner > .e-con:has(.kis-footer-contact) { flex: 1 1 100% !important; max-width: 100% !important; }
    footer .e-con-inner > .e-con:has(.elementor-widget-social-icons) { flex: 1 1 100% !important; max-width: 100% !important; }
}
@media (max-width: 767px) {
    .kis-footer-contact { flex-direction: column; align-items: stretch; }
    .kis-footer-contact > .kis-footer-left,
    .kis-footer-contact > .kis-footer-map { flex: 0 0 auto !important; }
    .kis-footer-map iframe { height: var(--kk-footer-map-min-h); }
}

/* -- 4. School-tenant hiding ------------------------------------------------ */
/* On a school site, keep the full header but drop the "Schools" dropdown
   (menu-item-2943) and the footer's other-school + quick-links columns, so the
   site never links out to the other schools. Gated by the .school-tenant body
   class the layout adds only in a school context. */
.school-tenant header .menu-item-2943,                 /* header "Schools" nav dropdown */
.school-tenant .elementor-element-26ee98b,             /* footer "Schools" heading */
.school-tenant .elementor-element-fd09222,             /* footer divider (Schools) */
.school-tenant .elementor-element-bcfd4cc,             /* footer other-schools list */
.school-tenant .elementor-element-1dd106f,             /* footer "Quick Links" heading */
.school-tenant .elementor-element-39d8222,             /* footer divider (Quick Links) */
.school-tenant .kk-tenant-hide,                        /* kk- pages: anything a school site must not show (e.g. job-openings / newsletter CTAs) */
.school-tenant .elementor-element-4374965 {            /* footer Quick Links */
    display: none !important;
}

/* -- 5. Back-to-top floating button ----------------------------------------- */
#kk-to-top {
    position: fixed; right: var(--kk-space-md); bottom: var(--kk-space-lg);
    width: var(--kk-fab-size); height: var(--kk-fab-size); padding: 0; border: 0;
    border-radius: var(--kk-radius-round); background: var(--kk-brand); color: var(--kk-on-brand);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--kk-shadow-float);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
    z-index: var(--kk-z-fab);
}
#kk-to-top.kk-show { opacity: 1; visibility: visible; transform: translateY(0); }
#kk-to-top:hover { background: var(--kk-brand-hover); }
#kk-to-top:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
@media (max-width: 767px) { #kk-to-top { right: var(--kk-space-sm); bottom: 18px; width: var(--kk-fab-size-sm); height: var(--kk-fab-size-sm); } }
@media print { #kk-to-top { display: none !important; } }

/* ---- mobile nav: slow-connection fallback --------------------------------
   The hamburger is driven by Elementor Pro's frontend JS, which loads at the end of a long
   synchronous script chain; on a poor mobile link the button is dead until it arrives. A small
   inline handler (in _Layout, right after the header) marks the tapped toggle .kk-open the instant
   it's pressed. Force that toggle's dropdown — and the nested sub-menus, which share the same
   collapsed class — open, overriding Elementor's `max-height:0 !important`. The handler hands the
   menu back to Elementor once its frontend JS has loaded, so this only fills the pre-load gap. */
.elementor-menu-toggle.kk-open + .elementor-nav-menu--dropdown {
    max-height: 80vh !important;
    overflow-y: auto !important;
}
.elementor-menu-toggle.kk-open + .elementor-nav-menu--dropdown .sub-menu.elementor-nav-menu--dropdown {
    max-height: none !important;
}

/* ---- Elementor promo popup: kill the "flash at page bottom" -----------------
   The popup/lightbox positioning lives in Elementor's CONDITIONAL CSS
   (elementor dialog.min.css + elementor-pro popup.min.css) which is loaded
   on-demand only when a popup shows. So a page-load promo popup's markup is
   injected and briefly painted in normal flow at the BOTTOM of the page before
   that CSS arrives and pins/centres it. site.css loads in <head>, so mirror the
   essential pinning + centring here — the modal is then a fixed, centred overlay
   from first paint. (The session-frequency gate still wins: it appends a
   `.elementor-popup-modal{display:none !important}` rule to suppress a repeat.) */
.dialog-type-lightbox { position: fixed; inset: 0; height: 100%; width: 100%; z-index: 9999; }
.elementor-popup-modal.dialog-type-lightbox { display: flex; }
.elementor-popup-modal .dialog-widget-content { margin: auto; }

/* ---- DB-driven promo popup (site.js initDbPromoPopup) ---------------------- */
.kk-promo-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.6); }
.kk-promo-box { position: relative; max-width: min(92vw, 620px); }
.kk-promo-link { display: block; }
.kk-promo-img { display: block; width: 100%; max-height: 88vh; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
/* Close button matches the live site: a plain dark × inside the top-right corner —
   no circle, no background, no shadow. */
.kk-promo-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #172422; font-size: 28px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.kk-promo-close:hover { background: transparent; opacity: .65; }
.kk-promo-close:focus-visible { outline: 3px solid var(--kk-focus-ring, #2fa59f); outline-offset: 2px; }
@media (max-width: 480px) { .kk-promo-close { top: 6px; right: 8px; width: 28px; height: 28px; font-size: 25px; } }

/* DB promo popup: per-row entrance animations (fade / slide from top, bottom, left, right) + fade-out. */
/* The animation lives only on the .kk-promo-anim-* classes so the base .kk-promo-box is plainly
   visible; site.js drops the anim class after the entrance so the popup can never stay stuck hidden. */
.kk-promo-anim-fade, .kk-promo-anim-slide-down, .kk-promo-anim-slide-up,
.kk-promo-anim-slide-left, .kk-promo-anim-slide-right { animation-duration: .3s; animation-timing-function: ease; animation-fill-mode: both; }
.kk-promo-anim-fade        { animation-name: kk-promo-fade; }
.kk-promo-anim-slide-down  { animation-name: kk-promo-down; }
.kk-promo-anim-slide-up    { animation-name: kk-promo-up; }
.kk-promo-anim-slide-left  { animation-name: kk-promo-left; }
.kk-promo-anim-slide-right { animation-name: kk-promo-right; }
.kk-promo-box.kk-promo-out { animation: kk-promo-out .2s ease both; }
@keyframes kk-promo-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kk-promo-down  { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes kk-promo-up    { from { opacity: 0; transform: translateY(60px); }  to { opacity: 1; transform: none; } }
@keyframes kk-promo-left  { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes kk-promo-right { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes kk-promo-out   { from { opacity: 1; } to { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .kk-promo-anim-fade, .kk-promo-anim-slide-down, .kk-promo-anim-slide-up, .kk-promo-anim-slide-left, .kk-promo-anim-slide-right { animation-duration: .01ms; } }

/* ---- "Enquire Now" CTA (site.js initEnquireNowCta) -------------------------
   Peach/brown highlight, per client request. Applied to the injected nav item,
   the pre-existing (now-wired) Elementor "Enquire Now" header buttons, and any
   [data-kk-enquire-open] trigger (e.g. Kanakia Kids' former bottom form). */
.kk-enquire-btn { background: var(--kk-enquire-bg); border: 1px solid var(--kk-enquire-bg); color: var(--kk-enquire-on); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.kk-enquire-btn:hover { background: var(--kk-enquire-bg-hover); border-color: var(--kk-enquire-bg-hover); }
/* Elementor's own "Enquire Now" buttons already carry their own box/shape
   classes — only override colour there. Everywhere else (our injected nav
   item, the Kanakia Kids trigger), box it ourselves. */
.kk-enquire-btn:not(.elementor-button) { display: inline-block; padding: 9px 20px; border-radius: var(--kk-radius-md); font: 600 14px/1.2 var(--kk-font-body); text-decoration: none; margin: 0 6px; }
/* In the header nav strip the pill would otherwise fill the full strip height (its
   border touching top and bottom). Centre it in the strip and trim its vertical
   padding so it reads as a button sitting inside the strip, with room above/below.
   Higher specificity than Elementor's own .elementor-item padding, so it wins. */
header.elementor-location-header .elementor-nav-menu li.kk-enquire-item { align-items: center; }
header.elementor-location-header .elementor-nav-menu li.kk-enquire-item > a.kk-enquire-btn { padding-top: 7px; padding-bottom: 7px; line-height: 1.3; }

/* ---- Enquiry popup: overlay + the shared EnquiryForm (school dropdown) -----
   Centred like the promo popup (.kk-promo-overlay) — align-items:center still
   lets the box scroll into view if it's taller than the viewport, since the
   overlay itself scrolls (overflow-y:auto). */
.kk-enq-overlay { position: fixed; inset: 0; z-index: var(--kk-z-popup); display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: rgba(0,0,0,.6); overflow-y: auto; }
.kk-enq-overlay[hidden] { display: none; }
.kk-enq-box { position: relative; width: 100%; max-width: 480px; background: var(--kk-surface); border-radius: var(--kk-radius-md); box-shadow: var(--kk-shadow-float); padding: 28px 24px 20px; margin: auto; }
.kk-enq-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--kk-ink); font-size: 26px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.kk-enq-close:hover { opacity: .65; }
.kk-enq-close:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
body.kk-enq-lock { overflow: hidden; }
@media (max-width: 480px) { .kk-enq-box { padding: 22px 16px 16px; } }

/* ---- Enquiry form: Mobile field country-code select (client request) ------ */
.kk-enq-mobile { display: flex; gap: 8px; }
.kk-enq-mobile__code { flex: 0 0 auto; width: auto; max-width: 40%; }
.kk-enq-mobile__num { flex: 1 1 auto; }

/* ---- Enquiry form inside the popup: theme the fields ourselves --------------
   The popup pages (main home, Kanakia Kids) don't load the per-page vendor CSS
   the landing enquiry band relies on, so the form there fell back to native
   controls (bare labels, a small unstyled submit). Style it to the site theme.
   Scoped to .kk-enq-box__body so the school landing form is untouched. */
.kk-enq-box__body #enquiryForm label { display: block; margin: 12px 0 5px; font: 600 13px/1.3 var(--kk-font-body); color: var(--kk-ink); }
.kk-enq-box__body #enquiryForm input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=hidden]),
.kk-enq-box__body #enquiryForm select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cfd6d5; border-radius: var(--kk-radius-md); background: #fff; color: var(--kk-ink); font: 400 15px/1.3 var(--kk-font-body); }
.kk-enq-box__body #enquiryForm input:focus,
.kk-enq-box__body #enquiryForm select:focus { outline: none; border-color: var(--kk-brand); box-shadow: 0 0 0 3px var(--kk-focus-ring); }
.kk-enq-box__body #enquiryForm .kk-enq-mobile__code { width: auto; max-width: 40%; }
.kk-enq-box__body #enquiryForm .kk-enq-mobile__num { width: auto; }
.kk-enq-box__body #enquiryForm .gender-options { display: flex; gap: 18px; margin-top: 6px; }
.kk-enq-box__body #enquiryForm .gender-options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.kk-enq-box__body #enquiryForm .gender-options input { width: auto; }
.kk-enq-box__body #enquiryForm .btn-style { width: 100%; margin-top: 16px; padding: 12px 20px; border: 0; border-radius: var(--kk-radius-md); background: var(--kk-brand); color: #fff; font: 600 15px/1.2 var(--kk-font-body); cursor: pointer; transition: background-color .15s ease; }
.kk-enq-box__body #enquiryForm .btn-style:hover { background: var(--kk-brand-hover); }

/* ---- Kanakia Kids: replaces the dead bottom admission form with the popup trigger ---- */
.kk-kids-enquire { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kk-space-sm); }
.kk-kids-enquire__lead { margin: 0; font-size: 18px; }
.kk-kids-enquire__btn { font-size: 16px; padding: 12px 28px; }