/* ============================================
   ETRUSCAFORM v2.8 - CSS Updates
   ============================================
   Fixes:
   1. Unified page headers - FORCED overrides
   2. Section titles use body font (Outfit) like labels
   3. Guideline detail box text always white
   4. Dark mode contrast improvements
   5. Course info bar
   ============================================ */


/* ============================================
   1. UNIFIED PAGE HEADERS - FORCED
   All hero sections: same bg, same title size,
   STRAIGHT Cormorant Garamond (no italic),
   orange tags
   ============================================ */

/* --- Background: all heroes same --- */
.ef-about-hero,
.ef-contact-hero,
.ef-services-hero,
.ef-services-hero-v2,
.woocommerce-shop .woocommerce-products-header,
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
    background: var(--color-primary, #39110e) !important;
    background-image: none !important;
    padding: 5rem 1.5rem !important;
    text-align: center !important;
    margin-top: -1px;
    position: relative;
    overflow: hidden;
}

/* Kill services-v2 pattern overlay and decorations */
.ef-services-hero-v2::before,
.ef-services-hero-v2 .hero-decoration,
.ef-services-hero-v2 .hero-decoration--1,
.ef-services-hero-v2 .hero-decoration--2 {
    display: none !important;
    opacity: 0 !important;
}

/* --- Tags / Labels: Outfit, orange, uppercase, no border/bg --- */
.ef-about-hero__tag,
.ef-contact-hero .ef-section-tag,
.ef-services-hero .ef-section-tag,
.ef-services-hero-v2 .ef-section-tag,
.ef-about-hero .ef-section-tag {
    display: inline-block !important;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--color-secondary, #d07c39) !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* --- Hero H1 Titles: Cormorant Garamond STRAIGHT, consistent size --- */
.ef-about-hero__title,
.ef-about-hero h1,
.ef-contact-hero h1,
.ef-services-hero h1,
.ef-services-hero-v2 h1,
.woocommerce-shop .woocommerce-products-header__title,
.post-type-archive-product .woocommerce-products-header__title,
.tax-product_cat .woocommerce-products-header__title,
.woocommerce-shop .page-title,
.post-type-archive-product .page-title,
.tax-product_cat .page-title {
    font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
    font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: var(--color-cream, #FFFDF5) !important;
    line-height: 1.2 !important;
    max-width: 800px !important;
    margin: 0 auto 1rem !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

/* --- Hero subtitles --- */
.ef-about-hero__subtitle,
.ef-about-hero p:not(.ef-stat-label),
.ef-contact-hero p,
.ef-services-hero p,
.ef-services-hero-v2 p {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-size: 1.1rem !important;
    font-style: normal !important;
    color: rgba(255, 253, 245, 0.75) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
}


/* ============================================
   2. SECTION TITLES → BODY FONT (Outfit)
   Both labels and titles now share the same
   font family for visual uniformity.
   Only hero H1 keeps Cormorant Garamond.
   ============================================ */

/* Section tags/labels - ensure Outfit */
.section-label,
.section-label--light,
.ef-section-tag,
.ef-about-hero__tag {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-style: normal !important;
}

/* Section H2 titles → Outfit instead of Cormorant */
.ef-section__header h2,
.ef-guidelines-header h2,
.ef-mission-header h2,
.ef-about-mission h2,
.ef-about-team h2,
.ef-about-certs h2,
.ef-about-cta h2,
.ef-why-header-v2 h2,
.ef-about h2,
.ef-services-main-v2 h2,
.ef-about-guidelines h2,
.ef-about-guidelines-compact h2,
.ef-product__related-title,
section:not(.ef-about-hero):not(.ef-contact-hero):not(.ef-services-hero):not(.ef-services-hero-v2) h2 {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* H3/H4 in content sections also Outfit */
.ef-service-card-v2 h3,
.ef-why-item-v2 h4,
.ef-guideline-tile h3,
.ef-contact-card h4,
.ef-stat-label {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-style: normal !important;
}


/* ============================================
   3. GUIDELINE DETAIL BOX - White text ALWAYS
   (Efficacia, Sostenibilità, etc.)
   The dark bg box must have white text in
   BOTH light and dark modes.
   ============================================ */

.ef-guideline-detail {
    color: #ffffff !important;
}

.ef-guideline-detail__content p {
    color: #ffffff !important;
    opacity: 0.9;
    line-height: 1.8;
}

.ef-guideline-detail__content h4 {
    color: var(--color-secondary, #d07c39) !important;
}

/* Active tile text white */
.ef-guideline-tile.active h3 {
    color: #ffffff !important;
}

.ef-guideline-tile.active p,
.ef-guideline-tile.active .ef-guideline-tile__content p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Close button visible */
.ef-guideline-detail__close {
    color: #ffffff !important;
}


/* ============================================
   4. DARK MODE - Full contrast fixes
   ============================================ */

/* Hero sections dark bg */
[data-theme="dark"] .ef-about-hero,
[data-theme="dark"] .ef-contact-hero,
[data-theme="dark"] .ef-services-hero,
[data-theme="dark"] .ef-services-hero-v2,
[data-theme="dark"] .woocommerce-shop .woocommerce-products-header,
[data-theme="dark"] .post-type-archive-product .woocommerce-products-header,
[data-theme="dark"] .tax-product_cat .woocommerce-products-header {
    background: #1a1a1a !important;
}

/* Hero titles: orange in dark mode */
[data-theme="dark"] .ef-about-hero__title,
[data-theme="dark"] .ef-about-hero h1,
[data-theme="dark"] .ef-contact-hero h1,
[data-theme="dark"] .ef-services-hero h1,
[data-theme="dark"] .ef-services-hero-v2 h1,
[data-theme="dark"] .woocommerce-shop .woocommerce-products-header__title,
[data-theme="dark"] .post-type-archive-product .woocommerce-products-header__title,
[data-theme="dark"] .tax-product_cat .woocommerce-products-header__title,
[data-theme="dark"] .woocommerce-shop .page-title,
[data-theme="dark"] .post-type-archive-product .page-title,
[data-theme="dark"] .tax-product_cat .page-title {
    color: var(--color-secondary, #d07c39) !important;
}

/* Tags in dark mode */
[data-theme="dark"] .ef-about-hero__tag,
[data-theme="dark"] .ef-contact-hero .ef-section-tag,
[data-theme="dark"] .ef-services-hero .ef-section-tag,
[data-theme="dark"] .ef-services-hero-v2 .ef-section-tag {
    color: var(--color-secondary, #d07c39) !important;
}

/* Hero subtitles dark mode */
[data-theme="dark"] .ef-about-hero__subtitle,
[data-theme="dark"] .ef-about-hero p,
[data-theme="dark"] .ef-contact-hero p,
[data-theme="dark"] .ef-services-hero p,
[data-theme="dark"] .ef-services-hero-v2 p {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Section titles dark mode */
[data-theme="dark"] .ef-section__header h2,
[data-theme="dark"] .ef-about h2,
[data-theme="dark"] .ef-services-main-v2 h2,
[data-theme="dark"] .ef-guidelines-header h2,
[data-theme="dark"] .ef-why-header-v2 h2,
[data-theme="dark"] section h2 {
    color: #ffffff !important;
}

/* Category filter pills */
[data-theme="dark"] .ef-filter-btn {
    color: var(--color-secondary, #d07c39) !important;
    border-color: var(--color-secondary, #d07c39) !important;
}

[data-theme="dark"] .ef-filter-btn.active {
    background: var(--color-secondary, #d07c39) !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .ef-filter-btn:hover:not(.active) {
    background: rgba(208, 124, 57, 0.15) !important;
}

/* Product cards dark mode */
[data-theme="dark"] .woocommerce ul.products li.product {
    background: #252525 !important;
    border-color: #333 !important;
}

[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-theme="dark"] .woocommerce ul.products li.product h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .woocommerce ul.products li.product .price {
    color: var(--color-secondary, #d07c39) !important;
}

[data-theme="dark"] .woocommerce ul.products li.product .button,
[data-theme="dark"] .woocommerce ul.products li.product a.add_to_cart_button,
[data-theme="dark"] .woocommerce ul.products li.product a.button {
    color: var(--color-secondary, #d07c39) !important;
    border-color: var(--color-secondary, #d07c39) !important;
    background: transparent !important;
}

[data-theme="dark"] .woocommerce ul.products li.product .button:hover,
[data-theme="dark"] .woocommerce ul.products li.product a.add_to_cart_button:hover,
[data-theme="dark"] .woocommerce ul.products li.product a.button:hover {
    background: var(--color-secondary, #d07c39) !important;
    color: #1a1a1a !important;
}

/* Single product dark mode */
[data-theme="dark"] .ef-product__title {
    color: #ffffff !important;
}

[data-theme="dark"] .ef-product__price {
    color: var(--color-secondary, #d07c39) !important;
}

[data-theme="dark"] .ef-product__cats a {
    color: var(--color-secondary, #d07c39) !important;
}

/* Breadcrumbs dark mode */
[data-theme="dark"] .ef-breadcrumb,
[data-theme="dark"] .ef-breadcrumb a,
[data-theme="dark"] .woocommerce-breadcrumb,
[data-theme="dark"] .woocommerce-breadcrumb a {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .ef-breadcrumb a:hover,
[data-theme="dark"] .woocommerce-breadcrumb a:hover {
    color: var(--color-secondary, #d07c39) !important;
}

/* Content sections dark mode */
[data-theme="dark"] .ef-contact-main,
[data-theme="dark"] .ef-about-stats,
[data-theme="dark"] .ef-about-guidelines,
[data-theme="dark"] .ef-guidelines-compact,
[data-theme="dark"] .ef-about-mission,
[data-theme="dark"] .ef-services-main-v2 {
    background: #121212 !important;
}

[data-theme="dark"] .ef-contact-card {
    background: #252525 !important;
    border-color: #333 !important;
}

[data-theme="dark"] .ef-contact-card__icon {
    color: var(--color-secondary, #d07c39) !important;
}

/* Guideline tiles dark mode */
[data-theme="dark"] .ef-guideline-tile {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

[data-theme="dark"] .ef-guideline-tile h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .ef-guideline-detail {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Course info dark mode */
[data-theme="dark"] .ef-course-info__item {
    color: #b0b0b0;
}

[data-theme="dark"] .ef-course-info__item--cfp {
    color: var(--color-secondary, #d07c39);
}

[data-theme="dark"] .ef-course-info__item--code {
    color: #888;
}

[data-theme="dark"] .ef-course-info--single {
    background: #252525;
    border-color: #333;
}


/* ============================================
   5. COURSE INFO BAR
   ============================================ */

/* Card context (archive/shop) */
.ef-course-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.25rem 0;
    margin: 0;
}

.ef-course-info__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    line-height: 1;
}

.ef-course-info__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--color-secondary, #d07c39);
    stroke-width: 1.5;
}

.ef-course-info__item--cfp {
    color: var(--color-secondary, #d07c39);
    font-weight: 600;
}

.ef-course-info__item--code {
    font-size: 0.65rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--color-text-secondary, #999);
}

/* Single product context */
.ef-course-info--single {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: var(--color-warm-white, #faf8f4);
    border: 1px solid rgba(57, 17, 14, 0.08);
    border-radius: var(--radius-md, 8px);
}

.ef-course-info--single .ef-course-info__item {
    font-size: 0.85rem;
}

.ef-course-info--single .ef-course-info__icon {
    width: 18px;
    height: 18px;
}

.ef-course-info--single .ef-course-info__item--code {
    font-size: 0.78rem;
}

/* Product card adjustments */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    min-height: auto !important;
}

.woocommerce ul.products li.product .price {
    padding-top: 0.5rem !important;
}


/* ============================================
   6. RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .ef-about-hero,
    .ef-contact-hero,
    .ef-services-hero,
    .ef-services-hero-v2,
    .woocommerce-shop .woocommerce-products-header,
    .post-type-archive-product .woocommerce-products-header,
    .tax-product_cat .woocommerce-products-header {
        padding: 3.5rem 1rem !important;
    }

    .ef-about-hero__title,
    .ef-about-hero h1,
    .ef-contact-hero h1,
    .ef-services-hero h1,
    .ef-services-hero-v2 h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    }

    .ef-course-info {
        gap: 0.35rem 0.75rem;
        padding: 0.5rem 1rem 0;
    }

    .ef-course-info__item {
        font-size: 0.68rem;
    }

    .ef-course-info--single {
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
    }

    .ef-course-info--single .ef-course-info__item {
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .ef-course-info {
        flex-direction: column;
        gap: 0.35rem;
    }

    .ef-course-info--single {
        flex-direction: column;
        gap: 0.4rem;
    }
}