/*
    Public website styling for RetirementCare / Shanthi Senior Residence.

    Loaded after the template vendor CSS.

    This file deliberately does NOT restyle individual template selectors. Doing
    that previously broke the SenoCare look (it filled .site-title span, which the
    template renders as transparent text with a coloured stroke, and it repainted
    the header bar and footer). Instead, the template's own custom properties are
    remapped onto the central --rc-* tokens below.

    The token values in theme/css/retirementcare-theme.css currently match the
    SenoCare palette exactly, so the site renders identically to the source
    template. To rebrand, change the tokens in that file - not the rules here.
*/

:root {
    /*
        Brand.

        ⚠️ THIS MAPPING LOOKS INVERTED, AND IS DELIBERATE (product owner, 2026-07-29).

        The --rc-* roles were swapped so that primary = teal, which is what every
        application shell leads with. The public marketing site was NOT swapped with
        them: it stays coral-led, because that is the look the site has and the change
        was about the portals, not the brochure.

        So the site's dominant accent (--theme-color) points at the SECONDARY token,
        and its supporting accent at the PRIMARY one. Do not "tidy" this into
        primary→primary without deciding to repaint the public site.
    */
    --theme-color: var(--rc-color-secondary);
    --theme-color2: var(--rc-color-primary);
    --theme-bg-light: var(--rc-color-surface);

    /*
        A 10% tint of --theme-color above (the coral). Kept as a literal rather than a
        color-mix() of the token: color-mix is unsupported on older browsers, where the
        variable would resolve to nothing and the tinted backgrounds would break.
        Update this together with --rc-color-secondary.
    */
    --theme-color-light: rgba(243, 77, 89, .1);

    /* Text and surfaces */
    --body-text-color: var(--rc-color-muted);
    --color-white: var(--rc-color-background);
    --color-dark: var(--rc-color-dark);

    /* Accents */
    --color-green: var(--rc-color-green);
    --color-blue: var(--rc-color-blue);
    --color-yellow: var(--rc-color-yellow);
    --color-red: var(--rc-color-red);

    /* Footer */
    --footer-bg: var(--rc-color-dark);
    --footer-text-color: var(--rc-color-on-dark);

    /* Typography */
    --body-font: var(--rc-font-family-base);
    --heading-font: var(--rc-font-family-heading);

    /* Elevation */
    --box-shadow: var(--rc-shadow-soft);
}

/*
    Template layout fixes.

    The "do not restyle template selectors" rule above is about applying the
    brand - colours come from the token remapping, never from per-selector
    overrides. Structural bugs in the template are a different matter and are
    fixed here, each with a note explaining why.
*/

/*
    .footer-contact li is a flex row, and .icon has a fixed 35px box but no
    flex-shrink guard. A long unbreakable value in .content (flex: 1) - an email
    address, typically - raises the row's min-content width and the icon gets
    crushed out of round. Pin the icon and let long addresses wrap instead.
*/
.footer-contact .icon {
    flex-shrink: 0;
}

.footer-contact .content {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
    In-page anchor navigation.

    The navbar becomes .fixed-top once the page is scrolled, so anchored sections
    need a scroll offset or their headings land underneath it.
*/
html {
    scroll-behavior: smooth;
}

.public-anchor {
    scroll-margin-top: 110px;
}

/* The hero is the top of the page, so it needs no offset. */
.public-anchor-top {
    scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*
    Hero slide content motion.

    animate.css defaults to a 1s linear-ish curve. An ease-out curve makes the
    entrance settle instead of arriving abruptly. Duration comes from each
    element's data-duration attribute, applied by the JS bridge.
*/
.hero-single [data-animation].animated {
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .hero-single [data-animation].animated {
        animation: none !important;
    }
}

/*
    No-JS hero fallback.

    owl.carousel.min.css hides .owl-carousel until the plugin adds .owl-loaded,
    so the hero renders blank until the JS bridge initialises Owl Carousel.
    These rules show the first slide statically and stop applying by themselves
    the moment Owl loads. Remove them only if the hero stops using Owl.
*/
.hero-slider.owl-carousel:not(.owl-loaded) {
    display: block;
}

.hero-slider.owl-carousel:not(.owl-loaded) .hero-single:not(:first-child) {
    display: none;
}