/*
====================================================================
ETRUSCAFORM v3.1.0 CSS
====================================================================
1. Dark mode: footer dropdown "I nostri corsi" contrast fix
2. Dark mode: Chi Siamo statistics contrast fix
3. Dark mode: Certification badges contrast fix
4. E-learning: price slider thumb above track
5. Scuola di Estetica: course card images + logo hero
====================================================================
*/

/* ============================================
   1. FOOTER DROPDOWN — DARK MODE CONTRAST
   ============================================
   WordPress navigation menu widgets in footer
   with sub-menus (ul.sub-menu / ul.children)
   ============================================ */

/* Footer widget navigation sub-menus */
[data-theme="dark"] .ef-footer__column .widget_nav_menu .sub-menu,
[data-theme="dark"] .ef-footer__column .menu-item-has-children .sub-menu,
[data-theme="dark"] .ef-footer__column ul.children,
[data-theme="dark"] .ef-footer__column .sub-menu {
    background: transparent;
}

[data-theme="dark"] .ef-footer__column .sub-menu li a,
[data-theme="dark"] .ef-footer__column ul.children li a,
[data-theme="dark"] .ef-footer__column .widget_nav_menu .sub-menu a {
    color: #c0c0c0 !important;
    transition: color 0.3s ease;
}

[data-theme="dark"] .ef-footer__column .sub-menu li a:hover,
[data-theme="dark"] .ef-footer__column ul.children li a:hover,
[data-theme="dark"] .ef-footer__column .widget_nav_menu .sub-menu a:hover {
    color: var(--color-secondary, #d07c39) !important;
}

/* Also cover the product categories widget in footer */
[data-theme="dark"] .ef-footer__column .product-categories li a,
[data-theme="dark"] .ef-footer__column .widget_product_categories li a {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .ef-footer__column .product-categories li a:hover,
[data-theme="dark"] .ef-footer__column .widget_product_categories li a:hover {
    color: var(--color-secondary, #d07c39) !important;
}

/* Sub-menu children — deeper levels */
[data-theme="dark"] .ef-footer__column .product-categories ul.children li a,
[data-theme="dark"] .ef-footer__column .widget_product_categories ul.children li a {
    color: #b0b0b0 !important;
    padding-left: 0.8rem;
}

[data-theme="dark"] .ef-footer__column .product-categories ul.children li a:hover,
[data-theme="dark"] .ef-footer__column .widget_product_categories ul.children li a:hover {
    color: var(--color-secondary, #d07c39) !important;
}

/* Footer widget titles in dark mode (reinforced) */
[data-theme="dark"] .ef-footer__column .widget-title,
[data-theme="dark"] .ef-footer__column .widgettitle,
[data-theme="dark"] .ef-footer__column h4 {
    color: #ffffff !important;
}

/* ============================================
   2. CHI SIAMO STATISTICS — DARK MODE CONTRAST
   ============================================
   Fix: HTML uses .ef-stat-number / .ef-stat-label
   but dark mode CSS was targeting wrong classes
   ============================================ */

[data-theme="dark"] .ef-about-stats {
    background: #0e0e0e !important;
}

[data-theme="dark"] .ef-stat-item {
    background: rgba(208, 124, 57, 0.08);
    border-radius: 12px;
    padding: 1.5rem 1rem;
}

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

[data-theme="dark"] .ef-stat-label {
    color: #c0c0c0 !important;
}

/* Also fix the stats grid gaps for better readability */
[data-theme="dark"] .ef-stats-grid {
    gap: 1rem;
}

/* ============================================
   3. CERTIFICATION BADGES — DARK MODE CONTRAST
   ============================================ */

[data-theme="dark"] .ef-accred-badge {
    background: rgba(208, 124, 57, 0.12) !important;
    border: 1px solid rgba(208, 124, 57, 0.25) !important;
    color: #ffffff !important;
}

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

[data-theme="dark"] .ef-accred-badge span {
    color: #e0e0e0 !important;
}

/* Accreditation card in dark mode */
[data-theme="dark"] .ef-accred-card {
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
}

[data-theme="dark"] .ef-accred-card h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .ef-accred-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

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

/* Accreditation visual image container */
[data-theme="dark"] .ef-accred-visual--has-image {
    border-color: #333 !important;
}

/* Accreditation content text */
[data-theme="dark"] .ef-accred-content p {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .ef-accred-content p strong {
    color: #ffffff !important;
}

[data-theme="dark"] .ef-accred-content h2 {
    color: #ffffff !important;
}

/* Accreditations section background */
[data-theme="dark"] .ef-about-accreditations {
    background: #121212 !important;
}


/* ============================================
   4. E-LEARNING PRICE SLIDER — THUMB FIX
   ============================================
   The range input thumbs must appear ABOVE the
   track line, not behind/below it.
   ============================================ */

/* Ensure the track container has enough height for the thumbs */
.ef-el__price-track {
    position: relative;
    height: 6px;
    margin: 14px 0 8px !important;
}

/* Range inputs: overlap the track and let thumbs overflow */
.ef-el__price-track input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 3;
}

/* WebKit thumb — offset upward so it sits centered on/above the track */
.ef-el__price-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid var(--color-secondary, #d07c39);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: -8px;
    position: relative;
    z-index: 4;
}

.ef-el__price-track input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/* Firefox thumb */
.ef-el__price-track input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid var(--color-secondary, #d07c39);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 4;
}

.ef-el__price-track input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}

/* Firefox track — make it transparent */
.ef-el__price-track input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}

/* The fill bar stays behind the thumbs */
.ef-el__price-fill {
    z-index: 1;
}

/* Dark mode: thumb border uses orange, background dark */
[data-theme="dark"] .ef-el__price-track input[type="range"]::-webkit-slider-thumb {
    background: #2a2a2a;
    border-color: var(--color-secondary, #d07c39);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ef-el__price-track input[type="range"]::-moz-range-thumb {
    background: #2a2a2a;
    border-color: var(--color-secondary, #d07c39);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Dark mode: track background */
[data-theme="dark"] .ef-el__price-track {
    background: rgba(255, 255, 255, 0.1);
}

/* Dark mode: price range text */
[data-theme="dark"] .ef-el__price-range b {
    color: var(--color-secondary, #d07c39) !important;
}

[data-theme="dark"] .ef-el__price-range span {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .ef-el__price-reset {
    color: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .ef-el__price-reset:hover {
    color: var(--color-secondary, #d07c39);
    border-color: var(--color-secondary, #d07c39);
}


/* ============================================
   5. SCUOLA DI ESTETICA — COURSE CARD IMAGES
   ============================================ */

/* Course card with image */
.ef-course-card--has-image .ef-course-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ef-course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ef-course-card:hover .ef-course-card__image img {
    transform: scale(1.05);
}

/* Accent bar below image */
.ef-course-card--has-image .ef-course-card__accent {
    height: 3px;
}

/* Hero: when logo replaces h1 */
.ef-estetica-hero__title-logo {
    max-width: 350px;
    margin: 0 auto 1.5rem;
}

.ef-estetica-hero__title-logo img {
    width: 100%;
    height: auto;
    /* Invert to white for dark hero background */
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.ef-estetica-hero__title-logo:hover img {
    transform: scale(1.03);
}

/* About section: dedicated image from customizer */
.ef-estetica-about__image img {
    border-radius: 20px;
}

/* Responsive: course card images */
@media screen and (max-width: 768px) {
    .ef-course-card--has-image .ef-course-card__image {
        height: 160px;
    }

    .ef-estetica-hero__title-logo {
        max-width: 250px;
    }
}