/* =====================================================================
   Emerson branding for PAM-SS
   wwwroot/css/branding.css

   Loaded AFTER site.css in _Layout.cshtml, so everything here wins by
   cascade order without site.css needing to be edited. If a rule below
   does not take effect, the matching rule in site.css is marked
   !important and needs removing there.

   Everything this file references is served locally out of
   wwwroot/images. Nothing points at emerson.edu: the old background did,
   and it went away when the main site was rebuilt.
   ===================================================================== */

:root {
    --emerson-purple: #62259D;
    --emerson-purple-deep: #2F1A45;
    --emerson-warm-gray: #706258;
}

/* ---------------------------------------------------------------------
   PAGE BACKGROUND

   The campus photograph under a purple wash. The wash is not decoration:
   the white card sits directly on top, and an unwashed photo puts text
   over whatever happens to be behind it. It also keeps the page reading
   as Emerson rather than as a stock building shot.

   background-color is set as well, so a slow or failed image load shows
   deep purple rather than white.
   --------------------------------------------------------------------- */
body {
    background-color: var(--emerson-purple-deep);
    background-image:
        linear-gradient(rgba(47, 26, 69, 0.86), rgba(98, 37, 157, 0.78)),
        url("../images/campus-background.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* The container must not paint over the photo. site.css may give it the
   flat purple this replaces. */
.page-container {
    background: transparent;
}

/* Small screens get the smaller file, and scroll rather than fixed:
   iOS ignores background-attachment: fixed and repaints the whole image
   on every scroll frame, which is visible as juddering. */
@media (max-width: 768px) {
    body {
        background-image:
            linear-gradient(rgba(47, 26, 69, 0.86), rgba(98, 37, 157, 0.78)),
            url("../images/campus-background-mobile.jpg");
        background-attachment: scroll;
    }
}

/* ---------------------------------------------------------------------
   HEADER LOCKUP

   The primary horizontal lockup, trimmed of the pack's transparent
   padding so the artwork fills the box it is given rather than floating
   inside 37px of nothing. Trimmed it is 1023 x 235, so at 44px tall it
   sits about 191px wide, close to the mark it replaces.

   Height is set and width left automatic, so any rule in site.css that
   sized the old mark by width cannot stretch this one.
   --------------------------------------------------------------------- */
.emerson-logo {
    height: 44px;
    width: auto;
    display: block;
}

@media (max-width: 576px) {
    .emerson-logo {
        height: 32px;
    }
}