/* ===== MAIN CSS - COMMON STYLES ===== */

/* Prevent white flash on page load */
html, body { 
    background-color: #000000 !important; 
}

/* ===== NAVIGATION SCROLL SHADOW ===== */

/* Smooth shadow transition for navigation */
nav {
    transition: box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Shadow effect when scrolled */
nav.nav-scrolled {
    box-shadow: 0 8px 60px rgba(0, 0, 0, 0.8), 0 12px 100px rgba(0, 0, 0, 0.4) !important;
}

/* ===== MOBILE DRAWER STYLES ===== */

/* FORCE completely solid black background - NO TRANSPARENCY */
#mobile-drawer {
    background-color: #000000 !important;
    background: #000000 !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5);
}

/* Override ANY possible transparency */
#mobile-drawer,
#mobile-drawer *,
#mobile-drawer > *,
#mobile-drawer > * > *,
#mobile-drawer > * > * > * {
    background-color: #000000 !important;
}

/* Force navigation background */
#mobile-drawer nav {
    background-color: #000000 !important;
}

/* Force all child divs to be black */
#mobile-drawer div {
    background-color: #000000 !important;
}

/* Exception for active/hover states only */
.drawer-link.bg-accent\/10 {
    background-color: rgba(97, 160, 112, 0.1) !important;
}

.drawer-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Drawer link hover effects */
.drawer-link {
    position: relative;
    overflow: hidden;
}

.drawer-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(97, 160, 112, 0.1), rgba(97, 160, 112, 0.05));
    transition: width 0.3s ease;
    z-index: -1;
}

.drawer-link:hover::before {
    width: 100%;
}

/* Hamburger animation improvements */
.hamburger-line {
    transform-origin: center;
}

/* Backdrop blur enhancement */
#mobile-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Enhanced scrollbar for drawer (if needed) */
#mobile-drawer::-webkit-scrollbar {
    width: 4px;
}

#mobile-drawer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

#mobile-drawer::-webkit-scrollbar-thumb {
    background: rgba(97, 160, 112, 0.3);
    border-radius: 2px;
}

/* ===== GREEN GRADIENT BACKGROUND ===== */

/* Smooth background pattern animation */
.pattern-bg {
    background-image: radial-gradient(circle at 20% 80%, rgba(97, 160, 112, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(97, 160, 112, 0.10) 0%, transparent 50%);
    background-attachment: fixed;
    animation: pattern-float 20s ease-in-out infinite;
}

/* Floating animation keyframes */
@keyframes pattern-float {
    0%, 100% {
        background-position: 0% 0%, 100% 100%;
    }
    25% {
        background-position: 10% 5%, 90% 95%;
    }
    50% {
        background-position: 5% 10%, 95% 90%;
    }
    75% {
        background-position: 15% 2%, 85% 98%;
    }
}

/* Subtle gradient overlay */
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 50%);
    pointer-events: none;
}

section {
    position: relative;
    overflow: hidden;
}

/* Smooth transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions for animated elements */
.bg-accent {
    transition: none !important;
}

.accent-line-stable {
    background-color: #61a070 !important;
    transition: none !important;
    transform: none !important;
}

.accent-line-container {
    transition: none !important;
}

/* Performance optimizations and initial state lock */
.animate-fade-in-up {
    transform-gpu: true;
    will-change: opacity, transform;
}

/* Custom accent colors */
.text-accent {
    color: #61a070;
}

.bg-accent {
    background-color: #61a070;
}

/* Body and HTML base styles */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-gutter: stable; /* Reserve space for scrollbar without showing it */
}

body {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh; /* Ensures body covers at least viewport height */
}

/* Mobile-friendly footer grid */
.footer-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 0.7fr 0.7fr 1.2fr 1.2fr 1.2fr;
    }
}



/* Global scrollbar styling for all pages */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ABSOLUTE NAVIGATION OVERRIDE - MAXIMUM SPECIFICITY */
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none,
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none > span:not(.nav-bar),
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block,
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block > span:not(.nav-bar),
a.nav-link.text-sm.font-light,
a.nav-link.text-sm.font-light > span:not(.nav-bar),
.nav-link,
.nav-link > span:not(.nav-bar) {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    font-feature-settings: "kern" 1, "liga" 1 !important;
    -webkit-font-feature-settings: "kern" 1, "liga" 1 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-synthesis: weight style !important;
    font-variant: normal !important;
    opacity: 0.75 !important;
    transition: opacity 300ms ease-out !important;
}

nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:hover,
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:hover > span:not(.nav-bar),
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:active,
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:active > span:not(.nav-bar),
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:focus,
nav a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block.outline-none.focus\:outline-none:focus > span:not(.nav-bar),
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:hover,
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:hover > span:not(.nav-bar),
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:active,
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:active > span:not(.nav-bar),
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:focus,
a.nav-link.text-sm.font-light.text-white.relative.group.py-2.block:focus > span:not(.nav-bar),
a.nav-link.text-sm.font-light:hover,
a.nav-link.text-sm.font-light:hover > span:not(.nav-bar),
a.nav-link.text-sm.font-light:active,
a.nav-link.text-sm.font-light:active > span:not(.nav-bar),
a.nav-link.text-sm.font-light:focus,
a.nav-link.text-sm.font-light:focus > span:not(.nav-bar),
.nav-link:hover,
.nav-link:hover > span:not(.nav-bar),
.nav-link:active,
.nav-link:active > span:not(.nav-bar),
.nav-link:focus,
.nav-link:focus > span:not(.nav-bar) {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
    font-synthesis: none !important;
    font-variant: normal !important;
    opacity: 1 !important;
    transition: opacity 300ms ease-out !important;
}

/* Active navigation items with nav-active class - MAXIMUM SPECIFICITY */
nav a.nav-link.nav-active.text-sm.font-light.text-white.relative.group.py-2.block.outline-none,
nav a.nav-link.nav-active.text-sm.font-light.text-white.relative.group.py-2.block.outline-none > span.block,
nav a.nav-link.nav-active.text-sm.font-light.text-white.relative.group.py-2.block.outline-none > span:not(.nav-bar),
nav .nav-link.nav-active,
nav .nav-link.nav-active > span,
nav .nav-link.nav-active > span.block,
a.nav-link.nav-active,
a.nav-link.nav-active > span,
.nav-active,
.nav-active > span {
    opacity: 1 !important;
    color: white !important;
}

/* Logo opacity reduction */
nav img[alt="Royal Estate"] {
    opacity: 0.8 !important;
    transition: opacity 300ms ease-out !important;
}

nav img[alt="Royal Estate"]:hover {
    opacity: 1 !important;
}

.nav-link > span:not(.nav-bar) {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.nav-bar {
    transition: width 300ms ease-out !important;
}

/* Custom opacity class */
.opacity-85 {
    opacity: 0.85 !important;
}

/* ===== STICKY FOOTER GRID LAYOUT (for specific pages) ===== */

/* CSS Grid layout for pages with minimal content to keep footer at bottom */
.sticky-footer-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* Ensure navigation stays in position */
.sticky-footer-grid nav {
    grid-row: 1;
}

/* Main content grows to fill available space */
.sticky-footer-grid main {
    grid-row: 2;
}

/* Footer sticks to bottom */
.sticky-footer-grid footer {
    grid-row: 3;
}

/* Custom cursor on hover for links */
a {
    cursor: pointer;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(12px)) {
    .backdrop-blur-md {
        backdrop-filter: blur(12px);
    }
}

/* Reduce opacity for imprint section headers by additional 5% */
main section h2,
main section h3 {
    opacity: 0.85 !important;
}

/* Modern imprint styling - smaller headlines and lighter content text */
main section h2 {
    font-size: 1.375rem !important; /* Reduced from text-2xl (1.5rem) to smaller */
    font-weight: 400 !important; /* Lighter weight for modern look */
}

main section h3 {
    font-size: 0.95rem !important; /* Slightly smaller than default */
    font-weight: 400 !important; /* Lighter weight */
}

/* Lighter font weight for content text in imprint sections */
main section p {
    font-weight: 300 !important; /* Light weight for modern, elegant appearance */
    line-height: 1.6 !important; /* Better line spacing */
}

/* Footer styling improvements */
footer p.text-sm.text-gray-400.opacity-45 {
    color: #9ca3af !important; /* Better gray tone that matches the site */
    opacity: 0.54 !important; /* Reduced by 10% from 0.6 */
    font-size: 13px !important; /* Reduced by 1px from 14px (text-sm) */
}

/* Language switcher styling */
footer .flex.items-center.space-x-3 a {
    opacity: 0.5 !important; /* Reduced opacity for inactive language options */
    transition: opacity 200ms ease-out, color 200ms ease-out !important;
}

footer .flex.items-center.space-x-3 a:hover,
footer .flex.items-center.space-x-3 a.text-white.font-medium {
    opacity: 1 !important; /* Full opacity for active/hovered language options */
}

footer .flex.items-center.space-x-3 span {
    opacity: 0.3 !important; /* Reduced opacity for the separator */
}

/* KITT Scanner Animation for "Est. 2010" */
.kitt-scanner {
    background: linear-gradient(90deg, 
        #9ca3af 0%, 
        #9ca3af 35%, 
        #ffffff 40%,
        #ffffff 50%, 
        #9ca3af 55%, 
        #9ca3af 100%);
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kitt-sweep 6.5s infinite linear;
}



@keyframes kitt-sweep {
    0% { background-position: -100% 0; }
    61.5% { background-position: 100% 0; }
    100% { background-position: 100% 0; }
}

/* Header Logo Container Hover Effects */
.logo-container {
    transition: all 0.3s ease !important;
}

.logo-container:hover .logo-image {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

.est-text {
    transition: opacity 0.4s ease !important;
}

.logo-container:hover .est-text {
    opacity: 0.4 !important;
}