/* ===================================================================
   Progressive Enviro Care - Universal type & colour system
   Loaded last. One readable scale and one text palette applied to
   every page, replacing the theme's 14px/#777 defaults and its
   Courgette script eyebrows.
   =================================================================== */

:root {
    /* Text colours - all AA or better on white */
    --text-body: #40535e;      /* 8.1:1 on white */
    --text-muted: #64798a;     /* 4.9:1 on white */
    --text-heading: #0f1f2b;
    --text-on-dark: #d3e3e4;
    --text-on-dark-muted: #9fbcbe;

    /* Type scale - "medium" reading size, fluid on the large end */
    --fs-body: 16px;
    --fs-body-lg: 17px;
    --fs-small: 14px;
    --fs-label: 13px;
    --fs-h4: 19px;
    --fs-h3: clamp(20px, 1.4vw + 15px, 23px);
    --fs-h2: clamp(25px, 2.2vw + 16px, 34px);
    --fs-h1: clamp(31px, 3.4vw + 18px, 46px);

    --lh-body: 1.75;
    --lh-heading: 1.25;
}

/* ---------- Base ---------- */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
}

p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    margin-bottom: 18px;
}

/* ---------- Headings: one family, one scale ---------- */
h1, h2, h3, h4, h5, h6,
.sec-title h2,
.page-title h1 {
    font-family: 'Plus Jakarta Sans', 'Roboto', sans-serif;
    color: var(--text-heading);
    line-height: var(--lh-heading);
    text-wrap: balance;
}

h1, .page-title h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2, .sec-title h2  { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; }
h3                 { font-size: var(--fs-h3); font-weight: 700; }
h4                 { font-size: var(--fs-h4); font-weight: 600; }

/* ---------- Eyebrows: mono label, not script ----------
   Covers every eyebrow variant the theme uses, so they read as one component
   rather than three near-misses. */
.sec-title h3,
.sec-title-two h3,
.about-section .content-column .about-title h3,
.offer-section .content-column .inner-box .about-title h3,
.news-style-one .inner-box .lower-content .upper-box .title,
.gallery-item .inner-box .overlay-box .category {
    font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mint-600, #0fa87e);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Any remaining theme element that asked for the script face gets the
   mono label treatment instead, so nothing falls back to cursive. */
.subtitle,
.title-text,
blockquote cite {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: 0.06em;
}

/* ---------- Body copy across the shared theme components ---------- */
.sec-title p,
.about-section .content-column .inner-box .text,
.about-section .content-column .inner-box .text p,
.services-block .text,
.services-section .text,
.service-detail .text,
.service-detail p,
.content-side .text,
.default-text p,
.text p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
}

.sec-title p {
    font-size: var(--fs-body-lg);
    max-width: 60ch;
}
.sec-title.text-center p,
.sec-title[style*="text-align:center"] p {
    margin-left: auto;
    margin-right: auto;
}

/* Bulleted feature lists used on the service pages */
.list-style-one li,
.list-style-two li,
.list-style-three li {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text-body);
}

/* Justified text in narrow cards opens rivers of white space between words,
   and it gets worse the narrower the column. Ragged right reads better here. */
.services-block .inner-box .text,
.news-style-one .inner-box .lower-content .upper-box .text,
.event-block .inner {
    text-align: left;
    hyphens: none;
}

/* ---------- Links ---------- */
a {
    color: var(--mint-600, #0fa87e);
}
a:hover,
a:focus {
    color: var(--mint-500, #16c294);
}
.text a,
.faq-answer-inner a,
p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Visible keyboard focus everywhere - the theme removed it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mint-500, #16c294);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- Components carried over from the redesign ---------- */
.faq-answer-inner {
    font-size: var(--fs-body);
}
.faq-question {
    font-size: var(--fs-body-lg);
}
.service-tag {
    font-size: 11.5px;
    letter-spacing: 0.1em;
}
.services-block h3,
.services-block h4 {
    font-size: var(--fs-h4);
}
.industry-card .label h3 {
    font-size: 16px;
    font-weight: 700;
}
.client-logo-grid .tile img {
    /* keep logos crisp at the larger grid size */
    image-rendering: auto;
}

/* ---------- Dark sections: readable, not washed out ---------- */
.hero-v2 p,
.process-section p,
.call-to-action p,
.call-to-action-two p,
.page-title p,
.main-footer p {
    color: var(--text-on-dark-muted);
}
.hero-v2 h1,
.process-section h2,
.call-to-action h2,
.call-to-action-two h2,
.page-title h1,
.testimonial-section h2 {
    color: #ffffff;
}

/* ---------- Small print ---------- */
.copyright-text,
.footer-bottom {
    font-size: var(--fs-small);
}

@media (max-width: 600px) {
    :root {
        --fs-body: 15.5px;
        --fs-body-lg: 16px;
    }
}