/* Public theme. The Quicksand webfont is preconnected and linked from the
   layout head - an @import here would serialise its download behind this
   stylesheet, which is the worst possible place for it on a page whose hero is
   the largest contentful paint. */

:root {
    /* ----------------------------------------------------------------------
       Brand palette. These five are the only colour literals in the file -
       every rule below resolves back to one of them, so a rebrand is five
       edits here and nothing else. The skin/dark pair is the same one
       Assets::logo() paints the mark's gradient with.
       ---------------------------------------------------------------------- */
    --base-bodyfont-color: #676b72;
    --base-skin: #ff382f;
    --base-dark: #05255f;
    --base-grey: #f5f5f5;
    --base-white: #ffffff;

    /* The same colours as channel triples. rgba() cannot take a hex custom
       property, and the tints, washes and shadows below have to stay inside the
       palette rather than reach for a fresh literal. */
    --base-skin-rgb: 255, 56, 47;
    --base-dark-rgb: 5, 37, 95;
    --base-white-rgb: 255, 255, 255;
    --base-bodyfont-color-rgb: 103, 107, 114;

    /* ----------------------------------------------------------------------
       Role tokens. The rules use these names rather than the --base-* ones, so
       "what the colour is for" stays separate from "which brand colour it is".
       ---------------------------------------------------------------------- */
    --home-skin: var(--base-skin);
    --home-skin-soft: rgba(var(--base-skin-rgb), .12);
    /* Published by the layout from APP_THEME_COLOR; --base-dark is the fallback
       for the case where the constant is missing or fails hex validation. */
    --home-dark: var(--app-theme, var(--base-dark));
    --home-ink: var(--base-dark);
    --home-surface: var(--base-white);
    --home-muted: var(--base-grey);

    /* ----------------------------------------------------------------------
       Bootstrap's own tokens, repointed at the palette. Without this the stock
       blues leak through everywhere this theme does not style something itself
       - links, .text-muted, the .btn-primary on the shared auth forms.
       ---------------------------------------------------------------------- */
    --bs-body-color: var(--base-bodyfont-color);
    --bs-body-color-rgb: var(--base-bodyfont-color-rgb);
    --bs-secondary-color: rgba(var(--base-bodyfont-color-rgb), .85);
    --bs-heading-color: var(--base-dark);
    --bs-link-color-rgb: var(--base-skin-rgb);
    --bs-link-hover-color-rgb: var(--base-dark-rgb);
    --bs-primary: var(--base-skin);
    --bs-primary-rgb: var(--base-skin-rgb);
}

body {
    font-family: 'Quicksand', sans-serif;
    color: var(--base-bodyfont-color);
    overflow-x: hidden;
}

[data-password-toggle] {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Bootstrap components

   .btn-primary, .btn-light and the focus rings hard-code their colours in the
   distributed build instead of reading --bs-primary, so they need repointing
   by hand rather than through the :root block above.
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: var(--base-white);
    --bs-btn-bg: var(--base-skin);
    --bs-btn-border-color: var(--base-skin);
    --bs-btn-hover-color: var(--base-white);
    --bs-btn-hover-bg: var(--base-dark);
    --bs-btn-hover-border-color: var(--base-dark);
    --bs-btn-focus-shadow-rgb: var(--base-skin-rgb);
    --bs-btn-active-color: var(--base-white);
    --bs-btn-active-bg: var(--base-dark);
    --bs-btn-active-border-color: var(--base-dark);
    --bs-btn-disabled-color: var(--base-white);
    --bs-btn-disabled-bg: var(--base-skin);
    --bs-btn-disabled-border-color: var(--base-skin);
}

.btn-light {
    --bs-btn-color: var(--base-dark);
    --bs-btn-bg: var(--base-white);
    --bs-btn-border-color: var(--base-white);
    --bs-btn-hover-color: var(--base-skin);
    --bs-btn-hover-bg: var(--base-white);
    --bs-btn-hover-border-color: var(--base-white);
    --bs-btn-active-color: var(--base-skin);
    --bs-btn-active-bg: var(--base-white);
    --bs-btn-active-border-color: var(--base-white);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--base-skin-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--base-skin-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--home-skin);
    border-color: var(--home-skin);
}

.navbar .nav-link.active {
    color: var(--home-skin);
    font-weight: 600;
}

.home-kicker {
    display: inline-block;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.home-kicker--ink {
    color: var(--home-skin);
}

.home-hero {
    position: relative;
    color: var(--base-white);
}

.home-hero-slide {
    min-height: calc(100vh - 4.5rem);
    display: flex;
    align-items: center;
    padding: 4rem 0 5.5rem;
    background-color: var(--home-dark);
    background-image:
        radial-gradient(circle at 12% 20%, rgba(var(--base-white-rgb), .14), transparent 36%),
        radial-gradient(circle at 88% 80%, rgba(var(--base-dark-rgb), .45), transparent 42%);
}

.home-hero-slide--two {
    background-color: var(--home-skin);
}

/* Slide three is the dark ground again under a skin wash, so the three slides
   read as one palette rather than three unrelated backdrops. */
.home-hero-slide--three {
    background-color: var(--home-dark);
    background-image:
        linear-gradient(120deg, rgba(var(--base-skin-rgb), .55), transparent 62%),
        radial-gradient(circle at 12% 20%, rgba(var(--base-white-rgb), .14), transparent 36%);
}

/* Both levels: only the first hero slide carries the page's <h1>. The other
   slides are section headings that happen to sit in a carousel, so they are
   <h2> in the markup and share the type scale here. */
.home-hero h1,
.home-hero h2 {
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.25rem);
    margin-bottom: 1rem;
    /* Stated, not inherited: --bs-heading-color above makes headings dark by
       default and these two sit on the dark ground. */
    color: var(--base-white);
}

.home-lead {
    font-size: 1.125rem;
    max-width: 38rem;
    opacity: .92;
    margin-bottom: 1.75rem;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.home-hero .btn-outline-light:hover {
    color: var(--home-dark);
}

.home-hero .owl-nav {
    margin: 0;
}

.home-hero .owl-nav [class*='owl-'] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    line-height: 2.5rem;
    background: rgba(var(--base-white-rgb), .18);
    color: var(--base-white);
    border-radius: 50%;
    font-size: 1rem;
}

.home-hero .owl-nav [class*='owl-']:hover {
    background: var(--base-white);
    color: var(--home-dark);
}

.home-hero .owl-prev {
    left: .75rem;
}

.home-hero .owl-next {
    right: .75rem;
}

.home-hero .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    margin: 0;
}

.home-hero .owl-dots .owl-dot span {
    background: rgba(var(--base-white-rgb), .45);
}

.home-hero .owl-dots .owl-dot.active span,
.home-hero .owl-dots .owl-dot:hover span {
    background: var(--base-white);
}

.home-section {
    padding: 4.5rem 0;
}

.home-section--muted {
    background: var(--home-muted);
}

.home-section-head {
    max-width: 40rem;
    margin: 0 auto 2.5rem;
}

.home-section-head h2,
.home-cta h2,
.home-card h3,
.home-step h3 {
    font-weight: 700;
    color: var(--home-ink);
}

.home-card {
    background: var(--home-surface);
    border: 1px solid rgba(var(--base-dark-rgb), .12);
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 10px 24px rgba(var(--base-dark-rgb), .08);
}

.home-card--flush {
    position: relative;
    margin: .25rem;
}

.home-card h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--home-skin-soft);
    color: var(--home-skin);
    font-size: 1.15rem;
}

.home-card-carousel .owl-stage,
.home-quote-carousel .owl-stage {
    display: flex;
}

.home-card-carousel .owl-item,
.home-quote-carousel .owl-item {
    display: flex;
}

.home-card-carousel .owl-item > .home-card,
.home-quote-carousel .owl-item > .home-quote {
    width: 100%;
}

.home-card-carousel .owl-nav,
.home-quote-carousel .owl-nav {
    margin-top: 1rem;
}

.home-card-carousel .owl-nav [class*='owl-'],
.home-quote-carousel .owl-nav [class*='owl-'] {
    background: var(--home-skin);
    color: var(--base-white);
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    margin: 0 .25rem;
    padding: 0;
}

.home-card-carousel .owl-nav [class*='owl-']:hover,
.home-quote-carousel .owl-nav [class*='owl-']:hover {
    background: var(--home-dark);
    color: var(--base-white);
}

.home-card-carousel .owl-dots .owl-dot.active span,
.home-quote-carousel .owl-dots .owl-dot.active span,
.home-card-carousel .owl-dots .owl-dot:hover span,
.home-quote-carousel .owl-dots .owl-dot:hover span {
    background: var(--home-skin);
}

.home-step {
    text-align: center;
    padding: 0 1rem;
}

.home-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--home-skin);
    color: var(--base-white);
    font-weight: 700;
}

.home-quote {
    background: var(--home-surface);
    border-radius: 1rem;
    padding: 1.75rem;
    margin: .25rem;
    box-shadow: 0 10px 24px rgba(var(--base-dark-rgb), .08);
    height: 100%;
}

.home-quote p {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.home-quote footer {
    color: var(--home-skin);
    font-weight: 600;
    font-size: .9rem;
}

.home-cta {
    margin: 0 1rem 2rem;
    padding: 3.5rem 1rem;
    border-radius: 1.25rem;
    /* Skin into dark - the same direction as the logo's gradient. */
    background: linear-gradient(135deg, var(--home-skin), var(--home-dark));
    color: var(--base-white);
}

.home-cta h2 {
    color: var(--base-white);
}

.home-cta p {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    opacity: .92;
}

@media (max-width: 575.98px) {
    .home-hero .owl-nav {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion

   frontend/js/script.js already disables the AOS reveals and the carousel
   autoplay when this is set. This covers what JS cannot: the CSS transitions
   and the carousel's own sliding animation, both of which keep moving
   regardless of what the scripts decide.
   -------------------------------------------------------------------------- */
@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;
    }

    .owl-carousel .owl-item {
        transition: none !important;
    }
}