@import "./sections/section-common.css";

/* ---------------------------------------------------------------------------
   Layout overrides for the builder export.
   public/styles.css is ID-scoped (specificity 0,1,0); prefixing with `body`
   gives 0,1,1 so these win regardless of stylesheet order. Do NOT prefix with
   #pwb-body-wrap - the builder runtime unwraps that node after load.
   Builder breakpoints are 992px and 480px; custom sections follow the same.
--------------------------------------------------------------------------- */

/* website-base.css starts #pwb-body-wrap at opacity:0, choreographed with the
   builder's own loading screen fading it in once ready - but that loading
   screen (#pwb-loading-wrap) was removed from this codebase entirely, so
   nothing coordinates the fade-in for it to key off. In practice the
   builder's bootstrap script still flips it to opacity:1 on most routes via
   some other signal, but that's unreliable: any route where a Server
   Component does async work before first paint (e.g. /blogs/[slug] awaiting
   its fetch) can render with the wrapper still at opacity:0 - a fully blank
   page despite correct markup underneath. Pin it visible directly; this
   targets the element's own property (safe even though the builder later
   unwraps this node - unlike a descendant selector through it, an override
   on its own opacity doesn't depend on the node persisting). */
body #pwb-body-wrap {
    opacity: 1;
}

/* --- Fixed navbar ------------------------------------------------------- */

/* The navbar itself is hand-built (see sections/navbar.tsx + navbar.css),
   which pins its own token subtree to dark values the same way this file
   used to re-pin these IDs. SME Initiative still gets called out as a live
   announcement rather than a plain nav label - a bright pill with a pulsing
   dot - and stays pinned to its dark values directly here since it's reused
   verbatim (className="nav-sme-link") in both the desktop bar and the
   mobile drawer. */
.nav-sme-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px 16px 24px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #40884859;
    background: #4088481f;
    color: #5fb56c;
    font-family: DM Sans;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.nav-sme-link:hover {
    border-color: #5fb56c;
    background: #34703c;
    color: #ffffff;
}

.nav-sme-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5fb56c;
    flex-shrink: 0;
    animation: nav-sme-pulse 2s ease-out infinite;
}

@keyframes nav-sme-pulse {
    0% {
        box-shadow: 0 0 0 0 #40884859;
    }
    70% {
        box-shadow: 0 0 0 6px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-sme-dot {
        animation: none;
    }
}

/* Anchor targets clear the fixed navbar. */
body .pwb-anchor {
    scroll-margin-top: var(--nav-offset);
}

/* --- Hero --------------------------------------------------------------- */

/* 50vh of empty scroll below the hero left a ~450px void before the first
   section; the fixed 3D canvas does not depend on this height. */
body #i84ba {
    margin-bottom: clamp(96px, 18vh, 200px);
}

/* Bottom-anchored hero copy needs room to breathe above the viewport edge. */
body #i1lwz {
    align-items: flex-end;
    padding-bottom: clamp(48px, 8vh, 80px);
}

/* The ISO chip sits in a wrapper of its own but was never given chip styling.
   Pinned to dark values, like the SME pill above - it sits on the Hero's
   fixed 3D scene, which stays dark in both themes. */
body #izwg2d {
    display: inline-flex;
    width: fit-content;
    align-self: flex-start;
    align-items: center;
    border: 1px solid #ffffff2e;
    border-radius: 999px;
    padding: 6px 14px;
    background: #ffffff14;
    backdrop-filter: blur(8px);
    margin-top: 4px;
}

/* --- Solutions intro ---------------------------------------------------- */

body #ilwyn {
    padding-top: var(--sec-pad-y);
}

body #i1lwz-2-4 {
    padding: 0 var(--sec-pad-x);
}

body #iklwi7 {
    gap: var(--sec-gap);
}

/* --- Features ----------------------------------------------------------- */

/* Every other section on the page is left-aligned with an eyebrow over a
   rule; Features was the only centred one. */
body #ilwyn-2-2 {
    padding-top: calc(var(--sec-pad-y) * 0.55);
    padding-bottom: var(--sec-pad-y);
    align-items: center;
    /* Features now sits between PlatformModules and PowerGrid - both solid
       --bg - instead of running straight into the CTA, so it stays solid
       too. The fade-to-transparent handoff moved to Security, which is now
       the section directly before the CTA scrim. */
    background: var(--bg);
}

body #i1lwz-5-2 {
    justify-content: flex-start;
    padding: 0 var(--sec-pad-x);
}

body #i1lwz-2-6-2,
body #i1lwz-2-6-2-6 {
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sec-gap);
    width: 100%;
}

body #i1lwz-2-6-2-6 {
    gap: 16px;
}

/* Rule under the eyebrow, matching .wwd-top-row. */
body #ispyh-2-3-2-3-2-2-2-3-2-2 {
    display: block;
    width: 100%;
    padding-bottom: 16px;
    border-bottom: var(--rule);
}

body #ispyh-2-2-2-3-2-6,
body #ispyh-2-3-5-2-4 {
    text-align: left;
    max-width: 620px;
}

body #i1lwz-2-4-2-3 {
    padding: var(--sec-gap) var(--sec-pad-x) 0;
    align-items: stretch;
}

/* space-between bottom-aligned the copy, so titles landed at four different
   heights depending on how long each description ran. Stack from the top
   instead - the art is a fixed height, so the titles then line up. */
body #i1lwz-2-4-2-2-3,
body #i1lwz-2-4-2-2-3-2,
body #i1lwz-2-4-2-2-3-2-2,
body #i1lwz-2-4-2-2-3-2-2-2 {
    justify-content: flex-start;
}

/* Fourth card: the builder export only styled three, so match the siblings. */
body #i1lwz-2-4-2-2-3-2-2-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    padding: 20px;
    background-color: var(--pw-user-color-style-18aa8819-e702-4f28-b8e6-ca428ebfcae1);
    border-radius: 8px;
    gap: 24px;
}

body #ipkvji-4-3-2-2-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    min-height: revert;
    gap: 8px;
}

body #ipkvji-4-2-2-2-2 {
    position: relative;
    min-height: revert;
}

/* The export puts text colour on the ID, not the text-style class, so the
   fourth card's copy fell back to black without these. */
body #ispyh-2-2-2-2-2-2-3-2-2-2,
body #ispyh-2-2-2-4-4-2-2-2-2 {
    color: var(--pw-user-color-style-6ce387c8-34d4-4438-91b3-ef15f7563451);
    display: block;
}

body #ispyh-2-2-2-4-4-2-2-2-2 {
    width: 100%;
}

/* Four across instead of three, so the 400px art is far too tall. */
body #iry0if-3,
body #idghoz-3,
body #icg3p7-3,
body #ihzv7k-3 {
    height: clamp(190px, 17vw, 250px);
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    /* The stock art is electric blue - the only non-brand colour block left
       on the page. Easing the saturation lets it sit as deep navy so the
       green accents stay the loudest thing in the section. */
    filter: saturate(0.72) brightness(0.94);
}

/* --- CTA + footer ------------------------------------------------------- */

/* This section sits over the fixed 3D scene, which renders pale grey-blue.
   Measured against it, white body copy fell to 3.65:1 and to 1:1 over the
   bright sphere - effectively invisible. A scrim gives the text a controlled
   backdrop while still letting the scene read through the top of the band. */
body #injpw {
    position: relative;
    isolation: isolate;
}

body #injpw::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #0A0A0A4d 10%,
        #0A0A0Ab8 30%,
        #0A0A0Ae8 58%,
        #0A0A0Afa 100%
    );
}

body #i1lwz-4 {
    position: relative;
    z-index: 1;
}

/* The CTA headline sits on the same fixed 3D scene, via the scrim above -
   pinned to dark values for the same reason as the SME pill and ISO chip. */
body #ispyh-2-2-3-2 {
    color: #408848;
}

body #ispyh-2-2-3-2 .cta-kicker {
    color: #ffffff;
}

/* Both were pinned to 100vh with space-between, which stranded the footer
   columns ~400px below the CTA on tall viewports. */
body #injpw {
    height: auto;
}

body #i1lwz-4 {
    height: auto;
    justify-content: flex-start;
    gap: clamp(64px, 10vh, 120px);
    padding: clamp(120px, 16vh, 200px) var(--sec-pad-x) clamp(32px, 4vh, 48px);
}

/* Empty spacer div that only existed to drive space-between. */
body #i1lwz-2-5 {
    display: none;
}

@media (max-width: 992px) {
    body #iry0if-3,
    body #idghoz-3,
    body #icg3p7-3,
    body #ihzv7k-3 {
        height: 240px;
    }

    /* Headline and supporting copy sat side by side down to 480px, squeezing
       the copy into a ~230px column on tablets. */
    body #iklwi7 {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    body #i1lwz-4 {
        height: auto;
        gap: clamp(48px, 8vh, 80px);
        padding: clamp(96px, 14vh, 140px) var(--sec-pad-x) 32px;
    }
}