/*
 * Documentation
 * Shared stylesheet for CSP-safe runtime helpers (anti-spam honeypots, etc.) and footer styling for "Powered by" switching logic.
 */

/* Shared mobile scroll guard baseline for all SmartHtml pages.
   WHY: Keep these rules in va-common.css so strict CSP sites avoid runtime/nonced style-tag dependencies. */
.va-mobile-scroll-guard,
.va-mobile-scroll-guard body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.va-mobile-scroll-guard *,
.va-mobile-scroll-guard *::before,
.va-mobile-scroll-guard *::after {
    box-sizing: border-box;
}

.va-mobile-scroll-guard body {
    margin: 0;
}

.va-mobile-scroll-guard img,
.va-mobile-scroll-guard svg,
.va-mobile-scroll-guard video,
.va-mobile-scroll-guard canvas {
    max-width: 100%;
    /* WHY: intentionally avoid a shared height rule here because `.va-mobile-scroll-guard img` outranks microsite logo classes and can override authored brand dimensions. */
}

body.va-centered-template-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WHY: Keep responsive shell padding inside the viewport-height layout box to prevent phantom vertical scroll. */
    box-sizing: border-box;
    padding: clamp(12px, 3vw, 32px);
}

body.va-centered-template-page > main,
body.va-centered-template-page > .wrap {
    width: min(100%, 760px);
}

/* Keep honeypot/time-trap fields off-screen without inline styles so strict CSPs remain valid. */
.va-honeypot-container {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    /* WHY: clip-path is harder for bots to detect than opacity alone
       and provides a second layer of visual hiding if CSS is partially parsed. */
    clip-path: inset(50%) !important;
}

/* Provide consistent status messaging styles for shared form feedback. */
.message {
    margin-top: 0.75rem;
    font-weight: 600;
}

.message.success {
    color: #16a34a;
}

.message.error {
    color: #dc2626;
}

.message.processing {
    /* WHY: #facc15 (yellow-400) has ~1.5:1 contrast against white, failing WCAG AA.
           #a16207 (yellow-800) provides >=4.5:1 contrast on white backgrounds. */
    color: #a16207;
}

/* va-footer */

.va-footer-link {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.va-brand-switcher {
    display: inline-grid;
}

.va-brand-switcher span {
    grid-area: 1 / 1;
    font: inherit;
    white-space: nowrap;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.va-brand-switcher span:nth-child(1) {
    animation-name: va-fade-1;
}

.va-brand-switcher span:nth-child(2) {
    animation-name: va-fade-2;
}

@keyframes va-fade-1 {
    0%,
    40% {
        opacity: 1;
    }

    50%,
    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes va-fade-2 {
    0%,
    40% {
        opacity: 0;
    }

    50%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* WHY: Users who prefer reduced motion should not see the infinite brand-name crossfade.
   Show only the first brand name and hide the second to avoid a stacked/overlapping layout. */
@media (prefers-reduced-motion: reduce) {
    .va-brand-switcher span {
        animation: none;
    }

    .va-brand-switcher span:nth-child(2) {
        opacity: 0;
    }
}