/* Static-site additions: replaces Revolution Slider, Angular projects app,
   and Contact Form 7 with plain HTML/CSS equivalents. */

/* ---- Consistent layout: always reserve the scrollbar gutter so the page
   (and the right-hand menu) doesn't shift between short and long pages ---- */
html {
    overflow-y: scroll;
}

/* ---- Sidebar menu: the theme applies this flex rule per page class
   (.home, .staff, .blog, ...) but omitted .about, which made the menu
   jump on the About page. Match the others. ---- */
.about .content .content-area .right {
    display: flex;
    justify-content: center;
}

/* ---- Site-wide Open Sans typography ---- */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div,
input, textarea, button, select {
    font-family: 'Open Sans', sans-serif !important;
}

/* ---- Header: room between the logo and "Learn About Us" ---- */
.header .logo .sub-logo,
.site-header .sub-logo {
    display: inline-block;
    margin-top: 14px;
}

/* ---- Home hero slider ---- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-color: #fff;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
}
.hero-caption {
    position: absolute;
    left: 0;
    bottom: 12%;
    z-index: 5;
    max-width: 339px;
    padding: 10px;
    background-color: rgba(128, 128, 128, 0.75);
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
}
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: rgba(128, 128, 128, 0.6);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    border: 1px solid #fff;
    font-size: 30px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
}
.hero-arrow:hover,
.hero-arrow:focus,
.hero-arrow:active {
    background-color: rgba(128, 128, 128, 0.85);
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #fff;
    outline: none;
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
@media (max-width: 767px) {
    .hero-slider { height: 300px; }
    .hero-caption { max-width: 85%; bottom: 10%; }
    .hero-prev { left: 12px; }
    .hero-next { right: 12px; }
}


/* ---- Contact form: uniform full-width fields ---- */
.contact .content .content-area .left .right .contact-form .form-name,
.contact .content .content-area .left .right .contact-form .form-email,
.contact .content .content-area .left .right .contact-form .form-phone,
.contact .content .content-area .left .right .contact-form .form-message,
.contact .content .content-area .left .right .contact-form .form-submit {
    width: 100%;
}
.contact .contact-form .wpcf7-form-control-wrap {
    display: block;
}
.contact .contact-form input.wpcf7-text,
.contact .contact-form input.wpcf7-email,
.contact .contact-form textarea.wpcf7-textarea {
    width: 100%;
    box-sizing: border-box;
}
/* Theme paints email/phone/message in light gray (#afafaf) but its .name
   selector never matched the Name input, which stayed dark. Match them all
   to the darker Name-field color. */
.contact .content .content-area .left .right .contact-form .form-email .email,
.contact .content .content-area .left .right .contact-form .form-phone .phone,
.contact .content .content-area .left .right .contact-form .form-message .message {
    color: #666;
}

/* ---- Projects keyword filter ---- */
.keyword-search #clearSearch {
    cursor: pointer;
}