/* Apex (apex.plumgrove.us). Loaded after global/global.css (see loader.js). */

:root {
    --apex-orange:#f47720;
    --apex-blue:#053571;
    --apex-dark-blue:#13243e;
}

.header-top {
    background-color: var(--apex-orange);
}

/* The header's links hover in the skin's link orange, the header's own colour;
   hover and focus in Apex blue instead. The cart button keeps its own. */
.header-top .header-right a:not(.btn):hover,
.header-top .header-right a:not(.btn):focus {
    color: var(--apex-blue);
}

/* Hero: Apex blue for the accent (white button text on orange would be 2.8:1). */
body.isHome .mooie-hero {
    --mooie-hero-accent: var(--apex-blue);
    --mooie-hero-accent-hover: var(--apex-dark-blue);
}

/* Login: the page on Apex orange with the swoosh (an SVG, sharp at any size;
   rename it when replacing it, media is cached for 30 days) fixed to the
   bottom centre, scaled to cover. The form stays a white card; the brand
   label and the support block on the orange are white like the logo (2.8:1
   on #f47720, Mooie's choice), and the support link is underlined. */
body.pageType_login {
    background: var(--apex-orange) url("assets/login-swoosh-2.svg") no-repeat center bottom / cover fixed;
}

#loginPage {
    .mooie-login-brand__logo {
        max-height: 240px;
        width: auto;
    }

    /* The same corner radius as the product cards inside. */
    .loginForm {
        border-radius: 22px;
    }

    .mooie-login-brand__label,
    .login-support,
    .login-support h2 {
        color: #ffffff;
    }

    .login-support a {
        color: #ffffff;
        text-decoration: underline;
    }
}

/* Product cards (every product grid): a rounded white card with a soft shadow,
   the image inset and rounded, a regular-weight dark title, and View Details as
   an orange text link with an arrow instead of a button. */
.prod-cat-item {
    padding: 14px 14px 18px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05);
    text-align: left;

    .img-wrap {
        margin: 0;
    }

    .img-wrap img {
        width: 100%;
        border-radius: 16px;
    }

    .caption {
        padding: 14px 4px 0;
    }

    .caption h3 {
        margin: 0 0 6px;
        font-size: 2.4rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .caption h3 a {
        color: #1d1d1d;
    }

    .prod-buttons .btn {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        color: var(--apex-orange);
        font-size: 1.8rem;
    }

    .prod-buttons .btn::after {
        content: " \2192";
    }

    .prod-buttons .btn:hover,
    .prod-buttons .btn:focus {
        color: var(--apex-blue);
        background: none;
    }
}