/* Custom styles for Claudia Montero Realtor */

:root {
    --navy-900: #080f22;
    --navy-800: #0f1c3f;
    --navy-700: #1e345c;
    --navy-600: #2d4b80;
    --navy-500: #3d63a4;
    --navy-400: #6684b8;
    --navy-200: #b8c6e0;
    --navy-100: #dce3f0;
    --navy-50: #f0f3f9;
    --gold-500: #c9a55a;
    --gold-400: #e6b53d;
    --gold-300: #edc96a;
    --gold-100: #faf0d4;
    --gold-50: #fdf9ef;
}

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem 0;
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f0f3f9;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: #dce3f0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #c9a55a;
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: #c9a55a;
}

.nav-cta {
    background: linear-gradient(135deg, #c9a55a, #e6b53d);
    color: #0f1c3f;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201,165,90,0.3);
}

/* Selection color */
::selection {
    background: rgba(201,165,90,0.3);
    color: #0f1c3f;
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #c9a55a;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .nav, .mobile-menu-btn, .map-container { display: none; }
    .hero { min-height: auto; }
    body { color: #000; background: #fff; }
}