/* ==========================================
   GLOBAL SUB-HEADING TEXT STYLES
   
   Unified styling for all h4.sub-heading-text elements
   across the theme for consistency.
========================================== */

/* ==========================================
   BASE SUB-HEADING STYLES
========================================== */
h4.sub-heading-text {
    font-size: var(--body-font-size, 14px);
    font-weight: var(--body-font-weight, 600);
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    margin: 0 0 20px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   SECTION-SPECIFIC COLOR OVERRIDES
========================================== */

/* Tiles Services Section */
.tiles-services-section h4.sub-heading-text {
    color: var(--tiles-services-subheading-color, var(--accent-color, #00AEEF));
}

/* About Section */
.about-section h4.sub-heading-text {
    color: var(--about-subheading-color, #06b3ea);
}

/* Details Section */
.details-section h4.sub-heading-text {
    color: var(--details-subheading-color, var(--primary-color, #06b3ea));
}

/* Where We Do Section */
.where-we-do-section h4.sub-heading-text {
    color: var(--where-we-do-subheading-color, rgba(255, 255, 255, 0.8));

}

/* Contact Form Section */
.contact-form-section h4.sub-heading-text {
    color: var(--contact-form-subheading-color, #06b3ea);
}

/* CTA Section */
.cta-section h4.sub-heading-text {
    color: var(--accent-color, #00AEEF);
}

/* Default for sections without specific color */
.section h4.sub-heading-text,
section h4.sub-heading-text {
    color: var(--accent-color, #00AEEF);
}

/* ==========================================
   DECORATIVE ELEMENTS (::before pseudo)
========================================== */

/* About Section with decorative line */
/* .about-section h4.sub-heading-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 2px;
    background: var(--about-subheading-color, #06b3ea);
    transform: translateY(-50%);
} */

.about-section h4.sub-heading-text {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent-color);
    margin: unset !important;
}

.where-we-do-section h4.sub-heading-text {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent-color);
  }
.details-content-column h4.sub-heading-text {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent-color);
  }

/* Contact Form with decorative line */
/* .contact-form-section h4.sub-heading-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 2px;
    background: var(--contact-form-subheading-color, #06b3ea);
    transform: translateY(-50%);
} */

.contact-form-section .contact-form-container h4.sub-heading-text {
    position: relative;
    /* padding-left: 50px; */
    color: #06b3ea;
    font-size: 0.88rem;
    margin-bottom: 7px !important;
}

/* Where We Do with decorative line */
/* .where-we-do-section h4.sub-heading-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 2px;
    background: var(--where-we-do-subheading-color, rgba(255, 255, 255, 0.8));
    transform: translateY(-50%);
} */

.where-we-do-section h4.sub-heading-text {
    position: relative;
    /* padding-left: 50px; */
}

/* ==========================================
   RESPONSIVE DESIGN
========================================== */
@media (max-width: 768px) {
    h4.sub-heading-text {
        /* font-size: calc(var(--h4-size, 14px) * 0.95); */
        margin-bottom: 16px;
        letter-spacing: 0.8px;
    }

    /* Adjust decorative lines for mobile */
    /* .about-section h4.sub-heading-text,
    .contact-form-section h4.sub-heading-text,
    .where-we-do-section h4.sub-heading-text {
        padding-left: 35px;
    } */

    .about-section h4.sub-heading-text::before,
    .contact-form-section h4.sub-heading-text::before,
    .where-we-do-section h4.sub-heading-text::before {
        left: -35px;
        width: 30px;
        height: 1.5px;
    }
}

@media (max-width: 480px) {
    h4.sub-heading-text {
        /* font-size: calc(var(--h4-size, 14px) * 0.9); */
        margin-bottom: 12px;
        letter-spacing: 0.6px;
    }

    /* Further adjust for small mobile */
    /* .about-section h4.sub-heading-text,
    .contact-form-section h4.sub-heading-text,
    .where-we-do-section h4.sub-heading-text {
        padding-left: 25px;
    } */

    .about-section h4.sub-heading-text::before,
    .contact-form-section h4.sub-heading-text::before,
    .where-we-do-section h4.sub-heading-text::before {
        left: -25px;
        width: 20px;
        height: 1px;
    }
}

/* ==========================================
   ACCESSIBILITY
========================================== */
@media (prefers-reduced-motion: reduce) {
    h4.sub-heading-text::before {
        transition: none;
    }
}

/* ==========================================
   PRINT STYLES
========================================== */
@media print {
    h4.sub-heading-text {
        color: black !important;
        font-size: 12px !important;
    }

    h4.sub-heading-text::before {
        display: none;
    }
}