/* Elegant Invitation Styles */

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #5a0b2e; /* Deep Burgundy */
    font-family: 'Lato', sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Navigation (Minimal "Back" link) */
.top-nav {
    position: absolute;
    top: 20px;
    right: 30px;
}

.top-nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.top-nav a:hover {
    color: #d4af37; /* Gold */
    border-bottom-color: #d4af37;
}

/* Invitation Card */
.invitation-card {
    background-color: #fffaf0; /* Creamy White */
    width: 100%;
    max-width: 700px;
    padding: 60px 40px;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    border: 1px solid #d4af37; /* Gold Border */
    position: relative;
    margin-top: 40px; /* Space for nav */
    margin-bottom: 40px;
}

/* Inner Frame Effect (Double Border look) with Gradient */
.invitation-card::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 4px;
    pointer-events: none;
    
    /* Gradient Border Trick using Mask */
    border: 2px solid transparent;
    background: linear-gradient(to bottom, #8B6914 0%, #FFD700 50%, #DAA520 100%) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Logo */
.card-logo {
    width: 220px; /* Significantly larger */
    height: auto;
    margin-bottom: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 160px; /* Allow it to be taller */
    object-fit: contain;
    /* Optional: subtle drop shadow to make it pop/prominent */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Typography */
h1 {
    font-family: 'Playfair Display', serif;
    /* Gold Spotlight Radial Gradient */
    background: radial-gradient(
        circle at center, 
        #F4E285 0%,    /* Bright Shine (Center) */
        #B68D40 100%   /* Dark Bronze (Edges) */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #DAA520; /* Fallback */
    
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 700;
    
    /* Enhanced shadow for depth */
    filter: drop-shadow(0px 2px 0px rgba(0,0,0,0.15));
}

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
    width: 60%;
    margin: 20px auto;
    opacity: 0.6;
}

.date-highlight {
    color: #bfa15f; /* Muted Gold */
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px; /* Reduced bottom margin to sit closer to address */
    display: block;
}

.address-display {
    color: #2c3e50; /* Navy/Dark Grey */
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    margin-bottom: 30px;
    display: block;
    font-style: italic;
}

.description {
    color: #4a4a4a;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 550px;
    margin: 0 auto;
}

/* Footer */
.simple-footer {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    text-align: center;
    padding-bottom: 20px;
}

/* Responsive */
@media (max-width: 600px) {
    h1 {
        font-size: 2.2rem;
    }
    .invitation-card {
        padding: 40px 20px;
    }
}