/*
Theme Name: Exceylon Base
Author: Yasiru Liyanage
Description: WordPress theme using React, Tailwind CSS, and a Headless Form architecture.
Version: 1.0.0
Text Domain: exceylon-base
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Base styles for when compiled CSS is not available */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
	color: #333;
	margin: 0;
	padding: 0;
}

/* Basic WordPress content styling */
.wp-block-group,
.entry-content,
.wp-site-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Basic responsive styles */
@media (max-width: 768px) {
	.wp-block-group,
	.entry-content,
	.wp-site-content {
		padding: 0 15px;
	}
}

/* Loading state for Tailwind CDN pages */
.tailwind-loading {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* React component containers */
.react-component {
	min-height: 50px;
}

/* Basic form styling */
form {
	margin: 20px 0;
}

input, textarea, select {
	width: 100%;
	padding: 10px;
	margin: 5px 0;
	border: 1px solid #ddd;
	border-radius: 4px;
}

button[type="submit"] {
	background-color: #3b82f6;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

button[type="submit"]:hover {
	background-color: #2563eb;
}

/* 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;
    }
}