/* Theme: James — High contrast, clean whites, Avenir font, rounded buttons, animated menu */
:root {
    --cyan: #7c3aed;
    --pink: #c084fc;
    --hot-pink: #a855f7;
    --yellow: #fde68a;
    --light-blue: #4c1d95;
    --dark: #f8f6ff;
    --darker: #ffffff;
    --white: #fff;
    --text-light: #1e1042;
    --text-medium: #6b21a8;
    --border-light: rgba(124, 58, 237, 0.18);
    --card-bg: #ffffff;
}

/* Hide mobile menu logo on desktop */
.nav-menu-logo { display: none; }

body {
    font-family: 'Avenir Next', 'Avenir', 'Quicksand', 'Helvetica Neue', sans-serif;
    background: linear-gradient(180deg, #ffffff 0%, #f5f0ff 100%);
}

/* === NAV: Frosted glass, high contrast, default layout spacing === */
.arc-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    box-shadow: 0 4px 30px rgba(124, 58, 237, 0.1);
}

.arc-logo img { height: 85px; }

.arc-event-info { color: #1e1042; }
.arc-date { color: #7c3aed; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; }
.arc-location { color: #6b21a8; font-size: 0.82rem; letter-spacing: 0.05em; }

.arc-nav-links {
    gap: 1.8rem;
    align-items: center;
}

.arc-nav-links .dropdown {
    padding-bottom: 0;
}

.arc-nav-links a,
.arc-nav-links .dropdown-toggle {
    color: #7c3aed;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    height: 2rem;
    line-height: 1;
}

.arc-nav-links a:visited {
    color: #7c3aed;
}

.arc-nav-links a:hover {
    background: #f3e8ff;
    color: #7c3aed;
}

.arc-nav-links .dropdown-menu {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.14);
    padding: 0.75rem 0;
}

.arc-nav-links .dropdown-menu a {
    color: #7c3aed;
    border-radius: 0;
    display: block;
    height: auto;
    line-height: normal;
}

.arc-nav-links .dropdown-menu a:visited {
    color: #7c3aed;
}

/* On desktop, show only category titles in Experience dropdown */
.dropdown-card-desc {
    display: none;
}

.arc-nav-links .dropdown-menu a:hover {
    background: #f3e8ff;
    color: #7c3aed;
}

.mobile-menu-toggle span { background: #1e1042; }

.arc-rsvp-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.6rem 1.8rem;
    border: none;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
    transition: all 0.25s ease;
}

.arc-rsvp-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

/* === HERO === */
.hero-video-home {
    height: 85vh;
}

.hero-video-home .hero-overlay {
    background: linear-gradient(180deg,
        rgba(30, 16, 66, 0.15) 0%,
        rgba(124, 58, 237, 0.2) 50%,
        rgba(30, 16, 66, 0.65) 100%);
}

.hero-title {
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 4.8rem;
    text-shadow: 0 2px 30px rgba(30, 16, 66, 0.6);
}

.hero-dates {
    color: #fde68a;
    text-shadow: 0 0 15px rgba(253, 230, 138, 0.3);
    letter-spacing: 0.3em;
    font-weight: 600;
}

.btn-hero {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border-radius: 50px;
    border: none;
    padding: 1rem 3rem;
    font-weight: 700;
    box-shadow: 0 4px 25px rgba(124, 58, 237, 0.4);
    letter-spacing: 0.15em;
}

.btn-hero:hover {
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    box-shadow: 0 8px 35px rgba(124, 58, 237, 0.5);
}

/* === PORTRAIT/QUOTE === */
.hero-portrait-quote {
    background: linear-gradient(135deg, #1e1042, #2e1065);
}

.portrait-quote-image-frame {
    border-radius: 24px;
    border: 3px solid rgba(192, 132, 252, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.slideshow-quote {
    background: linear-gradient(135deg, #c084fc 0%, #fde68a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 600;
}

.slideshow-quote-white {
    -webkit-text-fill-color: #fff;
}

/* === SLIDESHOW === */
.hero-slideshow-below {
    background: linear-gradient(180deg, #2e1065, #1e1042);
    padding: 0 0 6rem;
}

.peek-slide {
    border-radius: 20px;
    border-color: rgba(192, 132, 252, 0.15);
    overflow: hidden;
}

.peek-slide.active {
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.4), 0 20px 50px rgba(124, 58, 237, 0.25);
}

.peek-arrow {
    background: rgba(30, 16, 66, 0.75);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(192, 132, 252, 0.35);
    border-radius: 50%;
}

h2 {
    background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* === INFO/EXPERIENCE SECTIONS — High-contrast white cards on deep purple === */
.info-section, .experience-section {
    background: linear-gradient(180deg, #1e1042, #2e1065);
}

.info-card, .experience-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.info-card:hover, .experience-card:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(192, 132, 252, 0.5);
    box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.2), 0 8px 30px rgba(124, 58, 237, 0.2);
}

.info-card h3, .experience-card h3 { color: #fde68a; }
.info-content li::before, .experience-content li::before { color: #c084fc; }

/* Bright links on dark sections */
.info-card a, .experience-card a,
.info-section a, .experience-section a {
    color: #fde68a;
}

.info-card a:visited, .experience-card a:visited,
.info-section a:visited, .experience-section a:visited {
    color: #e9d5ff;
}

.info-card a:hover, .experience-card a:hover,
.info-section a:hover, .experience-section a:hover {
    color: #fff;
}

footer {
    background: #1e1042;
    border-radius: 0;
}

.social-links a { color: #c084fc; }

/* === MOBILE: Full-screen overlay nav === */
@media (max-width: 768px) {
    .hero-video-home { height: 72vh; }
    .hero-title { font-size: 2.8rem; }

    /* Cards fill more width on mobile */
    .info-grid, .experience-grid {
        gap: 1rem;
    }

    .info-card, .experience-card {
        border-radius: 16px;
    }

    .arc-header {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 0;
    }

    /* Full-screen dark overlay */
    .nav-menu {
        width: 100%;
        max-width: 100%;
        background: linear-gradient(180deg, #1e1042 0%, #0f0a24 100%);
        box-shadow: none;
        padding: 55px 2.5rem 1rem;
        justify-content: flex-start;
    }

    /* WHYNOT logo at top */
    .nav-menu-logo {
        display: block;
        text-align: left;
        margin: 0 0 0.2rem;
    }

    .nav-menu-logo img {
        width: 110px;
        height: auto;
    }

    /* Big bold nav links */
    .arc-nav-links a,
    .arc-nav-links a:link,
    .arc-nav-links a:visited,
    .arc-nav-links a:focus,
    .arc-nav-links a:active {
        color: #fff;
        font-weight: 800;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 0.2rem 0;
        border-radius: 0;
        display: block;
        text-align: left;
    }

    .arc-nav-links a:hover {
        background: none;
        color: #fff;
    }

    /* Chevron arrows on right */
    .arc-nav-links > li > a::after,
    .arc-nav-links > li > .dropdown-toggle::after {
        content: '›';
        float: right;
        font-size: 1.7rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1;
    }

    /* Remove dropdown arrow from toggle text since we have chevron */
    .arc-nav-links .dropdown-toggle {
        font-size: 1.5rem;
        font-weight: 800;
        display: block;
        text-align: left;
    }

    .arc-nav-links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Dropdown sub-items */
    .arc-nav-links .dropdown-menu {
        background: rgba(255, 255, 255, 0.04);
        border: none;
        box-shadow: none;
    }

    .arc-nav-links .dropdown-menu a {
        font-size: 1.1rem;
        font-weight: 600;
        color: #c9b3f0;
        padding: 0.6rem 0 0.6rem 1rem;
    }

    .arc-nav-links .dropdown-menu a::after {
        display: none;
    }

    .arc-nav-links .dropdown-menu a:hover {
        color: #fff;
    }

    /* Card-style dropdown (Experience) */
    .arc-nav-links .dropdown-menu-cards {
        background: none;
        padding: 0.4rem 0;
    }

    .arc-nav-links .dropdown-menu-cards li {
        border-bottom: none;
        padding-left: 0;
        margin-bottom: 0.4rem;
    }

    .arc-nav-links .dropdown-menu-cards a {
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.13);
        border: 1px solid rgba(192, 132, 252, 0.3);
        border-radius: 12px;
        padding: 0.8rem 1rem;
        transition: all 0.2s ease;
    }

    .arc-nav-links .dropdown-menu-cards a:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(192, 132, 252, 0.5);
    }

    .dropdown-card-title {
        font-size: 1rem;
        font-weight: 800;
        color: #f0e6ff;
        letter-spacing: 0.05em;
    }

    .dropdown-card-title::after {
        content: ' →';
        font-weight: 400;
        color: rgba(255, 255, 255, 0.65);
    }

    .dropdown-card-desc {
        font-size: 0.8rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.75);
        margin-top: 0.15rem;
    }

    /* RSVP button */
    .arc-rsvp-btn {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: #fff;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
        margin-top: 0.5rem;
        text-align: center;
    }

    .arc-rsvp-btn:hover {
        background: linear-gradient(135deg, #6d28d9, #7c3aed);
        color: #fff;
    }

    /* X button color for dark bg */
    .mobile-menu-toggle.active span {
        background: #fff;
    }
}