/**
 * NARPO — design tokens.
 * Brand colours, type scale, spacing, easings. Used by every block.
 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden !important;
}

:root {
    /* Brand --------------------------------------------------------- */
    --narpo-navy:        #0c2a5c;
    --narpo-navy-deep:   #081f47;
    --narpo-navy-soft:   #15366d;
    --narpo-blue:        #1f4fb5;
    --narpo-accent:      #4169e1;
    --narpo-band:        #3C7DE5;   /* light-blue accent band */
    --narpo-cream:       #f4f1ea;
    --narpo-paper:       #ffffff;
    --narpo-ink:         #101010;
    --narpo-ink-soft:    #3a4664;
    --narpo-line:        #d9deea;

    /* Type ---------------------------------------------------------- */
    --narpo-font-sans:   "Helvetica Neue", Helvetica, Arial, sans-serif;
    --narpo-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --narpo-fs-hero:    clamp( 2.4rem, 4.5vw + 1rem, 4.5rem );
    --narpo-fs-h1:      clamp( 2rem, 3vw + 0.8rem, 3.25rem );
    --narpo-fs-h2:      clamp( 1.6rem, 2vw + 0.7rem, 2.5rem );
    --narpo-fs-h3:      clamp( 1.15rem, 0.8vw + 0.9rem, 1.5rem );
    --narpo-fs-body:    clamp( 1.04rem, 0.24vw + 0.98rem, 1.125rem );
    --narpo-fs-small:   0.875rem;

    /* Spacing ------------------------------------------------------- */
    --narpo-space-section: clamp( 3rem, 6vw, 6rem );
    --narpo-space-block:   clamp( 1.5rem, 3vw, 3rem );
    --narpo-content-width: 1400px;
    --narpo-section-gutter: clamp( 1.25rem, 4vw, 3rem );
    --narpo-container:     min(
        calc( var(--narpo-content-width) - (2 * var(--narpo-section-gutter)) ),
        calc( 100% - (2 * var(--narpo-section-gutter)) )
    );
    --narpo-radius:        12px;
    --narpo-radius-sm:     5px;

    /* Motion -------------------------------------------------------- */
    --narpo-ease:        cubic-bezier( 0.22, 0.61, 0.36, 1 );
    --narpo-ease-out:    cubic-bezier( 0.16, 1, 0.3, 1 );
    --narpo-dur-fast:    0.18s;
    --narpo-dur:         0.28s;

    /* Shadow -------------------------------------------------------- */
    --narpo-shadow-sm:   0 1px 2px rgba(12, 26, 54, 0.06), 0 2px 6px rgba(12, 26, 54, 0.06);
    --narpo-shadow-md:   0 6px 18px rgba(12, 26, 54, 0.12);
    --narpo-shadow-lg:   0 20px 50px rgba(12, 26, 54, 0.18);
}

body,
.editor-styles-wrapper,
.wp-site-blocks,
button,
input,
select,
textarea {
    font-family: var(--narpo-font-sans, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

p,
li,
figcaption,
blockquote,
label,
td,
th,
dd,
dt {
    font-family: var(--narpo-font-sans, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.site-title,
.site-tagline {
    font-family: var(--narpo-font-display, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

/* Hide-until-animated: prevents flash before GSAP runs.
   Elements with data-narpo-anim start invisible; GSAP reveals them.
   Reduced-motion users get the rule disabled so content is visible. */
@media (prefers-reduced-motion: no-preference) {
    /* Hide containers themselves only — never their internal text/images —
       so the page remains useful if JS fails or the deferred script is slow. */
    [data-narpo-anim]:not([data-narpo-anim-done]) {
        opacity: 0;
    }
    /* Stagger variant: hide the immediate children too (they get revealed one-by-one). */
    [data-narpo-anim="stagger"]:not([data-narpo-anim-done]) > * {
        opacity: 0;
    }
    /* If JS hasn't run within 2s, reveal anyway. */
    @keyframes narpoAnimFailsafe { to { opacity: 1; } }
    [data-narpo-anim]:not([data-narpo-anim-done]) {
        animation: narpoAnimFailsafe 0.5s 2s forwards;
    }
    [data-narpo-anim="stagger"]:not([data-narpo-anim-done]) > * {
        animation: narpoAnimFailsafe 0.5s 2s forwards;
    }
}

/* Kill any inherited margin between top-level NARPO blocks so sections
   sit flush against each other (the bands handle visual separation). */
.entry-content > [class*="narpo-"],
.wp-block-post-content > [class*="narpo-"],
.entry-content > .wp-block-cover,
.wp-block-post-content > .wp-block-cover {
    margin-block: 0 !important;
}

.narpo-legal-page .wp-block-group.alignwide.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    max-width: 100% !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.narpo-legal-page .wp-block-group.alignwide.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > * {
    max-width: 100% !important;
}

:where(
    a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid var(--narpo-band, #3C7DE5);
    outline-offset: 3px;
}

:where(
    a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus:not(:focus-visible) {
    outline: none;
}

.skip-link:focus,
#wp-skip-link:focus {
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    top: 1rem !important;
    left: 1rem !important;
    padding: 0.85rem 1rem !important;
    border-radius: var(--narpo-radius-sm, 5px);
    background: #fff !important;
    color: var(--narpo-navy-deep, #081f47) !important;
    box-shadow: var(--narpo-shadow-md);
    text-decoration: none !important;
}

body.admin-bar .skip-link:focus,
body.admin-bar #wp-skip-link:focus {
    top: calc(1rem + 32px) !important;
}

.entry-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link),
.wp-block-post-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link),
.narpo-auth-panel :is(
    p,
    .forminator-description,
    .forminator-error-message,
    .forminator-response-message,
    .forminator-notice,
    .narpo-auth-panel__switch,
    .narpo-auth-panel__alert
) a[href],
.narpo-coming-soon :is(
    p,
    li,
    h1,
    h2,
    h3,
    h4
) a[href],
.narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 calc(100% - 0.08em);
    background-repeat: no-repeat;
    background-size: 0 2px;
    text-decoration: none;
    transition:
        color var(--narpo-dur-fast, 0.18s) var(--narpo-ease, ease),
        background-size 0.25s var(--narpo-ease, ease);
}

.entry-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.entry-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):focus-visible,
.wp-block-post-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.wp-block-post-content :is(
    p,
    li,
    figcaption,
    blockquote,
    dd,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):focus-visible,
.narpo-auth-panel :is(
    p,
    .forminator-description,
    .forminator-error-message,
    .forminator-response-message,
    .forminator-notice,
    .narpo-auth-panel__switch,
    .narpo-auth-panel__alert
) a[href]:hover,
.narpo-auth-panel :is(
    p,
    .forminator-description,
    .forminator-error-message,
    .forminator-response-message,
    .forminator-notice,
    .narpo-auth-panel__switch,
    .narpo-auth-panel__alert
) a[href]:focus-visible,
.narpo-coming-soon :is(
    p,
    li,
    h1,
    h2,
    h3,
    h4
) a[href]:hover,
.narpo-coming-soon :is(
    p,
    li,
    h1,
    h2,
    h3,
    h4
) a[href]:focus-visible,
.narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):focus-visible {
    background-size: 100% 2px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .skip-link:focus,
    body.admin-bar #wp-skip-link:focus {
        top: calc(1rem + 46px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-narpo-anim],
    [data-narpo-anim] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}