/* ==========================================================================
   HOMOGENIZED TYPOGRAPHY SYSTEM
   ========================================================================== */

/* 1. Global Font Definitions
   -------------------------------------------------------------------------- */
/* Force Gilroy-Black for all Headings AND their spans */
h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.hero-heading-custom,
.section-heading-custom,
.title-style-one h2, .title-style-one h4, .title-style-one h6,
.title-style-two h2, .title-style-two h4,
.title-style-nine h2, .title-style-nine h6,
.service-details-one h2, .service-details-one h4,
.fancy-hero-two h1,
.fancy-hero-four h2,
.fancy-hero-five h1,
.hero-banner-thirteen h2 {
    font-family: 'gilroy-black', sans-serif !important;
    font-weight: normal !important; /* gilroy-black is already bold/black */
    color: #1A1A1A; /* Default dark color, specific classes can override color */
}

/* Force Gordita for Body Text and Subtitles */
body, p, li, span, div, a, input, textarea,
.sub-heading, .hero-sub-heading,
.font-rubik, .font-gordita {
    font-family: 'gordita', sans-serif !important;
}

/* EXCEPTION: Headings Spans must keep Gilroy-Black */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-family: 'gilroy-black', sans-serif !important;
}

/* 2. Heading Hierarchy (Desktop)
   -------------------------------------------------------------------------- */

/* H1 - Main Page Titles */
h1, 
.fancy-hero-two h1, 
.fancy-hero-five h1 {
    font-size: 70px !important;
    line-height: 1.1em !important;
    margin-bottom: 30px !important;
}

/* H2 - Section Titles */
h2,
.hero-banner-thirteen h2,
.fancy-hero-four h2,
.title-style-two h2,
.title-style-nine h2,
.service-details-one h2 {
    font-size: 48px !important;
    line-height: 1.2em !important;
    margin-bottom: 25px !important;
}

/* H3 */
h3 {
    font-size: 36px !important;
    line-height: 1.3em !important;
    margin-bottom: 20px !important;
}

/* H4 */
h4 {
    font-size: 28px !important;
    line-height: 1.4em !important;
    margin-bottom: 15px !important;
}

/* H5 */
h5 {
    font-size: 22px !important;
    line-height: 1.4em !important;
    margin-bottom: 15px !important;
}

/* H6 - Often used for "eyebrow" text or small titles */
h6,
.title-style-one h6,
.title-style-nine h6 {
    font-size: 18px !important;
    line-height: 1.5em !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px !important;
}

/* 3. Body Text Hierarchy
   -------------------------------------------------------------------------- */

/* Standard Paragraph */
p, .text-meta {
    font-size: 17px !important;
    line-height: 1.7em !important;
    color: rgba(0,0,0, 0.7); /* Standardize text color opacity */
    margin-bottom: 20px !important;
}

/* Large Subtitles (Hero Sub-headings) */
.sub-heading, 
.hero-sub-heading,
.fancy-hero-four .sub-heading {
    font-size: 20px !important;
    line-height: 1.6em !important;
    color: rgba(0,0,0, 0.8) !important;
}

/* Small Text / Metadata */
.info-text, small {
    font-size: 14px !important;
}

/* 4. Utilities & Overrides
   -------------------------------------------------------------------------- */

/* Text Color Utilities - to preserve white text on dark backgrounds */
.text-white {
    color: #fff !important;
}

.text-white p, 
.text-white .sub-heading {
    color: rgba(255,255,255, 0.9) !important;
}

/* Decoration lines for titles (from index.html style) */
h2 span {
    position: relative;
    display: inline-block;
}

h2 span img {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    z-index: -1;
    height: auto;
}

/* 5. Mobile Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* H1 */
    h1, 
    .fancy-hero-two h1, 
    .fancy-hero-five h1 {
        font-size: 40px !important;
    }

    /* H2 */
    h2,
    .hero-banner-thirteen h2,
    .fancy-hero-four h2,
    .title-style-two h2,
    .title-style-nine h2,
    .service-details-one h2 {
        font-size: 32px !important;
    }

    /* H3 */
    h3 {
        font-size: 26px !important;
    }

    /* H4 */
    h4 {
        font-size: 24px !important;
    }

    /* H5 */
    h5 {
        font-size: 20px !important;
    }

    /* H6 */
    h6 {
        font-size: 16px !important;
    }

    /* Paragraphs */
    p, .text-meta {
        font-size: 16px !important;
    }

    /* Subtitles */
    .sub-heading, 
    .hero-sub-heading {
        font-size: 18px !important;
    }
}