/* css/style.css */

/* --- Basic Setup & Variables for Theming --- */
:root {
    --bg-color: #ffffff;
    --text-color: #222222;
    --primary-color: #0b8043; /* From your calendar embed */
    --header-bg: #f8f8f8;
    --link-color: #0056b3;
    --border-color: #dddddd;
}

[data-theme="dark"] {
    --bg-color: #222222;
    --text-color: #dddddd;
    --primary-color: #15a300;
    --header-bg: #1a1a1a;
    --link-color: #66a3ff;
    --border-color: #444444;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

main {
    padding: 20px;
}

a {
    color: var(--link-color);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 40px 0;
}

/* --- Header & Navigation --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    height: 60px; /* Set a fixed height for calc() on map page */
}

header .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
}

header .logo {
    height: 50px;
    margin-right: 15px;
}

header h1 {
    font-size: 1.5em;
    margin: 0;
}

header nav a {
    margin: 0 15px;
    text-decoration: none;
    font-weight: 500;
}

/* --- Content & Sections --- */
.content-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px;
}

.whatsapp-section, .whats-new-section, .calendar-embed-section {
    margin-top: 40px;
}

.whatsapp-details {
    display: flex;
    flex-direction: column; /* This is the key change: stacks items vertically */
    align-items: center;   /* This centers the items horizontally */
    gap: 15px;             /* Adds a nice space between the image and the link below it */
    margin-top: 20px;      /* Adds some space below the "Join the Community" text */
}

.qr-code {
    max-width: 300px;
}

.whatsapp-link {
    word-break: break-all;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9em;
}

/* --- Responsiveness for Mobile --- */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }

    header nav {
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    header nav a {
        margin: 0 5px;
    }

    .theme-switcher {
        margin-top: 15px;
    }

    /* Adjust map container height for taller mobile header */
    #map-container {
        height: calc(100vh - 150px); /* Adjust to your new header height */
    }
}

/* css/style.css */

/* --- Styles for Embedded Content on Schools Page --- */

/* Style for the Google My Map container */
.map-embed-container iframe {
    border: 1px solid var(--border-color);
    width: 100%;
    height: 480px; /* A good default height for a map */
    border-radius: 5px; /* Optional: adds slightly rounded corners */
}

/* Style for the Google Sheet container */
.sheet-embed-container {
    width: 100%;
    overflow-x: auto; /* IMPORTANT: This adds a horizontal scrollbar only if the sheet is wider than the screen */
    border: 1px solid var(--border-color);
    border-radius: 5px; /* Optional: adds slightly rounded corners */
    margin-top: 20px;
}

.sheet-embed-container iframe {
    width: 100%;
    height: 800px;  /* You can adjust this height to your liking */
    border: none;   /* The border is on the container, not the iframe itself */
    /* Optional: Set a minimum width to prevent content from getting too squished on mobile before scrolling starts */
    min-width: 600px; 
}

/* css/style.css */

/* --- Embedded Calendar on Home Page --- */
.calendar-embed-section iframe {
    width: 100%; /* This makes the iframe take the full width of its container */
    height: 600px; /* You can adjust this height to your preference */
    border: 1px solid var(--border-color); /* Use the theme's border color for consistency */
    border-radius: 5px; /* Optional: adds rounded corners to match other elements */
}