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

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

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #B22234;
    --accentDarker: #B22234;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* 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::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* 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(160deg) contrast(13)!important;} */


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

/*------------------------*/
/* logo
/*------------------------*/

a.logo img {height: 5rem;}
a.logo img.inline {height: 4rem;}

/*------------------------*/
/* images
/*------------------------*/

img[alt="listen"] { max-width: 400px !important; }
img[alt="support"] { max-width: 400px !important; margin-left: auto; margin-right: auto; display: block; }
.image div img{
    border-radius: 1rem;
    overflow: hidden;
    margin-block: 2.25rem;
}

/*------------------------*/
/* grid
/*------------------------*/

ul.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-gap: 1.55rem 1.5rem; margin: 0; padding-bottom: 1rem;}
ul.grid li {list-style: none; position: relative;}
ul.grid .item h3 {padding-top: 1rem;}
ul.grid li.placeholder {display: block!important;}
ul.grid .summary .button {position: relative; bottom: 0.8rem;}

/*------------------------*/
/* markdown table
/*------------------------*/

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 4.5rem;
}

th, td { 
    padding: 0.2rem;
    text-align: left;
}


/*------------------------*/
/* brick posts
/*------------------------*/

section.posts #loadmoreposts {position: relative; bottom: 1rem; margin-top: 2rem;}