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

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

:root {
    --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: #00a1fe;  /* set to DevEx Institute colours */
    --textAccent: #00a1fe;  /* set to DevEx Institute colours */
    --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:not(section)::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: invert(51%) sepia(45%) saturate(5166%) hue-rotate(177deg) brightness(102%) contrast(106%)!important;}


/*------------------------ CSS overrides below ------------------------*/
section.post .container {
    max-width: 75%;
}

section.about {
    padding-top: 6rem !important;
}

section.team {
    padding-top: 6rem !important;
}

section.contact {
    padding-top: 6rem !important;
}

/*---------------------------*/
/* brick purpose
/* added 4-Jun-2024 by Jeremy
/*---------------------------*/

section.purpose .container.small {margin-bottom: 4rem; text-align: center;}
section.purpose + section.title {padding-top: 0;}
ul.purpose {gap: 3rem 3rem; padding-bottom: 1rem;}
ul.purpose li {text-align: center;}
ul.purpose li img {aspect-ratio: 1.5; object-fit: contain; width: 100%;}
ul.purpose li p.image {margin-bottom: 0.85rem;}
ul.purpose li p.image + h3 {padding-top: 0;}
ul.purpose li.has_icon p.image {display: inline-block; padding: 1.5rem; border-radius: 100%; border: 0.1rem solid var(--accent);}
ul.purpose li.has_icon p.image img {aspect-ratio: 1; object-fit: contain; width: 3rem; margin: 0 auto; border-radius: 0;}

/*---------------------------*/
/* post changes
/*---------------------------*/

section.post .container .meta {justify-content: center; margin-bottom: 1rem; margin-top: -0.75rem;}
section.post p:first-child, .container.post p:first-child a {font-size: 1rem !important; line-height: 1.7 !important; color: var(--textMedium) !important;} /* override making the first paragraph bigger */
section.post a {color: var(--textAccent);}
section.posts .grid .item h3 a {color: var(--textDark) !important; text-decoration: none !important;}

/*------------------------------------------------------*/
/* quotes via https://codepen.io/MarkBoots/pen/gOvObMp
/*------------------------------------------------------*/

/* blockquote card colors */
blockquote.q-card-color-1{
    --accent-color: rgb(32 32 54);
    /* --bg-color: rgb(30 145 254); */
    /* --dot-color: rgb(255 255 255 / .35); */
    --text-color: rgb(243 243 243);
    --text-color-author: rgb(243 243 243);
    }

/* blockquote card setup*/
blockquote.q-card{
    --padding: 1rem;
    width: 75%;
    padding: var(--padding);
    color: var(--text-color, black);
    font-weight: 600;
    background-color: var(--accent, white);
    display: grid;
    gap: 1rem;
    /* background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% ); */
    /* background-size: 0.5rem 0.5rem; */
    border-radius: 0.25rem;
    box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
    max-width: 5rem;
    margin-inline: auto;
  }

blockquote.q-card::before{
--qHeight: 4rem;
content: "";
margin-left: calc(var(--padding) * -1);
margin-top: calc(var(--padding) * -1);
height: var(--qHeight);
width: calc(var(--qHeight) * 1.1);
background-image:
    radial-gradient(
    circle at bottom right,
    transparent calc(var(--qHeight) / 4 - 1px),
    var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), 
    transparent calc(var(--qHeight) / 2 + 1px)
    ),
    linear-gradient(var(--accent-color, black), var(--accent-color, black));
background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
background-position: top left, bottom left;
background-repeat: space no-repeat
    }

blockquote.q-card > .author{
color: var(--text-color-author, white);
background-color: var(--accent-color, black);
justify-self: end;
font-size: 1rem;  
padding: 0.5em 1em;
border-radius: 0.25rem;
    }

blockquote.q-card > .author::before{
content: "- "
    }

//* fix up twitter tweet rendering *//
div.twitter-tweet.twitter-tweet-rendered {
    margin-left: auto;
    margin-right: auto;
}