/**
 * SEO-Optimized Heading Styles
 * 
 * Purpose: These classes style <p>, <strong>, and <div> elements to look
 * exactly like h2-h6 headings, preserving UI while improving SEO structure.
 * 
 * Usage: Replace heading tags in loops with these classes to avoid
 * creating too many semantic headings while maintaining visual design.
 */

/* ===================================================================
   BLOG TITLE STYLES (replaces h2 and h4 in blog loops)
   =================================================================== */

/* Blog title in list view (replaces <h2> in blog cards) */
.blog-title-text {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f0f0f;
    margin: 0 0 15px 0;
    display: block;
    transition: all 0.3s ease;
    font-family: inherit;
}

/* Blog title in grid view (replaces <h4> in blog cards) */
.optech-blog-grid .blog-title-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

/* Hover effect for blog titles */
a:hover .blog-title-text {
    color: var(--primary-color, #3858f5);
}

/* ===================================================================
   SERVICE TITLE STYLES (replaces h4 and h5 in service loops)
   =================================================================== */

/* Service title (replaces <h5> in service cards) */
.service-title-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f0f0f;
    margin: 0 0 12px 0;
    display: block;
    transition: all 0.3s ease;
    font-family: inherit;
}

/* Font weight utility class (replaces <strong> for visual emphasis) */
.fw-semibold {
    font-weight: 600;
}

/* FAQ question text styling */
.faq-question-text {
    font-weight: 600;
    margin: 0;
    color: #0f0f0f;
}

a:hover .service-title-text {
    color: var(--primary-color, #3858f5);
}

/* ===================================================================
   PROJECT/PORTFOLIO TITLE STYLES (replaces h4 in project loops)
   =================================================================== */

/* Project title (replaces <h4> in project cards) */
.project-title-text {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f0f0f;
    margin: 0 0 10px 0;
    display: block;
    transition: all 0.3s ease;
    font-family: inherit;
}

a:hover .project-title-text {
    color: var(--primary-color, #3858f5);
}

/* ===================================================================
   PRICING/PACKAGE TITLE STYLES (replaces h4 in pricing cards)
   =================================================================== */

/* Package title (replaces <h4> in pricing cards) */
.package-title-text {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f0f0f;
    margin: 0 0 12px 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   TEAM MEMBER TITLE STYLES (replaces h4 and h5)
   =================================================================== */

/* Team member name (replaces <h4>) */
.team-name-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f0f0f;
    margin: 0 0 8px 0;
    display: block;
    font-family: inherit;
}

/* Team member designation (replaces <h5>) */
.team-designation-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #666;
    margin: 0 0 10px 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   FOOTER HEADING STYLES (keeps h5 appearance)
   =================================================================== */

/* Footer section titles - these can remain as h5 for SEO */
/* No replacement needed, but added for consistency */
.footer-title-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 20px 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   TABLE/LIST ITEM TITLE STYLES (replaces h4 in admin tables/lists)
   =================================================================== */

/* Item title in tables or lists (replaces <h4>) */
.item-title-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    margin: 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   TESTIMONIAL TITLE STYLES
   =================================================================== */

/* Testimonial author name (replaces <h4>) */
.testimonial-name-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f0f0f;
    margin: 0 0 5px 0;
    display: block;
    font-family: inherit;
}

/* Testimonial author position (replaces <h5>) */
.testimonial-position-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #666;
    margin: 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   FAQ TITLE STYLES (replaces h4/h5 in FAQ items)
   =================================================================== */

/* FAQ question title (replaces <h4>) */
.faq-question-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #0f0f0f;
    margin: 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   CATEGORY/TAG TITLE STYLES
   =================================================================== */

/* Category title (replaces <h4>) */
.category-title-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f0f0f;
    margin: 0 0 10px 0;
    display: block;
    font-family: inherit;
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

/* Strong emphasis within styled text */
.seo-strong {
    font-weight: 700;
}

/* Ensure consistent styling when wrapped in links */
a .blog-title-text,
a .service-title-text,
a .project-title-text,
a .team-name-text,
a .item-title-text {
    text-decoration: none;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 991px) {
    .blog-title-text {
        font-size: 24px;
    }

    .service-title-text,
    .project-title-text {
        font-size: 20px;
    }

    .package-title-text {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .blog-title-text {
        font-size: 20px;
    }

    .optech-blog-grid .blog-title-text {
        font-size: 18px;
    }

    .service-title-text,
    .project-title-text {
        font-size: 18px;
    }

    .package-title-text {
        font-size: 20px;
    }

    .team-name-text {
        font-size: 18px;
    }
}