/**
 * Heading Compatibility Layer
 * ===========================
 * After removing all H2/H3/H4 tags (converted to <div>),
 * this file preserves the visual typography for elements
 * that were formerly headings.
 *
 * NOTE: the_content() still outputs real h2/h3/h4 from the
 * WordPress editor — those are NOT affected by this conversion.
 * This file only covers template-level title classes.
 */

/* ═══════════════════════════════════════════════════
   1. BASE HEADING TYPOGRAPHY
   ═══════════════════════════════════════════════════ */

.section-title,
.section-title-v2,
.entry-title,
.cta-title,
.cta-title-v4,
.hero-title-v2,
.comments-title,
.footer-title,
.newsletter-title,
.category-title,
.about-contact__title,
.ct-form-title,
.sp-section-title,
.bc-title,
.fpc-title,
.fp-title,
.widget-title,
.card-title,
.post-title,
.service-card-title,
.portfolio-card-title,
.pricing-card-title,
.solution-card-title,
.solution-title,
.process-title,
.process-step-title,
.deliverable-title,
.office-model-title,
.type-card-title,
.type-title,
.news-card-title,
.news-title,
.news-featured-title,
.gallery-title,
.video-title,
.related-posts-title,
.related-post-title,
.related-product-title,
.spost-related-title,
.spost-widget-title,
.sp-related-title,
.recent-post-title,
.result-title,
.service-title,
.product-title,
.project-title,
.project-card-title,
.portfolio-title,
.featured-title,
.ablog-card-title,
.about-services__card-title,
.ap-card-title,
.pc-title,
.cta-widget-title,
.ct-info-title,
.month-title,
.page-subtitle,
.step-title,
.value-title,
.pain-point-title,
.why-item-title,
.position-title {
    font-family: var(--font-heading-vn, var(--ath-font-primary, var(--font-heading, 'Montserrat', sans-serif)));
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.02em;
}

/* H2-level sizing */
.section-title,
.section-title-v2,
.entry-title,
.cta-title,
.cta-title-v4,
.hero-title-v2,
.comments-title,
.newsletter-title,
.category-title,
.about-contact__title,
.sp-section-title,
.bc-title,
.fpc-title,
.fp-title,
.portfolio-title,
.featured-title {
    font-size: var(--ath-fs-3xl, 1.875rem);
    margin-bottom: 1rem;
}

/* H3-level sizing */
.widget-title,
.card-title,
.post-title,
.footer-title,
.service-card-title,
.portfolio-card-title,
.pricing-card-title,
.solution-card-title,
.solution-title,
.process-title,
.process-step-title,
.deliverable-title,
.office-model-title,
.type-card-title,
.type-title,
.news-card-title,
.news-title,
.news-featured-title,
.gallery-title,
.video-title,
.related-posts-title,
.related-post-title,
.related-product-title,
.spost-related-title,
.spost-widget-title,
.sp-related-title,
.recent-post-title,
.result-title,
.service-title,
.product-title,
.project-title,
.project-card-title,
.ablog-card-title,
.about-services__card-title,
.ap-card-title,
.pc-title,
.cta-widget-title,
.ct-form-title,
.ct-info-title,
.month-title,
.page-subtitle {
    font-size: var(--ath-fs-2xl, 1.5rem);
    font-weight: 600;
}

/* H4-level sizing */
.step-title,
.value-title,
.pain-point-title,
.why-item-title,
.position-title {
    font-size: var(--ath-fs-xl, 1.25rem);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   2. DARK SECTION / CONTAINER COLORS
   Replaces: .section-dark h2, .bg-dark h2, etc.
   ═══════════════════════════════════════════════════ */

.section-dark .section-title,
.section-dark .section-title-v2,
.section-dark .widget-title,
.section-dark .card-title,
.section-dark .post-title,
.section-dark .entry-title,
.section-dark .cta-title,
.section-dark .footer-title,
.section-dark .process-title,
.section-dark .service-title,
.section-dark .solution-title,
.section-dark .solution-card-title,
.section-dark .pricing-card-title,
.section-dark .sp-section-title,
.bg-dark .section-title,
.bg-dark .section-title-v2,
.bg-dark .widget-title,
.bg-dark .card-title,
.bg-dark .post-title,
.bg-dark .entry-title,
.bg-dark .cta-title,
.bg-dark .footer-title,
.bg-dark .process-title,
.bg-dark .service-title,
.dark-section .section-title,
.dark-section .card-title,
.dark-section .widget-title,
.dark-section .cta-title,
.dark-section .entry-title,
.bg-dark-gradient .section-title,
.bg-dark-gradient .card-title,
.bg-dark-gradient .cta-title,
.footer-main .footer-title,
.footer-main .widget-title,
.footer-cta-section .cta-title,
.footer-cta-section .section-title {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════
   3. PAGE-TYPE DARK THEMES (from global-text-fix.css)
   Replaces: .services-main-page h2, body.single-product h2, etc.
   ═══════════════════════════════════════════════════ */

/* Services pages (dark bg) */
.services-main-page .section-title,
.services-main-page .section-title-v2,
.services-main-page .card-title,
.services-main-page .service-card-title,
.services-main-page .service-title,
.services-main-page .process-title,
.services-main-page .process-step-title,
.services-main-page .cta-title,
.services-main-page .widget-title,
.services-main-page .step-title,
.services-main-page .why-item-title,
.services-main-page .type-title,
.services-main-page .type-card-title,
.services-main-page .pricing-card-title {
    color: #ffffff !important;
}

/* Service detail pages (F&B, playground, etc.) */
.service-detail-page .section-title,
.service-detail-page .section-title-v2,
.service-detail-page .card-title,
.service-detail-page .service-card-title,
.service-detail-page .cta-title,
.service-detail-page .widget-title,
.service-detail-page .process-title,
.service-detail-page .type-title,
.service-detail-page .type-card-title,
.service-detail-page .pricing-card-title,
.service-detail-page .step-title,
.service-detail-page .why-item-title,
.fb-service .section-title,
.fb-service .card-title,
.fb-service .cta-title,
.playground-service .section-title,
.playground-service .card-title,
.playground-service .cta-title,
.education-service .section-title,
.education-service .card-title,
.retail-service .section-title,
.retail-service .card-title,
.office-service .section-title,
.office-service .card-title,
.residential-service .section-title,
.residential-service .card-title {
    color: #ffffff !important;
}

/* Single product (dark bg) */
body.single-product .section-title,
body.single-product .sp-section-title,
body.single-product .sp-related-title,
body.single-product .card-title,
body.single-product .widget-title,
body.single-product .product-title,
body.single-product .cta-title {
    color: #ffffff !important;
}

/* Portfolio page */
.portfolio-modern-page .section-title,
.portfolio-modern-page .card-title,
.portfolio-modern-page .project-card-title,
.portfolio-section-v2 .section-title {
    color: var(--ath-dark, #1a1a1a);
}

/* Blog & archive pages */
body.blog .section-title,
body.blog .post-title,
body.blog .card-title,
body.blog .widget-title,
body.archive .section-title,
body.archive .post-title,
body.archive .card-title,
body.archive .widget-title,
body.search .section-title,
body.search .result-title,
body.search .card-title,
body.search .widget-title {
    color: #ffffff !important;
}

body.error404 .section-title,
body.error404 .card-title {
    color: #ffffff !important;
}

/* Single post (light bg content) */
body.single-post .entry-content .section-title {
    color: #1a1a1a;
}

/* WooCommerce shop (light bg) */
body.woocommerce:not(.single-product) .section-title,
body.woocommerce:not(.single-product) .product-title,
body.woocommerce:not(.single-product) .card-title {
    color: #1a1a1a;
}

/* Homepage sections */
body.home .solutions .section-title,
body.home .solutions .solution-title,
body.home .solutions .solution-card-title,
body.home .portfolio .section-title,
body.home .portfolio .portfolio-card-title,
body.home .contact .section-title,
body.home .contact .cta-title {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   4. ENTRY CONTENT (blog/page via the_content())
   NOTE: the_content() outputs real h2/h3/h4
   These rules are for template-level elements only
   ═══════════════════════════════════════════════════ */

.entry-content .section-title {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.entry-content .card-title,
.entry-content .widget-title {
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
}

.entry-content .step-title,
.entry-content .value-title {
    font-size: 1.125rem;
    margin: 1.5rem 0 0.75rem;
}

/* ═══════════════════════════════════════════════════
   5. PAGE BODY (pages with dark bg)
   ═══════════════════════════════════════════════════ */

.page-body .section-title,
.page-body .card-title,
.page-body .widget-title,
.page-body .post-title,
.page-body .entry-title,
.page-body .service-title,
.page-body .cta-title {
    font-family: var(--ath-font-heading, 'Montserrat', sans-serif);
    color: var(--ath-light, #fff);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════
   6. SIDEBAR WIDGETS
   ═══════════════════════════════════════════════════ */

.sidebar-widget .widget-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ath-light, #fff);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════
   7. WOOCOMMERCE
   Replaces: .woocommerce-tabs .panel h2,
              .woo-related-section .related > h2
   ═══════════════════════════════════════════════════ */

.sp-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.sp-related-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.woocommerce-tabs .panel .section-title,
.woocommerce-tabs .panel .sp-section-title {
    font-size: 22px;
    color: var(--atrahi-dark, #1a1a1a);
    margin-bottom: 20px;
}

.woo-related-section .section-title,
.woo-related-section .related-posts-title,
.woo-related-section .sp-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    text-align: center;
    margin-bottom: 40px;
}

/* ═══════════════════════════════════════════════════
   8. SECTION-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════ */

/* Footer CTA */
.footer-cta-content .cta-title,
.footer-cta-content .section-title {
    font-size: 1.875rem;
    color: #fff;
}

/* Hero sections */
.hero-section .section-title,
.hero-v2 .section-title,
.hero-v2 .hero-title-v2 {
    color: #fff;
}

/* CTA sections */
.cta-content .cta-title,
.service-cta-content .cta-title,
.cta-box .cta-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.cta-box .cta-title .text-gold {
    color: var(--ath-gold, #b8860b);
}

/* Section headers */
.section-header .section-title {
    font-size: var(--ath-fs-3xl, 1.875rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Blog page header */
.blog-main .section-header-inline .section-title {
    font-size: 1.5rem;
}

/* Contact CTA */
.contact-cta-section .cta-title,
.cta-section-dark .cta-title,
.footer-pre-cta .section-title,
.footer-pre-cta .cta-title,
.pre-footer-cta .section-title,
.pre-footer-cta .cta-title {
    color: #fff;
}

/* Pricing pages */
.pricing-page .section-header .section-title,
.pricing-main .section-header .section-title,
.pricing-tab-content .section-title {
    color: var(--ath-dark, #1a1a1a);
}

/* Policy pages */
.policy-body .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
}

/* Single project */
.project-description .entry-content .section-title {
    font-size: 1.5rem;
}

/* Child page card title (h3 → div > a) */
.child-page-card .page-info > div {
    font-family: var(--ath-font-heading, 'Montserrat', sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.child-page-card .page-info > div > a {
    color: inherit;
    text-decoration: none;
}

/* No posts / No results */
.no-posts > div:not([class]),
.no-results > div:not([class]),
.search-no-results > div:not([class]),
.no-posts .section-title,
.no-results .section-title,
.search-no-results .section-title {
    font-size: 24px !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
}

/* Services process */
.services-main-page .services-process .section-title {
    color: inherit;
}

/* Product landing light bg */
.product-landing-page .section-title,
.product-landing-page .product-title {
    color: var(--ath-dark, #1a1a1a);
}

/* ═══════════════════════════════════════════════════
   9. BARE DIV TITLES (converted from h2/h3/h4 without class)
   These are inside known parent containers.
   ═══════════════════════════════════════════════════ */

/* Card titles inside specific card types (was h3) */
.service-type-card .stc-icon + div:not([class]),
.style-card .style-icon + div:not([class]),
.feature-card > div:not([class]),
.case-study-card > div:not([class]),
.team-card > div:not([class]),
.mission-card > div:not([class]),
.why-card > div:not([class]),
.link-card > div:not([class]),
.note-card > div:not([class]),
.deliverable-card > div:not([class]),
.casestudy-content > div:not([class]),
.portfolio-card-body > div:not([class]),
.service-showcase-item > div:not([class]),
.ps-info > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* Pricing card title inside .pricing-header (was h3) */
.pricing-header > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 0.5rem;
}

/* Process step title inside .step-content (was h3) */
.step-content > div:first-child:not([class]),
.process-step-content > div:first-child:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    margin-bottom: 0.25rem;
}

/* CTA section title inside .cta-content (was h2) */
.cta-content > div:first-child:not([class]),
.cta-box > .cta-content > div:first-child:not([class]),
.contact-info-v2 > div:first-child:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 0.75rem;
}

/* Section header bare title (was h2) - e.g. pricing page */
.section-header > div:first-child:not([class]),
.section-header.text-center > div:first-child:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: var(--ath-fs-3xl, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 1rem;
}

/* Safety features / benefit items (was h4) */
.safety-features .feature-item > div:not([class]),
.why-choose .why-item > div:not([class]),
.benefit-card > div:not([class]),
.value-card > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    margin-bottom: 0.25rem;
}

/* About page: mission/vision/team titles (was h3/h4) */
.about-mission > div:not([class]),
.about-vision > div:not([class]),
.about-values > div:not([class]),
.about-commitment > div:not([class]),
.helpful-links > .container > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.5rem;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0.5rem;
}

/* Homepage section bare div titles */
.painpoint-text > div:not([class]),
.process-card > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    margin-bottom: 0.25rem;
}

/* No-results page items */
.no-results-suggestions > div:not([class]),
.popular-pages > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.25rem;
    font-weight: 600;
    color: inherit;
    margin-bottom: 0.5rem;
}

/* Child page card info title (was h3) */
.child-page-card .page-info > div:first-child {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.child-page-card .page-info > div:first-child > a {
    color: inherit;
    text-decoration: none;
}

/* Tags page related title (was h3) */
.related-tags > div:not([class]) {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Empty state titles (was h2/h3) */
.no-results > div:not([class]),
.no-posts > div:not([class]),
.empty-state > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, 'Montserrat', sans-serif));
    font-size: 1.5rem;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .section-title,
    .section-title-v2,
    .entry-title,
    .cta-title,
    .sp-section-title {
        font-size: 1.5rem;
    }
    
    .widget-title,
    .card-title,
    .post-title,
    .service-card-title,
    .footer-title,
    .sp-related-title {
        font-size: 1.25rem;
    }

    .section-header .section-title {
        font-size: 1.75rem;
    }

    .footer-cta-content .cta-title,
    .footer-cta-content .section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .section-title,
    .section-title-v2,
    .sp-section-title {
        font-size: 1.25rem;
    }
    
    .section-header .section-title {
        font-size: 1.5rem;
    }

    .footer-cta-content .cta-title,
    .footer-cta-content .section-title {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════
   7. BARE DIV HEADING COMPATIBILITY
   After mass H2/H3/H4→<div> conversion, some divs have
   no CSS class. These rules use parent container context
   to apply correct heading typography.
   Selector: > div:not([class]) targets ONLY bare divs.
   ═══════════════════════════════════════════════════ */

/* --- H2-level bare divs (section/CTA titles) --- */
.cta-content > div:not([class]),
.sp-cta-content > div:not([class]),
.cta-box .cta-content > div:not([class]),
.helpful-links .container > div:not([class]),
.related-tags > div:not([class]),
.newsletter-content > div:not([class]),
.no-results > div:not([class]),
.ct-faq-header > div:not([class]),
.ct-form-header > div:not([class]),
.apply-info > div:not([class]),
.contact-social > div:not([class]),
.projects-cta .cta-content > div:not([class]),
.ablog-newsletter-content > div:not([class]),
.ablog-empty > div:not([class]),
.section-header-inline > div:not([class]),
.product-cta-section .cta-content > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, var(--font-heading, 'Montserrat', sans-serif)));
    font-weight: 700;
    font-size: var(--ath-fs-3xl, 1.875rem);
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* --- H3-level bare divs (card/widget titles) --- */
.cta-form > div:not([class]),
.cta-widget > div:not([class]),
.why-card > div:not([class]),
.benefit-card > div:not([class]),
.type-card > div:not([class]),
.feature-card > div:not([class]),
.service-overview-card > div:not([class]),
.note-card > div:not([class]),
.link-card > div:not([class]),
.style-card > div:not([class]),
.style-item > div:not([class]),
.mission-card > div:not([class]),
.ct-hours > div:not([class]),
.ct-cta-content > div:not([class]),
.no-posts > div:not([class]),
.no-products > div:not([class]),
.search-overlay-content > div:not([class]),
.videos-cta .cta-content > div:not([class]),
.ablog-cta-widget > div:not([class]),
.popular-pages > div:not([class]),
.child-page-card > div:not([class]),
.apply-cta > div:not([class]),
.sidebar-widget.cta-widget > div:not([class]),
.sidebar-widget.cta-card > div:not([class]),
.spost-cta-widget > div:not([class]),
.spost-newsletter-content > div:not([class]),
.pricing-special-card > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, var(--font-heading, 'Montserrat', sans-serif)));
    font-weight: 600;
    font-size: var(--ath-fs-2xl, 1.5rem);
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

/* --- H4-level bare divs (item/step titles) --- */
.why-text > div:not([class]),
.why-item .why-text > div:not([class]),
.criteria-item > div:not([class]),
.step-content > div:not([class]),
.apply-step > div:not([class]),
.benefit-showcase-item > div:not([class]),
.team-card > div:not([class]),
.pricing-header > div:not([class]),
.recent-post-info > div:not([class]),
.position-requirements > div:not([class]) {
    font-family: var(--font-heading-vn, var(--ath-font-primary, var(--font-heading, 'Montserrat', sans-serif)));
    font-weight: 600;
    font-size: var(--ath-fs-xl, 1.25rem);
    line-height: 1.3;
    color: inherit;
    margin-bottom: 0.5rem;
}

/* --- Dark section / service page overrides for bare divs --- */
.service-detail-page .cta-content > div:not([class]),
.service-detail-page .cta-form > div:not([class]),
.service-detail-page .why-text > div:not([class]),
.service-detail-page .type-card > div:not([class]),
.service-detail-page .feature-card > div:not([class]),
.service-detail-page .criteria-item > div:not([class]),
.service-detail-page .why-card > div:not([class]),
.section-dark .cta-content > div:not([class]),
.section-dark .cta-form > div:not([class]),
.section-dark .why-text > div:not([class]),
.bg-dark .cta-content > div:not([class]),
.bg-dark .cta-form > div:not([class]) {
    color: #ffffff;
}

/* --- Responsive bare div headings --- */
@media (max-width: 768px) {
    .cta-content > div:not([class]),
    .sp-cta-content > div:not([class]),
    .helpful-links .container > div:not([class]),
    .newsletter-content > div:not([class]),
    .ct-faq-header > div:not([class]),
    .ct-form-header > div:not([class]) {
        font-size: 1.5rem;
    }

    .cta-form > div:not([class]),
    .type-card > div:not([class]),
    .feature-card > div:not([class]),
    .why-card > div:not([class]),
    .benefit-card > div:not([class]) {
        font-size: 1.25rem;
    }

    .why-text > div:not([class]),
    .step-content > div:not([class]),
    .criteria-item > div:not([class]) {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .cta-content > div:not([class]),
    .sp-cta-content > div:not([class]),
    .helpful-links .container > div:not([class]) {
        font-size: 1.25rem;
    }
}