/*
Theme Name: ACT
Description: Theme for Automated Control Technologies, LLC.
Version: 2.0
Requires PHP: 8.0
Text Domain: ACT
*/

:root {
    --navy: #223342;
    --navy-dark: #18252f;
    --red: #c90707;       /* rgb(201, 7, 7) */
    --red-dark: #a00505;  /* hover */
    --panel: #efefef;
    --text: #222;
    --muted: #555;
    --line: #e2e2e2;
    --heading-font: "Times New Roman", Times, Georgia, serif;
    --body-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --gutter: max(24px, 3vw);
    --content-max: 1800px;                 /* reference site: page content stops widening at 1800px */
    --section-width: min(70vw, 1350px);    /* image + text sections: 70% of the window, at most 1350px */

    /* Type sizes grow with the window, matching the reference site
       (fitted to its sizes at 800, 1280 and 1920px wide) */
    --text-body: max(18px, calc(16.3px + .32vw));      /* 20.6px at 1280 */
    --text-small: max(16px, calc(16.1px + .107vw));    /* 17.5px at 1280: menu, lists, footer */
    --text-h2: max(28px, calc(17.65px + 1.714vw));     /* 40.6px at 1280: page and section headings */
    --text-h4: max(21px, calc(18px + .683vw));         /* 26.8px at 1280: footer name */
}

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

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

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: var(--body-font);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--red);
}

    a:hover {
        color: var(--red-dark);
    }

.container {
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Header, home photo and page banners run the full window width, like the reference */
.site-header .container,
.container--wide {
    max-width: none;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.display-heading {
    margin: 0 0 20px;
    color: var(--red);
    font-family: var(--heading-font);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.button {
    display: inline-block;
    padding: 14px 28px;
    border: 0;
    border-radius: 2px;
    background: var(--red);
    color: #fff;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
}

    .button:hover, .button:focus {
        background: var(--red-dark);
        color: #fff;
        text-decoration: none;
    }

.button--large {
    padding: 18px 36px;
    font-size: 18px;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 12px rgba(0, 0, 0, .08);
}

.admin-bar .site-header {
    top: 32px;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 92px;
}

.logo {
    flex: 0 0 auto;
    padding: 10px 0;
    line-height: 0;
}

    /* The logo's lettering is 29 units tall in an 87-unit-tall image,
       so 3x the heading size makes it match the page headings */
    .logo img {
        width: auto;
        height: calc(var(--text-h2) * 3);
    }

.site-header__nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-phone {
    color: var(--navy);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-header .button {
    padding: 12px 24px;
    font-size: 14.5px;
}

.header-social {
    color: var(--navy);
    font-size: 18px;
}

    .header-phone:hover, .header-social:hover {
        color: var(--red);
    }

.menu-toggle {
    display: none;
    margin-left: auto;
    padding: 10px 14px;
    border: 0;
    border-radius: 2px;
    background: var(--navy);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* Menu */

.main-menu .menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu li {
    position: relative;
}

.main-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--text);
    font-size: var(--text-small);
    text-decoration: none;
    white-space: nowrap;
}

    .main-menu a:hover,
    .main-menu .current-menu-item > a,
    .main-menu .current-menu-ancestor > a {
        color: var(--red);
    }

.main-menu .menu-item-has-children > a::after {
    content: "\f107";
    margin-left: 6px;
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
}

.main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border-top: 3px solid var(--red);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

    .main-menu .sub-menu a {
        padding: 8px 20px;
        font-size: 16px;
    }

.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* ---------- Page structure ---------- */

.site-main {
    --site-main-top: 32px;
    padding-top: var(--site-main-top);
}

.hero, .banner {
    overflow: hidden;
    line-height: 0;
}

    .hero img, .banner img {
        width: 100%;
        object-fit: cover;
    }

    .hero img {
        height: clamp(240px, 32vw, 640px);
    }

    .banner img {
        height: clamp(160px, 20vw, 380px);
    }

/* Inner page banners run edge to edge, flush under the header */
.banner {
    margin: calc(-1 * var(--site-main-top, 32px)) calc(-1 * var(--gutter)) 0;
}

    /* Services: tall banner, like the reference's Services page (528px at 1280) */
    .banner--tall img {
        height: clamp(240px, 41vw, 720px);
    }

.page-header--center {
    text-align: center;
}

    .page-header--center .page-header__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

.intro, .page-header {
    padding: 64px 0 24px;
}

.page-header__subtitle {
    max-width: 1000px;
}

.intro__text {
    max-width: 1000px;
}

/* "Indent the page text" (Page titles box): like the reference's About page,
   the text sits in the same centered column as the image + text sections,
   indented from the heading */
.intro__text.content--column,
.content.content--column {
    max-width: none;
    margin-top: 40px;
}

@media (min-width: 1200px) {
    .intro__text.content--column,
    .content.content--column {
        width: var(--section-width);
        margin-left: auto;
        margin-right: auto;
    }
}

    .intro__text p,
    .content--column p {
        margin: 0 0 1.2em;
    }

.intro__subtitle, .page-header__subtitle {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: calc(var(--text-body) * 1.1);
    font-weight: 700;
}

.intro__text, .content {
    color: var(--text);
}

.intro {
    padding-bottom: 72px;
}

.page-header {
    padding-bottom: 8px;
}

/* Page content written in the editor */

.content {
    max-width: 1000px;
    padding-bottom: 64px;
}

    .content h1, .content h2, .content h3, .content h4, .content h5 {
        margin: 40px 0 12px;
        color: var(--red);
        font-family: var(--heading-font);
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .content h1, .content h2 { font-size: calc(var(--text-h2) * .8); }
    .content h3 { font-size: calc(var(--text-h2) * .65); }
    .content h4, .content h5 { font-size: calc(var(--text-body) * 1.15); }

    .content ul {
        padding-left: 22px;
    }

    .content li::marker {
        color: var(--red);
    }

    .content img {
        margin: 8px 0;
    }

    .content .alignleft { float: left; margin: 4px 24px 16px 0; }
    .content .alignright { float: right; margin: 4px 0 16px 24px; }
    .content .aligncenter { display: block; margin: 16px auto; }

    .content::after {
        content: "";
        display: table;
        clear: both;
    }

/* ---------- Image + text sections ---------- */

/*
 * Default: photo and grey panel side by side, photo on the left (--reverse: on the right).
 */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin: 0 auto 96px;
}

/* On wide screens the image + text sections sit in a centered column, like the reference site */
@media (min-width: 1200px) {
    .feature {
        width: var(--section-width);
    }
}

.feature__media {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-height: 380px;
}

    .feature__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.feature__panel {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    padding: clamp(32px, 3.5vw, 64px);
    background: var(--panel);
    color: #000;            /* reference site panel/card text; headings and buttons stay red */
}

.feature--reverse .feature__media {
    grid-column: 2;
}

.feature--reverse .feature__panel {
    grid-column: 1;
}

/*
 * --overlap, like the reference site: the grey panel takes the left half and
 * overlaps the photo (the right 55%) by 5%. The photo is the panel's height
 * plus a margin, so it shows above and below the panel.
 */
.feature--overlap {
    grid-template-columns: repeat(20, 1fr);
}

    .feature--overlap .feature__media {
        grid-column: 10 / 21;
        align-self: stretch;
        min-height: 0;
    }

    .feature--overlap .feature__panel {
        grid-column: 1 / 11;
        margin: clamp(32px, 3vw, 56px) 0;
    }

.feature--no-image {
    grid-template-columns: 1fr;
}

    .feature--no-image .feature__panel {
        grid-column: 1 / -1;
        max-width: 900px;
    }

.feature__intro {
    margin: -8px 0 12px;
    font-weight: 700;
}

.feature__list {
    margin: 0 0 28px;
    padding-left: 20px;
    font-size: var(--text-small);
    line-height: 1.75;
}

    .feature__list li::marker {
        color: var(--red);
    }

    .feature__list a {
        color: #000;
        text-decoration: none;
    }

        .feature__list a:hover {
            color: var(--red);
            text-decoration: underline;
        }

.feature__panel p {
    margin: 0 0 24px;
}

/* ---------- Service cards (Services page) ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    padding: 24px 0 96px;
}

.card {
    padding: clamp(28px, 3.5vw, 50px);
    background: var(--panel);
    color: #000;            /* reference site's card text */
    font-size: var(--text-small);
}

    .card p {
        margin: 0 0 20px;
    }

.card__title {
    margin: 0 0 14px;
    font-family: var(--heading-font);
    font-size: var(--text-h4);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

    .card__title a {
        color: var(--red);
        text-decoration: none;
    }

        .card__title a:hover {
            color: var(--red-dark);
        }

.card__link {
    color: var(--red);
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
}

    .card__link i {
        margin-left: 6px;
        font-size: .85em;
        transition: transform .15s;
    }

    .card__link:hover i {
        transform: translateX(3px);
    }

@media (max-width: 1100px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .cards {
        grid-template-columns: 1fr;
        padding-bottom: 56px;
    }
}

/* ---------- Call to action ---------- */

.cta {
    padding: 80px 0;
    border-top: 1px solid var(--line);
    text-align: center;
}

    .cta p {
        margin: 0 0 32px;
        color: var(--muted);
        font-size: var(--text-body);
    }

    .cta p a {
        color: var(--navy);
        font-weight: 700;
        text-decoration: none;
    }

/* ---------- Contact page ---------- */

/* Like the reference site: one full-width section over the page photo, washed out
   with white, heading and details on the left, form on the right */
.site-main--flush {
    padding-top: 0;
}

.contact {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 140px);
    padding: clamp(56px, 8vw, 120px) 0;
    background:
        linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
        var(--contact-photo, none) center / cover no-repeat;
    color: #000;
}

.contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;               /* reference site: 34px between the columns */
    align-items: start;
}

.contact__title {
    margin: 0 0 24px;
    color: var(--red);
    font-family: var(--heading-font);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.contact__subtitle {
    margin: 0 0 16px;
    font-weight: 700;
}

.contact__details p {
    margin: 0;
    font-size: var(--text-small);
    font-weight: 700;
    line-height: 1.6;
}

    .contact__details a {
        color: #000;
        text-decoration: none;
    }

        .contact__details a:hover {
            color: var(--red);
            text-decoration: underline;
        }

/* Contact Form 7 puts <br>s between fields (and around its hidden spam trap);
   the labels already stack, so they only add uneven gaps */
.contact__form br {
    display: none;
}

.contact__form label {
    display: block;
    width: 100%;
    margin-bottom: 18px;
    color: #000;
    font-size: var(--text-small);
}

.contact__form .wpcf7-text,
.contact__form .wpcf7-email,
.contact__form .wpcf7-textarea,
.contact__form .wpcf7-captchar {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fafafa;
    color: #000;
    font: inherit;
}

    .contact__form .wpcf7-textarea {
        height: 140px;
        resize: vertical;
    }

    .contact__form .wpcf7-text:focus,
    .contact__form .wpcf7-email:focus,
    .contact__form .wpcf7-textarea:focus {
        outline: 2px solid var(--red);
        outline-offset: 0;
    }

.contact__form .wpcf7-submit {
    padding: 17px 30px;
    border: 0;
    border-radius: 0;
    background: var(--red);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
}

    .contact__form .wpcf7-submit:hover {
        background: var(--red-dark);
    }

.contact__form .wpcf7-response-output {
    margin: 16px 0 0;
    background: rgba(255, 255, 255, .85);
}

/* ---------- Blog ---------- */

.blog {
    padding-bottom: 64px;
}

    .blog .card-title a {
        color: var(--navy);
    }

    .blog .btn-primary {
        border-color: var(--red);
        background: var(--red);
    }

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

.site-footer {
    background: var(--navy);
    color: #d5dce3;
    font-size: var(--text-small);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 56px;
}

.site-footer a {
    color: #d5dce3;
    text-decoration: none;
}

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

.site-footer__name {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--red);
    color: #fff;
    font-family: var(--heading-font);
    font-size: var(--text-h4);
    line-height: 1.17;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.site-footer__company p {
    margin: 0 0 12px;
}

.site-footer__company i {
    width: 20px;
    color: #fff;
}

.site-footer__company .indent {
    padding-left: 24px;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
}

    .site-footer__social a:hover {
        border-color: #fff;
        text-decoration: none;
    }

.site-footer__links h3 {
    margin: 4px 0 16px;
    color: #fff;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer__links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links li {
    margin-bottom: 8px;
}

.site-footer__bottom {
    padding: 18px 0;
    background: var(--navy-dark);
    color: #9fb0bf;
    font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .header-phone {
        display: none;
    }
}

@media (max-width: 960px) {
    .site-header__inner {
        flex-wrap: wrap;
        min-height: 76px;
    }

    .menu-toggle {
        display: block;
    }

    .site-header__nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 20px;
    }

    .site-header.is-open .site-header__nav {
        display: flex;
    }

    .main-menu .menu {
        flex-direction: column;
    }

    .main-menu a {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .main-menu .sub-menu {
        position: static;
        display: none;
        padding: 0 0 0 16px;
        border: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .main-menu li:hover > .sub-menu,
    .main-menu li:focus-within > .sub-menu {
        display: none;
    }

    .main-menu li.is-open > .sub-menu {
        display: block;
    }

    .site-header__actions {
        padding-top: 16px;
    }

    .header-phone {
        display: inline;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .contact__inner {
        grid-template-columns: 1fr;
    }

    .contact {
        min-height: 0;
    }

    /* Phones: photo on top, panel below, no overlap */
    .feature,
    .feature--overlap {
        grid-template-columns: 1fr;
        margin-bottom: 48px;
    }

    .feature .feature__media {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        aspect-ratio: auto;
    }

    .feature .feature__panel {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

        .feature__media img {
            height: 260px;
        }

    .feature__panel {
        padding: 32px 28px;
    }
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    :root {
        --gutter: 16px;
    }

    .site-main {
        --site-main-top: 16px;
    }

    .intro, .page-header {
        padding-top: 40px;
    }

    .intro {
        padding-bottom: 48px;
    }

    .cta {
        padding: 56px 0;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
    }
}