/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra Child Theme for IHS House
Author: Antigravity
Author URI: https://google.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* ==========================================================================
   CLONIFY DESIGN SYSTEM — Global Overrides
   Font: Inter  |  Style: Clean Light Mode  |  Rounded, Soft, Premium
   ========================================================================== */

/* ── 1. CSS Custom Properties (Astra Color Variable Overrides) ── */
:root {
    --ast-global-color-0: #1a1a2e !important; /* Primary Heading Text */
    --ast-global-color-1: #6c5ce7 !important; /* Accent / Links */
    --ast-global-color-2: #1a1a2e !important; /* Secondary Heading */
    --ast-global-color-3: #64748b !important; /* Body Text */
    --ast-global-color-4: #ffffff !important; /* Card / White BG */
    --ast-global-color-5: #e8e8ef !important; /* Borders */
    --ast-global-color-6: #f8f9fc !important; /* Page Background */
    --ast-global-color-7: #ffffff !important;
    --ast-global-color-8: #1a1a2e !important;
}

/* ── 2. Global Resets & Fonts ── */
body,
#page,
#content,
.site-content {
    background-color: #ffffff !important;
    color: #64748b !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.elementor-heading-title,
.hfe-infocard-title,
.hfe-infocard-title a {
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: #1a1a2e !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* Exception: Dark sections keep their own heading colors */
.ihs-cta-banner h2,
.ihs-cta-banner h3,
.ihs-cta-banner h4 {
    color: #ffffff !important;
}

p, span, li, td, th, label, a, input, textarea, select, button {
    font-family: 'Inter', -apple-system, sans-serif !important;
}

a {
    color: #1a1a2e;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #6c5ce7;
}

/* ── 3. Astra Header Override (hide default, our custom header takes over) ── */
.site-header,
#masthead,
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-primary-header-bar,
.main-header-bar,
.ast-desktop-header,
.ast-desktop-header * {
    background-color: #ffffff !important;
}

.site-header {
    border-bottom: 1px solid #e8e8ef !important;
    box-shadow: none !important;
}

/* Site Branding / Logo Text */
.site-branding .site-title a,
.site-branding .site-title a:hover {
    color: #1a1a2e !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    letter-spacing: -0.01em;
}

/* Menu Links */
.main-header-menu .menu-link,
.main-header-menu .menu-item > a,
.ast-desktop-header .main-header-menu .menu-link,
.ast-desktop-header .main-header-menu .menu-item > a {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.2s ease !important;
}

.main-header-menu .menu-item:hover > a,
.main-header-menu .menu-item.current-menu-item > a,
.ast-desktop-header .main-header-menu .menu-item:hover > a,
.ast-desktop-header .main-header-menu .menu-item.current-menu-item > a {
    color: #1a1a2e !important;
}

/* Mobile Toggle Trigger */
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-builder-menu-toggle .ast-custom-button {
    color: #1a1a2e !important;
    border-color: #e8e8ef !important;
}

/* ── 4. Shop / SureCart Filter Label Fixes ── */
label,
.sc-form-check label,
.sc-form-check.wp-block-surecart-product-list-sort-radio label {
    color: #64748b !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ── 5. Elementor / HFE Info Card (About Page) Overrides ── */
.elementor-widget-hfe-infocard .hfe-infocard-text,
.hfe-infocard-text {
    color: #64748b !important;
    line-height: 1.6 !important;
}
.hfe-infocard-icon-wrapper i,
.hfe-infocard-icon-wrapper svg {
    color: #6c5ce7 !important;
}

/* ── 6. Elementor Section Background Overrides ── */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}
.elementor-section {
    font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ── 7. WordPress Admin Bar spacing fix ── */
.admin-bar .ihs-custom-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .ihs-custom-header {
        top: 46px;
    }
}

/* ── 8. Selection Color ── */
::selection {
    background: #6c5ce7;
    color: #ffffff;
}

/* ── 9. About (ID 277) & Contact (ID 280) Light Mode Overrides ── */
.page-id-277, 
.page-id-280,
.page-id-277 #page,
.page-id-280 #page,
.page-id-277 #content,
.page-id-280 #content,
.page-id-277 .site-content,
.page-id-280 .site-content,
.page-id-277 main,
.page-id-280 main,
.page-id-277 .elementor,
.page-id-280 .elementor {
    background-color: #ffffff !important;
}

/* Force light background for specific content sections, preserving original header and footer template defaults */
.elementor-277 .elementor-element-c6ac06d,
.elementor-277 .elementor-element-55a7b0f,
.elementor-280 .elementor-element-a618bd0,
.elementor-280 .elementor-element-56d9c3c {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Force inner columns to be transparent so the section white background shows through */
.elementor-277 .elementor-element-c6ac06d > .e-con-inner,
.elementor-277 .elementor-element-c6ac06d .e-con-child,
.elementor-277 .elementor-element-55a7b0f > .e-con-inner,
.elementor-277 .elementor-element-55a7b0f .e-con-child,
.elementor-280 .elementor-element-a618bd0 > .e-con-inner,
.elementor-280 .elementor-element-a618bd0 .e-con-child,
.elementor-280 .elementor-element-56d9c3c > .e-con-inner,
.elementor-280 .elementor-element-56d9c3c .e-con-child {
    background-color: transparent !important;
    background-image: none !important;
}

/* Heading colors inside dark sections of About and Contact pages (Section 1 - Hero, Section 4 - CTA) */
.elementor-277 .elementor-element-6e25d97 h1,
.elementor-277 .elementor-element-6e25d97 h2,
.elementor-277 .elementor-element-6e25d97 h3,
.elementor-277 .elementor-element-6e25d97 h4,
.elementor-277 .elementor-element-6e25d97 .elementor-heading-title,
.elementor-277 .elementor-element-901d47d h1,
.elementor-277 .elementor-element-901d47d h2,
.elementor-277 .elementor-element-901d47d h3,
.elementor-277 .elementor-element-901d47d h4,
.elementor-277 .elementor-element-901d47d .elementor-heading-title,
.elementor-277 .elementor-element-901d47d .hfe-infocard-title,
.elementor-280 .elementor-element-813bfb5 h1,
.elementor-280 .elementor-element-813bfb5 h2,
.elementor-280 .elementor-element-813bfb5 h3,
.elementor-280 .elementor-element-813bfb5 h4,
.elementor-280 .elementor-element-813bfb5 .elementor-heading-title,
.elementor-280 .elementor-element-3a7aa68 h1,
.elementor-280 .elementor-element-3a7aa68 h2,
.elementor-280 .elementor-element-3a7aa68 h3,
.elementor-280 .elementor-element-3a7aa68 h4,
.elementor-280 .elementor-element-3a7aa68 .elementor-heading-title,
.elementor-280 .elementor-element-3a7aa68 .hfe-infocard-title {
    color: #ffffff !important;
}

/* Text and body copy colors inside dark sections of About and Contact pages */
.elementor-277 .elementor-element-6e25d97 p,
.elementor-277 .elementor-element-6e25d97 span,
.elementor-277 .elementor-element-6e25d97 li,
.elementor-277 .elementor-element-6e25d97 a,
.elementor-277 .elementor-element-901d47d p,
.elementor-277 .elementor-element-901d47d span,
.elementor-277 .elementor-element-901d47d li,
.elementor-277 .elementor-element-901d47d a,
.elementor-280 .elementor-element-813bfb5 p,
.elementor-280 .elementor-element-813bfb5 span,
.elementor-280 .elementor-element-813bfb5 li,
.elementor-280 .elementor-element-813bfb5 a,
.elementor-280 .elementor-element-3a7aa68 p,
.elementor-280 .elementor-element-3a7aa68 span,
.elementor-280 .elementor-element-3a7aa68 li,
.elementor-280 .elementor-element-3a7aa68 a {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Heading colors inside light sections of About and Contact pages */
.elementor-277 .elementor-element-c6ac06d h1,
.elementor-277 .elementor-element-c6ac06d h2,
.elementor-277 .elementor-element-c6ac06d h3,
.elementor-277 .elementor-element-c6ac06d .elementor-heading-title,
.elementor-277 .elementor-element-c6ac06d .hfe-infocard-title,
.elementor-277 .elementor-element-55a7b0f h1,
.elementor-277 .elementor-element-55a7b0f h2,
.elementor-277 .elementor-element-55a7b0f h3,
.elementor-277 .elementor-element-55a7b0f .elementor-heading-title,
.elementor-277 .elementor-element-55a7b0f .hfe-infocard-title,
.elementor-280 .elementor-element-a618bd0 h1,
.elementor-280 .elementor-element-a618bd0 h2,
.elementor-280 .elementor-element-a618bd0 h3,
.elementor-280 .elementor-element-a618bd0 .elementor-heading-title,
.elementor-280 .elementor-element-a618bd0 .hfe-infocard-title {
    color: #1a1a2e !important;
}

/* Text and body copy colors inside light sections of About and Contact pages */
.elementor-277 .elementor-element-c6ac06d p,
.elementor-277 .elementor-element-c6ac06d span:not(.elementor-icon),
.elementor-277 .elementor-element-c6ac06d li,
.elementor-277 .elementor-element-c6ac06d a:not(.elementor-button),
.elementor-277 .elementor-element-55a7b0f p,
.elementor-277 .elementor-element-55a7b0f span:not(.elementor-icon),
.elementor-277 .elementor-element-55a7b0f li,
.elementor-277 .elementor-element-55a7b0f a:not(.elementor-button),
.elementor-280 .elementor-element-a618bd0 p:not(.srfm-block-label),
.elementor-280 .elementor-element-a618bd0 span:not(.elementor-icon):not(.srfm-required),
.elementor-280 .elementor-element-a618bd0 li,
.elementor-280 .elementor-element-a618bd0 a:not(.elementor-button),
.elementor-280 .elementor-element-a618bd0 .hfe-infocard-text {
    color: #64748b !important;
}

/* Kategori/Stacked Icons Customization inside About Page Section 3 */
.elementor-277 .elementor-element-55a7b0f .elementor-view-stacked .elementor-icon {
    background-color: #e8f7f5 !important;
    fill: #21B4A6 !important;
    color: #21B4A6 !important;
}
.elementor-277 .elementor-element-55a7b0f .elementor-view-stacked .elementor-icon svg {
    fill: #21B4A6 !important;
}

/* Responsive Image Padding Adjustment on About Page Section 2 */
@media (max-width: 767px) {
    .elementor-277 .elementor-element.elementor-element-01ac31f img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        border-radius: 12px !important;
    }
    .elementor-277 .elementor-element-f9bbefa {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 24px !important;
    }
}

/* Contact Form Card Design Customization */
.page-id-280 .srfm-form-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
    padding: 40px !important;
    border-radius: 16px !important;
}
.page-id-280 .srfm-form-container .srfm-block-label {
    color: #1a1a2e !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.page-id-280 .srfm-form-container input:not([type="submit"]),
.page-id-280 .srfm-form-container textarea {
    background-color: #f8fafc !important;
    color: #1a1a2e !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: all 0.2s ease !important;
}
.page-id-280 .srfm-form-container input:not([type="submit"]):focus,
.page-id-280 .srfm-form-container textarea:focus {
    background-color: #ffffff !important;
    border-color: #21B4A6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(33, 180, 166, 0.15) !important;
}
.page-id-280 .srfm-form-container button.srfm-submit-button {
    background-color: #21B4A6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    padding: 12px 28px !important;
    border: none !important;
    transition: all 0.25s ease !important;
}
.page-id-280 .srfm-form-container button.srfm-submit-button:hover {
    background-color: #1FAF9F !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 180, 166, 0.25) !important;
}

/* Social Icon Lists on Contact Page */
.elementor-280 .elementor-element-09608aa .elementor-icon-list-icon svg {
    fill: #21B4A6 !important;
}

/* ── 10. Default Page Layout Constraints (Non-Elementor Pages) ── */
body:not(.elementor-page) .entry-header {
    max-width: 1200px;
    margin: 60px auto 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}
body:not(.elementor-page) .entry-content {
    max-width: 1200px;
    margin: 40px auto 80px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}
.entry-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #1a1a2e !important;
}





/* Toko Page Layout Adjustments */
body.page-id-494 .entry-header {
    display: none !important;
}
body.page-id-494 .ihs-category-title {
    text-align: center !important;
}