/*
 * Tema escuro seguro da HydraPower.
 *
 * Esta folha é somente CSS: o estado data-theme é definido pelo botão do
 * cabeçalho e nenhum seletor daqui cria listeners, faz requests ou interfere
 * nos formulários e componentes do WooCommerce.
 */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .wp-site-blocks {
    background: #0d1012 !important;
    color: #edf2f3;
}

html[data-theme="dark"] main,
html[data-theme="dark"] .wp-site-blocks > main,
html[data-theme="dark"] .wp-site-blocks > .woocommerce,
html[data-theme="dark"] .wp-site-blocks > .wp-block-group,
html[data-theme="dark"] .hp-blog-page,
html[data-theme="dark"] .hp-shop-page {
    background-color: #0d1012 !important;
    color: #edf2f3;
}

/* Home: mantém as máquinas visíveis, mas troca a névoa branca por grafite. */
html[data-theme="dark"] .hero {
    background: #101416 !important;
}

html[data-theme="dark"] .hero::before {
    background: linear-gradient(90deg,
        rgba(13, 16, 18, 0.98) 0%,
        rgba(13, 16, 18, 0.91) 29%,
        rgba(13, 16, 18, 0.53) 56%,
        rgba(13, 16, 18, 0.12) 82%) !important;
}

html[data-theme="dark"] .hero::after {
    background: linear-gradient(180deg,
        rgba(13, 16, 18, 0.14) 0%,
        rgba(13, 16, 18, 0.06) 55%,
        rgba(13, 16, 18, 0) 100%) !important;
}

html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .subtitle-premium,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .products-section,
html[data-theme="dark"] .brands-section,
html[data-theme="dark"] .brands-title {
    color: #f3f6f7 !important;
}

html[data-theme="dark"] .subtitle-premium,
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .brands-section p {
    color: #bac6c8 !important;
}

html[data-theme="dark"] .gradient-divider {
    background: linear-gradient(90deg, rgba(179, 231, 209, 0.78), rgba(110, 184, 207, 0.35), transparent) !important;
}

/* Cards e painéis: profundidade equivalente aos cards escuros existentes. */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-card.soft,
html[data-theme="dark"] .product-card.silver,
html[data-theme="dark"] .product-card.outline,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .hp-blog-topic,
html[data-theme="dark"] .hp-product-summary-card,
html[data-theme="dark"] .hp-product-gallery,
html[data-theme="dark"] .hp-product-details-card,
html[data-theme="dark"] .hp-product-grid > li,
html[data-theme="dark"] .hp-related-grid > li,
html[data-theme="dark"] .wp-block-post.product,
html[data-theme="dark"] .woocommerce .product,
html[data-theme="dark"] .wc-block-components-sidebar,
html[data-theme="dark"] .wp-block-woocommerce-cart,
html[data-theme="dark"] .wp-block-woocommerce-checkout,
html[data-theme="dark"] .woocommerce-account,
html[data-theme="dark"] .woocommerce-form,
html[data-theme="dark"] .woocommerce-address-fields {
    background: #171c1f !important;
    color: #edf2f3 !important;
    border-color: rgba(202, 230, 224, 0.16) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .product-card .product-link,
html[data-theme="dark"] .blog-card h3,
html[data-theme="dark"] .blog-card p,
html[data-theme="dark"] .hp-blog-page h1,
html[data-theme="dark"] .hp-blog-page h2,
html[data-theme="dark"] .hp-blog-page h3,
html[data-theme="dark"] .hp-blog-page p,
html[data-theme="dark"] .woocommerce h1,
html[data-theme="dark"] .woocommerce h2,
html[data-theme="dark"] .woocommerce h3,
html[data-theme="dark"] .woocommerce p,
html[data-theme="dark"] .woocommerce label,
html[data-theme="dark"] .woocommerce a,
html[data-theme="dark"] .wc-block-components-title,
html[data-theme="dark"] .wc-block-components-product-name {
    color: #edf2f3 !important;
}

html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .blog-card p,
html[data-theme="dark"] .woocommerce .woocommerce-info,
html[data-theme="dark"] .woocommerce .woocommerce-message,
html[data-theme="dark"] .wc-block-components-product-metadata,
html[data-theme="dark"] .wc-block-components-product-price {
    color: #bdc9cb !important;
}

html[data-theme="dark"] .hero-button,
html[data-theme="dark"] .product-link,
html[data-theme="dark"] .feature-link,
html[data-theme="dark"] .woocommerce button,
html[data-theme="dark"] .woocommerce .button,
html[data-theme="dark"] .wc-block-components-button {
    color: #f6fbfb !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(215, 245, 237, 0.20) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .wc-block-components-text-input input,
html[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control input {
    color: #f3f7f8 !important;
    background: #20272b !important;
    border-color: rgba(206, 232, 227, 0.18) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #9ba9ac !important;
}

/* Cabeçalho: permanece no topo e usa a mesma linguagem visual do dock. */
@media (min-width: 721px) {
    .header-container,
    .header-container.hp-liquid-glass,
    body.has-scrolled .header-container,
    body.has-scrolled .header-container.hp-liquid-glass {
        top: 20px !important;
        bottom: auto !important;
        width: 90% !important;
        max-width: 1200px !important;
        min-height: 0 !important;
        padding: 15px 40px !important;
        border-radius: 30px !important;
        background: linear-gradient(118deg, rgba(226, 238, 242, 0.80), rgba(208, 235, 245, 0.84) 48%, rgba(203, 235, 225, 0.80)) !important;
        border-color: rgba(255, 255, 255, 0.68) !important;
        box-shadow: 0 18px 46px rgba(17, 24, 39, 0.14), 0 1px 4px rgba(255, 255, 255, 0.30) inset !important;
    }

    body.has-scrolled .header-container::after,
    body.has-scrolled .header-container.hp-liquid-glass::after {
        display: none !important;
    }

    body.has-scrolled .header-container nav,
    body.has-scrolled .header-container.hp-liquid-glass nav {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    body.has-scrolled .header-actions {
        margin-left: auto !important;
        gap: 8px !important;
    }

    body.has-scrolled .header-search {
        width: 42px !important;
        height: 42px !important;
    }

    body.has-scrolled .header-icon-button {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    body.has-scrolled .cta-header {
        min-height: 48px !important;
        padding: 0 22px !important;
        border-radius: 18px !important;
    }

    body.has-scrolled .logo {
        width: 124px !important;
        background: none !important;
        animation: none !important;
    }

    html[data-theme="dark"] .header-container,
    html[data-theme="dark"] .header-container.hp-liquid-glass,
    html[data-theme="dark"] body.has-scrolled .header-container,
    html[data-theme="dark"] body.has-scrolled .header-container.hp-liquid-glass {
        background: linear-gradient(118deg, rgba(30, 36, 40, 0.92), rgba(37, 72, 84, 0.78) 48%, rgba(45, 79, 67, 0.82)) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
    }
}

/* O dock de suporte também permanece no topo durante a rolagem. */
body.has-scrolled .hp-header-utility-dock {
    top: 20px !important;
    bottom: auto !important;
}

/* Refinos de profundidade nas vitrines principais. */
.product-card {
    box-shadow:
        0 24px 52px rgba(17, 24, 39, 0.11),
        0 5px 16px rgba(17, 24, 39, 0.05) !important;
}

.product-card:hover {
    box-shadow:
        0 32px 68px rgba(17, 24, 39, 0.16),
        0 8px 22px rgba(17, 24, 39, 0.07) !important;
}

.steering-showcase {
    box-shadow: 0 26px 64px rgba(17, 24, 39, 0.12) !important;
    filter: drop-shadow(0 26px 54px rgba(17, 24, 39, 0.14)) !important;
}

html[data-theme="dark"] .steering-showcase {
    box-shadow: 0 28px 68px rgba(0, 0, 0, 0.36) !important;
    filter: drop-shadow(0 28px 62px rgba(0, 0, 0, 0.40)) !important;
}

/* Header na mesma espessura delicada do dock de ações à direita. */
@media (min-width: 721px) {
    .header-container,
    .header-container.hp-liquid-glass,
    body.has-scrolled .header-container,
    body.has-scrolled .header-container.hp-liquid-glass {
        left: calc(50% - clamp(28px, 3vw, 48px)) !important;
        padding: 6px 40px !important;
        animation: headerGradientFlow 7s ease-in-out infinite !important;
    }

    .header-container .header-icon-button,
    .header-container .header-search,
    .header-container .header-search-toggle,
    body.has-scrolled .header-container .header-icon-button,
    body.has-scrolled .header-container .header-search {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .header-container .cta-header,
    body.has-scrolled .header-container .cta-header {
        min-height: 42px !important;
        padding: 0 20px !important;
        border-radius: 999px !important;
    }

    .footer-signature {
        margin: 20px 0 -36px !important;
    }
}