:root {
    /*===== Variables =====*/
    /*=== Colors ===*/
    --background-color1: #2c3e50;
    --background-color2: #f4f7f6;

    --button-color: #f1c40f;
    --text-color1: #333;
    --text-color2: #d8d8d8;

    /*=== Fonts ===*/
    --main-font: 'Segoe UI', Roboto, Helvetica, sans-serif;
}

/*===== All Page Bodies =====*/
body {
    margin: 0; /* Remove borders around screen */

    color: var(--text-color1);
    background: var(--background-color2);

    font-family: var(--main-font), serif; /* Try to use main font, otherwise use basic (serif) font */
}

body.dark-mode {
    --background-color2: #333;
    --text-color1: #d8d8d8;
    --text-color2: #333;
}

/*===== Header & Nav =====*/
.main-header {
    display: flex; /* Remove extra padding that comes with h1 */
    align-items: center; /* Center text in header */
    justify-content: space-between; /* Puts title on left and navigation on right */
    padding: 0.2rem 1rem; /* Size the header (Horizontal, Vertical) */

    background: var(--background-color1);
    color: #d8d8d8;

    font-size: 0.75rem;
}

.main-nav {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 1.5rem; /* Gap between words */
}

.main-nav a {
    color: #d8d8d8;

    text-decoration: none; /* Removes underline on links */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;

    transition: color 0.5s ease; /* Color transition */
}

.main-nav a:hover {
    color: var(--button-color);
}

/*=== Dark Mode Toggle ===*/
/* Base button styles to remove default button look */
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease; /* Smooth transition for rotating and scaling image */
}

.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

.icon-button:hover img {
    transform: rotate(45deg) scale(1.5); /* Rotate and grow icon on hover */
}

body.dark-mode .moon-icon {
    display: none;
}

body.dark-mode .sun-icon {
    display: block;
}

/*===== Main Page Body =====*/
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30rem; /* Height of the image */

    color: white;

    /* Creates strong gradient that drops off quickly (Makes header fade into image)*/
    --image-space: 80%; /* What percentage of the image is clear (no gradient applied) */
    background: linear-gradient(
            /* Fade from header to image */
            color-mix(in srgb, var(--background-color1), transparent 0%),
            color-mix(in srgb, var(--background-color1), transparent 35%) calc(var(--image-space)/5.5),

            rgba(44, 62, 80, 0) var(--image-space), /* Main image space (no gradient) */

            /* Fade from image to background */
            color-mix(in srgb, var(--background-color2), transparent 70%) calc(var(--image-space)/0.9),
            color-mix(in srgb, var(--background-color2), transparent 0%)
    ),
    url('images/church-interior.jpg') center/cover; /* Main page banner centered and scaled */

    text-align: center;
}

.main-buttons a {
    display: inline-block; /* Puts buttons in a row */
    padding: 0.7rem 1.2rem;
    border-radius: 0.5rem;
    margin: 0.25rem;

    box-shadow: 5px 5px 6px black;

    background: var(--button-color);
    color: #333;

    text-decoration: none;
    font-weight: bold;

    /* Smoothly transitions between normal and hover*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-buttons a:hover {
    transform: translateY(-4px); /* Move button up when hovering over it */

    box-shadow: 5px 10px 20px black; /* Grow the shadow to keep the hover illusion*/
}

/*===== Cards =====*/
.container { padding: 3rem 10%; }

/*=== Announcements ===*/
.announcement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
}

.info-card {
    padding: 1rem;
    border-radius: 0.8rem;
    border: 0.1rem solid var(--background-color1);
    border-left: 1.8rem solid var(--background-color1);

    background: var(--background-color2);
}

.category {
    color: var(--text-color1);

    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
}

.expired {
    display: none !important; /* Hides expired cards */
}

/*===== Calendar =====*/
.calendar-container {
    max-width: 8rem;
    margin: 2rem auto;
}

.calendar-header, .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-header {
    text-align: center;
    padding: 0.6rem 0;
    border-radius: 0.5rem 0.5rem 0 0;

    background: var(--background-color1);
    color: #d8d8d8;

    font-weight: bold;
}

.calendar-grid {
    --gap: 0.15rem; /* How thick the border lines are */

    gap: var(--gap); /* Creates the dividing lines */
    border: var(--gap) solid var(--background-color1);
    border-radius: 0 0 0.5rem 0.5rem; /* Round bottom corners */
    overflow: hidden; /* Prevent border clipping */

    background-color: var(--background-color1);
}

.day {
    display: flex;
    flex-direction: column;
    min-height: 8rem;
    padding: 0.3rem;

    background: var(--background-color2);
}

.date-number {
    margin-bottom: 0.3rem;

    font-weight: bold;
}

/*=== Calendar Events ===*/
.event-list {
    padding: 0;
    margin: 0;

    list-style: none;
}

.event {
    /* Variables for the tag color of each specific type of event */
    --event-color: #03a9f4;
    --event-color-urgent: #f44336;

    padding: 0.15rem 0.5rem; /* Height of event box */ /* Space from left side of event box */
    margin-bottom: 0.15rem; /* Space between events*/
    border-radius: 0.2rem; /* Curve the border */
    border-left: 0.3rem solid var(--event-color); /* Thickness and color of the event tag */

    background: var(--background-color1);
    color: #d8d8d8;

    font-size: 0.75rem;
}

.event.urgent {
    border-left-color: var(--event-color-urgent);
}

/*===== Map =====*/
.map-container {
    display: flex;
    align-items: center;
    margin: 1rem;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
    gap: 3rem; /* Space between map and text */
}

.map {
    flex: 1; /* Width of the map */
    min-width: 20rem;
    width: 100%;
    height: 30rem;

    border-radius: 1rem; /* Rounds the corners */
    box-shadow: 0.1rem 0.25rem 0.6rem black; /* Adds shadow for floating effect */
}

.address-text {
    flex: 1;

    color: var(--text-color1);

    line-height: 1.5rem;
}

/**/