/* Import elegant wedding fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* periwinkle */
    --primary-color: rgba(119,129,171,255);
    /* wine red */
    --secondary-color: rgba(122,39,61,255);
    /* sage */
    --neutral-color: rgba(133,150,127,255);
    /* light text colors for dark backgrounds */
    --light-text: rgba(255, 255, 255, 0.95);
    --light-text-muted: rgba(255, 255, 255, 0.7);
}

/* Global font settings */
body {
    font-family: 'Crimson Text', serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Playfair Display', serif;
}


/* Navigation Bar Styling */
/* Main navbar container - uses primary wedding color (periwinkle) as background */
.wedding-navbar {
    background-color: var(--primary-color); /* Solid periwinkle background for wedding theme */
    box-shadow: 0 2px 15px rgba(119, 129, 171, 0.3); /* Subtle shadow using primary color for depth */
    transition: all 0.3s ease; /* Smooth transitions for any hover/state changes */
}

/* Brand text styling - "Ryan & Shae" in navbar */
.wedding-navbar .brand-text {
    font-family: 'Playfair Display', serif; /* Elegant serif font for romantic feel */
    font-size: 1.8rem; /* Large, prominent size for the couple's names */
    font-weight: 600; /* Semi-bold weight for good visibility */
    color: white; /* White text for contrast against periwinkle background */
    text-decoration: none; /* Remove default link underline */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for text depth */
}

/* Brand text hover effect - subtle animation when hovering over couple's names */
.wedding-navbar .navbar-brand:hover .brand-text {
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white on hover */
    transform: translateY(-1px); /* Small upward movement for elegant hover effect */
}

/* Navigation links styling - Home, When & Where, RSVP links */
.wedding-navbar .nav-link {
    font-family: 'Crimson Text', serif; /* Readable serif font matching body text */
    font-size: 1.1rem; /* Slightly larger than default for better readability */
    color: rgba(255, 255, 255, 0.9) !important; /* Semi-transparent white for softer look */
    margin: 0 0.5rem; /* Horizontal spacing between navigation items */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    border-radius: 4px; /* Rounded corners for modern button-like appearance */
    padding: 0.5rem 0.75rem !important; /* Comfortable padding for button-like clickable area */
}

/* Navigation link hover effect - transforms links into wine red buttons */
.wedding-navbar .nav-link:hover {
    color: white !important; /* Pure white text for maximum contrast */
    background-color: var(--secondary-color); /* Wine red background on hover */
    transform: translateY(-1px); /* Small upward movement matching brand hover effect */
}

/* Mobile menu toggle button (hamburger menu) styling */
.wedding-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3); /* Light white border for visibility */
    padding: 0.25rem 0.5rem; /* Compact padding for mobile-friendly touch target */
}

/* Focus state for mobile menu toggle - accessibility and keyboard navigation */
.wedding-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); /* White focus ring for visibility */
}

/* Custom hamburger icon - white lines for visibility on dark periwinkle background */
/* Bootstrap's default hamburger is dark, so we override with white SVG icon */
.wedding-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Homepage Hero Section - Background image with text overlay */
.hero {
    background: url('/static/image/cover.jpg') center center/cover no-repeat; /* Cover photo centered and scaled */
    min-height: 100vh; /* Full viewport height for dramatic effect */
    display: flex;
    align-items: flex-start; /* Position content at top instead of center to avoid faces */
    justify-content: center; /* Center horizontally */
    text-align: center;
    color: white; /* White text for contrast against photo */
    position: relative;
    padding-top: 8rem; /* Add space from navbar and position text in upper third */
}

.hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); /* overlay to make text readable */
    z-index: 0;
}

/* Hero content container - positioned above the dark overlay */
.hero-content {
    position: relative;
    z-index: 1; /* Ensure text appears above the dark overlay */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .hero {
        padding-top: 6rem; /* Reduce top padding on smaller screens */
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 5rem; /* Further reduce for very small screens */
    }
}

/* When and Where Section - Periwinkle background with light text */
#when-where {
    background-color: var(--primary-color) !important; /* Override Bootstrap's bg-light with periwinkle */
}

#when-where h2 {
    color: white; /* White headings for contrast against periwinkle background */
}

#when-where .fs-3 {
    color: var(--light-text); /* Slightly transparent white for main content */
}

#when-where .fs-5 {
    color: var(--light-text); /* Slightly transparent white for smaller text */
}

#when-where .text-muted {
    color: var(--light-text-muted) !important; /* Override Bootstrap's muted color with light white */
}

#when-where .btn-outline-light {
    background-color: var(--secondary-color); /* Wine red background by default */
    border-color: var(--secondary-color); /* Wine red border */
    color: white; /* White text */
}

#when-where .btn-outline-light:hover {
    background-color: transparent; /* Transparent background on hover */
    border-color: var(--secondary-color); /* Wine red border on hover */
    color: var(--secondary-color); /* Wine red text on hover */
}

/* RSVP Section - Wine red background with light text */
#rsvp {
    background-color: var(--secondary-color); /* Wine red background */
}

#rsvp h1,
#rsvp h2 {
    color: white; /* White heading for contrast */
}

#rsvp p {
    color: var(--light-text); /* Light text for readability */
}

#rsvp .btn {
    background-color: var(--primary-color); /* Periwinkle button background */
    border-color: var(--primary-color); /* Periwinkle button border */
    color: white; /* White text */
    font-weight: 600; /* Semi-bold button text */
}

#rsvp .btn:hover {
    background-color: transparent; /* Transparent background on hover */
    border-color: white; /* White border on hover */
    color: white; /* White text on hover */
}

/* Contact Section - Periwinkle background with light text */
#contact {
    background-color: var(--primary-color); /* Periwinkle background */
}

#contact h1 {
    color: white; /* White main heading for contrast against periwinkle background */
}

#contact h2 {
    color: white; /* White headings for contrast against periwinkle background */
}

#contact .lead {
    color: var(--light-text); /* Light text for subtitle */
}

#contact .fs-3 {
    color: var(--light-text); /* Slightly transparent white for main content */
}

#contact .fs-5 {
    color: var(--light-text); /* Slightly transparent white for smaller text */
}

#contact .text-muted {
    color: var(--light-text-muted) !important; /* Override Bootstrap's muted color with light white */
}

/* Contact table-like layout using CSS Grid */
#contact .contact-table {
    display: grid;
    grid-template-columns: auto 1fr; /* First column auto-width, second column takes remaining space */
    gap: 0.75rem 2rem; /* Row gap 0.75rem, column gap 2rem */
    max-width: 500px; /* Limit max width for better appearance */
    margin: 0 auto; /* Center the table */
    align-items: center; /* Center items vertically within each row */
}

#contact .contact-row {
    display: contents; /* Make the row div transparent to the grid */
}

#contact .contact-label {
    color: white; /* White labels for contrast against periwinkle background */
    font-weight: 600; /* Semi-bold for emphasis */
    margin: 0; /* Remove default margins */
    text-align: left; /* Left align labels in their column */
}

#contact .contact-link {
    color: var(--light-text); /* Light text color matching other content */
    text-decoration: none; /* Remove default underline */
    transition: all 0.3s ease; /* Smooth hover transition */
    padding: 0.5rem 1rem; /* Add padding for better touch targets */
    border-radius: 6px; /* Rounded corners for modern look */
    border: 2px solid transparent; /* Invisible border for hover effect */
    text-align: left; /* Left align links in their column */
    justify-self: start; /* Align to start of grid cell */
}

#contact .contact-link:hover {
    color: white; /* Pure white text on hover */
    background-color: var(--secondary-color); /* Wine red background on hover */
    border-color: var(--secondary-color); /* Wine red border on hover */
    text-decoration: none; /* Ensure no underline on hover */
    transform: translateY(-2px); /* Slight upward movement for elegant effect */
}

/* Mobile responsive layout for contact section */
@media (max-width: 768px) {
    #contact .contact-table {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0.5rem; /* Reduce gap for mobile */
        text-align: center; /* Center align everything */
        max-width: 300px; /* Reduce max width for mobile */
    }
    
    #contact .contact-label {
        text-align: center; /* Center align labels */
        margin-bottom: 0.5rem; /* Add space below labels */
    }
    
    #contact .contact-link {
        text-align: center; /* Center align links */
        justify-self: center; /* Center within grid cell */
        margin-bottom: 1.5rem; /* Space between contact entries */
        padding: 0.5rem 0; /* Remove horizontal padding on mobile to fix centering */
    }
}

/* RSVP Form Styling */
.rsvp-form .btn {
    background-color: var(--secondary-color); /* Wine red background */
    border-color: var(--secondary-color); /* Wine red border */
    color: white; /* White text */
    font-weight: 600; /* Semi-bold button text */
}

.rsvp-form .btn:hover {
    background-color: transparent; /* Transparent background on hover */
    border-color: var(--secondary-color); /* Wine red border on hover */
    color: var(--secondary-color); /* Wine red text on hover */
}

/* Guest Not Found Page Button Styling */
.btn-primary {
    background-color: var(--primary-color) !important; /* Periwinkle background */
    border-color: var(--primary-color) !important; /* Periwinkle border */
    color: white !important; /* White text */
}

.btn-primary:hover {
    background-color: transparent !important; /* Transparent background on hover */
    border-color: var(--primary-color) !important; /* Periwinkle border on hover */
    color: var(--primary-color) !important; /* Periwinkle text on hover */
}

.btn-outline-secondary {
    background-color: var(--secondary-color) !important; /* Wine red background */
    border-color: var(--secondary-color) !important; /* Wine red border */
    color: white !important; /* White text */
}

.btn-outline-secondary:hover {
    background-color: transparent !important; /* Transparent background on hover */
    border-color: var(--secondary-color) !important; /* Wine red border on hover */
    color: var(--secondary-color) !important; /* Wine red text on hover */
}