/* ===============================================
  Theme colors
  Change the brand palette here; the template CSS
  (main.css, shortcodes.css, responsive.css) reads
  these variables instead of hard-coded colors.
------------------------*/
:root {
    /* Brand palette (sampled from the R'Sol flyer artwork) */
    --brand-navy: #2D1C65;                  /* logo lettering */
    --brand-navy-rgb: 45, 28, 101;
    --brand-olive: #5D6B1E;
    --brand-olive-rgb: 93, 107, 30;
    --brand-gold: #E2A415;
    --brand-gold-rgb: 226, 164, 21;

    /* Roles used by the template */
    --skin-color: var(--brand-gold);        /* accent: buttons, active menu, highlights (was #b07ab4) */
    --skin-rgb: var(--brand-gold-rgb);
    --dark-color: var(--brand-navy);        /* header, footer, dark sections (was #5a5c82) */
    --dark-rgb: var(--brand-navy-rgb);
    --heading-color: var(--brand-navy);     /* h1-h6 (was #4b4d75) */
    --heading-rgb: var(--brand-navy-rgb);
    --link-color: var(--brand-navy);        /* default links (was #343c5c) */
    --hover-color: var(--brand-olive);      /* button and link hover */
    --body-color: #8889ac;                  /* paragraph text */
    --grey-bg: #f7f7ff;                     /* light section background */
}

/* ===============================================
  Button hover
  The template fills hovered buttons with the dark
  color; use the hover color (olive) instead.
------------------------*/
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover,
.ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:not(.btn-inline):hover {
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    color: #fff;
}

/* ===============================================
  Logo
  The R'Sol mark is taller than the template logo;
  keep the footer copy the same height as the header.
------------------------*/
.footer-logo img {
    max-height: 50px;
}

/* ===============================================
  Footer
  Replace the template's purple background photo
  with the same indigo as the header.
------------------------*/
.footer {
    background-image: none;
    background-color: var(--dark-color);
}