/*

Config

*/
@font-face {
  font-family: "Quicksand";
  font-weight: 300 700;
  src: url("./fonts/Quicksand.ttf");
}
:root {
    color-scheme: light dark;
    --section-padding: 25px;
    --section-border: 1px solid light-dark(black, white);
    --section-gap: 30px;
    --title-font: "Quicksand", sans-serif;
    --body-font: "Quicksand", sans-serif;

    --gallery-roundness: 10px;
    --gallery-gap: 15px;

    --event-chip-colour: orange;
    --event-chip-text-colour: white;
    --event-passed-chip-colour: grey;
    --event-passed-chip-text-colour: white;
}


/* 

Typography

*/

* {
    box-sizing: border-box;
    font-family: var(--body-font);
}

/* Headings (something's wrong if you use more than 4 levels) */
h1,
h2,
h3,
h4 {
    font-family: var(--title-font);
}


/* Blue links */
a {
    text-decoration: underline;
    color: #2e4ecd;
}

a:hover {
    text-decoration-style: wavy;
}


/* Facebook links are facebook blue */
a[href^="https://facebook.com"] {
    color: #0865fe;
}

dl dt {
    font-weight: bold;
    font-family: var(--title-font);
}



/* 

Layout

*/

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.main-details {
    border: var(--section-border);
    padding: var(--section-padding);

}

header {
    text-align: center;
}

.service-time {
    margin-top: 50px;

    font-size: larger;
    font-weight: bold;
    font-family: var(--title-font);
    text-align: center;
}

.location,
.about-us {
    text-align: center;
}

.address {
    text-align: center;
    margin-bottom: 50px;
}

.pastor {
    text-align: center;
    font-weight: bold;
    font-family: var(--title-font);
}

.contact {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.contact :where(dd, dt) {
    margin: 0;
    padding: 0;
}
.contact > div {
    text-align: center;
}

.regular-events {
    padding: var(--section-padding);
    border: var(--section-border);
}

.event-special-section {
    max-width: 100%;
}


footer {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: var(--section-padding);
    border: var(--section-border);
}


/* 

Dynamic goodies

*/

/* Image gallery */
.gallery {
    height: 350px;
    display: flex;
    gap: var(--gallery-gap);

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.gallery * {
    border-radius: var(--gallery-roundness);
    scroll-snap-align: center;
    object-fit: cover;
    max-width: 80%;
}


/* Event this week chips */
.monthly-event-this-week-tag {
    display: none;

    font-weight: normal;
    font-family: var(--title-font);
    padding-inline: 6px;
    padding-block: 1px;
    border-radius: 15px;

    background-color: var(--event-chip-colour);
    color: var(--event-chip-text-colour);
}

.monthly-event-this-week-tag[data-show] {
    display: inline;
}

.monthly-event-this-week-tag.date-passed {
    background-color: var(--event-passed-chip-colour);
    color: var(--event-passed-chip-text-colour);
}

/* Feast banners */
.feast-special-section {
    display: none;
}

.feast-special-section.show {
    display: block;
}