/* ============================================================
   Site-wide mobile polish (mirrored WordPress pages).
   Loaded after the theme CSS on every page so these rules win.
   Scope: small-screen navigation, hero type scale, footer.
   ============================================================ */

/* ------------------------------------------------------------
   1. Mobile menu: sub-menus must never leave the flow.
   SmartMenus (the Elementor nav script) repositions sub-menus
   with inline absolute offsets on tap/hover, which pushed them
   off the left edge of the screen. Inside the full-screen
   mobile dropdown the sub-menus are part of the list, always
   visible, full width — no script positioning allowed.
   ------------------------------------------------------------ */
/* The closed mobile menu is a full-screen position:fixed overlay that
   Elementor hides with visibility/opacity only (display stays block so it
   can fade). The sub-menu visibility:visible override below punches through
   that hidden state, which made the closed menu's links an invisible
   tap-catcher floating over every page: taps and swipes anywhere on the
   site landed on phantom menu links instead of the content beneath. A
   closed menu must never be interactive, whatever its descendants do. */
.header nav.elementor-nav-menu--dropdown[aria-hidden="true"] {
    pointer-events: none;
}

@media (max-width: 767px) {
    .header .menuBox nav.elementor-nav-menu--dropdown ul.elementor-nav-menu li ul.sub-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    .header .menuBox nav.elementor-nav-menu--dropdown ul.elementor-nav-menu li ul.sub-menu li a {
        white-space: normal;
    }
    /* The whole dropdown scrolls; individual items never clip. */
    .header .menuBox nav.elementor-nav-menu--dropdown .row {
        overflow-x: hidden;
    }
}

/* ------------------------------------------------------------
   2. Hero headline scale on phones: the inner-page heroes
   dropped to 30-34px, far quieter than the desktop statement
   type. Scale them with the viewport like the homepage hero.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .videoWrap .title .elementor-heading-title,
    .inrvideoWrap .title .elementor-heading-title {
        font-size: clamp(38px, 10vw, 48px);
        line-height: 1.08;
        letter-spacing: -0.5px;
    }
    .inrvideoWrap .elementor-widget-text-editor p {
        font-size: 17px;
        line-height: 27px;
    }
    .bannerWrap .title .elementor-heading-title {
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.1;
    }
    .privacyWrap .title .elementor-heading-title {
        font-size: clamp(38px, 10vw, 46px);
    }
    /* Section headings keep pace with the larger heroes. */
    .scnTitle .elementor-heading-title {
        font-size: clamp(30px, 8.2vw, 38px);
        line-height: 1.18;
    }
}

/* ------------------------------------------------------------
   3. Footer: long unbroken strings (the enquiries email) were
   clipped at the right edge on narrow screens.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .footer .box {
        min-width: 0;
    }
    .footer .box .elementor-icon-list-items li,
    .footer .box .elementor-icon-list-items li a,
    .footer .box .elementor-icon-list-items li .elementor-icon-list-text {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    /* The enquiries email is the longest string in the footer; at 12px
       it fits its 165px column on one line instead of breaking mid-word. */
    .footer .box5 .elementor-icon-list-items li a .elementor-icon-list-text {
        font-size: 12px;
        letter-spacing: -0.1px;
    }
}


/* ------------------------------------------------------------
   Footer G icon spin (17.7 notes). A slow globe-style rotateY.
   The class selector out-specifies the additional1.css
   "* { animation: none !important }" kill-switch because
   !important declarations compete on specificity.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    @keyframes gg-logo-spin {
        from { transform: perspective(600px) rotateY(0deg); }
        to { transform: perspective(600px) rotateY(360deg); }
    }
    .footer .logoiconBox img {
        animation: gg-logo-spin 7s linear infinite !important;
    }
}

/* ------------------------------------------------------------
   Applications index (17.7 notes): hero heading sits lower in
   the banner instead of vertically centred.
   ------------------------------------------------------------ */
.elementor-19 .elementor-element.elementor-element-1f768fb {
    --justify-content: flex-end !important;
}
.elementor-19 .elementor-element.elementor-element-948af54 {
    --padding-top: 120px !important;
    --padding-bottom: 72px !important;
}

/* ------------------------------------------------------------
   Applications index (17.7 notes): soft fade-up reveal on the
   intro title, replacing the disabled theme rotate animation.
   19.7 fix: this used to hang off the theme's own in-viewport-once
   class, but plugins.js never applies it on the mirrored pages, so
   the heading stayed at opacity 0 for good and read as a gap. The
   hidden state is now applied by cta-reveal.js, so the heading is
   visible whenever the script does not run. The selector still
   out-specifies the additional1.css reveal kill-switch.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .elementor-19 .elementor-element-be6bf1c.apps-title-anim .elementor-heading-title {
        opacity: 0 !important;
        transform: translateY(32px) !important;
        transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }
    .elementor-19 .elementor-element-be6bf1c.apps-title-anim-in .elementor-heading-title {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   Applications index (18.7 review): pin every card's "Read more"
   to a shared baseline. Cards in a row already stretch to equal
   height; the text column becomes a flex column and the button
   drops to its bottom edge regardless of copy length.
   ------------------------------------------------------------ */
.environmentContent .grideBoxes > .box > .supportBox {
    height: 100%;
}
.environmentContent .grideBoxes > .box > .supportBox > .e-con:last-child {
    flex-grow: 1 !important;
    align-items: stretch !important;
}
.environmentContent .grideBoxes > .box > .supportBox > .e-con:last-child > .e-con:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.environmentContent .grideBoxes > .box .button3 {
    margin-top: auto !important;
    padding-top: 18px;
}
/* Data Centres is the only card with a leftover invisible "Enquire"
   (MS Forms) button below Read more — hide it so all six match. */
.environmentContent .grideBoxes > .box .button2 {
    display: none !important;
}

/* ------------------------------------------------------------
   About page (18.7 notes): "Built by People. Driven by
   Innovation." felt bland - soft fade-up reveal on the copy and
   a staggered card-by-card reveal on the team grid, in the same
   style as the applications sub pages. The .team-* classes are
   added by scroll-reveals.js, so content is never hidden when
   scripts fail; !important out-ranks the additional1.css
   animation kill-switch.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .team-copy-anim {
        opacity: 0;
        transform: translateY(28px) !important;
        transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    .team-copy-anim.team-copy-anim-in {
        opacity: 1;
        transform: none !important;
    }
    .team-anim > .box {
        opacity: 0;
        transform: translateY(28px) !important;
        transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    .team-anim.team-anim-in > .box {
        opacity: 1;
        transform: none !important;
    }
    .team-anim.team-anim-in > .box:nth-child(2) { transition-delay: 0.13s !important; }
    .team-anim.team-anim-in > .box:nth-child(3) { transition-delay: 0.26s !important; }
    .team-anim.team-anim-in > .box:nth-child(4) { transition-delay: 0.39s !important; }
    .team-anim.team-anim-in > .box:nth-child(5) { transition-delay: 0.52s !important; }
}

/* ------------------------------------------------------------
   About page (18.7 notes): the closing "Discover how..." heading
   rises word-by-word on scroll, exactly like the applications
   sub page CTA. Words are wrapped in .cta-word spans by
   scroll-reveals.js; without JS the heading stays untouched.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    /* display needs !important: the theme sets
       .scnTitle .elementor-heading-title span { display: block } */
    .cta-anim .cta-word {
        display: inline-block !important;
        opacity: 0;
        transform: translateY(0.55em) !important;
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        transition-delay: calc(var(--w) * 55ms) !important;
    }
    .cta-anim.cta-anim-in .cta-word {
        opacity: 1;
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   Contact page (18.7 notes): enquiry cards fade up one after the
   other on scroll, and the card headers go brand green on hover
   like the footer links.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .enquiry-anim > .box {
        opacity: 0;
        transform: translateY(28px) !important;
        transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    .enquiry-anim.enquiry-anim-in > .box {
        opacity: 1;
        transform: none !important;
    }
    .enquiry-anim.enquiry-anim-in > .box:nth-child(2) { transition-delay: 0.15s !important; }
}
.enquiryBox .box .nameTitle .elementor-heading-title {
    transition: color 0.35s ease !important;
}
.enquiryBox .box:hover .nameTitle .elementor-heading-title {
    color: #73A94A;
}