/*
Theme Name: Exceylon Asian Gems
Template: exceylon-base
Author: Yasiru Liyanage
Description: Premium Asian Gems theme featuring Peacock Blue (#004B63), Deep Navy (#040B72), and Champagne Gold (#D4AF37) color palette. Built on Exceylon Base with custom modifications for gemstone retail and luxury brands.
Version: 1.0.4
Text Domain: exceylon-asiangems
License: GPL v2 or later
Tags: gemstones, luxury, ecommerce, jewelry, asian, peacock-blue, responsive, customizer
*/

/* Asian Gems Theme Overrides */

/* Asian Gems Color Variables */
:root {
    --ag-primary: #004B63;    /* Peacock Blue */
    --ag-secondary: #040B72;  /* Deep Navy */
    --ag-brand-blue: #0510AE; /* Brand Blue - Navigation, Headers, CTAs */
    --ag-accent: #D4AF37;     /* Champagne Gold */
    --ag-background: #F9F9FB; /* Off-White */
    --ag-surface: #FFFFFF;    /* Pure White */
    --ag-success: #059669;    /* Emerald Green */
}

/* Strategic Parent Theme Overrides - High Specificity */
/* Target exact parent theme selector: button[type="submit"] */
button[type="submit"] {
    background-color: var(--ag-primary) !important;
    color: white !important;
    border: 1px solid var(--ag-primary) !important;
    border-radius: 0 !important; /* Asian Gems squared buttons */
    padding: 10px 20px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

button[type="submit"]:hover {
    background-color: var(--ag-secondary) !important;
    border-color: var(--ag-secondary) !important;
}

/* Child Theme Base Overrides */
/* Override parent theme button styles where necessary */
button, 
.button,
input[type="submit"],
input[type="button"] {
    /* Reset parent button styles for consistency */
    box-shadow: none;
    text-decoration: none;
    border-radius: 0; /* Asian Gems squared button style */
    font-family: inherit;
}

/* Enable child theme button classes to override parent */
button.btn,
input.btn,
.button.btn,
button[type="submit"].btn,
input[type="submit"].btn {
    /* Reset all parent styles to allow child theme classes to work */
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

/* Parent theme button override - graceful specificity */
.site-content button,
.site-content .button {
    /* Override parent theme default buttons to use Asian Gems styling */
    background-color: var(--ag-primary);
    color: white;
    border: 1px solid var(--ag-primary);
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.site-content button:hover,
.site-content .button:hover {
    background-color: var(--ag-secondary);
    border-color: var(--ag-secondary);
}

/* Child theme specific component overrides */
.wp-block-button .wp-block-button__link {
    border-radius: 0 !important; /* Force squared buttons for Gutenberg blocks */
    background-color: var(--ag-primary);
    border: 1px solid var(--ag-primary);
}

.wp-block-button .wp-block-button__link:hover {
    background-color: var(--ag-secondary);
    border-color: var(--ag-secondary);
}

/* Enhanced Navigation Improvements */
.site-header .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.site-header .group:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block !important;
}

/* Mobile menu improvements */
.mobile-nav-menu ul {
    transition: all 0.3s ease;
}

.mobile-nav-menu .mobile-submenu-toggle svg {
    transition: transform 0.2s ease;
}

/* Submenu item styling */
.sub-menu li {
    position: relative;
}

.sub-menu .group:hover .sub-menu {
    left: 100%;
    top: 0;
}

/* Ensure proper z-index for nested submenus */
.sub-menu .sub-menu {
    z-index: 60;
}

/* Add some custom styles for better UX */
@media (min-width: 768px) {
    .site-header nav li:hover > .sub-menu {
        display: block !important;
    }
}