@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #111212;
    --textDark: rgba(17, 18, 18, 1);
    --textMedium: rgba(17, 18, 18, 0.7);
    --borderMedium: rgba(17, 18, 18, 0.2); 
    --borderLight: rgba(17, 18, 18, 0.075);
    --accent: #3f8c5f;
    --accentDarker: #215e45;
    --light: rgba(17, 18, 18, 0.035);
    --colorDark: #111212;
    --darkGreen: #215e45;
    --lightGreen: #3f8c5f;
    --colorTan: #f2ecda;
    --colorYellow: #f2d855;
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map:not(section)::after, .black_2_textDark {filter: grayscale(100%);}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(0deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/

/* SITE WIDE */

.innerbody{
    background: var(--colorTan);
}

/* Buttons */

.button:not(.icon){
    border-radius: 3rem;
}

/* Title Block */

section.title {
    position: relative;
    min-height: 40rem;
}

section.title::after {
  content: '';
  position: absolute;
  inset: 8rem clamp(1rem, 4vw, 3rem) 1rem clamp(1rem, 4vw, 3rem);
  background-color: var(--accentDarker);
  border-radius: 2rem;
  z-index: 0;
}

section.title .container.small{
    z-index: 1;
    position: absolute;
    color: var(--colorTan) !important;
    text-align: start;
    margin: 2.5rem;
    top: 8rem;
    max-width: 35rem;
}

section.title .container.small :is(h1, h2, h3, h4){
    color: var(--colorTan);
    font-family: var(--fontTitles);

}


/* Column Text */

.columnText{
    container-type: inline-size;
    padding-bottom: 0;
}

.columnText .container{
    max-width: 100%;
}

.columnText .box{
    background-color: transparent;
    border: none;
}

.columnText .box img{
    max-width: 75%;
    border-radius: 2rem;
}

.columnText .left{
    justify-content: start;
}

.columnText .right{
    justify-content: center;
}

.columnText .column :is(h1, h2, h3, h4):nth-child(1){
    padding-top: 0;
}

.columnText .twocols{
    grid-template-columns: 1fr 2fr;
}

@container (width < 50rem) {
    .columnText .twocols{
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .columnText img{
        display: none;
    }
}

/* Posts */

section.posts .container{
    container-type: inline-size;
    max-width: 100%;
}

section.posts .postTitle{
    padding-bottom: 0;
    padding-top: 0;
}

section.posts .contentitems{
    grid-template-columns: 1fr 1fr 1fr;
}

@container (width < 50rem) {
    section.posts .contentitems{
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

}


/* Box override */

.box{
    border-radius: 2rem;
    border: none;
    background-color: transparent;
}

/* CTA */

.cta .container{
    max-width: 100%;
}

.cta .box{
    background-color: var(--accentDarker);
}

.cta .text > div > *:not(.button){
    color: var(--colorTan);
}

/* Bracket Blocks

.bracketBlocks ul.blocks li.hasimage div.img{
    width: 100%;
    border-radius: 0rem;;
}

ul.blocks li.hasimage div.img img{
    object-fit: none;
}

ul.blocks li.hasimage a::before{
    background: transparent;
}

ul.blocks a[href]:hover .img img {transform: scale(0.75);}

ul.blocks li.hasimage:hover{
    border: 0px;
}

ul.blocks li:has(a[href]):hover {border: 0px;}

ul.blocks li a::after {
    content: "";
    width: 40%;
    background: var(--colorYellow);
    height: 0.25rem;
    position: absolute;
    left: 30%;
    bottom: 42.5%;
    transform: scaleX(0) translateY(40%);
    transition: transform 0.2s ease-in-out;
}

ul.blocks li a:hover::after,
ul.blocks li.selected a::after {transform: scaleX(1) translateY(50%);}

ul.blocks li.hasimage h3{
    color: var(--colorDark)
}

section.title {
   background-color: #215e45;
   border-radius: 20px;
   margin: 25px;
}

section.title h1{
    position: relative;
}

section.title h1::before{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 150%;
    height: 150%;
    position: absolute;
    z-index: 10;
    background-image: url('../uploads/branding/left_brace.svg'), url('../uploads/branding/right_brace.svg');
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
}

body.mobilemenu section.title h1::before {
    display: none;
}

section.title .container h4{
    padding-top: 4rem;
    text-align: justify;
} */