@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(--accentDarker);
}
/* 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(--colorTan);
  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;
    max-width: 35rem;
    bottom: .5rem;
}

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

}


/* Features */

.features .container.small{
    text-align: start !important;
    margin: 2.5rem;
}

.features .container.small > *{
    color: var(--colorTan)
}

.features .container{
    container-type: inline-size;
    margin: 2.5rem;
    max-width: none;
}

.grid.features {
    grid-template-columns: 1fr 1fr 1fr;
}

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

.grid.features > * {
    text-align: start;
    background-color: var(--colorTan);
    border-radius: 2rem;
    padding: 3.5rem clamp(2.5rem, 5vw, 2.5rem);    
}

.grid.features > * > h4{
    font-family: var(--fontTitles);
    color: var(--colorTan);
    padding-top: 0;
    aspect-ratio: 1;
    width: fit-content;
    min-width: 2.5rem; /* ensures it's wide enough */
    border-radius: 50%;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.grid.features > * > h3{
    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;
    }
}

.column > *{
    color: var(--colorTan)
}

/* Posts */

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

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

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


/* Box override */

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

/* CTA */

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

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

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

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