/* ---------------------------------------------------------------------------
 * Body text
 *
 * The theme sets 15px at 1.5 -- below the browser default, with leading tight
 * for the language. Cyrillic at those values is denser than Latin at the same
 * numbers, because it carries more vertical stems per glyph, and this site's
 * primary language is Bulgarian. Long-form pages -- terms, blog articles, level
 * descriptions -- were harder to read than they needed to be.
 *
 * 16px at 1.65. Measure stays with the layout container; never a max-width on
 * the text itself.
 *
 * Set on body rather than by overriding --bs-body-font-size, so the theme's own
 * variable stays readable as "what the theme shipped" rather than being quietly
 * reassigned underneath it.
 * ------------------------------------------------------------------------ */
body {
    font-size: var(--omega-text-body);
    line-height: var(--omega-leading-body);
}

/* ---------------------------------------------------------------------------
 * Focus
 *
 * One visible ring for every interactive element on the site. Before this, six
 * layout components and eleven page templates each declared their own coral
 * outline at four slightly different opacities, and everything else -- page
 * content, all four public forms -- had no focus style at all beyond whatever
 * the theme left behind.
 *
 * Coral was the wrong colour for the job regardless: #FE7D58 on white is
 * 2.53:1, below the 3:1 WCAG 2.2 needs for non-text contrast, and over the
 * teal top bar it disappeared completely.
 *
 * Dark surfaces flip the ring colour rather than adding a second ring. The
 * custom property inherits, so setting it on a container covers everything
 * inside it.
 * ------------------------------------------------------------------------ */
:focus-visible {
    outline: var(--omega-focus-ring-width) solid var(--omega-focus-ring-color);
    outline-offset: var(--omega-focus-ring-offset);
}

.omega-topbar,
.omega-surface-inverse,
.omega-final-cta-card {
    --omega-focus-ring-color: var(--omega-focus-ring-color-inverse);
}

/* Blazor focuses the heading on navigation to move screen readers to the new page.
   The heading carries tabindex="-1", so it is never reachable by Tab and every focus
   it receives is programmatic -- suppressing the ring here costs no keyboard user
   anything. Chromium does report :focus-visible on it after a navigation, so this
   must NOT be narrowed to :not(:focus-visible): doing so paints a ring around the
   h1 of every page on load. */
h1:focus {
    outline: none;
    /* The rule above wins the outline shorthand, but outline-offset is only declared
       on :focus-visible and would otherwise still apply. It has no rendered effect
       without an outline; resetting it keeps computed styles identical to before, so
       an empty snapshot diff stays a meaningful gate for later steps. */
    outline-offset: 0;
}

/* ---------------------------------------------------------------------------
 * Motion
 *
 * Honour prefers-reduced-motion everywhere, including the files that forgot to
 * (AboutUs was animating with no reduced-motion block at all).
 *
 * Deliberately NOT `animation: none`. Several entrance animations start at
 * opacity 0, and suppressing the animation outright would leave any element
 * whose base rule also sets opacity 0 permanently invisible -- for exactly the
 * users this is meant to help, and invisibly, since nobody develops with the
 * OS flag on. Running the animation to completion in 0.01ms is safe whatever
 * the base rule says.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scroll-triggered reveals.
 *
 * Armed by js/scroll-reveal.js, which adds .omega-motion to the html element and
 * .omega-reveal-in to each marked element once enough of it has scrolled into
 * view. Everything here is inert without that flag, so pages
 * that never load the script -- and visitors without JavaScript -- get plain,
 * fully visible content, and entrances on those pages keep playing at load.
 * Under prefers-reduced-motion the script refuses to set the flag at all.
 *
 * Three markers:
 *   .omega-reveal            fades and rises the element itself
 *   .omega-reveal-group > *  same, per direct child; the script staggers children
 *                            that reveal together via --omega-reveal-index
 *   .omega-reveal-hold       hides nothing; pauses the element's own keyframe
 *                            choreography (the process-step journey, for one)
 *                            until it scrolls into view, then lets it play intact
 *
 * The reveal is a keyframe animation rather than a transition on purpose: cards
 * and links in these grids already own `transition` for hover, and a second
 * transition declaration on the same element would silently replace it. */
html.omega-motion .omega-reveal:not(.omega-reveal-in),
html.omega-motion .omega-reveal-group > :not(.omega-reveal-in) {
    opacity: 0;
}

/* Hold every entrance animation inside an unrevealed block at its first frame.
   Pausing instead of removing keeps `animation: ... both` first-frame styling
   (opacity-0 starts, scaleX(0) route lines) exactly as authored, and the whole
   choreography -- delays included -- plays from zero on reveal. !important for
   the same reason the reduced-motion block above needs it: this must outrank
   every component-scoped animation shorthand, whatever its specificity. */
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in),
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in)::before,
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in)::after,
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in) *,
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in) ::before,
html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *):not(.omega-reveal-in) ::after {
    animation-play-state: paused !important;
}

html.omega-motion :is(.omega-reveal, .omega-reveal-group > *).omega-reveal-in {
    animation: omegaRevealRise var(--omega-duration-entrance) var(--omega-ease-standard) both;
    animation-delay: calc(var(--omega-reveal-index, 0) * 70ms);
}

/* A from-only keyframe: the implicit `to` is the element's own resting state, so
   completed reveals never pin a transform or opacity against later hover work. */
@keyframes omegaRevealRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
}

/* Print never scrolls, so nothing may sit pending there. */
@media print {
    html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *) {
        opacity: 1 !important;
    }

    html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *),
    html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *) *,
    html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *) ::before,
    html.omega-motion :is(.omega-reveal, .omega-reveal-hold, .omega-reveal-group > *) ::after {
        animation: none !important;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.required:after {
  content: " *";
  color: red;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.omega-recaptcha-disclosure {
    margin: .75rem 0 0;
    color: var(--bs-secondary-color);
    font-size: var(--omega-text-eyebrow);
    line-height: 1.5;
}

.omega-recaptcha-disclosure a {
    color: inherit;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Heading scale
 *
 * h2 and h3 both computed to 24.8px, so section headings and card headings were
 * the same size and pages read flat below the h1. The scale had five named sizes
 * and four distinct values.
 *
 * h3 keeps 24.8px -- it is what the cards want, and it is the more common of the
 * two by a wide margin. h2 takes the step above it. Weight carries the rest of
 * the separation: 700 for h1 and h2, 600 for h3 and h4.
 *
 * Page-level rules still override where a hero or a template sets its own; this
 * only moves the headings that were falling through to the theme default.
 * ------------------------------------------------------------------------ */
h2 {
    font-size: var(--omega-text-h2);
    line-height: var(--omega-leading-heading);
}

h3 {
    font-size: var(--omega-text-h3);
    line-height: var(--omega-leading-snug);
}
