/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://gsyncd.com
 Description:  Hello Elementor Child Theme for gsyncd
 Author:       Antigravity
 Author URI:   https://gsyncd.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* --- Fixes for User Feedback --- */

/* 1. Remove Hello Elementor's default red/pink focus outline and background on all elements */
*:focus,
a:focus, 
button:focus,
.nav-links a:focus,
.theme-toggle:focus,
.theme-toggle:active,
.hamburger:focus,
.hamburger:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Force buttons to ALWAYS have a transparent background to prevent the red Elementor button color */
.theme-toggle,
.theme-toggle:focus,
.theme-toggle:active,
.theme-toggle:hover,
.hamburger,
.hamburger:focus,
.hamburger:active,
.hamburger:hover {
    background-color: transparent !important;
}

/* Ensure the theme toggle button inherits the proper green glow on hover, 
   overriding any global button styles */
.theme-toggle:hover {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 10px var(--accent-glow) !important;
    color: var(--accent-color) !important;
}

/* 2. Force the correct size and layout for custom buttons */
.theme-toggle,
.hamburger {
    padding: 0 !important; /* Prevent parent themes from adding padding that squishes inner elements */
    border-radius: 0 !important; /* Fix Elementor default border radius on buttons */
}

.theme-toggle {
    color: var(--text-color) !important; /* Prevent Elementor from making the SVG white on a white background */
    border-color: var(--card-border) !important;
    border-radius: 50% !important; /* Restore circle */
}

/* Fix hamburger lines alignment */
.hamburger span {
    left: 0 !important;
    border-radius: 2px !important;
    height: 3px !important; /* Make it slightly thicker as requested */
}

.theme-toggle svg.moon-icon,
.theme-toggle svg.sun-icon,
.theme-toggle svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    fill: currentColor !important;
    max-width: none !important;
    transform: none !important;
}

/* Ensure only one icon shows at a time (fixes both showing in dark mode) */
.theme-toggle .moon-icon { display: inline-block !important; }
.theme-toggle .sun-icon { display: none !important; }

/* Light mode specific overrides */
[data-theme="light"] .theme-toggle .moon-icon { display: none !important; }
[data-theme="light"] .theme-toggle .sun-icon { display: inline-block !important; }

/* --- Global Scroll & Layout Fixes --- */

/* 1. Prevent common Elementor mobile horizontal scroll (side-to-side) */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* 2. Lock vertical background scrolling when the mobile menu is open */
body.menu-open {
    overflow: hidden !important;
    touch-action: none;
}

/* 3. Fix horizontal scroll inside the mobile menu overlay */
#navbar, #navbar * {
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
  #navbar {
      max-width: 100% !important;
      overflow-x: hidden !important;
  }
}
@media (min-width: 769px) {
  #navbar {
      overflow: visible !important;
  }
}
#navbar .nav-links {
    padding: 0 !important; /* Strip browser default ul padding */
    margin: 0 !important;
}
/* 4. Active state for WordPress menu items */
/* First, defeat the false .active class injected by custom.js on the wrong pages */
.nav-links a.active {
    opacity: 0.75 !important;
    color: var(--text-color) !important;
}
.nav-links a.active::after {
    width: 0 !important;
}

/* Restore hover state since we are overriding !important */
.nav-links a:hover {
    opacity: 1 !important;
    color: var(--accent-text) !important;
}
.nav-links a:hover::after {
    width: 100% !important;
}

/* Apply the true active state based on WordPress native classes */
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a {
    opacity: 1 !important;
    color: var(--accent-text) !important;
}
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after {
    width: 100% !important;
}