/*
 * Quality Title theme.
 * Colors, sizes and breakpoints follow the original WordPress theme (Bizberg with the
 * Construction Master child theme): Bootstrap 3 container widths at 768 / 992 / 1200px,
 * and the banner type sizes it used at 480 and 1024px.
 */

/*
 * Self-hosted fonts (SIL Open Font License, see ../fonts/OFL.txt). Open Sans comes in the
 * regular weight only, like in the old theme, so the browser draws the bold form labels.
 */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }

:root {
    --yellow: #fcb80b;
    --yellow-dark: #ca9409;
    --text: #64686d;
    --input-text: #222;
    --input-border: #ddd;
    --footer-bg: #1f2024;
    --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-heading: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-banner: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-footer: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Full-height column so the footer sits at the bottom of the window on short pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* excludes mobile browser toolbars where supported */
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    /* An em value, as in the old theme: children inherit the computed 25.2px, not the ratio. */
    line-height: 1.8em;
    color: var(--text);
    background-color: #fff;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--text); }
a:hover { color: var(--yellow); }
a:focus-visible { outline: 1px dashed var(--yellow); outline-offset: -2px; }

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.skip-link {
    position: absolute;
    top: -3em;
    left: 0.5em;
    z-index: 100;
    padding: 0.5em 1em;
    color: #000;
    background-color: #fff;
}
.skip-link:focus { top: 0.5em; }

/* ---------- Header ---------- */

.site-header { background-color: #fff; }

.header-inner {
    display: flex;
    align-items: center;
    min-height: 89px;
}

.logo { display: block; padding: 19px 0; }

.logo img {
    display: block;
    width: auto;
    max-height: 51px;
}

/* ---------- Banner (home page) ---------- */

.banner {
    position: relative;
    padding: 35px 0;
    background: rgba(20, 20, 20, 0.8) url("../images/banner.jpg") center bottom / cover no-repeat;
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.6), rgba(151, 109, 5, 0.55));
}

.banner-text {
    position: relative;
    width: 94%;
    margin: 0 auto;
    padding: 60px 0;
    color: #fff;
    text-align: center;
}

.banner-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 55px;
    font-weight: 400;
    line-height: 1;
}

.banner-subtitle {
    margin: 0;
    padding-top: 10px;
    font-family: var(--font-banner);
    font-size: 16px;
    line-height: 1.4;
}

.banner-subtitle a { color: inherit; text-decoration: none; }
.banner-subtitle a:hover { color: inherit; text-decoration: underline; }

/* ---------- Content ---------- */

.site-content { padding: 50px 0; }

.entry-title {
    position: relative;
    margin: 0 0 15px;
    padding: 5px 0 10px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text);
}

.entry-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    border-bottom: 2px solid currentColor;
}

.entry-content p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 24px;
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--yellow);
}

/* ---------- Contact form ---------- */

.form-field { margin-bottom: 25px; }

.form-label {
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
}

/* The old form did not mark required fields. */
.form-label .required { display: none; }

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content textarea {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    color: var(--input-text);
    background-color: #fff;
    border: 1px solid var(--input-border);
    border-radius: 0;
}

.entry-content textarea {
    height: auto;
    padding: 8px 12px;
    line-height: 21px;
    resize: vertical;
}

.form-field.has-errors input,
.form-field.has-errors textarea { border-color: #dc3232; }

/* Room for the widget before it loads. */
.h-captcha-container { min-height: 76px; }
.h-captcha-widget iframe { display: block; }

.form-field:has(.h-captcha-container) { margin-bottom: 20px; }

.buttons { margin: 0 0 20px; }

.buttons .button {
    display: inline-block;
    margin: 0;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--input-text);
    background-color: var(--yellow);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.buttons .button:hover { background-color: var(--yellow-dark); }

/* Form messages, in the colors of the old contact form's response box. */
.notices {
    margin: 0 0 25px;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
}

.entry-content .notices p { margin: 0; font-size: 14px; line-height: inherit; }
.notices.green, .notices.success { border-color: #46b450; }
.notices.red, .notices.error { border-color: #dc3232; }
.notices.yellow, .notices.warning { border-color: #ffb900; }

/* ---------- Footer ---------- */

.site-footer {
    margin-top: auto;
    padding: 20px 0 30px;
    color: #fff;
    text-align: center;
    background-color: var(--footer-bg);
}

.footer-menu {
    margin: 0;
    padding: 15px 0;
    list-style: none;
}

.footer-menu li { display: inline-block; }

/* Today's Montserrat is lighter than the old theme's copy; 600 matches its regular weight. */
.copyright {
    margin: 0;
    font-family: var(--font-footer);
    font-size: 13px;
    font-weight: 600;
}

.site-footer a {
    display: inline-block;
    font-family: var(--font-footer);
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
}

.site-footer a:hover { color: #fff; }

/* ---------- Larger screens ---------- */

@media (min-width: 481px) {
    .banner-title { font-size: 70px; }
    .banner-subtitle { font-size: 20px; }
}

@media (min-width: 640px) {
    .banner { padding: 60px 0; }
    .banner-text { width: auto; }
    .entry-title { font-size: 21px; }
}

@media (min-width: 768px) {
    .container { width: 750px; }
    .header-inner { min-height: 71px; }
    .logo { padding: 10px 0; }

    /* Ten of twelve Bootstrap columns, centered (col-sm-10 col-sm-offset-1). */
    .entry { width: calc(83.3333% - 5px); margin: 0 auto; }
}

/* Past 768px the old theme's logo lined up with the outer edge of the container. */
@media (min-width: 769px) {
    .header-inner { padding-right: 0; padding-left: 0; }
}

@media (min-width: 992px) {
    .container { width: 970px; }
}

@media (min-width: 1024px) {
    .entry-title { font-size: 24px; }
}

@media (min-width: 1025px) {
    /* The old theme's menu, hidden but still taking up room, made the header this tall. */
    .header-inner { min-height: 77px; }
    .banner-title { font-size: 50px; line-height: 1.5; }
    .banner-subtitle { line-height: 1.6; }
}

@media (min-width: 1101px) {
    .banner-text { padding-right: 150px; padding-left: 150px; }
}

@media (min-width: 1200px) {
    .container { width: 1170px; }
}

@media print {
    .skip-link, .form-wrapper { display: none; }
    .banner { padding: 0; background: none; }
    .banner::before { display: none; }
    .banner-text, .site-footer, .site-footer a { color: #000; }
    .site-footer { background: none; }
}