/*
Theme Name: Eternal Beauty Medical Spa
Template: hello-elementor
Theme URI: https://eternalbeautymedicalspa.com/
Description: Custom theme for Eternal Beauty Medical Spa – built on Hello Elementor with Elementor Pro.
Author: Eternal Beauty Medical Spa
Author URI: https://eternalbeautymedicalspa.com/
Version: 2.0.0
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eternal-beauty
*/

/* ============================================================
   COLOR SYSTEM — All colors reference Elementor Global Colors
   so you can change them from Site Settings → Global Colors.

   Elementor System Colors:
     --e-global-color-primary       Primary Teal
     --e-global-color-secondary     Secondary (Dark Gray)
     --e-global-color-text          Body Text
     --e-global-color-accent        Accent (Teal)

   Custom Global Colors (editable in Site Settings):
     --e-global-color-eb_deep_teal  Deep Teal (Hover)
     --e-global-color-eb_dark_text  Dark Text
     --e-global-color-eb_bg         Background (Cream)
     --e-global-color-eb_bg_alt     Background Alt
     --e-global-color-eb_border     Border
     --e-global-color-eb_meta       Meta Text
     --e-global-color-317b765       Footer / Light Text
   ============================================================ */


/* ============================================================
   1. Base overrides — keep Hello Elementor minimal reset intact
   ============================================================ */
body {
    background-color: var(--e-global-color-eb_bg);
    color: var(--e-global-color-text);
}

a {
    color: var(--e-global-color-primary);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--e-global-color-eb_deep_teal);
}


/* ============================================================
   2. Header responsive visibility
   Elementor's hide settings don't always generate CSS for
   Theme Builder templates — enforce desktop/mobile switch.
   ============================================================ */
.elementor-element-hdr_mob {
    display: none !important;
}

/* Prevent phone number from breaking mid-text in desktop header */
.elementor-element-hdr_d_ctc {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.elementor-element-hdr_d_ctc .elementor-widget-icon-list {
    white-space: nowrap;
    flex-shrink: 0;
}
.elementor-element-hdr_d_ctc .elementor-widget-button {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .elementor-element-hdr_mob {
        display: flex !important;
    }
    .elementor-element-hdr_desk {
        display: none !important;
    }
}


/* ============================================================
   3. Service Card Component (.eb-service-card)
   Apply to image-box widgets for card look.
   ============================================================ */
.eb-service-card .elementor-image-box-wrapper {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100%;
}
.eb-service-card:hover .elementor-image-box-wrapper {
    box-shadow: 0 10px 36px color-mix(in srgb, var(--e-global-color-eb_deep_teal) 20%, transparent);
    transform: translateY(-6px);
}
.eb-service-card .elementor-image-box-img {
    margin: 0 !important;
    width: 100% !important;
    flex-shrink: 0;
}
.eb-service-card .elementor-image-box-img img {
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
    border-radius: 0 !important;
}
.eb-service-card .elementor-image-box-content {
    padding: 22px 24px 28px !important;
    text-align: left !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.eb-service-card .elementor-image-box-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: var(--e-global-color-eb_dark_text);
}
.eb-service-card .elementor-image-box-title a {
    color: var(--e-global-color-eb_dark_text);
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.eb-service-card .elementor-image-box-title a:hover {
    color: var(--e-global-color-primary);
}
.eb-service-card .elementor-image-box-description {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--e-global-color-text);
    flex: 1;
}


/* ============================================================
   4. Heading defaults (soft fallback — Elementor widget
   settings and __globals__ override these automatically)
   ============================================================ */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
    color: var(--e-global-color-primary);
}
.elementor-widget-heading h3.elementor-heading-title {
    color: var(--e-global-color-eb_deep_teal);
}
.elementor-widget-heading h4.elementor-heading-title {
    color: var(--e-global-color-secondary);
}
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
    color: var(--e-global-color-primary);
}

/* Non-Elementor headings (blog, WooCommerce, PHP templates) */
article h1, article h2,
.entry-content h1, .entry-content h2,
.wp-block-heading {
    color: var(--e-global-color-primary);
}
article h3, .entry-content h3 {
    color: var(--e-global-color-eb_deep_teal);
}
article h4, .entry-content h4 {
    color: var(--e-global-color-secondary);
}


/* ============================================================
   5. Navigation — soft defaults (no !important so Elementor
   widget settings can override)
   ============================================================ */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main .elementor-item:visited,
.elementor-nav-menu--main a.elementor-item {
    color: var(--e-global-color-secondary);
    transition: color 0.2s ease;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item-active,
.elementor-nav-menu--main .elementor-item-anchor {
    color: var(--e-global-color-primary);
}

/* Footer nav: needs !important to override header defaults */
.elementor-location-footer .elementor-nav-menu--main .elementor-item,
.elementor-location-footer .elementor-nav-menu--main .elementor-item:visited,
.elementor-location-footer .elementor-nav-menu--main a.elementor-item {
    color: var(--e-global-color-317b765) !important;
}
.elementor-location-footer .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu--main .elementor-item-active {
    color: #FFFFFF !important;
}

/* Flex / newer nav menu variant */
.e-n-menu-link,
.e-n-menu-link:visited {
    color: var(--e-global-color-secondary);
    transition: color 0.2s ease;
}
.e-n-menu-link:hover,
.e-n-menu-link[aria-current],
.e-n-menu-link.e-current {
    color: var(--e-global-color-primary);
}


/* ============================================================
   6. Button hover effects (colors set in Elementor, this adds
   only the transition / lift / shadow behavior)
   ============================================================ */
.elementor-widget-button .elementor-button {
    letter-spacing: 0.06em;
    transition: background-color 0.25s ease, border-color 0.25s ease,
                transform 0.18s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--e-global-color-primary) 30%, transparent);
}


/* ============================================================
   7. Blog posts — titles, read more, excerpt, badge, meta
   ============================================================ */
.elementor-posts-container .elementor-post__title a,
.elementor-posts-container .elementor-post__title a:visited,
.elementor-widget-posts .elementor-post__title a {
    color: var(--e-global-color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.elementor-posts-container .elementor-post__title a:hover,
.elementor-widget-posts .elementor-post__title a:hover {
    color: var(--e-global-color-eb_deep_teal);
}
.elementor-posts-container .elementor-post__read-more,
.elementor-posts-container a.elementor-post__read-more {
    color: var(--e-global-color-eb_deep_teal);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875em;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}
.elementor-posts-container .elementor-post__read-more:hover {
    color: var(--e-global-color-primary);
}

/* Blog category badge */
.elementor-post__badge {
    background-color: color-mix(in srgb, var(--e-global-color-primary) 10%, transparent);
    color: var(--e-global-color-eb_deep_teal);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
}

/* Blog excerpt */
.elementor-post__excerpt p {
    line-height: 1.7;
    color: var(--e-global-color-secondary);
}

/* Blog meta */
.elementor-post__meta-data {
    font-size: 0.8em;
    letter-spacing: 0.03em;
    color: var(--e-global-color-eb_meta);
}

/* Hide comments count in blog post cards */
.elementor-post__meta-data .elementor-post-avatar {
    display: none !important;
}

/* Blog thumbnail */
.elementor-post__thumbnail__link img,
.elementor-post__thumbnail img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 10;
}


/* ============================================================
   8. Price / Service List
   ============================================================ */
.elementor-price-list .elementor-price-list-item a,
.elementor-price-list .elementor-price-list-item a:visited,
.elementor-price-list .elementor-price-list-header {
    color: var(--e-global-color-primary);
    transition: color 0.2s ease;
}
.elementor-price-list .elementor-price-list-item a:hover {
    color: var(--e-global-color-eb_deep_teal);
}
.elementor-price-list .elementor-price-list-title {
    color: var(--e-global-color-eb_dark_text);
    transition: color 0.2s ease;
}
.elementor-price-list .elementor-price-list-price {
    color: var(--e-global-color-primary);
    font-weight: 600;
}
.elementor-price-list .elementor-price-list-item a:hover .elementor-price-list-title {
    color: var(--e-global-color-primary);
}
.elementor-price-list .elementor-price-list-separator {
    border-bottom-color: color-mix(in srgb, var(--e-global-color-primary) 25%, transparent) !important;
}


/* ============================================================
   9. Icon list / Services links
   ============================================================ */
.elementor-widget-icon-list .elementor-icon-list-text {
    color: var(--e-global-color-secondary);
    transition: color 0.2s ease;
}
.elementor-widget-icon-list a:hover .elementor-icon-list-text {
    color: var(--e-global-color-primary);
}


/* ============================================================
   10. Marquee / Text Path
   ============================================================ */
.elementor-widget-text-path text,
.elementor-widget-text-path path,
[class*="elementor-marquee"] {
    color: var(--e-global-color-eb_deep_teal);
    fill: var(--e-global-color-eb_deep_teal);
}


/* ============================================================
   11. Testimonial / Blockquote
   ============================================================ */
.elementor-testimonial__text,
blockquote p {
    font-style: italic;
    line-height: 1.75;
    color: var(--e-global-color-secondary);
}


/* ============================================================
   12. Footer bottom bar links
   ============================================================ */
.elementor-section footer a,
.site-footer a {
    color: color-mix(in srgb, var(--e-global-color-primary) 85%, transparent);
    transition: color 0.2s ease;
}
.elementor-section footer a:hover,
.site-footer a:hover {
    color: #ffffff;
}


/* ============================================================
   13. Micro-interactions & UX polish
   ============================================================ */

/* Card hover: smooth image scale */
.elementor-widget-image img,
.elementor-image-box-img img {
    transition: transform 0.4s ease;
}
.elementor-widget-image:hover img,
.elementor-image-box:hover img {
    transform: scale(1.03);
}

/* Heading letter-spacing */
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }
h3 { letter-spacing: -0.005em; }

/* Smooth page scroll */
html {
    scroll-behavior: smooth;
}

/* Focus ring — accessibility */
:focus-visible {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: 3px;
}

/* Selection colour */
::selection {
    background: color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
    color: var(--e-global-color-eb_deep_teal);
}


/* ============================================================
   14. Mobile fixes
   ============================================================ */

/* Disable parallax on mobile — background-attachment:fixed
   breaks on iOS Safari */
@media (max-width: 767px) {
    .elementor-element[data-settings*='background_attachment'] {
        background-attachment: scroll !important;
    }
    .elementor-element > .elementor-element-populated,
    .e-con {
        background-attachment: scroll !important;
    }
}