/* Brand palette, matching eacml.com.
 *
 * The theme ships a green palette (--thm-primary was #2dcd7c). Everything
 * in style.css reads these variables -- the handful of literal hexes left
 * in it are only var() fallbacks -- so redefining them here re-colours the
 * whole site without editing the vendored stylesheet.
 *
 * The primary is eacml.com's blue exactly. The supporting colours keep
 * their own saturation and lightness and are turned to that blue's hue
 * (198 degrees), so the palette stays as balanced as the theme's own: the
 * greens' partners were already near-cyan, hence the small shift.
 *
 * Loaded after style.css in base.html, which is what lets it win.
 *
 * The -rgb pairs matter: the theme builds translucent fills with
 * rgba(var(--thm-primary-rgb), 0.1) and friends. Leaving one behind would
 * show the old green through every faded panel.
 */

:root {
    /* eacml.com blue, in place of the theme's green. */
    --thm-primary: #34a1d0;
    --thm-primary-rgb: 52, 161, 208;

    --thm-secondary: #9cb3bd;
    --thm-secondary-rgb: 156, 179, 189;

    --thm-gray: #838d91;
    --thm-gray-rgb: 131, 141, 145;

    --thm-border: #e1e7ea;
    --thm-border-rgb: 225, 231, 234;

    /* Headings, buttons on hover, the menu logo panel and the mobile
     * drawer: a deep blue now rather than a deep teal.
     */
    --thm-black: #003349;
    --thm-black-rgb: 0, 51, 73;

    --thm-dark-black: #012a3c;
    --thm-dark-black-rgb: 1, 42, 60;

    /* Left as the theme had it: at 96% lightness the hue is not visible,
     * and it matches eacml.com's own near-white panels.
     */
    --thm-light-bg: #f3f6f7;
    --thm-light-bg-rgb: 243, 246, 247;
}

/* Green baked into image assets, which the variables above cannot reach.
 *
 * These point at recoloured copies under static/site/image/ -- the theme's
 * originals are left as they are. Paths are relative to this file.
 *
 * Only flat, single-colour theme artwork was recoloured. The photographs
 * that happen to contain green (grass and foliage in the event and history
 * shots) were deliberately left alone.
 */

/* The "Need assistance?" help card in the sidebar. */
.sidebar-widget-card {
    background-image: url('../image/shapes/widget-1.png');
}

/* The full-width call-to-action band. */
.cta-one {
    background-image: url('../image/bg/cta-bg-2.jpg');
}

/* Logo sizing.
 *
 * The theme's placeholder logo was a wide banner (4.36:1); elogo.png is
 * nearly square (1.77:1), so the width/height the markup inherited made it
 * tall in the header and squashed in the mobile drawer.
 *
 * Each one is sized by height with the width left automatic, so the
 * proportions hold whatever logo is dropped in next. The HTML width/height
 * attributes match these, which keeps the space reserved before the CSS
 * arrives -- no jump on load.
 */

.menu-logo img {
    height: 48px;
    width: auto;
    max-width: 100%;
}

.footer-widget-logo img {
    height: 64px;
    width: auto;
    max-width: 100%;
}

.mobile-nav-content .logo-box img {
    height: 44px;
    width: auto;
    max-width: 100%;
}