/*
Theme Name: pedal-power
Description: A base theme fo pedalpowercc.org
Version: 1.0.1
*/

/*include web fonts*/

@font-face {
    font-family: "CenturyGothic";
    src:
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Black.woff2")
            format("woff2"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Black.woff")
            format("woff"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Black.ttf")
            format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CenturyGothic";
    src:
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Bold.woff2")
            format("woff2"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Bold.woff")
            format("woff"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean-Bold.ttf")
            format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CenturyGothic";
    src:
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean.woff2")
            format("woff2"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean.woff")
            format("woff"),
        url("/wp-content/themes/pedal-power/font/Century-Gothic-Sans/CenturyGothicPaneuropean.ttf")
            format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --highlight-colour: rgb(162, 255, 59);
    --accent-colour: rgb(68, 107, 25);
    --text: rgb(0, 0, 0);
    --text-fade: rgba(0, 0, 0, 0.3);
    --highlight-contrast: rgb(0, 0, 0);
    --background: rgb(255, 255, 255);
    --background-fade: rgba(255, 255, 255, 0.5);
    --accent-contrast: rgb(255, 255, 255);
    --link: var(accent-colour);

    --s0: 0.5rem;
    --s1: 1rem;
    --s2: 1.75rem;
    --s3: 2.5rem;
}
@media (prefers-color-scheme: dark) {
    :root {
        --highlight-colour: rgb(162, 255, 59);
        --accent-colour: rgb(162, 255, 59);
        --text: rgb(255, 255, 255);
        --text-fade: rgba(255, 255, 255, 0.3);
        --highlight-contrast: rgb(0, 0, 0);
        --background: rgb(0, 0, 0);
        --background-fade: rgba(0, 0, 0, 0.5);
        --accent-contrast: rgb(0, 0, 0);
        --link: var(accent-colour);
    }
}

main,
header,
footer {
    font-family: "CenturyGothic";
    background-color: var(--background);
    color: var(--text);
}

header nav *,
footer * {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*typography*/
h1,
h2 {
    font-size: var(--s2);
}
h1 {
    font-family: "CenturyGothic";
    font-weight: 900;
}
h2,
h3 {
    font-family: "CenturyGothic";
    font-weight: bold;
}

a {
    color: var(--accent-colour);
    background-color: var(--background);
}
.wp-block-button__link {
    background-color: var(--highlight-colour);
    color: var(--highlight-contrast);
}
.wp-block-button__link:hover {
    background-color: var(--accent-colour);
    color: var(--accent-contrast);
}

.post-list .date {
    font-weight: normal;
}

/*layout*/
header {
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 1000; /* keep header above everything else on scroll */
    filter: drop-shadow(0px 10px 10px var(--text-fade));
}
.wpfc-calendar-wrapper {
    position: relative;
    isolation: isolate; /* traps the plugin's z-index:9999999999 inside here */
}
nav {
    display: flex;
    flex-direction: column;
    padding: var(--s1);
}
nav .links {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav .links a {
    font-size: var(--s2);
    font-family: "CenturyGothic";
    font-weight: 900;
    text-decoration: none;
    /*border-bottom: 1px solid black;*/
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 2.2rem;
}

/*when the viewport is less than 500pc wide */

@media (max-width: 615px) {
    nav .links a {
        font-size: var(--s1);
        line-height: 1.3rem;
    }
}

@media (max-width: 900px) {
    nav .links {
        justify-content: center;
    }
}

.funders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.funders {
    border-top: 1px solid var(--accent-colour);
}
.funders img {
    max-width: 200px;
    width: 100%;
    height: 100%;
    margin: 2rem;
}

footer {
    margin-top: var(--s2);
    position: relative;
    line-height: var(--s2);
}

footer .contact {
    position: absolute;
    bottom: 0px;
    padding: var(--s1);
    background-color: var(--background);
}

footer .contact a {
    text-decoration: none;
}

.banner {
    width: 100%;
    max-width: 100vw;
}

.banner img {
    width: 100%;
}

section.page-content,
section.news {
    max-width: 800px;
    margin: auto;
    padding: var(--s1);
}

section.post-list .post {
    display: grid;
}
section.post-list .post-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.post-summary img {
    display: block;
    max-width: 100%;

    width: auto;
    height: auto;
}

.centered {
    max-width: 800px;
    margin: auto;
    padding: 16px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background-color: rgba(0, 0, 0, 0.5);
}

.em-item.em-item-single.em-location.em-location-single ul {
    list-style: none;
    padding-left: 0;
}
.em-location-single li {
    margin-bottom: 1rem;
    line-height: 1.4rem;
}

.em-location-single li a {
    font-weight: bold;
}


/* event manager stuff */
.em-booking-message.em-booking-message-success{
  font-size: 3rem;
  font-weight: bold;
  border: 2px solid var(--highlight-colour);
  padding: 2rem;
}