/*
 * MH Roofing (Shropshire) Ltd — Blue Theme
 * Primary colour: #0535a1
 *
 * Add this stylesheet AFTER your existing stylesheet in the <head>:
 * <link rel="stylesheet" href="/css/blue-theme.css">
 */

:root {
    --mh-primary: #0535a1;
    --mh-primary-dark: #032777;
    --mh-primary-light: #eaf0ff;
    --mh-white: #ffffff;
}

/* Links */
a,
a:visited {
    color: var(--mh-primary);
}

a:hover,
a:focus {
    color: var(--mh-primary-dark);
}

/* Main navigation */
header nav a,
.navbar a,
.main-navigation a,
.site-navigation a {
    transition: color 0.2s ease, background-color 0.2s ease;
}

header nav a:hover,
.navbar a:hover,
.main-navigation a:hover,
.site-navigation a:hover {
    color: var(--mh-primary);
}

/* Buttons and quote/contact calls to action */
button,
input[type="submit"],
input[type="button"],
.btn,
.button,
.wp-block-button__link,
a.btn,
a.button {
    background-color: var(--mh-primary);
    border-color: var(--mh-primary);
    color: var(--mh-white);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
a.btn:hover,
a.button:hover {
    background-color: var(--mh-primary-dark);
    border-color: var(--mh-primary-dark);
    color: var(--mh-white);
}

/* Headings and accent text */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.heading-title {
    --mh-heading-colour: var(--mh-primary);
}

/* Common theme accent elements */
.section-title::after,
.heading-title::after,
.title-separator,
.separator,
.accent-line {
    border-color: var(--mh-primary);
    background-color: var(--mh-primary);
}

/* Icons and highlighted service elements */
.icon-box .icon,
.service-icon,
.feature-icon,
.counter-icon {
    color: var(--mh-primary);
}

/* Header/footer accents and coloured theme sections */
.site-footer a:hover,
footer a:hover {
    color: var(--mh-white);
}

.bg-primary,
.background-primary,
.primary-background {
    background-color: var(--mh-primary);
    color: var(--mh-white);
}

/* Form focus states */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mh-primary);
    outline-color: var(--mh-primary);
    box-shadow: 0 0 0 2px rgba(5, 53, 161, 0.12);
}

/* Selection highlight */
::selection {
    background: var(--mh-primary);
    color: var(--mh-white);
}

.site-footer {
    background: white;
}

.footer-widget__about-text {
  color: var(--roofsie-black);
}

.footer-widget__title {
  color: var(--roofsie-black);
}

.footer-widget__contact-list li .text p a {
  color: var(--roofsie-black);
}

/*
 * If the theme uses different class names for its header, navigation,
 * buttons or section accents, add those selectors here after checking
 * the site's existing HTML/CSS.
 */