/* some styles for the front-end portion of my element */

/* globals that apply to both editor and frontend css */

/* normal font-faces */

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Light.ttf");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-SemiBold.ttf");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Bold.ttf");
	font-weight: 700;
	font-style: normal;
}

/* italic font-faces */

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-LightItalic.ttf");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Italic.ttf");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-BoldItalic.ttf");
	font-weight: 700;
	font-style: italic;
}

/* serif face */

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Italic.ttf");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Bold.ttf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-BoldItalic.ttf");
	font-weight: 700;
	font-style: italic;
}

/*
- lg (e.g. ipad pro) is our default breakpoint between "desktop view" and "mobile view"
- reference:
	sm: 640px
	md: 768px
	lg: 1024px
	xl: 1280px
*/

/* see our plugin in postcss.config.js for the code that inserts colors */

.has-primary-darkest-background-color {
	background-color: #003E6B;
}

.has-primary-darkest-color {
	color: #003E6B;
}

.has-primary-900-background-color {
	background-color: #003E6B;
}

.has-primary-900-color {
	color: #003E6B;
}

.has-primary-800-background-color {
	background-color: #0A558C;
}

.has-primary-800-color {
	color: #0A558C;
}

.has-primary-main-background-color {
	background-color: #0F609B;
}

.has-primary-main-color {
	color: #0F609B;
}

.has-primary-700-background-color {
	background-color: #186FAF;
}

.has-primary-700-color {
	color: #186FAF;
}

.has-primary-600-background-color {
	background-color: #2680C2;
}

.has-primary-600-color {
	color: #2680C2;
}

.has-primary-500-background-color {
	background-color: #4098D7;
}

.has-primary-500-color {
	color: #4098D7;
}

.has-primary-400-background-color {
	background-color: #62B0E8;
}

.has-primary-400-color {
	color: #62B0E8;
}

.has-primary-300-background-color {
	background-color: #84C5F4;
}

.has-primary-300-color {
	color: #84C5F4;
}

.has-primary-200-background-color {
	background-color: #B6E0FE;
}

.has-primary-200-color {
	color: #B6E0FE;
}

.has-primary-100-background-color {
	background-color: #DCEEFB;
}

.has-primary-100-color {
	color: #DCEEFB;
}

.has-accent-darkest-background-color {
	background-color: #513C06;
}

.has-accent-darkest-color {
	color: #513C06;
}

.has-accent-900-background-color {
	background-color: #7C5E10;
}

.has-accent-900-color {
	color: #7C5E10;
}

.has-accent-800-background-color {
	background-color: #A27C1A;
}

.has-accent-800-color {
	color: #A27C1A;
}

.has-accent-700-background-color {
	background-color: #C99A2E;
}

.has-accent-700-color {
	color: #C99A2E;
}

.has-accent-600-background-color {
	background-color: #E9B949;
}

.has-accent-600-color {
	color: #E9B949;
}

.has-accent-500-background-color {
	background-color: #F7D070;
}

.has-accent-500-color {
	color: #F7D070;
}

.has-accent-main-background-color {
	background-color: #F7D070;
}

.has-accent-main-color {
	color: #F7D070;
}

.has-accent-400-background-color {
	background-color: #F9DA8B;
}

.has-accent-400-color {
	color: #F9DA8B;
}

.has-accent-300-background-color {
	background-color: #F8E3A3;
}

.has-accent-300-color {
	color: #F8E3A3;
}

.has-accent-200-background-color {
	background-color: #FCEFC7;
}

.has-accent-200-color {
	color: #FCEFC7;
}

.has-accent-100-background-color {
	background-color: #FFFAEB;
}

.has-accent-100-color {
	color: #FFFAEB;
}

.has-gray-darkest-background-color {
	background-color: #1F2933;
}

.has-gray-darkest-color {
	color: #1F2933;
}

.has-gray-900-background-color {
	background-color: #323F4B;
}

.has-gray-900-color {
	color: #323F4B;
}

.has-gray-800-background-color {
	background-color: #3E4C59;
}

.has-gray-800-color {
	color: #3E4C59;
}

.has-gray-700-background-color {
	background-color: #52606D;
}

.has-gray-700-color {
	color: #52606D;
}

.has-gray-600-background-color {
	background-color: #616E7C;
}

.has-gray-600-color {
	color: #616E7C;
}

.has-gray-500-background-color {
	background-color: #7B8794;
}

.has-gray-500-color {
	color: #7B8794;
}

.has-gray-400-background-color {
	background-color: #9AA5B1;
}

.has-gray-400-color {
	color: #9AA5B1;
}

.has-gray-300-background-color {
	background-color: #CBD2D9;
}

.has-gray-300-color {
	color: #CBD2D9;
}

.has-gray-200-background-color {
	background-color: #E4E7EB;
}

.has-gray-200-color {
	color: #E4E7EB;
}

.has-gray-100-background-color {
	background-color: #F5F7FA;
}

.has-gray-100-color {
	color: #F5F7FA;
}

.has-green-darkest-background-color {
	background-color: #004440;
}

.has-green-darkest-color {
	color: #004440;
}

.has-green-900-background-color {
	background-color: #016457;
}

.has-green-900-color {
	color: #016457;
}

.has-green-800-background-color {
	background-color: #048271;
}

.has-green-800-color {
	color: #048271;
}

.has-green-700-background-color {
	background-color: #079A82;
}

.has-green-700-color {
	color: #079A82;
}

.has-green-600-background-color {
	background-color: #17B897;
}

.has-green-600-color {
	color: #17B897;
}

.has-green-500-background-color {
	background-color: #2DCCA7;
}

.has-green-500-color {
	color: #2DCCA7;
}

.has-green-400-background-color {
	background-color: #5FE3C0;
}

.has-green-400-color {
	color: #5FE3C0;
}

.has-green-300-background-color {
	background-color: #8EEDD1;
}

.has-green-300-color {
	color: #8EEDD1;
}

.has-green-200-background-color {
	background-color: #C6F7E9;
}

.has-green-200-color {
	color: #C6F7E9;
}

.has-green-100-background-color {
	background-color: #F0FCF9;
}

.has-green-100-color {
	color: #F0FCF9;
}

.has-red-darkest-background-color {
	background-color: #610404;
}

.has-red-darkest-color {
	color: #610404;
}

.has-red-900-background-color {
	background-color: #780A0A;
}

.has-red-900-color {
	color: #780A0A;
}

.has-red-800-background-color {
	background-color: #911111;
}

.has-red-800-color {
	color: #911111;
}

.has-red-700-background-color {
	background-color: #A61B1B;
}

.has-red-700-color {
	color: #A61B1B;
}

.has-red-600-background-color {
	background-color: #BA2525;
}

.has-red-600-color {
	color: #BA2525;
}

.has-red-500-background-color {
	background-color: #D64545;
}

.has-red-500-color {
	color: #D64545;
}

.has-red-400-background-color {
	background-color: #E66A6A;
}

.has-red-400-color {
	color: #E66A6A;
}

.has-red-300-background-color {
	background-color: #F29B9B;
}

.has-red-300-color {
	color: #F29B9B;
}

.has-red-200-background-color {
	background-color: #FACDCD;
}

.has-red-200-color {
	color: #FACDCD;
}

.has-red-100-background-color {
	background-color: #FFEEEE;
}

.has-red-100-color {
	color: #FFEEEE;
}

.has-owc-greeks-yellow-background-color {
	background-color: #a39343;
}

.has-owc-greeks-yellow-color {
	color: #a39343;
}

.has-owc-romans-red-background-color {
	background-color: #b11928;
}

.has-owc-romans-red-color {
	color: #b11928;
}

.has-owc-christendom-blue-background-color {
	background-color: #056B84;
}

.has-owc-christendom-blue-color {
	color: #056B84;
}

.has-owc-moderns-green-background-color {
	background-color: #3d6b2a;
}

.has-owc-moderns-green-color {
	color: #3d6b2a;
}

:root {
	--full-width: 100%;
	--wide-column-width: 1080px;
	--default-column-width: 768px;
	--font-sans: "Nunito Sans", sans-serif;
	--font-serif: "Merriweather", sans-serif;


	--width-sm: 640px;
	--width-md: 768px;
	--width-lg: 1024px;
	--width-xl: 1280px;

	/* see our plugin in postcss.config.js for the code that inserts colors */
	--primary-darkest: #003E6B;
	--primary-900: #003E6B;
	--primary-800: #0A558C;
	--primary-main: #0F609B;
	--primary-700: #186FAF;
	--primary-600: #2680C2;
	--primary-500: #4098D7;
	--primary-400: #62B0E8;
	--primary-300: #84C5F4;
	--primary-200: #B6E0FE;
	--primary-100: #DCEEFB;
	--accent-darkest: #513C06;
	--accent-900: #7C5E10;
	--accent-800: #A27C1A;
	--accent-700: #C99A2E;
	--accent-600: #E9B949;
	--accent-500: #F7D070;
	--accent-main: #F7D070;
	--accent-400: #F9DA8B;
	--accent-300: #F8E3A3;
	--accent-200: #FCEFC7;
	--accent-100: #FFFAEB;
	--gray-darkest: #1F2933;
	--gray-900: #323F4B;
	--gray-800: #3E4C59;
	--gray-700: #52606D;
	--gray-600: #616E7C;
	--gray-500: #7B8794;
	--gray-400: #9AA5B1;
	--gray-300: #CBD2D9;
	--gray-200: #E4E7EB;
	--gray-100: #F5F7FA;
	--green-darkest: #004440;
	--green-900: #016457;
	--green-800: #048271;
	--green-700: #079A82;
	--green-600: #17B897;
	--green-500: #2DCCA7;
	--green-400: #5FE3C0;
	--green-300: #8EEDD1;
	--green-200: #C6F7E9;
	--green-100: #F0FCF9;
	--red-darkest: #610404;
	--red-900: #780A0A;
	--red-800: #911111;
	--red-700: #A61B1B;
	--red-600: #BA2525;
	--red-500: #D64545;
	--red-400: #E66A6A;
	--red-300: #F29B9B;
	--red-200: #FACDCD;
	--red-100: #FFEEEE;
	--owc-greeks-yellow: #a39343;
	--owc-romans-red: #b11928;
	--owc-christendom-blue: #056B84;
	--owc-moderns-green: #3d6b2a;

	/* text sizes */

	--text-xs: 0.75rem;
	--line-height-text-xs: 1rem;

	--text-sm: 0.875rem;
	--line-height-text-sm: 1.25rem;

	--text-base: 1rem;
	--line-height-text-base: 1.7rem;

	--text-lg: 1.125rem;
	--line-height-text-lg: 1.75rem;

	--text-xl: 1.25rem;
	--line-height-text-xl: 1.75rem;

	--text-2xl: 1.5rem;
	--line-height-text-2xl: 2rem;

	--text-3xl: 1.875rem;
	--line-height-text-3xl: 2.25rem;

	--text-4xl: 2.25rem;
	--line-height-text-4xl: 2.5rem;

	--text-5xl: 3rem;
	--line-height-text-5xl: 1;

	/* letter spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;
}

/* classes to support above text sizes via WP editor */

.has-xs-font-size {
	font-size: 0.75rem;
	font-size: var(--text-xs);
	line-height: 1rem;
	line-height: var(--line-height-text-xs);
}

.has-sm-font-size {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	line-height: 1.25rem;
	line-height: var(--line-height-text-sm);
}

.has-base-font-size {
	font-size: 1rem;
	font-size: var(--text-base);
	line-height: 1.7rem;
	line-height: var(--line-height-text-base);
}

.has-lg-font-size {
	font-size: 1.125rem;
	font-size: var(--text-lg);
	line-height: 1.75rem;
	line-height: var(--line-height-text-lg);
}

.has-xl-font-size {
	font-size: 1.25rem;
	font-size: var(--text-xl);
	line-height: 1.75rem;
	line-height: var(--line-height-text-xl);
}

.has-2-xl-font-size {
	font-size: 1.5rem;
	font-size: var(--text-2xl);
	line-height: 2rem;
	line-height: var(--line-height-text-2xl);
}

.has-3-xl-font-size {
	font-size: 1.875rem;
	font-size: var(--text-3xl);
	line-height: 2.25rem;
	line-height: var(--line-height-text-3xl);
}

.has-4-xl-font-size {
	font-size: 2.25rem;
	font-size: var(--text-4xl);
	line-height: 2.5rem;
	line-height: var(--line-height-text-4xl);
}

.has-5-xl-font-size {
	font-size: 3rem;
	font-size: var(--text-5xl);
	line-height: 1;
	line-height: var(--line-height-text-5xl);
}

/* Utilties for Wordpress's "Additional CSS classes" where you need special spacing" */

.margin-top-0_5 {
	margin-top: 0.5rem;
}

.margin-top-1 {
	margin-top: 1rem;
}

.margin-top-1_5 {
	margin-top: 1.5rem;
}

.margin-top-2 {
	margin-top: 2rem;
}

.margin-top-2_5 {
	margin-top: 2.5rem;
}

.margin-top-3 {
	margin-top: 3rem;
}

.margin-bottom-0_5 {
	margin-bottom: 0.5rem;
}

.margin-bottom-1 {
	margin-bottom: 1rem;
}

.margin-bottom-1_5 {
	margin-bottom: 1.5rem;
}

.margin-bottom-2 {
	margin-bottom: 2rem;
}

.margin-bottom-2_5 {
	margin-bottom: 2.5rem;
}

.margin-bottom-3 {
	margin-bottom: 3rem;
}

html, body {
	font-family: "Nunito Sans", sans-serif;
	font-family: var(--font-sans);
	/* base font size */
	font-size: 16px;
	/* base line height */
	line-height: 1.7rem;
	line-height: var(--line-height-text-base);
}

/* Additional Global Utilties */

.hidden {
	/* I realize that !important is kind of bad, but this is the most efficient
	 * way to use the class as a toggle, imho */
	display: none !important;
}

[x-cloak] { display: none !important; }

.page-header-container {
	color: var(--gray-100);
	background-color: var(--gray-darkest);
	position: relative;
}

.page-header-opacity-layer {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	background-color: black;
}

.page-header-inner-layout-container {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-header-content-container {
	display: block;
	padding-bottom: 2rem;
}

.page-header-content-element {
	/* every element should be 3rem away from every other element in the stack, unless explicitly overidden */
	margin-top: 2.5rem;
}

.page-header-top-heading {
	text-align: center;
	font-size: 1rem;
	font-size: var(--text-base);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	letter-spacing: var(--tracking-widest);
}

.page-header-main-heading {
	color: var(--gray-100);
	text-align: center;
	font-size: 3rem;
	font-size: var(--text-5xl);
	line-height: 1;
	line-height: var(--line-height-text-5xl);
	font-weight: 700;
}

.page-header-description {
	text-align: center;
	font-weight: 400;
	font-size: 1rem;
	font-size: var(--text-base);
}

.page-header-bottom-content-container {
	margin-top: 3rem;
}