/* Shared styles for public-facing pages (index, login, register, terms, privacy) */
:root {
    --brand: #1a3c6e;
    --brand-light: #2f5aa0;
    --brand-dark: #10233f;
}

.site-footer {
    background: var(--brand-dark);
    color: #c3cee2;
}
.site-footer a { color: #c3cee2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Logo needs to stay legible against the dark footer background */
.footer-logo {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* Decorative page background — soft brand-colored glow + faint grid,
   used on auth/app shell pages (login, register, orgs).
   NOTE: deliberately NOT `position: relative` on .bg-decorated itself —
   that would make it the containing block for any `position: fixed`
   descendant (e.g. Bootstrap modals/backdrops), breaking their
   viewport-relative centering. The grid overlay uses a fixed pseudo-element
   on ::before instead, which is safe because :root has no transform. */
.bg-decorated {
    min-height: 100vh;
    background-color: #f3f6fb;
    background-image:
        radial-gradient(circle at 12% 8%,  rgba(26,60,110,.10) 0%, transparent 40%),
        radial-gradient(circle at 90% 12%, rgba(47,90,160,.08) 0%, transparent 38%),
        radial-gradient(circle at 85% 92%, rgba(26,60,110,.08) 0%, transparent 42%),
        radial-gradient(circle at 8% 90%,  rgba(47,90,160,.07) 0%, transparent 40%);
}
.bg-decorated::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(26,60,110,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,60,110,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}
/* Scoped to :not(.modal, .modal-backdrop) so Bootstrap's fixed-position
   modal layer (which is also a direct child of body) is never demoted
   from `position: fixed` to `relative` — that would both break its
   viewport centering and drop it back into normal document flow,
   making it render below the page content instead of overlaying it. */
.bg-decorated > *:not(.modal, .modal-backdrop) { position: relative; z-index: 1; }