/* Extracted from layouts\app.blade.php (block 1) */
/* Navigation Dropdown - Click-based */
.nav-dropdown {
position: relative;
display: inline-block;
}

.nav-dropdown-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
color: white;
transition: color var(--transition-base);
font-weight: 500;
text-decoration: none;
}

.nav-dropdown-toggle:hover {
color: var(--caramel);
}

.nav-dropdown-toggle i {
font-size: 0.75rem;
transition: transform 0.3s ease;
}

/* Active state when dropdown is open */
.nav-dropdown.active .nav-dropdown-toggle {
color: var(--caramel);
}

.nav-dropdown.active .nav-dropdown-toggle i {
transform: rotate(180deg);
}

.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 20px rgba(47, 13, 1, 0.15);
padding: 0.5rem 0;
min-width: 180px;
display: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1000;
pointer-events: none;
}

/* Show dropdown when active */
.nav-dropdown.active .nav-dropdown-menu {
display: block;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.nav-dropdown-menu a {
display: block;
padding: 0.5rem 1rem;
color: var(--coffee-dark);
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-dropdown-menu a:hover {
background-color: var(--cream);
color: var(--coffee-dark);
}

/* Mobile Navigation Styles */
.mobile-nav-section {
border-left: 3px solid transparent;
padding: 0;
margin: 0.75rem 0;
background: rgba(237, 187, 137, 0.04);
border-radius: 0 0.5rem 0.5rem 0;
overflow: visible !important;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}

.mobile-nav-section.active {
background: rgba(237, 187, 137, 0.1);
border-left-color: var(--caramel);
border-left-width: 4px;
box-shadow: 0 2px 8px rgba(237, 187, 137, 0.15);
}

.mobile-nav-title {
font-weight: 600;
color: var(--muted-foreground);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem var(--spacing-md);
background: rgba(0, 0, 0, 0.02);
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;
font-family: inherit;
text-align: left;
text-transform: uppercase;
letter-spacing: 1px;
}

.mobile-nav-title::-moz-focus-inner {
border: 0;
}

.mobile-nav-section.active .mobile-nav-title {
background: rgba(237, 187, 137, 0.15);
border-bottom-color: rgba(237, 187, 137, 0.2);
font-weight: 800;
color: var(--coffee-dark);
}

.mobile-nav-title i {
margin-right: 0.5rem;
font-size: 0.75rem;
}

.mobile-nav-sub {
padding: 0.875rem var(--spacing-md) 0.875rem 2rem !important;
font-size: 0.95rem;
opacity: 1 !important;
display: flex !important;
align-items: center;
color: var(--foreground);
border-left: none !important;
background: white !important;
position: relative;
min-height: 48px;
visibility: visible !important;
z-index: 1;
}

.mobile-nav-sub::before {
content: '→';
position: absolute;
left: 1.25rem;
color: var(--primary);
opacity: 0;
transition: all 0.3s ease;
}

.mobile-nav-sub:hover::before {
opacity: 1;
left: 1rem;
}

.mobile-nav-sub:hover {
padding-left: 2.25rem !important;
color: var(--primary) !important;
}

.mobile-nav-sub.active {
font-weight: 600;
color: var(--primary);
}

.mobile-nav-sub.active::before {
opacity: 1;
}

/* Get Started button in mobile menu */
.mobile-nav-cta {
padding: var(--spacing-md);
margin-top: 0.5rem;
border-top: 1px solid var(--border);
}

.mobile-nav-cta .btn {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
font-weight: 600;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
overflow: hidden;
}

/* Overlay for mobile menu */
.mobile-nav-overlay {
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 998;
}

.mobile-nav-overlay.active {
opacity: 1;
pointer-events: all;
}

/* Responsive adjustments for navigation */
@media (max-width: 767px) {
.nav-dropdown-menu {
position: static;
box-shadow: none;
padding: 0;
display: none;
}

.mobile-nav-section {
margin: 0.5rem 0;
}

.mobile-nav-title {
padding: 0.875rem 1rem;
min-height: 48px;
}

/* Ensure mobile nav has proper scrolling */
.mobile-nav.active {
max-height: calc(100vh - 80px);
padding-bottom: 20px;
}

/* Improve mobile nav sub-items */
.mobile-nav-sub {
min-height: 48px;
padding: 0.875rem 1rem 0.875rem 2.5rem !important;
}
}

/* iPad and tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
.nav-dropdown-menu {
min-width: 140px;
font-size: 0.9rem;
}

.nav-dropdown-menu a {
padding: 0.4rem 0.875rem;
}
}

/* Small laptop optimization */
@media (min-width: 1024px) and (max-width: 1279px) {
.nav-dropdown-menu {
min-width: 150px;
}
}

/* Large screen optimization */
@media (min-width: 1440px) {
.nav-dropdown-menu {
min-width: 180px;
padding: 0.75rem 0;
}

.nav-dropdown-menu a {
padding: 0.625rem 1.25rem;
font-size: 1rem;
}
}