/* General Styles */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f5ee;
    color: #333;
    line-height: 1.75;
    letter-spacing: 0.015em;
}

/* Classy serif for all body copy */
p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.12em;
    font-weight: 500;
    line-height: 1.8;
}

/* Keep Montserrat for UI chrome */
label,
button,
select,
input,
textarea,
.language-switcher,
.timeline-header,
.timeline-time,
.role-badge,
.iban-box {
    font-family: 'Montserrat', sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h1, h2, h3 {
    font-family: 'Pinyon Script', cursive;
    color: #5a8f6a; /* Lighter Green */
    text-align: center;
    margin-bottom: 20px;
}

/* Decorative underline accent for section h2s */
main section > h2 {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 30px;
}

main section > h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 1px;
    background: linear-gradient(to right, transparent, #5a8f6a, transparent);
}

/* Ornamental dividers between major sections */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 0 24px;
    color: #c9a96e;
    font-size: 0.85em;
    letter-spacing: 3px;
}

.ornament::before,
.ornament::after {
    content: none;
}

/* Polaroid-style photo accents, scattered between sections down the page */
.photo-accent-wrap {
    text-align: center;
    padding: 8px 20px 36px;
}

.photo-accent {
    display: inline-block;
    background: #fff;
    padding: 10px 10px 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    border-radius: 2px;
    transition: transform 0.25s ease;
}

.photo-accent.tilt-left {
    transform: rotate(-4deg);
}

.photo-accent.tilt-right {
    transform: rotate(3deg);
}

.photo-accent:hover {
    transform: rotate(0deg) scale(1.03);
}

.photo-accent img {
    display: block;
    width: 220px;
    height: 260px;
    object-fit: cover;
    border-radius: 1px;
}

@media screen and (max-width: 480px) {
    .photo-accent img {
        width: 180px;
        height: 210px;
    }
}

h1 {
    font-size: 2.6em; /* 30% larger than default 2em */
}

h2 {
    font-size: 2.5em; /* 30% larger than default 1.5em */
}

h3 {
    font-size: 1.52em; /* 30% larger than default 1.17em */
}

section {
    padding: 56px 40px;
    text-align: center;
}

/* Language Switcher Styles */
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
}

.language-switcher button {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-weight: 400;
    padding: 2px 5px;
    transition: color 0.3s ease;
}

.language-switcher button.active {
    color: #2d4a35;
    font-weight: 700;
}

.language-switcher span {
    color: #ddd;
}

/* Header Styles */
header {
    background-color: #ffffff;
    color: #5a8f6a;
    padding: 0;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the area */
    display: block;
}

.hero-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #f8f5ee 100%);
    pointer-events: none;
    z-index: 5;
}

.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: none;
    width: 90%;
    z-index: 10;
    padding: 20px;
}

.hero-names {
    font-family: 'Pinyon Script', cursive !important;
    font-size: 7em !important;
    color: #ffb2c1 !important;
    margin-bottom: 12px;
    letter-spacing: 4px;
    font-weight: 400;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}

.hero-date {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 7px;
    text-transform: uppercase;
    margin: 4px auto 0;
    width: fit-content;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none;
    background: rgba(0, 0, 0, 0.30);
    padding: 8px 22px;
    border-radius: 2px;
}

/* Timeline Styles */
#how-we-met h2 {
    font-size: 3.2em;
    margin-bottom: 20px;
}

#how-we-met .timeline {
    position: relative;
    max-width: 1000px;
    margin: 20px auto; /* Reduced from 30px */
    padding: 10px 0; /* Reduced from 20px */
    /* Create a fade-out effect for the entire timeline container */
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    /* Use a gradient for the line itself for an extra smooth fade */
    background: linear-gradient(to bottom, #5a8f6a 0%, #5a8f6a 90%, transparent 100%);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-event {
    margin-bottom: 20px; /* Reduced from 40px */
    position: relative;
    width: 50%;
    padding: 10px 0; /* Changed from 10px 40px */
    box-sizing: border-box;
}

.timeline-event:nth-child(odd) {
    left: 0;
    text-align: right;
    padding-right: 30px; /* Space between content and the central line */
}

.timeline-event:nth-child(even) {
    left: 50%;
    text-align: left;
    padding-left: 30px; /* Space between content and the central line */
}

.timeline-event::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #f8f5ee;
    border: 3px solid #5a8f6a;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(90, 143, 106, 0.15);
}

.timeline-event:nth-child(odd)::after {
    right: -11px;
    left: auto;
}

.timeline-event:nth-child(even)::after {
    left: -11px;
    right: auto;
}

/* A photo attached to a timeline event sits on the OPPOSITE side of the
   centerline from that event's own text — roughly level with it, not
   stacked underneath — so it reads as "attached to" rather than "after"
   the event. Taking it out of flow (absolute) means normal margin no
   longer accounts for its height, so the event that owns a photo gets
   extra margin-bottom to reserve room: the next event may land in the
   same column as this one's photo (since the photo crosses to the
   opposite side), and would otherwise overlap it. Flattened back to
   normal in-flow stacking on mobile, see the max-width:768px block below. */
.timeline-event:has(.photo-accent-wrap) {
    margin-bottom: 300px;
}

.timeline-event .photo-accent-wrap {
    position: absolute;
    top: 10px;
    padding: 0;
}

.timeline-event:nth-child(odd) .photo-accent-wrap {
    left: calc(100% + 30px);
}

.timeline-event:nth-child(even) .photo-accent-wrap {
    right: calc(100% + 30px);
}

.timeline-date {
    font-family: 'Pinyon Script', cursive;
    font-size: 1.8em;
    font-weight: 400;
    color: #2d4a35; /* Darker green for dates */
    margin-bottom: 5px;
}

.timeline-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.08em;
    font-style: italic;
    line-height: 1.7;
    background-color: #ffffff;
    padding: 18px 22px;
    border-radius: 6px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border-left: 3px solid #c4a87d;
}

/* Invitation Styles */
#invitation p {
    margin-bottom: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.guest-greeting {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2em; /* Slightly larger for this font */
    font-weight: 600;
    font-style: italic;
    color: #2d4a35; /* Darker green for greeting */
    margin-bottom: 25px !important;
}

.details {
    font-style: italic;
    color: #d4728a; /* Slightly different lighter green for detail emphasis */
    margin-top: 30px;
}

/* Wedding Schedule - Horizontal Timeline */
#wedding-schedule {
    background-color: #f8f5ee; /* Creme background */
}

.horizontal-timeline {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1000px;
    margin: 30px auto;
    overflow-x: auto;
    padding: 0 20px;
    position: relative;
}

.horizontal-timeline::before {
    content: '';
    position: absolute;
    top: 45px; /* Moved up to avoid overlap */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #5a8f6a;
    z-index: 0;
}

.timeline-item {
    text-align: center;
    flex: 1;
    padding: 0 15px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    background-color: #f8f5ee;
    border: 3px solid #5a8f6a;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(90, 143, 106, 0.15);
}

.timeline-time {
    display: inline-block;
    background-color: #5a8f6a;
    color: white;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px;
}

.timeline-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    color: #2d4a35;
    margin-bottom: 5px;
}

.timeline-details {
    font-size: 0.9em;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.timeline-description {
    font-size: 1em;
    color: #333;
    margin-bottom: 20px;
}

/* Location Section */
#place {
    /* Background removed for better consistency with inner container */
}

.location-info {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.venue-details-block {
    display: block;
    text-align: left;
    width: fit-content;
    margin: 0 auto 20px;
}

.venue-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
}

.venue-icon {
    width: 18px;
    height: 18px;
    color: #5a8f6a;
    flex-shrink: 0;
    margin-top: 3px;
}

.map-placeholder {
    margin-bottom: 30px;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f8f5ee;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.map-placeholder iframe {
    max-width: 100%;
}

/* Dress Code, Gift, Travel Arrangements Sections */
#dress-code,
#gift,
#travel-arrangements {
    background-color: #f8f5ee;
}

#dress-code h2,
#gift h2,
#travel-arrangements h2 {
    font-family: 'Pinyon Script', cursive; /* Header font */
    font-size: 2.2em;
    color: #5a8f6a; /* Lighter Green */
    margin-bottom: 30px;
}

#dress-code p,
#travel-arrangements {
    font-family: 'Cormorant Garamond', serif;
}

#travel-arrangements h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.8em !important;
    font-weight: 700;
}

#travel-arrangements p,
.travel-option p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2em;
    font-weight: 500;
}

.travel-option h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.6em;
    font-weight: 700;
    color: #2d4a35;
}

#travel-arrangements p strong {
    color: #2d4a35;
}

/* Travel Arrangements 3-Column Layout */
.travel-options {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.travel-option {
    flex: 1;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(90, 143, 106, 0.2);
    position: relative;
    overflow: hidden;
}

.option-plane::before {
    content: '✈';
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 8em;
    opacity: 0.05;
    transform: rotate(45deg);
    color: #5a8f6a;
}

.option-car::before {
    content: '⚑';
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 8em;
    opacity: 0.05;
    transform: rotate(-10deg);
    color: #5a8f6a;
}

.travel-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(90, 143, 106, 0.2);
}

.travel-option h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700;
    color: #2d4a35;
    text-align: center;
}

.travel-option p {
    font-size: 1.1em !important;
    line-height: 1.6;
    color: #555;
    text-align: center;
    margin: 0;
}

/* Explore the Region Section */
#explore h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.8em !important;
    font-weight: 700;
}

#explore > p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2em;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.explore-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(129, 199, 132, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.explore-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(129, 199, 132, 0.2);
}

.explore-card img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.explore-card h3,
.explore-card p {
    padding: 0 30px;
}

.explore-card h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.6em !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700;
    color: #2e7d32;
    text-align: center;
}

.explore-card p {
    font-size: 1.05em;
    line-height: 1.6;
    color: #555;
    text-align: center;
    margin: 0;
    padding-bottom: 30px;
}

@media screen and (max-width: 480px) {
    .explore-grid {
        grid-template-columns: 1fr;
    }
}

/* RSVP Section Styles */
#rsvp {
    /* Removed direct background-color, padding, border-radius, box-shadow from here */
    text-align: center;
    padding: 44px 20px; /* Keep vertical padding for the section itself */
}

#rsvp h2 {
    font-family: 'Cormorant Garamond', serif; /* Use Cormorant Garamond for RSVP header */
    font-size: 2.2em;
    color: #5a8f6a; /* Lighter Green */
    margin-bottom: 30px;
}

#rsvp p {
    max-width: 800px;
    margin: 0 auto 30px auto; /* Add bottom margin */
    font-size: 1.1em;
    line-height: 1.7;
    color: #333;
}

.rsvp-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(45, 125, 50, 0.09);
    border: 1px solid rgba(90, 143, 106, 0.22);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.rsvp-container::after {
    content: '✉';
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 7em;
    opacity: 0.05;
    transform: rotate(10deg);
}

.rsvp-row-inline {
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.rsvp-row-inline label {
    margin-bottom: 0 !important;
    width: auto !important;
}

.rsvp-row-inline select {
    width: auto !important;
    padding: 10px 15px !important;
}

.transfer-option-container {
    margin-bottom: 25px;
    width: 100%;
    text-align: left;
}

.checkbox-group {
    display: flex;
    align-items: center; /* Vertically center checkbox and text */
    gap: 12px;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #5a8f6a;
    margin: 0; /* Remove default margins */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.checkbox-group label {
    font-size: 1em;
    color: #333;
    cursor: pointer;
    margin-bottom: 0 !important;
    line-height: 1.2;
}

.transfer-subtext {
    font-size: 0.8em !important; /* Smaller font */
    color: #888 !important;
    margin-top: 4px !important;
    margin-left: 32px; /* Align with the start of the label text */
    font-style: italic;
    text-align: left;
}
#rsvp-form,
#rsvp-form > div,
#rsvp-details > div,
#rsvp-form #additional-guests-info,
#song-form,
#song-form > div {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    align-items: flex-start; /* Align items to the start */
    text-align: left; /* Ensure text and elements are left-aligned */
    width: 100%; /* Ensure the div itself takes full width */
}

#rsvp-form label,
#song-form label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Changed from 700 to 400 to remove bold */
    color: #333;
    margin-bottom: 8px; /* Re-add bottom margin for vertical stacking */
    display: block; /* Ensure label takes its own line */
}

/* Specificity fix for radio group labels to ensure they stay inline in Chrome */
#rsvp-form .radio-group label {
    font-weight: 400;
    margin-bottom: 0;
    display: inline-block;
    width: auto;
    margin-right: 10px;
}

#rsvp-form input[type="text"],
#rsvp-form input[type="email"],
#rsvp-form select,
#rsvp-form textarea,
#song-form input[type="text"] {
    width: 100%;
    padding: 18px 25px;
    border: 1px solid #c5e1a5; /* Softer green border */
    border-radius: 12px;
    font-size: 1.05em;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    background-color: #fafdfb; /* Very light tint */
    transition: all 0.3s ease;
    outline: none;
}

#rsvp-form input:focus,
#rsvp-form select:focus,
#rsvp-form textarea:focus,
#song-form input:focus {
    border-color: #5a8f6a;
    box-shadow: 0 0 8px rgba(90, 143, 106, 0.4);
    background-color: #ffffff;
}

#rsvp-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Styling for the radio button group */
#rsvp-form .attending-options {
    flex-direction: row; /* Arrange "Attending:" label and radio group horizontally */
    align-items: center; /* Vertically align items in the middle */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Space between the "Attending:" label and the radio group */
    width: 100%;
    margin-bottom: 25px;
}

#rsvp-form .attending-options > label { /* Target the main "Attending" label */
    margin-bottom: 0; /* No bottom margin needed in row layout */
    margin-right: 10px; /* Space between "Attending:" and the radio group */
    flex-shrink: 0; /* Prevent the label from shrinking */
}

#rsvp-form .radio-group { /* New class to contain Yes/No radio buttons */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px; /* Space between radio buttons */
}

.radio-group input[type="radio"] {
    margin-right: 5px; /* Space between radio button and its label */
}

/* Button Styling */
#rsvp-form button[type="submit"],
#song-form button[type="submit"] {
    background-color: #5a8f6a; /* Lighter Green */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 15px; /* Match input border-radius */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Make button wide */
    margin-top: 10px;
}

#rsvp-form button[type="submit"]:hover,
#song-form button[type="submit"]:hover {
    background-color: #d4728a; /* Slightly darker green on hover */
}

#song-proposal .rsvp-container::after {
    content: '♪';
}

/* Your Role Section Styles (restored and adjusted) */
#your-role {
    background-color: #fdf0f3; /* Light green background, matching RSVP section's background */
    padding: 44px 20px; /* Add horizontal padding, matching RSVP section's padding */
    text-align: center;
}

.role-container {
    max-width: 600px; /* Keep contained width for inner content */
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff; /* White background for the inner container */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(90, 143, 106, 0.15); /* Stronger shadow */
    border: 1px solid rgba(90, 143, 106, 0.3); /* Subtle green border */
    position: relative;
    overflow: hidden;
}

.role-container::after {
    content: '❦';
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 7em;
    opacity: 0.05;
    transform: rotate(-15deg);
}

.role-badge {
    display: inline-block;
    padding: 10px 25px;
    background-color: #5a8f6a;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.4em;
    border-radius: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#your-role p {
    font-size: 1.2em;
    font-style: italic;
    color: #444;
}

/* Responsive adjustments for horizontal timeline */
@media screen and (max-width: 768px) {
    section {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    footer {
        padding-left: 40px;
        padding-right: 40px;
    }

    #how-we-met .timeline {
        padding-right: 40px;
        padding-left: 0;
        text-align: right;
    }

    #how-we-met .timeline::before {
        left: auto;
        right: 20px;
        margin-left: 0;
    }

    #how-we-met .timeline-event {
        width: 100%;
        left: 0 !important;
        padding-right: 30px !important;
        padding-left: 0 !important;
        text-align: right !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #how-we-met .timeline-event::after {
        right: -20px !important;
        left: auto !important;
        top: 25px;
        transform: translate(50%, -50%);
    }

    #how-we-met .timeline-date {
        text-align: right;
    }

    /* Flatten the desktop opposite-side photo trick on mobile — a single
       narrow column has no "opposite side" to cross to, so the photo goes
       back to normal in-flow stacking directly under its event's text,
       with real spacing (not the desktop version's 0, which relied on the
       photo being positioned away from the text entirely). */
    #how-we-met .timeline-event:has(.photo-accent-wrap) {
        margin-bottom: 20px;
    }

    #how-we-met .timeline-event .photo-accent-wrap {
        position: static;
        padding: 28px 0 12px;
    }

    .horizontal-timeline {
        flex-direction: column; /* Stack items vertically on small screens */
        align-items: flex-end; /* Align items to the right */
        padding-right: 40px; /* Space for the vertical line on the right */
        padding-left: 0;
    }
    .horizontal-timeline::before {
        top: 0;
        bottom: 0;
        right: 20px; /* Position the line to the right */
        left: auto;
        width: 2px;
        height: 100%;
        background-color: #5a8f6a;
        display: block !important;
    }
    .timeline-item {
        padding: 20px 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-end; /* Align contents to the right */
        text-align: right;
    }
    .timeline-item::after {
        top: 35px; /* Align with time badge */
        right: -20px; /* Position dot on the right line */
        left: auto;
        transform: translate(50%, -50%);
        margin: 0;
    }
    .timeline-time {
        margin-bottom: 10px;
        margin-right: 0;
        border-radius: 10px; /* More of a pill shape on mobile */
        padding: 5px 15px;
    }
    .timeline-description {
        text-align: right;
    }

    .hero-names {
        font-size: 3.2em !important;
    }

    .hero-date {
        font-size: 1.2em !important;
        letter-spacing: 3px !important;
    }

    .travel-options {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .travel-option {
        width: 90%;
        max-width: 400px;
    }
}

@media screen and (max-width: 480px) {
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .rsvp-container, .role-container, .accommodation-container, .gift-container, .questions-container {
        padding: 20px;
    }
}

/* Animation Styles */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gift and Questions Section Styles */
#gift {
    background-color: #f8f5ee;
    padding: 44px 20px;
}

#questions {
    /* Background removed to blend with page */
    padding: 44px 20px;
}

#questions h2 {
    font-family: 'Pinyon Script', cursive !important;
    font-size: 3.5em !important;
    margin-bottom: 30px;
}

.dress-code-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(90, 143, 106, 0.2);
    text-align: left;
}

.accommodation-container,
.questions-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(90, 143, 106, 0.2);
}

.gift-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 40px;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%);
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(255, 178, 193, 0.15);
    border: 1px solid rgba(255, 178, 193, 0.3);
    position: relative;
    overflow: hidden;
}


#gift h2 {
    color: #ffb2c1 !important;
    font-size: 2.8em !important;
    margin-bottom: 25px;
}

#gift p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
}

/* RSVP thank-you state */
@keyframes rsvpThankYouIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rsvp-thank-you-visible {
    animation: rsvpThankYouIn 0.5s ease forwards;
}

.rsvp-thank-you-icon {
    font-size: 3em;
    color: #5a8f6a;
    line-height: 1;
    margin-bottom: 12px;
}

#rsvp-thank-you h3 {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.2em;
    color: #2d4a35;
    margin: 0 0 12px;
}

#rsvp-thank-you p {
    font-family: 'Montserrat', sans-serif;
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

/* Song thank-you state */
#song-thank-you h3 {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.2em;
    color: #2d4a35;
    margin: 0 0 12px;
}

#song-thank-you p {
    font-family: 'Montserrat', sans-serif;
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

/* IBAN reveal */
.iban-reveal {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iban-box {
    margin-top: 12px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px dashed #ffb2c1;
    border-radius: 10px;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #333;
    letter-spacing: 1px;
}

#accommodation {
    /* Background removed to blend with page */
}

.questions-container {
    background-color: #f8f5ee; /* Alternating background for the box */
}

.contact-cards {
    display: flex;
    justify-content: center;
    gap: 15px; /* Slightly reduced gap to ensure fit */
    margin-top: 30px;
    flex-wrap: wrap;
}

.contact-card {
    background: white;
    padding: 20px; /* Slightly reduced padding */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(90, 143, 106, 0.3);
    flex: 1 1 200px; /* Reduced to 200px base to fit 3 in 700px */
    max-width: 300px; /* Prevent it from becoming too wide */
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.contact-card:hover {
    transform: translateY(-5px);
}

.contact-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2d4a35;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.8em !important;
    font-weight: 700;
}

.contact-card p {
    margin: 8px 0;
    font-size: 0.95em;
}

.contact-card a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-card a:hover {
    color: #5a8f6a;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 44px 20px;
    margin-top: 0;
    background-color: #1a3d1c;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ─── Hero overlay — dark scrim so text is legible without harsh text-shadows ─── */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 18, 8, 0.55) 0%,
        rgba(8, 18, 8, 0.40) 55%,
        rgba(8, 18, 8, 0.10) 80%,
        rgba(248, 245, 238, 1) 100%
    );
    z-index: 3;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3em;
    animation: indicatorBounce 2.6s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

@keyframes indicatorBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50% { transform: translateX(-50%) translateY(10px); opacity: 0.9; }
}

/* Botanical ornament sprigs */
.ornament-sprig {
    flex-shrink: 0;
    display: block;
}

/* Ornaments between sections need more breathing room above, less below */
main > .ornament {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

/* Reduce top padding on sections that follow a between-section ornament */
#place {
    padding-top: 24px !important;
}

/* Invitation card — printed-invite feel */
#invitation .invitation-card {
    max-width: 600px;
    margin: 10px auto 0;
    padding: 52px 60px;
    background: #ffffff;
    border: 1px solid rgba(90, 143, 106, 0.28);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.055);
    text-align: center;
}

#invitation .invitation-card::before,
#invitation .invitation-card::after {
    content: '✦';
    position: absolute;
    font-size: 0.75em;
    color: #dfc9a0;
    line-height: 1;
}

#invitation .invitation-card::before { top: 16px; left: 16px; }
#invitation .invitation-card::after  { bottom: 16px; right: 16px; }

#invitation .invitation-card p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.18em;
    font-style: italic;
    line-height: 1.9;
    color: #444;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

#invitation .invitation-card .guest-greeting {
    font-size: 2.1em !important;
    margin-bottom: 28px !important;
}

#invitation .invitation-card .sign-off {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.2em;
    color: #2d4a35;
    margin-top: 20px;
    margin-bottom: 0;
    font-style: normal;
    display: block;
}

/* Map: cleaner border */
.map-placeholder {
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.map-placeholder iframe {
    max-width: 100%;
    display: block;
}

/* RSVP: remove old emoji watermark since bg is now white */
.rsvp-container::after { content: none; }

/* Questions container — match overall card language */
.accommodation-container,
.questions-container {
    background-color: #ffffff;
}

/* ─── Slot-based guest list ─── */
.guest-slots-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a8f6a;
    margin: 0 0 12px;
}

.guest-slot-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.guest-slot-row:last-child {
    border-bottom: none;
}

.guest-slot-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2e7d32;
}

.guest-slot-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: #2c2c2c;
    cursor: pointer;
    user-select: none;
}

.guest-slot-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #bbb;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: #2c2c2c;
    padding: 2px 0 4px;
    outline: none;
    transition: border-color 0.2s;
}

.guest-slot-input:focus {
    border-bottom-color: #5a8f6a;
}

@media screen and (max-width: 768px) {
    #invitation .invitation-card {
        padding: 36px 28px;
    }
}

/* ─── Bold color redesign — section rhythm & rose accents ─── */

/* Alternating section backgrounds — gradient wash-in/out for smooth transitions */
#invitation,
#your-role,
#rsvp {
    background: linear-gradient(to bottom,
        #f8f5ee 0px,
        #fdf0f3 120px,
        #fdf0f3 calc(100% - 120px),
        #f8f5ee 100%
    );
}

#wedding-schedule,
#travel-arrangements,
#accommodation {
    background: linear-gradient(to bottom,
        #f8f5ee 0px,
        #f0f5f2 120px,
        #f0f5f2 calc(100% - 120px),
        #f8f5ee 100%
    );
}

/* Rose headings for romantic sections */
#invitation h2,
#rsvp h2 {
    color: #d4728a !important;
}

#invitation h2::after,
#rsvp h2::after {
    background: linear-gradient(to right, transparent, #d4728a, transparent) !important;
}

/* Rose guest greeting */
.guest-greeting {
    color: #d4728a !important;
}

/* RSVP + song buttons — rose gradient */
#rsvp-form button[type="submit"],
#song-form button[type="submit"] {
    background: linear-gradient(135deg, #c4637a 0%, #e8829a 100%);
    border-radius: 12px;
}

#rsvp-form button[type="submit"]:hover,
#song-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #b3526a 0%, #d4728a 100%);
}

/* RSVP thank-you icon — rose */
.rsvp-thank-you-icon {
    color: #d4728a !important;
}

/* Timeline story card border — warm gold */
.timeline-content {
    border-left-color: #c9a96e;
}

/* Timeline dots — warm gold */
.timeline-event::after {
    border-color: #c9a96e !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18) !important;
}

/* Invitation card corner ornaments — gold */
#invitation .invitation-card::before,
#invitation .invitation-card::after {
    color: #c9a96e;
}

/* Invitation card border — warm gold tint */
#invitation .invitation-card {
    border-color: rgba(201, 169, 110, 0.3);
}

/* Role badge — deeper sage */
.role-badge {
    background-color: #4a7c59;
}

/* Role section card — blush tones */
.role-container {
    border-color: rgba(212, 114, 138, 0.2);
    box-shadow: 0 10px 30px rgba(212, 114, 138, 0.08);
}

/* Footer — deeper, richer dark */
footer {
    background-color: #1e2e22;
}