/* =====================================================================
   Total Technologies — brand overrides
   Loaded after style.css. Keep this file small; it is the only place the
   template's own CSS is overridden, so a template update stays mergeable.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Brand palette — taken from the supplied Total Technologies logo.

   The template drives every accent through three custom properties, set
   per body class (TEMPLATE_AUDIT.md §7). Rebranding is this block, not a
   hunt through 797 KB of style.css.

   The logo pairs a cyan blue with a lime green. Blue leads here because the
   template's hero imagery, overlays and gradients are all built on a blue
   primary — leading with green fights them. Green carries the accents.
   Swap --theme-color and --theme-color3 to flip that if the business
   prefers green-forward.
   --------------------------------------------------------------------- */
body.theme-tt {
    --theme-color:  #00AEEF;   /* logo blue  */
    --theme-color2: #0089BC;   /* darker blue for gradients and hovers */
    --theme-color3: #8DC63F;   /* logo green, accent */
}

/* ---------------------------------------------------------------------
   Form validation feedback (§13.7)
   The template has no error state for form fields; server-side validation
   needs one.
   --------------------------------------------------------------------- */
.form-error-text {
    color: #E53935;
    font-size: 14px;
    line-height: 1.4;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #E53935;
}

.form-alert {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
}

.form-alert-success {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    color: #1B5E20;
}

.form-alert-error {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #B71C1C;
}

/* ---------------------------------------------------------------------
   Testimonial star rating.
   The chosen testimonial component ships without star markup, but §10
   specifies a rating column (TEMPLATE_AUDIT.md §4).
   --------------------------------------------------------------------- */
.testi-grid5_review {
    color: #FFB800;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   Consent checkbox (§7).
   The mandatory checkbox must be legible and its two links obviously
   clickable — they are a compliance requirement, not decoration.
   --------------------------------------------------------------------- */
.consent-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.consent-group input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    cursor: pointer;
}

.consent-group label {
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
    margin: 0;
}

.consent-group label a {
    color: var(--theme-color);
    text-decoration: underline;
}

.consent-group label a:hover {
    color: var(--theme-color2);
}

/* ---------------------------------------------------------------------
   Long-form legal pages.
   The template has no prose layout (TEMPLATE_AUDIT.md §7) — Privacy Policy,
   Terms & Conditions and the Refund Policy all need one.
   --------------------------------------------------------------------- */
.legal-content {
    font-size: 16px;
    line-height: 1.85;
    color: var(--body-color, #5B6B7C);
}

.legal-content h2 {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 14px;
    color: var(--title-color, #101A33);
}

.legal-content p {
    margin-bottom: 18px;
}

.legal-content ul {
    margin: 0 0 20px;
    padding-left: 22px;
    list-style: disc;
}

.legal-content ul li {
    margin-bottom: 9px;
    padding-left: 4px;
}

.legal-content a {
    color: var(--theme-color);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--theme-color2);
}

/* The clauses required verbatim by spec §8 and §9. Given visual weight so a
   reviewer can find them, and so nobody edits them by accident. */
.legal-content .legal-clause {
    border-left: 4px solid var(--theme-color);
    background: rgba(0, 174, 239, 0.06);
    padding: 18px 22px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 22px;
    font-weight: 500;
    color: var(--title-color, #101A33);
}

/* ---------------------------------------------------------------------
   Service detail page
   --------------------------------------------------------------------- */
.page-single .page-img img {
    border-radius: 12px;
    margin-bottom: 30px;
}

.page-content .lead {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--title-color, #101A33);
    margin-bottom: 20px;
}

.sidebar-area .widget_nav_menu .menu li.active > a {
    color: var(--theme-color);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Logo sizing.

   The supplied logo.png is 200x54 (aspect 3.70). Constrain by HEIGHT with
   width:auto so the aspect ratio is always preserved and the artwork can
   never be stretched to fit a box.

   The template caps .header-logo at max-width:150px, which would squeeze the
   logo below its natural width; overridden here so 42px height wins.
   --------------------------------------------------------------------- */
.header-logo,
.mobile-logo {
    max-width: none;
}

/* The template gives .header-logo 15px of padding top and bottom, which on top
   of .menu-area's own 16px left the logo floating in ~34px of white above and
   below its artwork and made the header bar 116px tall for a 45px-tall mark.
   5px here brings the bar to 96px; the remaining gap is .menu-area's padding,
   which the nav and the CTA button share and which should stay.

   Note this cannot close the gap completely: tt-logo.png carries its own white
   margin baked into the file (5px left, 3px right, 6px top, 3px bottom), so a
   few pixels of white sit inside the image no matter what the CSS says. */
.header-logo {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* 86px fills the 96px header band.

   THIS UPSCALES. tt-logo.png is 200x54, so an 86px box renders it at 319px
   wide — 1.59x its real size — and it will look soft, more so on a high-DPI
   screen. Chosen deliberately in favour of presence over sharpness. Supply a
   319x86 (or larger) logo and this becomes crisp with no CSS change. */
.header-logo img {
    height: 86px;
    width: auto;
    max-width: 100%;
    max-height: none;
}

/* The band is pinned to 96px and the logo is centred in it, rather than the
   band being the sum of the logo plus padding. That inversion is the point: the
   logo can change size at a breakpoint without the band ever growing.

   .menu-area's own 16px top and bottom is dropped here or it would add to the
   96px. Scoped to .header-layout19 to match the specificity of the template rule
   it overrides (`.header-layout19 .menu-area`) — a bare `.menu-area` loses to it
   and silently does nothing. That class is on <header> in
   includes/partials/header.php; if the layout is swapped, this must follow it. */
@media (min-width: 992px) {
    .header-layout19 .menu-area {
        padding-top: 0;
        padding-bottom: 0;
    }

    .header-logo {
        height: 96px;
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* 1200-1399px is the one tight window: the container narrows to 1140px while
   the Call Us button is still shown, leaving about 296px for the logo. At 319px
   the button wrapped onto a second line and the header broke. Below 1200px the
   button is hidden and the full size fits again. The band stays 96px either way
   — only the logo inside it steps down. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-logo img {
        height: 78px;
    }
}

.mobile-logo img {
    height: 48px;
    width: auto;
    max-width: 100%;
}

/* Below the desktop breakpoint the nav collapses to a burger, but the row is
   tighter and a 319px logo would crowd it, so it steps back down. */
@media (max-width: 991px) {
    .header-logo img {
        height: 54px;
    }
}

@media (max-width: 575px) {
    .header-logo img {
        height: 40px;
    }
}


/* ---------------------------------------------------------------------
   About Us — the client logo strip as a standalone band.

   `.brand-area12` carries a dark background (#1c1c25) in the template. On the
   homepage that is deliberate: the strip sits directly beneath the dark hero
   and reads as a continuation of it. On About Us there is no dark section
   above, so the same block renders as an isolated dark band between two white
   ones — which makes any padding imbalance inside it very visible.

   The `space-bottom` utility used to be applied here, giving the band 30px of
   padding above the logos and 120px below: the logos sat near the top of the
   band with a large empty dark area under them.

   Two separate concerns, kept separate:
     - padding  = space INSIDE the dark band. Left at the template's
                  symmetric `30px 0`, so the logos are vertically centred.
     - margin   = space OUTSIDE the band, against the neighbouring sections.
                  Applied here because the CTA wrapper below contributes no
                  top padding of its own, and because margin sits outside the
                  background it cannot reintroduce the imbalance.

   Scoped to its own class: the homepage strip must keep butting against the
   hero, so .brand-area12 is not restyled globally.
   --------------------------------------------------------------------- */
.brand-area12.brand-strip-standalone {
    margin-bottom: var(--section-space);
}

/* The template's own `.space` utilities swap to --section-space-mobile below
   992px. Mirroring that breakpoint here keeps the band's bottom margin equal
   to the preceding section's bottom padding at every width — without it the
   white space reads 80px above and 120px below on phones. */
@media (max-width: 991px) {
    .brand-area12.brand-strip-standalone {
        margin-bottom: var(--section-space-mobile);
    }
}

/* ---------------------------------------------------------------------
   Service detail hero image.

   The seed pointed these at 267x171 thumbnails which the template renders at
   ~703px wide — a 2.63x upscale, and visibly blurred. They now point at source
   images of at least 789px, so the browser downscales instead.

   The replacements do not share one aspect ratio (789x500, 789x400, 960x571),
   which would give each service page a different image height. Pinning the box
   to 16/9 and letting the image cover it keeps the set consistent; the crop is
   mild because every source sits between 1.58 and 1.97.
   --------------------------------------------------------------------- */
.page-single .page-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}