/* 
	Pseudo Code Content Buddy
	version 1.2
*/
.psc-cb-root{
	/* global */
	--base-font-size: 100%;
	--mobile-font-size: 100%;
	--inner-width: 1170px;
	--article-width: 900px;
	--inner-padding: 1em; /* used only for left and right padding on inner container */
	--widget-padding-top: 6em;
	--widget-padding-bottom: 6em;
	--interactive-transition: all 0.6s; /* used for links, inputs and buttons */
	--default-gap: 2em; /* used for spacing between elements throughout the site, e.g. grid gap, margins, padding, etc. */
	--default-box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.2); /* used for card-like elements */ 
	--default-border-radius: 0.3em;
	--bold-weight: 700; /* varies depending on font family */
	--imagebar-overlay: rgba(0,0,0,0.5);

	/* colours */
	--brand-1-bg: #b60000; /* major brand colour - used for interaction */
	--brand-1-fg: #ffffff;
	--brand-2-bg: #000000; /* minor brand colour */
	--brand-2-fg: #ffffff;
	--brand-3-bg: #666666; /* brand non-colour (e.g. grey) - default states */
	--brand-3-fg: #ffffff;
	--neutral-1: #f4f4f4; /* for backgrounds on elements like cards */

	/* alignment */
	--default-text-align: left;
	--titlebar-title-align: var(--default-text-align);
	--titlebar-intro-align: var(--default-text-align);
	--blocklink-align: center;

	/* titlebar */
	--titlebar-margin-bottom: 1em;
	--titlebar-intro-width: 100%;

	/* buttons */
	--button-bg: var(--brand-1-bg);
	--button-fg: var(--brand-1-fg);
	--button-hover-bg: var(--brand-2-bg);
	--button-hover-fg: var(--brand-2-fg);
	--button-padding: 1em 1.2em;
	--button-border-radius: var(--default-border-radius);
	--button-font-size: 0.7em;
	--button-font-weight: 400;
	--button-shadow: none;
	--button-text-transform: uppercase;

	/* blocklink */
	--blocklink-top-margin: 3em;
	--blocklink-button-padding: var(--button-padding);
	--blocklink-button-border-radius: var(--button-border-radius);
	--blocklink-button-font-size: var(--button-font-size);

	/* accordion */
	--accordion-bg: var(--brand-3-bg);
	--accordion-fg: var(--brand-3-fg);
	--accordion-bg-active: var(--brand-1-bg);
	--accordion-fg-active: var(--brand-1-fg);
	--accordion-font-size: 1.2em;
	--accordion-icon-size-small: 0.75em;
	--accordion-icon-size-medium: 1em; /* default size */
	--accordion-icon-size-large: 2em;
	--accordion-icon-size-extra-large: 3em;

	/* article */
	--article-title-align: var(--titlebar-title-align);
	--article-intro-align: var(--titlebar-intro-align);
	--article-intro-colour: var(--brand-2-bg);
	--article-intro-bold: var(--bold-weight);
	--article-image-height: 50%; /* percentage of width; 50% = 2:1 image ratio */
	--article-bgimage-display: none; /* uses background-image - hidden (none) by default */
	--article-picture-display: flex; /* flex to show; uses picture element with separate desktop and mobile images */

	/* banners */
	--banner-content-width: 40%;
	--banner-content-position: center; /* uses flex for *vertical* positioning; flex-end = bottom; flex-start = top */
	--banner-text-colour: var(--brand-1-fg);
	--banner-text-shadow: 0 0 1px rgba(0,0,0,0.3);
	--banner-overlay: rgba(0,0,0,0.1);

	/* cards */
	--card-min-width: 18em;
	--card-bg: var(--neutral-1);
	--card-title-colour: var(--brand-2-bg);
	--card-subtitle-colour: var(--brand-1-bg);
	--card-gap: var(--default-gap);
	--card-title-font-size: 1.3em;
	--card-title-line-height: 1.3em;
	--card-title-margin-bottom: 1.3em;
	--card-description-font-size: 0.8em;
	--card-description-font-weight: 400;
	--card-description-line-height: 1.2em;
	--card-action-align: left; /* button alignment */
	--card-border-radius: var(--default-border-radius);
	--card-shadow: var(--default-box-shadow);
	--card-image-height: 50%; /* percentage of width; 50% = 2:1 image ratio */
	--card-image-height-horz: 60%; /* percentage of width for horizontal cards */
	--card-image-height-textonimage: 100%; /* for preset 6 */
	--card-details-height: auto; /* container includes description and link */
	--card-description-height: auto; /* description only */
	--card-circular-width: 40%; /* for circular images like preset 4 & 7 */
	--card-circular-width-horz: 60%; /* for circular images on horizontal cards like preset 4 */
	--card-circular-shadow: 0 0.5em 2em rgba(0,0,0,0.3); /* for circular images like preset 4 & 7 */
	--card-circular-border: solid 0.25em var(--card-bg); /* for circular images like preset 4 & 7 */
	--card-alt-row-direction: row-reverse; /* for even rows on horizontal cards; default: row */
	--card-alt-row-text-align: right; /* for even rows on horizontal cards; default: left */

	/* dynamic cards */
	--dynamic-body-height: 12em; /* fixed height to prevent long descriptions */
	--dynamic-body-overlay: linear-gradient(to top,var(--card-bg),transparent); /* gradient over the bottom of the content for long descriptions - should match card bg */
	--dynamic-body-overlay-height: 6em;
	--dynamic-product-image-height: 80%;

	/* dynamic counters */
	--counter-icon-colour: var(--brand-2-bg);
	--counter-label-colour: var(--brand-2-bg);
	--counter-number-colour: var(--brand-1-bg);
	--counter-icon-font-size: 2em;
	--counter-label-font-size: 1em;
	--counter-number-font-size: 3em;
	--counter-number-line-height: 1em;
	--counter-text-align: center;

	/* dynamic widget's filterbar */
	--filterbar-align: center; /* flex alignment */
	
	/* features */
	--feature-text-align: center;
	--feature-icon-size-small: 1.5em;
	--feature-icon-size-medium: 2em;
	--feature-icon-size-large: 3em;
	--feature-icon-size-extra-large: 4em;

	/* flipboxes */
	--flipbox-align: center;
	--flipbox-flexjustify-align: center; /* flex alignment */
	--flibpox-padding: 2em;
	--flipbox-icon-size: 3em;
	--flipbox-subheading-size: 0.8em;
	--flipbox-description-size: 0.8em;
	--flipbox-rotate-padding: 0.25em 1.5em;
	--flipbox-rotate-background: var(--brand-1-bg);
	--flipbox-rotate-colour: var(--brand-1-fg);
	--flipbox-rotate-size: 0.8em;
	--flipbox-rotate-border: solid 1em var(--brand-1-bg); /* bottom position -0.5em by default */
	--flipbox-rotate-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
	--flipbox-rotate-shadow: 0 -0.2em 0.4em rgba(0,0,0,0.2);

	/* gallery */
	--gallery-inner-width: var(--inner-width);
	--gallery-gap: 1px;
	--gallery-thumb-min-width: 12em;
	--gallery-thumb-height: 100%; /* relative to width - 100% = square */
	--gallery-thumb-filters: saturate(0.3);
	--gallery-caption-bg: var(--brand-2-bg);
	--gallery-caption-fg: var(--brand-2-fg);
	--gallery-caption-padding: 0.5em 1em;
	--gallery-caption-font-size: 0.6em;
	--gallery-caption-line-height: 1.2em;

	/* overlay cards */
	--overlay-background: rgba(255,255,255,0.9);
	--overlay-backdrop-filter: blur(5px);
	--overlay-inner-min-height: 35vh;
	--overlay-inner-bg: var(--card-bg);
	--overlay-inner-padding: 2em;
	--overlay-inner-radius: var(--card-border-radius);
	--overlay-inner-shadow: var(--card-shadow);
	--overlay-close-link-size: 4em; /* large stands out full-screen */

	/* perspective carousel */
	--pcarousel-gap: 1em;
	--pcarousel-bg: var(--card-bg);
	--pcarousel-border-radius: var(--card-border-radius);
	--pcarousel-border-colour: var(--brand-3-bg);
	--pcarousel-shadow: var(--card-shadow);
	--pcarousel-inactive-filters: saturate(0) blur(2px);
	--pcarousel-image-width: 40%;
	--pcarousel-image-shadow: inset 0 0.25em 0.5em rgba(0,0,0,0.3);
	--pcarousel-text-padding: 1em 3em;
	--pcarousel-font-size: 0.8em;
	--pcarousel-line-height: 1.6em;
	--pcarousel-text-align: center;

	/* tabs */
	--tab-nav-inactive-bg: var(--brand-3-bg);
	--tab-nav-inactive-fg: var(--brand-3-fg);
	--tab-nav-active-bg: var(--brand-1-bg);
	--tab-nav-active-fg: var(--brand-1-fg);
	--tab-nav-padding: 0.25em 2em;
	--tab-nav-text-size: 1em;
	--tab-nav-text-align: center;
	--tab-min-height: 0em;
	--tab-padding: 1em;
	--tab-border-colour: var(--brand-1-bg);
	--tab-border-radius: var(--default-border-radius);
	--tab-shadow: var(--default-box-shadow);

	/* teams */
	--team-card-bg: var(--card-bg);
	--team-card-border-radius: var(--card-border-radius);
	--team-card-shadow: var(--card-shadow);
	--team-image-height: 120%;
	--team-bio-height: 6em;
	--team-circular-image-shadow: inset 0 0.25em 1em rgba(0,0,0,0.5);
	--team-circular-image-outer-shadow: 0 -0.1em 0.3em rgba(0,0,0,0.2);
	--team-circular-align: center;

	/* testimonials */
	--testimonial-bg: var(--card-bg);
	--testimonial-border-radius: var(--card-border-radius);
	--testimonial-shadow: var(--card-shadow);
	--testimonial-quotes: "“" "”";
	--testimonial-quote-font: "Times New Roman", sans-serif;
	--testimonial-quote-mark-align: center;
	--testimonial-quote-align: center;
	--testimonial-credit-align: center;
	--testimonial-image-align: center;
	--testimonial-image-size: 6em;
	--testimonial-image-scale: cover;
	--testimonial-image-radius: 100%;
	--testimonial-image-shadow: 0 0.1em 0.3em rgba(0,0,0,0.2);

	/* text */
	--text-image-height: 20em;
	--text-image-align: center;
}