/*
 * Accurate Balance site styles.
 *
 * The files in /css/theme/ are the original theme stylesheets and give the site its
 * look. This file holds the theme colour options that WordPress used to print into
 * the page, plus styles for the parts that were rebuilt without plugins.
 */

/* ---- Theme options (colours and type) ---------------------------------- */
:root {
    --ab-accent: #9e9e9e;
    --ab-brown: #9e6d44;
    --ab-gold: #f5b802;
    --ab-header-height: 130px;
}

body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    line-height: 26px;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    color: #161616;
}

a, a:hover, a:focus,
.wbc_menu a:hover,
.wbc-color,
.entry-title a:hover,
.menu-icon:hover,
.menu-icon.menu-open,
.mobile-menu .wbc_menu li a:hover,
.wbc-icon-box:hover .wbc-icon-style-2 .wbc-icon,
.wbc-icon-style-2:hover .wbc-icon {
    color: var(--ab-accent);
}

.wbc-icon-style-2 .wbc-icon,
.btn-primary,
input[type="submit"] {
    background-color: var(--ab-accent);
}

.wbc-icon-style-2,
.btn-primary,
input[type="submit"] {
    border-color: var(--ab-accent);
}

.main-footer { color: #f2f2f2; }
.main-footer .widgets-area h4 { color: #fff; }
.main-footer a { color: var(--ab-brown); }

.special-heading-1,
.special-heading-2 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0;
}

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

/* ---- Header ------------------------------------------------------------ */
.site-logo-title.has-logo { height: var(--ab-header-height); }
.site-logo-title.has-logo img { height: 100%; width: auto; max-width: none; }
.header-inner { min-height: var(--ab-header-height); }
.primary-menu .wbc_menu > li { line-height: var(--ab-header-height); }
.has-fixed-menu .page-wrapper { padding: var(--ab-header-height) 0 0; }

.header-bar.top-fixed-menu { position: fixed; top: 0; left: 0; }
.site-logo-title.has-logo,
.header-inner,
.primary-menu .wbc_menu > li { transition: height 0.25s ease, min-height 0.25s ease, line-height 0.25s ease; }

/* Shrinks once the page is scrolled, as the old sticky menu did. */
.header-bar.is-scrolled { --ab-header-height: 70px; }

button.menu-icon { border: 0; background: none; line-height: 1; cursor: pointer; }

[id] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 991px) {
    :root { --ab-header-height: 83px; }
    .header-bar.is-scrolled { --ab-header-height: 60px; }
    .mobile-menu .primary-menu.mobile-show { display: block; }
    .mobile-menu .primary-menu .wbc_menu > li { line-height: 1.4em; }
    .menu-icon { display: block; }
}

/* ---- Sections ---------------------------------------------------------- */
.ab-section { position: relative; padding: 30px 0 40px; }
.ab-section__title { font-size: 45px; text-align: center; }
.ab-section__rule { width: 120px; height: 5px; margin: 20px auto 32px; }
.ab-section__rule--brown { background-color: var(--ab-brown); }
.ab-section__rule--gold { background-color: var(--ab-gold); }

.ab-intro__heading { font-size: 45px; text-align: center; margin-bottom: 40px; }
.ab-intro__content { padding: 0 30px; }
.ab-intro { padding-bottom: 20px; }
.ab-lodgement { padding-top: 0; }
/* These two sections were full-width rows on the old site, so their columns are wider. */
@media (min-width: 768px) {
    .ab-intro > .container,
    .ab-lodgement > .container { width: auto; max-width: none; }
}

.ab-services { background-color: #fff; padding: 70px 0 20px; }
.ab-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.ab-services__grid .wbc-icon-box { margin-bottom: 40px; }
.ab-services__grid h4 { text-transform: uppercase; }

.ab-latest-posts,
.ab-contact { padding: 70px 0; border-bottom: 1px solid #ebebeb; }

.ab-text__content { max-width: 800px; margin: 0 auto; }
.ab-page-header { padding: 70px 0; min-height: 40vh; }
.ab-archive-title { margin-top: 0; font-weight: 300; }

@media (max-width: 767px) {
    .ab-section__title,
    .ab-intro__heading { font-size: 32px; line-height: 1.2; }
    .ab-services__grid { grid-template-columns: 1fr; }
    .ab-intro__content { padding: 0; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .ab-services__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Testimonials ------------------------------------------------------ */
.ab-testimonials {
    position: relative;
    padding: 130px 0;
    color: #fff;
    background-color: #000;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}
.ab-testimonials .section-overlay { background-color: rgba(0, 0, 0, 0.69); }
.ab-testimonials .container { position: relative; }
@media (max-width: 1024px), (hover: none) {
    .ab-testimonials { background-attachment: scroll; padding: 80px 0; }
}

/* ---- Carousels (testimonials and logos) -------------------------------- */
.ab-carousel__viewport { overflow: hidden; }
.ab-carousel__track { display: flex; transition: transform 0.6s ease; will-change: transform; }
.ab-carousel__slide { flex: 0 0 100%; min-width: 0; }
[data-carousel-multi] .ab-carousel__slide { flex-basis: 20%; padding: 0 10px; text-align: center; }
button.wbc-arrow-buttons { border: 0; cursor: pointer; color: #fff; border-radius: 2px; }
/* No arrows when every item already fits on screen. */
[data-carousel].is-static .wbc-arrow-buttons { display: none; }

.ab-logos { background-color: #fff; padding: 70px 0; }
.ab-logos .wbc-logo img { opacity: 0.6; transition: opacity 0.2s ease; }
.ab-logos .wbc-logo img:hover { opacity: 1; }
@media (max-width: 991px) { [data-carousel-multi] .ab-carousel__slide { flex-basis: 33.3333%; } }
@media (max-width: 600px) {
    [data-carousel-multi] .ab-carousel__slide { flex-basis: 50%; }
    .wbc-logo-wrap { padding: 0 45px; }
}

/* While editing in CloudCannon, lay carousel items out so each can be clicked. */
.ab-in-editor .ab-carousel__track { flex-wrap: wrap; transform: none !important; }
.ab-in-editor .ab-carousel__slide { margin-bottom: 30px; }

/* ---- Blog cards on the home page --------------------------------------- */
.ab-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; margin-bottom: 30px; }
.ab-post-card { border-radius: 2px; min-width: 0; }
.ab-post-card .post-featured { margin-bottom: 0; }
.ab-post-card .post-featured img { display: block; max-width: 100%; }
.ab-post-card .post-contents { background-color: rgba(255, 255, 255, 0.5); padding: 15px 15px 0; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0 0 2px 2px; }
.ab-post-card .entry-content { padding-bottom: 21px; }
@media (max-width: 767px) { .ab-post-grid { grid-template-columns: 1fr; } }

.post-featured img { display: block; }
.entry-content img { margin: 10px 0; }
.entry-content table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 8px; border: 1px solid #ebebeb; text-align: left; vertical-align: top; }

/* ---- Contact ----------------------------------------------------------- */
.ab-contact__eyebrow { font-size: 17px; letter-spacing: 0; color: #cfcfcf; text-align: center; margin-bottom: 0; }
.ab-contact__intro { font-size: 18px; line-height: 1.53486em; text-align: center; margin: 0 auto 55px; max-width: 800px; }
.ab-social { margin-bottom: 25px; }
.ab-social__link { display: inline-block; width: 34px; height: 34px; margin: 0 5px 5px 0; padding: 2px; border: 1px solid; line-height: 0; }
.ab-social__link .fa { display: block; width: 28px; height: 28px; line-height: 28px; font-size: 13px; text-align: center; color: #fff; }
.ab-social__link--facebook { border-color: #00aced; }
.ab-social__link--facebook .fa { background-color: #00aced; }
.ab-social__link--linkedin { border-color: #ea4c89; }
.ab-social__link--linkedin .fa { background-color: #ea4c89; }
.ab-social__link:hover .fa { background-color: transparent; color: inherit; }

.ab-form label { display: block; font-weight: 400; margin-top: 26px; }
.ab-form p { margin-bottom: 0; }
.ab-form input[type="submit"] { float: right; margin-top: 20px; }
.ab-contact .ab-social { margin-top: 10px; }
.ab-contact .col-sm-4 > .wbc-heading { margin-top: 30px; }
.ab-form input[type="text"],
.ab-form input[type="email"],
.ab-form textarea { width: 100%; }
.ab-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ab-form .cf-turnstile { margin-bottom: 15px; }

/* ---- Footer ------------------------------------------------------------ */
.ab-footer-services span { display: block; }
.ab-footer-services span::before { content: "• "; }
.wbc-recent-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
