/*
  ANE.vn Modernization Overrides
  Inspired by Morita.com clinical aesthetics
  Targets: Elementor + GeneratePress high-priority styles
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@0,100..900;1,100..900&display=swap");

:root {
  /* Brand Colors */
  --ane-primary: #415097; /* Brand Navy */
  --ane-secondary: #60a5fa;
  --ane-text-main: #1e293b;
  --ane-bg-slate: #f8fafc;
  --ane-accent: #f97316;

  /* Typography */
  --ane-font: "Inter", sans-serif;

  /* Elementor Global Variable Overrides (High Priority) */
  --e-global-typography-primary-font-family: var(--ane-font);
  --e-global-typography-secondary-font-family: var(--ane-font);
  --e-global-typography-text-font-family: var(--ane-font);
  --e-global-typography-accent-font-family: var(--ane-font);

  --e-global-color-primary: var(--ane-primary);
  --e-global-color-secondary: var(--ane-secondary);
  --e-global-color-text: var(--ane-text-main);
  --e-global-color-accent: var(--ane-accent);
}

/* 1. Global Reset & Typography Injection */
html body,
html body.elementor-page {
  font-family: var(--ane-font) !important;
  color: var(--ane-text-main);
  background-color: var(--ane-bg-slate);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force headings to use the new font-family */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .elementor-heading-title {
  font-family: var(--ane-font) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 2. Header & Navigation (Fixing Sticky Height & Visual Noise) */
body .elementor-location-header {
  transition: all 0.3s ease;
}

/* Apply Glassmorphism to sticky header */
body .elementor-sticky--effects {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Refine Nav Items - High Specifity */
body .elementor-nav-menu--main .elementor-item,
#page .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-nav-menu .elementor-item {
  font-family: var(--ane-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: #415097 !important; /* Brand Navy */
  transition: color 0.2s ease;
}

body .elementor-nav-menu--main .elementor-item:hover,
#page .elementor-nav-menu--main .elementor-item:hover {
  color: var(--ane-accent) !important;
}

/* 2.5 Header Social Icons & Buttons (Force Navy) */
.elementor-location-header .elementor-social-icon i,
.elementor-location-header .elementor-social-icon svg,
.elementor-location-header .elementor-icon i,
.elementor-location-header .elementor-icon svg,
#page .elementor-location-header i,
#page .elementor-location-header svg {
    color: #415097 !important;
    fill: #415097 !important;
}

/* 3. Product Cards & WooCommerce (The Soft UI look) */
body .woocommerce-loop-product__title,
body .elementor-product-title,
body .elementor-post__title a {
  font-family: var(--ane-font) !important;
  font-weight: 600 !important;
  color: var(--ane-text-main) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Product Card Shadows (Removing borders, adding elevation) */
body ul.products li.product,
body .elementor-post {
  border: none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow:
    0 4px 6px -1px rgba(59, 130, 246, 0.05),
    0 2px 4px -1px rgba(59, 130, 246, 0.03) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

body ul.products li.product:hover,
body .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 25px -5px rgba(59, 130, 246, 0.1),
    0 10px 10px -5px rgba(59, 130, 246, 0.04) !important;
}

/* 4. Mobile Menu Fix (Contrast & Interaction) */
@media (max-width: 1024px) {
  body .elementor-nav-menu--main:not(.elementor-nav-menu--dropdown) {
    display: none !important;
    /* Hide desktop nav at tablet breakpoint */
  }
}

/* Ensure ALL header icons are visible - SUPER NUCLEAR SPECIFICITY FIX */
#page .elementor-64017 .elementor-element.elementor-element-347535a0 .elementor-menu-toggle,
#page .elementor-64017 .elementor-element.elementor-element-347535a0 div.elementor-menu-toggle,
#page .elementor-64017 .elementor-element.elementor-element-347535a0 .elementor-menu-toggle i,
#page .elementor-64017 .elementor-element.elementor-element-347535a0 .elementor-menu-toggle svg,
#page .elementor-64017 .elementor-element.elementor-element-347535a0 .elementor-menu-toggle path,
.elementor-64017 .elementor-element-347535a0 .elementor-menu-toggle span,
#page .elementor-menu-toggle i,
#page .elementor-menu-toggle svg,
.elementor-menu-toggle i,
.elementor-menu-toggle svg,
.elementor-menu-toggle__icon--open i,
.elementor-location-header .elementor-social-icon i,
.elementor-location-header .elementor-icon i {
  color: #415097 !important; /* Brand Navy */
  fill: #415097 !important;  /* Brand Navy */
  z-index: 9999 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force navy on all child elements of the toggle and search */
#page .elementor-64017 .elementor-element-347535a0 .elementor-menu-toggle *,
.elementor-64017 .elementor-element.elementor-element-347535a0 .elementor-menu-toggle *,
.elementor-location-header .elementor-search-form i {
    color: #415097 !important;
    fill: #415097 !important;
}

body .elementor-menu-toggle i,
body .elementor-menu-toggle svg,
html body .elementor-element .elementor-menu-toggle i {
  color: var(--ane-primary) !important;
  fill: var(--ane-primary) !important;
}

/* 4.5 Ghost Navigation Cleanup (Force uninstall GP nav) */
#site-navigation,
#mobile-header,
.main-navigation,
.menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Fix mobile dropdown appearance */
body .elementor-nav-menu--dropdown {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  /* Reset any possible GP interference */
  position: absolute !important;
  width: 100% !important;
  left: 0 !important;
}

/* Force visibility when active */
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 100vh !important;
}

body .elementor-nav-menu--dropdown .elementor-item {
  font-family: var(--ane-font) !important;
  color: var(--ane-text-main) !important;
  padding: 15px 20px !important;
}

/* Buttons (Premium Feel) */
body .elementor-button,
body .button {
  border-radius: 8px !important;
  font-family: var(--ane-font) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.3s ease !important;
}

body .elementor-button:hover,
body .button:hover {
  filter: brightness(1.1);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3) !important;
}
/*
  ELEMENTOR WIDGET HACKS
  Targeting specific widget IDs and classes found in the ANE.vn audit.
*/

/* 1. Global Search Widget - The "Pill" Refinement */
body .elementor-search-form__container {
    border-radius: 50px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 12px !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

body .elementor-search-form__container:focus-within {
    border-color: var(--ane-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

body .elementor-search-form__input {
    font-family: var(--ane-font) !important;
    font-size: 14px !important;
}

/* 2. Specific Heading Hack (Based on observed ID b3b44fd) */
body .elementor-element-b3b44fd .elementor-heading-title {
    position: relative;
    padding-bottom: 15px;
}

body .elementor-element-b3b44fd .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--ane-primary);
    border-radius: 2px;
}

/* 3. WooCommerce Widget Specific Fixes */
body .elementor-wc-products .woocommerce-loop-product__title {
    min-height: 2.4em;
    /* Standardize card title heights */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body .elementor-element-8cb1d2c.elementor-wc-products ul.products li.product img {
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}

/* 4. Elementor Column Shadow Correction (Force modern depth) */
body .elementor-column-wrap.elementor-element-populated,
body .elementor-widget-wrap.elementor-element-populated {
    transition: all 0.3s ease !important;
}

/* 5. Button Grouping Fix */
body .elementor-button-wrapper {
    margin-bottom: 10px;
}