/* 1. Settings: Globally-available settings. Config switches. Brand colours, etc. */

:root {

	--transition-duration: .2s;
	--z-index-max: 99998; /* WP Admin Bar - 1 */

	/* Text */

	--font-size: 18px;
	--font-size-h1: 32px;
	--font-size-h2: 24px;
	--font-size-h3: 1rem;
	--font-size-h4: 1rem;
	--font-size-h5: 1rem;
	--font-size-h6: 1rem;
	--font-size-small: 16px;

	--line-height: 1.5;

	--icon-size: 1.5rem;

	--font-standard: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-standard: 'Roboto Condensed', sans-serif;

	--font-weight-light: 300;
	--font-weight-normal: 300;
	--font-weight-bold: 700;

	--font-style-italic: italic;

	/* Colors */

	--color: #814681;
	--color-2: #EFEFEB;
	--color-dark: #AD001D;
	--color-light: var(--color);

	--color-button: var(--color);

	--color-white: #FFFFFF;
	--color-black: #000000;

	--color-grey: grey;
	--color-grey-light: lightgrey;
	--color-grey-dark: #999999;

	--color-border: var(--color-grey-dark);

	--color-text: var(--color-black);
	--color-link: var(--color);
	--color-link-hover: var(--color-dark);

	--color-error: var(--color);
	--color-success: #22AA22;

	/* Breakpoints */

	--bp-sm: 480px;
	--bp-md: 640px;
	--bp-lg: 960px;
	--bp-xl: 1280px;

	/* Forms */

	--form-font: var(--font-standard);
	--form-font-size: var(--font-size);
	--form-padding: .5em;
	--form-margin-bottom: .75em;
	--form-border: 1px solid var(--color-border);
	--form-border-radius: 0;
	--form-width: 300px;
	--form-height: 2em;
	--form-background-color: var(--color-white);

	--form-focus-border-color: var(--color-link);
	--form-focus-special-outline: 1px auto var(--color-link-hover);

	--form-invalid-color: var(--color-error);
	--form-invalid-border-color: var(--color-error);
	--form-invalid-special-outline: var(--color-error);

	--form-disabled-color: var(--color-white);
	--form-disabled-background-color: var(--color-grey);

	--form-readonly-color: var(--color-text);
	--form-readonly-background-color: var(--color-white);
	--form-readonly-border-color: var(--color-text);

	--form-select-height: 2.25em;

	--form-fieldset-border: 1px solid var(--color);
	--form-legend-color: var(--color-black);

	--form-aligned-break: var(--bp-md);
	--form-aligned-label-width: 120px;
	--form-aligned-label-text-align: right;

	/* Buttons */

	--button-font: var(--font-standard);
	--button-font-size: var(--form-font-size);
	--button-font-weight: var(--font-weight-bold);
	--button-text-transform: uppercase;
	--button-padding: 0 .8em 0 .7em;
	--button-color: var(--color-white);
	--button-background-color: var(--color-button);
	--button-border: none;
	--button-border-radius: var(--form-border-radius);
	--button-width: auto;
	--button-height: var(--form-height);

	--button-hover-background-color: var(--color-link-hover);
	--button-disabled-background-color: var(--form-disabled-background-color);

	/* Tables */

	--table-border-width-horizontal: 0;
	--table-border-width-vertical: 0;
	--table-border-style: solid;
	--table-border-color: var(--color);
	--table-head-color: var(--color-white);
	--table-head-background-color: var(--color);
	--table-padding: .5em 1em;
	--table-striped-rows: even;
	--table-striped-background-color: rgba(var(--color), .2);

	/* Layout */

	--layout-max-width: var(--bp-xl);
	--layout-padding-value: 3.125vw;
	--layout-padding: var(--layout-padding-value);
	--layout-header-logo-width: 160px;
	--layout-header-logo-height: auto;
	--layout-header-image-height: 30%; /* set 0 to disable header image */
	--layout-header-image-height-stop: 1280px; /* set null to disable height stop */

	--layout-nav-padding: var(--layout-padding-value) var(--layout-padding-value) calc(var(--layout-padding-value)/2);
	--layout-nav-background-color: transparent;
	--layout-nav-color: var(--color-black);
	--layout-nav-color-hover: var(--color-link);
	--layout-nav-color-current: var(--color);

	--layout-main-padding: var(--layout-padding-value) var(--layout-padding-value);
	--layout-article-padding: 0 0 var(--layout-padding-value) 0;
	--layout-content-align-margin: 20px;
	--layout-content-align-margin-top: 5px;
	--layout-footer-padding: var(--layout-padding-value);
	--layout-footer-background-color: var(--color-grey);
	--layout-footer-color: var(--color-text);
	--layout-footer-color-hover: currentColor;

	/* Compact */

	--compact-break: var(--bp-md);
	--compact-side: right; /* left in combination with sticky header doesn't work */
	--compact-width: 250px;
	--compact-padding: var(--layout-padding-value);
	--compact-transition-duration: var(--transition-duration);
	--compact-background-color: transparent;
	--compact-color: var(--color);
	--compact-color-hover: var(--color-link);
	--compact-color-current: var(--color-link);
	--compact-overlay-background-color: rgba(var(--color-black), .5);
	//$compact-icon-padding: 1em 1em 1em 0;
	--compact-li-padding: .3em 0;
	--compact-li-sub-padding: .3em 1em;

	/* Menu */

	//--menu-show: true;
	--menu-break: var(--compact-break);

	/* Flex */

	--flex-header-break: var(--compact-break);
	--flex-header-order: 0; /*  default: 0 */

	/* Accordion */

	--accordion-max-height: 5000px;
	--accordion-open-duration: 1s;
	--accordion-open-timing: cubic-bezier(0, 1.05, 0, 1);
	--accordion-close-duration: 1s;
	--accordion-close-timing: linear;

}