/*! Bloomfield Ren Faire version 0.0.9 - Sep 2026 */

/* Variables */
:root{
    --color-primary: #f2e394; /* Tan/Parchment */
    --color-secondary: #588c7e; /* Green */
    --color-accent: #d96459; /* Red/Maroon? */
    --site-bg: black; /* Black */
}

.brf-color-primary {
    background-color: var(--color-primary);
}

.brf-color-secondary {
    background-color: var(--color-secondary);
}

.brf-color-accent {
    background-color: var(--color-accent);
}

.brf-site-bg {
    background-color: var(--site-bg);
}

.brf-cta {
    border: 2rem solid transparent; /* Required for border-image */
    border-image: url(../images/cta-border.webp) 31 stretch;
    padding: 1rem;
}

/* Fonts */

/* Define and link to our fonts */
@font-face {
    font-family: "Cloister Black";
    src: url("../fonts/CloisterBlack.ttf") format("truetype");
}

@font-face {
    font-family: "Magik";
    src: url("../fonts/Magik.ttf") format("truetype");
}

/* Create brf font classes */
.brf-font-cloister {
    font-family: "Cloister Black", "Times New Roman", serif;
}

.brf-font-magik {
    font-family: "Magik", "Times New Roman", serif;
}

body {
    background-color: var(--site-bg);
    margin-top: 38px;
    margin-bottom: 22px;
}

/* I know w3 css has w3-margin-bottom, but 16px just isn't enough for me */
section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.to-top {
    background-color: var(--color-secondary);
    position: fixed;
    right: 1.25rem;
    bottom: 3.5rem;
    z-index: 2;
    opacity: 0.75;
    border-radius: 2rem;
    border: 0.1rem solid var(--color-accent);
    display: inline-block;
    padding: 0.5rem;
    vertical-align: middle;
}

.brf-center {
    margin: 0 auto;
}

/* Icons */
/* fill: currentColor makes the icon inherit the CSS `color` property, same as an icon font would with `color`, but with no font build step. */
.icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

.brf-icon-black {
    color: black;
}

.brf-icon-white {
    color: white;
}

.brf-icon-facebook-square {
    color: #1877F2; /* Official color */
}

.brf-icon-instagram-square {
    color: #E1306C;  /* This is only one gradient color for now */
}

.brf-icon-sir-flower-pot {
    margin: 0 auto;
    width: 10rem;
}

/* Special classes to ensure icon reminds highly visible */
.brf-bg-white {
    background-color: white;
}

.brf-bg-black {
    background-color: black;
}

/* Countdown */
.countdown {
    gap: 1.5rem;
    justify-content: center;
}

.value {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.debug {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #666;
    display: none; /* Hide this, display: inline to show for debugging help */
}

.finished {
    font-size: 1.5rem;
    color: #4ade80;
}

.brf-flex-center {
    justify-content: center;
}

.brf-cta a {
    text-decoration: none;
}

/* this class is also used by javascript so use caution when renaming */
.brf-slideshow {
    max-height: 680px;
    margin: 0 auto;
}

/* Pages */

/* FAQ */
.brf-q-a {
    margin-bottom: 1.5rem;
    padding: 0.5rem 0 0.5rem 0;
}

.brf-q-a p {
    margin: 0 0.5rem 0 0.5rem;
}

/* Media Queries */

/* Mobile */
@media (max-width:600px){
    .brf-slideshow {
        max-height: 400px;
    }
}