/* Import Google Fonts */
/* EB Garamond for main text, Times New Roman as fallback for italic names */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {
    /* Light Mode Colors */
    --light-bg: #1C3137;
    --light-fg: #CFB53B;

    /* Dark Mode Colors */
    --dark-bg: #1C3137;
    --dark-fg: #CFB53B;
}

body {
    margin: 0;
    font-family: 'EB Garamond', serif; /* Base font family */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top, not center vertically */
    min-height: 100vh;
    transition: background-color 0.5s, color 0.5s; /* Smooth transition for mode change */
    line-height: 1.6; /* Adjust line height for readability */
    padding: 20px; /* Add some padding around the content */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Default colors (can be light mode or no preference) */
body {
    background-color: var(--light-bg);
    color: var(--light-fg);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg);
        color: var(--dark-fg);
    }
}

.text-container {
    max-width: 600px; /* Adjust as needed to control line length */
    width: 100%; /* Allow container to take full width on small screens */
    text-align: center; /* Center the text within the container */
    margin: 0 auto; /* Center the block horizontally */
    opacity: 0; /* Start invisible for fade-in */
    animation: fadeIn 2s ease-in-out forwards;
}

.text-container p,
.text-container div {
    margin: 0.5em 0; /* Space between lines/groups */
}

/* Font size and style adjustments based on the image */
.intro {
    font-size: 1.2rem; /* Slightly larger */
    margin-bottom: 1em; /* More space below "We" */
}

.address-details p {
    font-size: 0.9em; /* Smaller */
    line-height: 1.4;
    margin: 0.3em 0; /* Less space between address lines */
}

.parent-names {
    font-size: 1.3rem; /* Font size for parent names */
}

.invite-phrase {
    font-size: 1em; /* Standard size */
    margin: 1em 0; /* More space around invitation phrases */
}

.name-line {
    font-family: 'EB Garamond', serif; /* Use Garamond */
    font-style: italic; /* Apply italic style */
    font-size: 2em; /* Significantly larger size for names */
    font-weight: 500; /* Slightly bolder than normal */
    margin: 0.5em 0; /* Space around names */
}

.parent-details p {
    font-size: 0.8em; /* Smaller */
    line-height: 1.3;
    margin: 0.2em 0; /* Less space between parent details lines */
}

.event-details {
    margin-top: 1.5em; /* More space before event details */
}

.event-details p {
     font-size: 1em; /* Standard size */
     margin: 0.5em 0; /* Space between event lines */
}

.muhurtham {
     font-size: 1.25rem; /* Font size for muhurtham time */
     font-weight: bold;
}

.closing {
    font-size: 0.95em; /* Slightly smaller */
    margin-top: 1.5em; /* More space before "followed by lunch" */
}

.blessings {
    font-size: 0.95em; /* Slightly smaller */
    margin-top: 0.5em; /* Space before "Presents in blessings only" */
}


/* Fade-in animation */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.icon {
    display: inline-block;
    width: 1em; /* Adjust size relative to text */
    height: 1em;
    margin-left: 0.5em;
    vertical-align: middle; /* Keep this as a base */
    position: relative; /* Enable relative positioning */
    bottom: 0.3rem; /* Adjust this value to move the icon up/down */
    cursor: pointer;
    animation: pulse 2s infinite ease-in-out;
}

.icon svg {
    fill: currentColor; /* Use the current text color */
    display: block; /* Remove extra space below SVG */
}

.place-name {
    font-weight: bold;
}

/* Pulsing animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding: 15px;
        line-height: 1.5;
    }
    .text-container {
        padding: 0; /* Remove padding from container on small screens */
        max-width: 100%; /* Allow container to take full width */
    }

    /* Adjust relative font sizes for smaller screens */
    .intro {
        font-size: 1.1em;
    }
    .name-line {
        font-size: 1.7em;
    }
     .parent-names {
        font-size: 1.1rem;
    }
    .address-details p,
    .parent-details p {
        font-size: 0.85em;
    }
    .invite-phrase,
    .event-details p,
    .closing,
    .blessings {
        font-size: 0.95em;
    }
     .muhurtham {
        font-size: 1.1rem;
    }

    .icon {
        width: 0.9em;
        height: 0.9em;
        bottom: 0.3rem; /* Adjust for smaller screens if needed */
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
        font-size: 0.9em; /* Slightly smaller base font on very small screens */
    }
    /* Further adjust relative font sizes for very small screens */
    .name-line {
        font-size: 1.5em;
    }
     .parent-names {
        font-size: 1rem;
    }
    .address-details p,
    .parent-details p {
        font-size: 0.8em;
    }
     .invite-phrase,
    .event-details p,
    .closing,
    .blessings {
        font-size: 0.9em;
    }
     .muhurtham {
        font-size: 1rem;
    }
     .icon {
        bottom: 0.2rem; /* Further adjust for very small screens if needed */
    }
}

/* FAB styles for mobile view */
.fab-container {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
}

.fab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Good touch target size */
    height: 60px;
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s;
    background-color: var(--light-fg); /* Using body foreground as background */
}

.fab svg {
    width: 24px;
    height: 24px;
    fill: var(--light-bg); /* Using body background as icon color */
}

.map-fab {
    margin-bottom: 16px; /* Space between buttons */
}

.fab:active {
    transform: scale(0.95);
}

/* Dark mode colors for FABs */
@media (prefers-color-scheme: dark) {
    .fab {
        background-color: var(--dark-fg);
    }

    .fab svg {
        fill: var(--dark-bg);
    }
}

/* Show FABs and hide inline icons on mobile */
@media (max-width: 768px) {
    .fab-container {
        display: flex; /* Show FABs on mobile */
    }

    .event-details .icon {
        display: none; /* Hide inline icons */
    }
}