/* ======================================
   Design C: Slate & Linen
   Modern editorial luxury
   ====================================== */

:root {
    --bg-primary: #F4F2EE;
    --bg-secondary: #FAFAF8;
    --bg-tertiary: #EDE9E2;
    --bg-card: #FFFFFF;
    --text-primary: #1E2535;
    --text-secondary: #5A6070;
    --text-muted: #8896A4;

    --accent: #7D9B82;
    --accent-hover: #8DAB92;
    --accent-dark: #6D8B72;
    --accent-light: #AECBB3;
    --accent-soft: rgba(125, 155, 130, 0.1);

    --complement: #9B8A7A;
    --complement-hover: #ADA095;
    --complement-soft: rgba(155, 138, 122, 0.1);

    --border: #D8D4CC;

    --wedding: #A05060;
    --wedding-soft: rgba(160, 80, 96, 0.1);
    --dance: #6B3FA0;
    --dance-soft: rgba(107, 63, 160, 0.1);
    --film: #2D6A84;
    --film-soft: rgba(45, 106, 132, 0.1);
}

/* Scrolled nav — warm linen */
.nav.scrolled {
    background: rgba(244, 242, 238, 0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 24px rgba(30, 37, 53, 0.06);
}

/* Non-scrolled nav (over dark video hero) — white text */
.nav:not(.scrolled) .nav-link,
.nav:not(.scrolled) .nav-toggle {
    color: rgba(255, 255, 255, 0.85);
}
.nav:not(.scrolled) .nav-link:hover,
.nav:not(.scrolled) .nav-link.active {
    color: #AECBB3;
}

/* Hero text white — over dark video overlay */
.hero-content .hero-subtitle {
    color: #AECBB3;
}
.hero-content .hero-title,
.hero-content h1 {
    color: #ffffff;
}
.hero-content .hero-description {
    color: rgba(255, 255, 255, 0.85) !important;
}
.hero-scroll {
    color: rgba(255, 255, 255, 0.6);
}
.hero .btn-secondary,
.hero-wedding-page .btn-secondary,
.hero-dance-page .btn-secondary,
.hero-films-page .btn-secondary,
.hero-about .btn-secondary {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn-secondary:hover,
.hero-wedding-page .btn-secondary:hover,
.hero-dance-page .btn-secondary:hover,
.hero-films-page .btn-secondary:hover,
.hero-about .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
}

/* Btn primary hover — sage glow */
.btn-primary:hover {
    box-shadow:
        0 4px 20px rgba(125, 155, 130, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Form inputs */
.form-group input,
.form-group select,
.form-group textarea {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}
.form-group select option {
    background: #ffffff;
    color: var(--text-primary);
}

/* Contact category buttons — sage hover */
.contact-category-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Process number glow — sage */
.process-number {
    box-shadow: 0 0 20px rgba(125, 155, 130, 0.15);
}

/* Clean section divider — thin double line */
.section-header h2 {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    display: inline-block;
}

/* More editorial heading feel */
.section-header {
    text-align: center;
}

/* Cards get a subtle top accent border on hover */
.feature-card:hover,
.package-card:hover {
    border-top: 2px solid var(--accent);
}

/* Mobile nav menu */
@media (max-width: 768px) {
    .nav-menu {
        background: var(--bg-primary);
    }
    .nav-menu .nav-link {
        color: var(--text-secondary) !important;
    }
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: var(--accent) !important;
    }
}