/*! Bloomfield Ren Faire version 0.1.5 - Nov 2026 */

/* Table of Contents
---------------------------
01 Variables
02 Basic HTML overrides
03 Fonts
04 Icons
05 Brf Custom Components
06 Countdown Clock
07 Pages
08 Brf Map
09 Brf Slideshow
10 Media Queries
--------------------------- */

/* 01 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);
}

/* 02 Basic HTML overrides */

body {
    background-color: var(--site-bg);
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

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

/* Menu z-index (so it stays "on top" on everything) */
.w3-top {
    z-index: 5;     /* This could change depending on the "stack" */
}

/* 03 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;
}

/* 04 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. */

.brf-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;
}

/* 05 Brf Custom Components */

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

/* ID Links (We need to ajust this, otherwise some of our text may show up underneath our menu) */
.brf-id-link-adjust {
    scroll-margin-top: 3rem; /* match the menu's height */
}

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

.brf-center {
    margin: 0 auto;
}

/* 06 Countdown Clock */

.brf-countdown {
    gap: 1.5rem;
    justify-content: center;
}

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

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

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

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

/* 07 Pages */

/* Home */
.brf-cta {
    width: 100%;
    height: 100%;
    border: 2rem solid transparent; /* Required for border-image */
    border-image: url(../images/cta-border.webp) 31 stretch;
    padding: 1rem;
    text-decoration: none; /* Remove link underline */
}

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

/* Events */
.brf-page-events .w3-flex {
    padding-top: 2rem;
}

/* 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;
}

/* Contact */
.brf-page-contact .brf-icon {
    width: 3rem;  /* default is 1.5rem */
    height: 3rem;  /* default is 1.5rem */
}

/* reset the to-top button back to the default size */
.brf-page-contact .brf-to-top .brf-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* 08 Brf map */

.brf-map-wrap {
    width: 100%;
    position: relative;
}

.brf-faire-map {
    display: block;
    width: 100%;
    height: auto;
}

.brf-zone {
    cursor: pointer;
    outline: none;
}

.brf-zone circle {
    stroke: transparent;
    stroke-width: 14;
    transition: stroke .2s;
}

.brf-zone path {
    stroke: transparent;
    stroke-width: 6;
    transition: stroke .2s;
}

.brf-zone:hover circle, .brf-zone:focus circle, #restroom:hover path, #restroom:focus path, .brf-zone.active {
    stroke: var(--color-accent);
}

#info {
    margin-top: .75rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 2px solid #2b2118;
    min-height: 3.5rem;
}

#info h2 {
    margin: 0 0 .25rem; font-size: 1.1rem;
}

#info p {
    margin: 0 0 .5rem;
}

#info .brf-hint {
    color: var(--color-secondary);
    text-align: center;
}

#card {
    position: absolute; z-index: 2; width: 260px;
    box-sizing: border-box; padding: .75rem 2.5rem .75rem 1rem;
    background: #fff; border: 2px solid #2b2118; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    outline: none;
}

#card h2 {
    margin: 0 0 .25rem; font-size: 1.1rem;
}

#card p {
    margin: 0 0 .4rem; line-height: 1.35;
}

#card .time {
    font-weight: bold;
}

#card a {
    color: #8a1f14;
}

#card .close {
    position: absolute; top: 0; right: 0; width: 44px; height: 44px;
    background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #2b2118;
}

/* 09 Brf Slideshow */

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

/* 10 Media Queries */

/* Mobile */
@media (max-width:600px){
    .brf-slideshow {
        max-height: 400px;
    }
    #card {
        position: fixed; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        width: auto;
        border-width: 2px 0 0; 
        border-radius: 0; 
        padding-bottom: 1rem;
    }
    h1 {
        font-size: 30px;
    }
    /* Home */
    .brf-page-home h2 {
        font-size: 24px;
    }
    .brf-cta {
        border: none;
    }
    /* Events */
    .brf-page-events h3 {
        font-size: 20px;
    }
    /* FAQ */
    .brf-page-faq p {
        font-size: 12px;
    }
}