/* @import "cffy-theme-2-q.css"; */

@import "browns-theme-3.css";

:root {
    color-scheme: light dark;

    /* PALLET OPTIONS */


--max-w: 100%;
--grid-unit:1rem;
--borderradius-base: 0.5rem;
}
/* End of :root sections */



/* Make the embedded google map dark fo rdark mode */
html[data-theme="dark"] .dark-map {
      filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}




@font-face {
    font-family: "Colwell";
    /* src: url('../fonts/COLWELL_.ttf') format('truetype');  */
    src: url('../fonts/COLWELL_.woff') format('woff'); 
    /* src: url("../fonts/Colwell-qxr.ttf") format("truetype");   */
    /* src: url("../fonts/colwell.regular.ttf") format("truetype");   */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} 

@font-face {
    font-family: "Colwell";
    src: url('../fonts/COLWELL_.woff') format('woff'); 
    font-weight: bold;
    font-style: normal;
    font-display: swap;
} 

.ff-colwell-n{
    font-family: 'Colwell', serif;
    color:var(--primary-a50);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: normal;
}
 
.ff-colwell-b{
    font-family: 'Colwell', serif;
    color:var(--primary-a50);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: bold;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 11, 2026 */
@font-face {
    font-family: 'lato';
    src: url('..fonts/lato-black-webfont.woff2') format('woff2'),
         url('..fonts/lato-black-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lato';
    src: url('..fonts/lato-bold-webfont.woff2') format('woff2'),
         url('..fonts/lato-bold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lato';
    src: url('..fonts/lato-light-webfont.woff2') format('woff2'),
         url('..fonts/lato-light-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lato';
    src: url('..fonts/lato-regular-webfont.woff2') format('woff2'),
         url('..fonts/lato-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lato';
    src: url('..fonts/lato-thin-webfont.woff2') format('woff2'),
         url('..fonts/lato-thin-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.ff-lato-r {
    font-family: 'lato', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    font-style: normal;
}



/* light/tark theme - see darkmode js */

    /* Hide both by default */
    .bi-sun-fill, .bi-moon-fill {
        font-size: 20px;
        color:var(--accent-a30);
    }

    /* Show sun if theme is light (or default) */
    html[data-theme="light"] .bi-moon-fill {
        color:var(--info-a0);
    }

    /* Show moon if theme is dark */
        html[data-theme="dark"] .bi-sun-fill {
        display: block;
        color:var(--info-a0);

    }

    @media (prefers-color-scheme: light) {
        html {
            --background-color:var(--surface-tonal-a50);
            --text-color:var(--danger-a0);
        }
    }

    @media (prefers-color-scheme: dark) {
        html {
            --background-color:var(--surface-tonal-a0);
            --text-color:var(--primary-a20);
        }
    }

    .mode-button {
        border-width:0; 
        background-color: #00000000;
        box-shadow:0;
        cursor: pointer;
    }

    [data-theme="light"] {
        --brow-co:var(--color1);
        --hero:var(--color3);
        --background:var(--surface-a50);
        --foreground:var(--primary-a50);
        --footer-border-top:var(--fbt);
        --theme-mode-color: #040568b2;
        --mode-font-size:1.25rem;
    }
    [data-theme="dark"] {
        --brow-co:var(--color1);
        --hero:var(--color3);
        --background:var(--color4);
        --foreground:var(--color5);
        --footer-border-top:#9fdaba;
        --theme-mode-color: #ffb300;
        --mode-font-size: 1.25rem;
    }


html {
    color-scheme: light dark;
}

body{
    color: var(--foreground);
    background-color: var(--background);
    height: 100%;
    max-width: var(--max-w);
    margin: 0;
}

/* ARE WE USING THIS? */
.mode-indicator {
    color:var(--theme-mode-color);
    font-size:var(--mode-font-size);
}
/* END OF DARK&LIGHT THEME */




h1{
    /* color: var(--hero); */
    color:var(--theme-mode-color);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
    max-width: 70ch;
}

/* HERO */
.hero-wrapper {
    content: '';
    inline-size: 100%;
}
.hero-wrapper > h1 {
    z-index: 999;
    margin-left: 3rem;
    /* margin-block: -3.5rem 1rem; */
    /* font-size: clamp(2rem, 6vm, 5rem); */
    /* font-size: clamp(2.25rem, -4.0rem + 12vw, 5rem); */
    /* font-size: clamp(2.25rem, -4rem + 12vw, 5rem); */
    /* XX font-size: clamp(45px, 7vw, 140px); */
    font-size: clamp(1rem, 1rem + 5vw, 5rem);
    /* font-size: 8rem; */
    /* color:var(--hero-txt); */
    color: hsl(8, 64%, 47%);
    font-family: 'Colwell', serif;
    font-weight: 500;
    /* font-family: "Sofia", sans-serif; */
    /* font-family: 'COLWELL_', serif; */
    /* klee-one-semibold  */
    /* font-family: "Klee One", cursive; */
    /* font-weight: 600; */
    font-style: normal;
}
.hero-image {
    z-index: -1;
    max-width:var(--max-w);
    height:auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    /* https://cssgradient.io/ */
    /* -webkit-mask-image: linear-gradient(to bottom, #00000067 80%, rgba(0, 0, 0, 0) 65%); */
    /* mask-image: linear-gradient(to bottom, #3a2727 99%, rgba(0, 0, 0, 1) 65%); */
    /* mask-image: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(171, 151, 24, 1) 2%, rgba(0, 0, 0, 0.333) 97%); */
    mask-image: linear-gradient(hsla(0, 0%, 0%, 0.973) 96%, transparent);
}

.klee-one-regular {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}

.hero-content {
    max-inline-size: min(80ch, 95%);
    padding-inline: 3rem;
    margin-inline: auto;
}
.hero-masked-element {
  mask: radial-gradient(ellipse 75% 45% at top, black 75%, transparent 76%);
  -webkit-mask: radial-gradient(ellipse 75% 45% at top, black 75%, transparent 76%);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.container {
   max-width: var(--max-w);
    
    
}
.container-fluid {
   max-width: var(--max-w);
    
}

/* Footer area - used by footer-2.njk */
.footer {
    border-top-color: var(--surface-a50);
    border-top-width: .5em;
    border-top-style:dotted;
    height: 60px;
    padding-top: 1em;
    padding-bottom: 1em;
}


/* https://clamp.font-size.app/ */
.title {
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(1rem, -0.1556rem + 4.9307vw, 3rem);
    /* color: var(--brow-co); */
    color: var(--cream);
    z-index: 999;
    
}

.paragraph {
    max-width: 60em;
    text-wrap: pretty;
    width: clamp(400px, 700px, 70%);
    font-size: 1.2em;
}


/* NAVIGATION BAR */

.custom-navbar {
    content:" ";
    z-index:999;
    /* display:grid; */
    background-color: var(--surface-a0); /* Sets custom background color */
    color:var(--primary-a0);
    border-bottom: 5px solid var(--surface-tonal-a30); /* Adds a bottom border */
    padding: 10px; /* Adds padding around the navbar */
    font-size: 18px; /* Sets font size */
    font-weight: bold; /* Sets font weight */
    
}
    
.custom-navbar:hover {
    background-color: var(--surface-tonal-a30); /* Changes background color on hover */
}

.nav-item {
    .active {
        text-decoration: underline;
        text-decoration-thickness: 5px;
    }
}
/* Change background for active/clicked items */
.dropdown-item.active, 
.dropdown-item:hover {
    /* Use your preferred color */
    background-color:var(--surface-a10);
    /* Ensure text remains readable */ 
    color:var(--primary-a50); 
}

/* EVENT BOX */

/* box-wrap, box-event, box-title, and box-par are connected*/
.box-wrap {
    max-width: 40rem;
    /* background-color: hsla(143, 77%, 76%, 0.813); */
    /* Semi-transparent white background */
    background-color:var(--surface-tonal-a50); 
    
    border: 1px solid var(--surface-tonal-a0);
    border-radius: 16px;
    /* padding-right: .5em; */
    margin-bottom: .5em;       
}
.box-event {
    padding: .5em;
    margin: .5em;
}
.box-title {
    font-size: 1.3em;
}
.box-par {
    font-size: 1.2em;
    overflow-wrap:normal;
}


article {
    max-width: 40em;
    font-size: 1em; 
}

/* on schedule page. This will be depricated */
.dance-card {
 display:grid;
 max-width: 60ch;
 border:var(--danger-a10);
 border-radius: 3px;
 border-width: 5px;
 background:var(--surface-a40);
 padding: 1rem 3rem 1rem 1rem;
 margin-bottom: 1rem;
 margin-right: 1rem;
}


/* REMOVE */
.dance-title-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5rem;
    font-weight: 500;
    background: #147d6000;
    color: #a32323;
    padding-left: .5rem;
}
/* REMOVE */
.dance-content {
    font-size: 1rem;
    background: #ffffff00;
}
/* REMOVE */
.dance-flyer {
    background: #00000000;
}


/* MISC */

/* remove */
.art-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}


/* https://aspectratiocalculator.com/16-9.html */
.youtube-wrapper {
    width: 400px;
    height: 225px;
}
/* https://codesignal.com/learn/courses/bootstrap-navbar-mastery/lessons/customizing-navbar-colors-and-styles */

.iframe-max-width {
    max-width:var(--max-w);
}

/* iframe breakout */
.map-breakout {
     scrollbar-gutter: auto;
    /* object-fit: cover; */
    /* margin:1em -100%;  */
    /* old browsers fallback */
    /* margin:1em calc(50% - 50vw); */
    margin-right: auto;
    /* background-color:rgba(255,0,255,0.5) */
}