/* ─── Global theme override: replace orange with red on all pages ────────── */
/* Every var(--rs-theme-orange) call in main.css (hover states, bullet icons, */
/* accordion borders/text, input focus borders, offcanvas active links,        */
/* footer copyright links, social hover backgrounds, etc.) now resolves to    */
/* the same red as --rs-theme-red, giving a consistent all-red theme.         */
:root {
    --rs-theme-orange: #e30613;
}

/* Footer copyright: keep paragraph text white on dark footer backgrounds    */
/* (has-theme-orange p uses --rs-text-secondary/grey; override to white)     */
.rs-copyright-one .rs-footer-copyright.has-theme-orange p {
    color: #ffffff !important;
}

/* ── Feature pages: override hardcoded inline color:#ff6b35 icons ─────────── */
/* These benefit/feature list icons use inline style="color:#ff6b35" which     */
/* the CSS variable override cannot reach. !important in a stylesheet beats    */
/* an inline style without !important, so this cleanly overrides all of them.  */
[style*="color:#ff6b35"],
[style*="color: #ff6b35"] {
    color: #e30613 !important;
}

/* ── Work-process "How It Works" steps: convert orange shape to red ─────────── */
/* The orange SVG shape (fill="#EA5501", hue ≈ 21°) fades in on step hover.     */
/* Apply hue-rotate(-26deg) to shift orange → red (#E30613, hue ≈ 355°) so the  */
/* actual polygon shape renders in red instead of orange.                        */
/* Allow the shape to show (undo any display:none) — main.css already handles   */
/* opacity: 0 → 1 on hover, so the fade-in animation stays intact.              */
.rs-work-step-two.has-theme-orange .rs-work-step-thumb.has-orange {
    display: block !important;
}
.rs-work-step-two.has-theme-orange .rs-work-step-thumb.has-orange img {
    filter: hue-rotate(-26deg);
}
/* Restore transparent background on the number box on hover —                  */
/* the red-filtered polygon shape provides the visual background.               */
.rs-work-step-two.has-theme-orange
    .rs-work-step-item:hover
    .rs-work-step-number {
    background: transparent !important;
    color: #ffffff !important;
}
/* Keep number text bold in normal state */
.rs-work-step-two.has-theme-orange .rs-work-step-number {
    font-weight: 600;
}

/* Custom logo size styling for all pages */
.rs-header-logo img,
header .rs-header-logo img,
.rs-header-one .rs-header-logo img,
.rs-header-two .rs-header-logo img,
.rs-header-three .rs-header-logo img,
.rs-header-four .rs-header-logo img,
.rs-header-five .rs-header-logo img,
.rs-header-six .rs-header-logo img,
.rs-header-seven .rs-header-logo img {
    width: clamp(160px, 18vw, 280px) !important;
    height: auto !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    .rs-header-logo img,
    header .rs-header-logo img,
    .rs-header-one .rs-header-logo img,
    .rs-header-two .rs-header-logo img,
    .rs-header-three .rs-header-logo img,
    .rs-header-four .rs-header-logo img,
    .rs-header-five .rs-header-logo img,
    .rs-header-six .rs-header-logo img,
    .rs-header-seven .rs-header-logo img {
        /* Max height of 42px — width scales proportionally.            */
        /* max-width uses viewport-relative clamp so the logo never     */
        /* crowds out the "Book a Demo" button + hamburger on the right.*/
        /* Formula: screen − container-padding − right-section          */
        /*   right-section ≈ button(~95px) + gap(12px) + hamburger(44px)*/
        /*   ≈ 151px → logo gets ≈ 45 % of viewport, capped at 190px.  */
        max-height: 42px !important;
        height: auto !important;
        width: auto !important;
        max-width: clamp(120px, 45vw, 190px) !important;
    }
}

/* ─── Read More button — match sub-item font size ────────────────────────── */
.rs-btn.has-text {
    font-size: 16px !important;
}

/* ─── Mobile: left-align "How … Works" section titles & descriptions ─────── */
/* Targets the text-center wrapper inside the work-process section on all      */
/* detail pages (dashbord, hazard, incident, inspection, safety-calendar,      */
/* work-permit). Bootstrap's .text-center uses !important, so we need it too. */
@media (max-width: 767px) {
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center {
        text-align: left !important;
    }

    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h1,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h2,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h3,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h4,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h5,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center h6,
    .rs-work-process-content-wrapper .rs-section-title-wrapper.text-center p,
    .rs-work-process-content-wrapper
        .rs-section-title-wrapper.text-center
        span {
        text-align: left !important;
    }
}