/*
 * Design values that the other stylesheets use. A site changes any of them
 * in sites/<site>/site.css, inside :root { }.
 *
 * The --ast-* names are Astra's. Existing page content refers to them (for
 * example class="has-ast-global-color-0-color"), so they keep those names.
 *
 * Screen widths (CSS variables cannot be used in media queries, so these
 * numbers are written out in each file):
 *   desktop  922px and wider
 *   tablet   921px and narrower   @media (max-width: 921px)
 *   mobile   544px and narrower   @media (max-width: 544px)
 */

:root {
	/* Colours. The block editor offers these as the theme's colours. */
	--ast-global-color-0: #046bd2; /* links, buttons, accents */
	--ast-global-color-1: #045cb4; /* hover, current menu item */
	--ast-global-color-2: #1e293b; /* headings */
	--ast-global-color-3: #334155; /* text, menu */
	--ast-global-color-4: #f0f5fa; /* light background */
	--ast-global-color-5: #ffffff; /* white */
	--ast-global-color-6: #d1d5db; /* borders */
	--ast-global-color-7: #111111;
	--ast-global-color-8: #111111;
	--ast-border-color: var(--ast-global-color-6);
	--st-input-text: #475569;
	--st-post-border: #e1e8ed;

	/* Text */
	--st-font: Times, Georgia, serif;
	--st-heading-font: inherit;
	--st-heading-weight: 600;
	--st-line-height: 1.65em;

	/* Width of the content. The container adds --st-gutter on each side. */
	--st-content-width: 1050px;
	--st-gutter: 20px;

	/* Header */
	--st-menu-height: 40px;        /* menu bar row height */
	--st-menu-height-sticky: 30px; /* the same once the bar sticks to the top */

	/* Astra's names for the content widths and block padding, used by
	   theme.json and by blocks in existing content. */
	--wp--custom--ast-container-width: var(--st-content-width);
	--wp--custom--ast-content-width-size: var(--st-content-width);
	--wp--custom--ast-default-block-top-padding: 3em;
	--wp--custom--ast-default-block-right-padding: 3em;
	--wp--custom--ast-default-block-bottom-padding: 3em;
	--wp--custom--ast-default-block-left-padding: 3em;
	--wp--custom--ast-wide-width-size: calc(var(--st-content-width) + var(--wp--custom--ast-default-block-left-padding) + var(--wp--custom--ast-default-block-right-padding));
}

@media (max-width: 921px) {
	:root {
		--wp--custom--ast-default-block-right-padding: 2em;
		--wp--custom--ast-default-block-left-padding: 2em;
	}
}

@media (max-width: 544px) {
	:root {
		--wp--custom--ast-default-block-right-padding: 1.5em;
		--wp--custom--ast-default-block-left-padding: 1.5em;
	}
}