/* Import font */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boldonse&display=swap');

/* Root */

:root {
        --colour-eminence-50: #f9f6fe;
        --colour-eminence-100: #f0eafd;
        --colour-eminence-200: #e5d9fb;
        --colour-eminence-300: #d0bbf7;
        --colour-eminence-400: #b38ff1;
        --colour-eminence-500: #9764e8;
        --colour-eminence-600: #7e43da;
        --colour-eminence-700: #6a31bf;
        --colour-eminence-800: #5b2d9c;
        --colour-eminence-900: #4e2782;
        --colour-eminence-950: #300f5c;

        --colour-woodsmoke-50: #f6f6f6;
        --colour-woodsmoke-100: #e7e7e7;
        --colour-woodsmoke-200: #d1d1d1;
        --colour-woodsmoke-300: #b0b0b0;
        --colour-woodsmoke-400: #888888;
        --colour-woodsmoke-500: #6d6d6d;
        --colour-woodsmoke-600: #5d5d5d;
        --colour-woodsmoke-700: #4f4f4f;
        --colour-woodsmoke-800: #454545;
        --colour-woodsmoke-900: #3d3d3d;
        --colour-woodsmoke-950: #171717;

        --colour-eastern-blue-50: #effcfc;
        --colour-eastern-blue-100: #d5f5f8;
        --colour-eastern-blue-200: #b1eaf0;
        --colour-eastern-blue-300: #7bd9e5;
        --colour-eastern-blue-400: #3ebed2;
        --colour-eastern-blue-500: #22a0b6;
        --colour-eastern-blue-600: #1f839b;
        --colour-eastern-blue-700: #206a7e;
        --colour-eastern-blue-800: #225768;
        --colour-eastern-blue-900: #214958;
        --colour-eastern-blue-950: #102f3c;
}

/* Reset */

*,
*::before,
*::after {
        margin-block: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: none;
        background: transparent;
}

/* Base */

body {
        display: block;
        background: var(--light, var(--colour-woodsmoke-50));
        color: var(--colour-woodsmoke-950);
        font-family: "Manrope", sans-serif;
        font-size: 1em;
        line-height: 1.5;
        transition: background-color 0.3s, color 0.3s;
}

/* Text */

h1 {
        font-size: 2rem;
        font-weight: 700;
        font-family: "Boldonse", sans-serif;
        color: var(--colour-eminence-700);
        text-transform: uppercase;
        margin-block-end: 0.1rem;
}

h1 span {
        color: var(--colour-eminence-900);
}

h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--colour-eastern-blue-600);
}

h3 {
        font-size: 1rem;
        font-weight: 500;
}

h4, p {
        font-size: 1rem;
        font-weight: 400;
}

p {
        margin-block-start: 0.2rem;
        margin-block-end: 0.5rem;
}

span.tagline {
        color: var(--colour-woodsmoke-500);
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        margin-bottom: 2rem;
}

a {
        display: inline-block;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 0.2em;
        color: var(--dark, var(--colour-eminence-900));
}

a:hover {
        text-decoration: none;
}

*:focus {
        border: 2px solid var(--x-dark, var(--colour-eminence-950));
        ;
        text-decoration: none;
}

/* Navigation */

.navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        gap: 0.5rem;
        padding: 1rem;
        height: 6rem;
        justify-content: center;
        align-items: center;
        z-index: 3;
        background: linear-gradient(to top,
                        var(--light, var(--colour-woodsmoke-50)) 0%,
                        rgba(0, 0, 0, 0) 100%);
        transition: background-color 0.2s, color 0.2s;
}

.navigation ul {
        display: flex;
        list-style: none;
        height: 100%;
}

.navigation ul.navigation-arrows {
        gap: 2px;
}

.navigation ul li {
        display: flex;
        justify-content: center;
        align-items: center;
}

.navigation ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1 / 1;
        position: relative;
        background-color: var(--mid, var(--colour-eminence-700));
        text-decoration: none;
        transition: background-color 0.3s;
        height: 3rem;
}

.navigation ul.navigation-arrows li a {
        height: 4rem;
}

.navigation ul.navigation-arrows li:first-child a {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
}

.navigation ul.navigation-arrows li:last-child a {
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
}

.navigation ul.navigation-left li a,
.navigation ul.navigation-right li a {
        border-radius: 50%;
}

.navigation ul li a.navigation-info,
.navigation ul li a.navigation-listing {
        background-color: var(--dark, var(--colour-eminence-500));
}

.navigation ul li a::before {
        content: "";
        display: block;
        width: 40%;
        height: 40%;
        background-color: var(--light, var(--colour-woodsmoke-100));
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
}

.navigation-info a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z'/><path d='m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z'/><path d='m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z'/></svg>");
}

.navigation-listing a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/></svg>");
}

.navigation-up a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z' clip-rule='evenodd'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z' clip-rule='evenodd'/></svg>");
}

.navigation-down a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z' clip-rule='evenodd'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z' clip-rule='evenodd'/></svg>");
        transform: rotate(180deg);
}

/* Flyer pane */

.pane-wrapper {
        width: 100%;
        height: 100dvh;
        display: flex;
        justify-content: center;
}

.content-wrapper {
        height: calc(100% - 6rem);
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
}

.flyer-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

}

.flyer-wrapper>img {
        object-fit: contain;
        max-width: 100%;
        flex-shrink: 1;
        display: block;
        border-radius: 0.3rem;
        margin-bottom: 0.5rem;
        max-height: calc(100% - 6rem);
}

.flyer-info {
        color: var(--text);
        flex-shrink: 0;
}

.flyer-info ul {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
}

.flyer-info ul li {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0;
        position: relative;
}

.flyer-info ul li:not(:last-child) {
        border-bottom: 1px dotted var(--mid);
}

.flyer-info ul li::before {
        content: "";
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        background-color: var(--dark, var(--colour-woodsmoke-900));
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
}

.flyer-info ul li.flyer-info-location::before {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.082c1.101-1.362 2.291-3.342 2.291-5.597A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.591 15.591 0 0 0 2.046 2.082 8.916 8.916 0 0 0 .189.153l.012.01ZM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd"/></svg>');
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.082c1.101-1.362 2.291-3.342 2.291-5.597A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.591 15.591 0 0 0 2.046 2.082 8.916 8.916 0 0 0 .189.153l.012.01ZM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd"/></svg>');
}

.flyer-info ul li.flyer-info-date::before {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z" clip-rule="evenodd"/></svg>');
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z" clip-rule="evenodd"/></svg>');
}

.flyer-info ul li.flyer-info-link::before {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/></svg>');
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/></svg>');
}

/* Info pane */

.info-pane {
        max-width: 500px;
        height: 100%;
        overflow: hidden;
        color: var(--colour-woodsmoke-950);
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.info-pane ul {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        width: 100%;
        margin-top: auto;
}

.info-pane ul li {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0;
        position: relative;
        color: var(--colour-woodsmoke-500);
        font-size: 0.9rem;
        letter-spacing: 0.5px;
}

.info-pane ul li a {
        color: var(--colour-eminence-600);
}

.info-pane ul li:not(:last-child) {
        border-bottom: 1px dotted var(--colour-woodsmoke-200);
        padding-bottom: 0.4rem;
}

.info-pane ul li::before {
        content: "";
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        background-color: var(--colour-eminence-700);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
}

.info-pane ul li.info-pane-arrows::before {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2.24 6.8a.75.75 0 0 0 1.06-.04l1.95-2.1v8.59a.75.75 0 0 0 1.5 0V4.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L2.2 5.74a.75.75 0 0 0 .04 1.06Zm8 6.4a.75.75 0 0 0-.04 1.06l3.25 3.5a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02l-1.95 2.1V6.75a.75.75 0 0 0-1.5 0v8.59l-1.95-2.1a.75.75 0 0 0-1.06-.04Z" clip-rule="evenodd"/></svg>');
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2.24 6.8a.75.75 0 0 0 1.06-.04l1.95-2.1v8.59a.75.75 0 0 0 1.5 0V4.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L2.2 5.74a.75.75 0 0 0 .04 1.06Zm8 6.4a.75.75 0 0 0-.04 1.06l3.25 3.5a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02l-1.95 2.1V6.75a.75.75 0 0 0-1.5 0v8.59l-1.95-2.1a.75.75 0 0 0-1.06-.04Z" clip-rule="evenodd"/></svg>');
}


.info-pane ul li.info-pane-add::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/></svg>");
}

.info-pane ul li.info-pane-link::before {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/></svg>');
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/></svg>');
}