/*
 * PS Color Guard: opt-in, component-scoped surface roles.
 * No unclassed Elementor/managed block is modified. v0.36.28 pilot.
 * Place ONE ps-surface-* class on the outer Elementor Container, never on body.
 */
.ps-surface-light,
.ps-surface-dark,
.ps-surface-brand,
.ps-surface-nav,
.ps-surface-image {
    background-color: var(--ps-surface-background) !important;
    color: var(--ps-surface-foreground) !important;
}
.ps-surface-light {
    --ps-surface-background: var(--ps-guard-light-bg, #F1F4F7);
    --ps-surface-foreground: var(--ps-guard-light-ink, #28384C);
    --ps-surface-muted: var(--ps-guard-light-muted, #435368);
    --ps-surface-link: var(--ps-guard-light-link, #28384C);
    --ps-surface-border: var(--ps-guard-light-border, #A9B8C8);
    --ps-surface-button-background: var(--ps-guard-light-button-bg, #28384C);
    --ps-surface-button-text: var(--ps-guard-light-button-ink, #FFFFFF);
}
.ps-surface-dark {
    --ps-surface-background: var(--ps-guard-dark-bg, #28384C);
    --ps-surface-foreground: var(--ps-guard-dark-ink, #FFFFFF);
    --ps-surface-muted: var(--ps-guard-dark-muted, #E0E7EF);
    --ps-surface-link: var(--ps-guard-dark-link, #FFFFFF);
    --ps-surface-border: var(--ps-guard-dark-border, #A9B8C8);
    --ps-surface-button-background: var(--ps-guard-dark-button-bg, #FFFFFF);
    --ps-surface-button-text: var(--ps-guard-dark-button-ink, #28384C);
}
.ps-surface-brand {
    --ps-surface-background: var(--ps-guard-brand-bg, #28384C);
    --ps-surface-foreground: var(--ps-guard-brand-ink, #FFFFFF);
    --ps-surface-muted: var(--ps-guard-brand-muted, #FFFFFF);
    --ps-surface-link: var(--ps-guard-brand-link, #FFFFFF);
    --ps-surface-border: var(--ps-guard-brand-border, #FFFFFF);
    --ps-surface-button-background: var(--ps-guard-brand-button-bg, #FFFFFF);
    --ps-surface-button-text: var(--ps-guard-brand-button-ink, #28384C);
}
.ps-surface-nav {
    --ps-surface-background: var(--ps-guard-nav-bg, #FFFFFF);
    --ps-surface-foreground: var(--ps-guard-nav-ink, #28384C);
    --ps-surface-muted: var(--ps-guard-light-muted, #435368);
    --ps-surface-link: var(--ps-guard-nav-link, #28384C);
    --ps-surface-border: var(--ps-guard-light-border, #A9B8C8);
    --ps-surface-button-background: var(--ps-guard-nav-button-bg, #28384C);
    --ps-surface-button-text: var(--ps-guard-nav-button-ink, #FFFFFF);
}
/* Media overlay is deliberately strong enough for white text even over a pure
 * white image. It protects background images only, not arbitrary foreground media. */
.ps-surface-image {
    --ps-surface-background: #28384C;
    --ps-surface-foreground: var(--ps-guard-image-ink, #FFFFFF);
    --ps-surface-muted: var(--ps-guard-image-ink, #FFFFFF);
    --ps-surface-link: var(--ps-guard-image-ink, #FFFFFF);
    --ps-surface-border: var(--ps-guard-image-ink, #FFFFFF);
    --ps-surface-button-background: var(--ps-guard-image-button-bg, #FFFFFF);
    --ps-surface-button-text: var(--ps-guard-image-button-ink, #28384C);
    position: relative;
    isolation: isolate;
}
.ps-surface-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(10, 17, 29, .82);
}
.ps-surface-image > * {
    position: relative;
    z-index: 1;
}
/* The following explicit rules intentionally outrank ordinary Elementor color
 * declarations within opted-in surfaces. The variable scopes nest correctly. */
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, label, .elementor-heading-title, .elementor-icon-list-text, .elementor-widget-text-editor),
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, label, .elementor-heading-title, .elementor-icon-list-text, .elementor-widget-text-editor) :is(span, strong, em, b, i) {
    color: var(--ps-surface-foreground) !important;
}
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(a:not(.elementor-button), a:not(.elementor-button):visited, a:not(.elementor-button):hover, .elementor-icon-list-item a, .semi-nav-link) {
    color: var(--ps-surface-link) !important;
}
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(.elementor-button, a.elementor-button, button.ps-guard-button, .ps-guard-button) {
    background: var(--ps-surface-button-background) !important;
    color: var(--ps-surface-button-text) !important;
    border-color: var(--ps-surface-button-background) !important;
}
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(.elementor-button, a.elementor-button, button.ps-guard-button, .ps-guard-button) :is(span, strong, b, .elementor-button-text, .elementor-button-icon, svg) {
    color: var(--ps-surface-button-text) !important;
    fill: currentColor;
}
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image)
:is(a, button, .elementor-button):focus-visible {
    outline: 3px solid var(--ps-surface-foreground) !important;
    outline-offset: 3px;
}
/* Semantic overrides for quieter supporting copy, only when explicitly marked. */
:is(.ps-surface-light, .ps-surface-dark, .ps-surface-brand, .ps-surface-nav, .ps-surface-image) .ps-guard-muted {
    color: var(--ps-surface-muted) !important;
}