/*
Default CSS Properties for Theme
	We aren't using these per the spec yet since browsers haven't fully implemented.
	However, to ease development, we are doing replacements as a way to have simple
	global property definitions that can be pushed through a design.
	- Avoid defining properties outside of the .titanBody class 
	- Avoid defining complex properties. 
	- Avoid using the var function with fallback properties.

To override any of these properties, create a vars.css containing only the properties that need
to be overridden and import it in the site.css for your Content Site.  Recommend creating vars.css
in same location as site.css (e.g. /ClientCSS/UniqueSdkClientId/UniqueSdkInstanceId/vars.css)
*/
.titanBody {
    --fontfamily-primary: Lato, Arial, Helvetica, sans-serif;
    --fontfamily-secondary: 'Font Awesome 6 Free';
    --fontfamily-brands: 'Font Awesome 6 Brands';
    --fontsize-primary: 1.6rem;
    --fontsize-secondary: 1.3rem;
    --fontsize-mainBody: 1rem;
    --fontweight-regular: 400;
    --fontweight-medium: 500;
    --fontweight-bold: 700;
    --color-brand-primary: rgba(186,54,10,1);
    --color-brand-primary-hover: rgba(230,84,35,1);
    --color-brand-secondary: rgba(61,46,41,1);
    --color-brand-secondary-hover: rgba(84,67,58,1);
    --color-text-medium: rgba(102,102,102,1);
    --color-text-dark: rgba(51,51,51,1);
    --color-white: rgba(255,255,255,1);
    --color-white-shadow: rgba(255,255,255,0.7);
    --color-light: rgba(237,240,235,1);
    --color-medium: rgba(225,229,218,1);
    --color-dark: rgba(85,85,85,1);
    --color-black: rgba(0,0,0,1);
    --color-black-shadow: rgba(0,0,0,0.2);
    --color-feature-overlay: rgba(0,0,0,1);
    --lineheight-mainBody: 1.2;
    --lineheight-titanBody: 1.4;
	--lineheight-tighter: 1.2;
	--heroSliderHeight: 350px;
	--homeHeroSliderHeight: calc(100vh - 135px);
	--animation-duration:.25s;
	--margin-FloatLeft: 1rem 3rem 2rem 0;
	--margin-FloatRight: 1rem 0 2rem 3rem;
	--margin-block-bottom: 15px;
	--margin-element-bottom: 12px;
	--padding-stripe-top: 5rem;
	--padding-stripe-bottom: 4rem;
	--siteBoundsWidth: 1175px;
	--standard-box-shadow: 0 3px 6px rgba(0,0,0,.16);
	
	/* STRIPEIMAGE SETTINGS */
	--stripeImageMinHeight: 450px;
    --stripeImageDisplay: flex;
	--stripeImageMaxContentWidth: 1024px;
	--stripeImageTextColor: var(--color-white);
	
	/* FLEX BLOCKS SETTINGS */
	--flex-block-spacing: 1rem;
	--filtergrid-spacing: 3rem;
	--filtergrid-margin-bottom: 2rem;
	
	/* VIDEO POSTER */
	--video-poster-button-size: 12rem;
	--video-poster-button-font-size: 4rem;
	--video-poster-button-hover-font-size: 4.5rem;
	
	/* NAV COLORS */
    /* not used --background-mobile-nav-icon: var(--color-brand-primary); */
    --color-mobile-nav-icon: var(--color-white);
    --background-mobile-nav-icon-hover: var(--color-brand-primary);
    --color-mobile-nav-icon-hover: var(--color-white);
    --background-mobile-nav-panel: var(--color-brand-secondary);
    --color-mobile-nav-separator: var(--color-white);
    --color-nav-links: var(--color-white);
    --background-nav-links-current-hover: var(--color-black);
    --color-nav-links-current-hover: var(--color-white);

    --breakpoint-phone: 600px;
    --breakpoint-tablet: 768px;
    --breakpoint-tablet-landscape: 1024px;
    --breakpoint-desktop: 1200px;
    --breakpoint-widescreen: 1600px;
}

@media (min-width: 1200px) {
	.titanBody {
		/* --flex-block-spacing: 3rem; */
		/* --fontsize-primary: 2.0rem; */
		/* --fontsize-secondary: 1.6rem; */
		
		/* NAV COLORS */
		--color-nav-links: var(--color-brand-secondary);
		--background-nav-links-current-hover: inherit;
		--color-nav-links-current-hover: var(--color-brand-primary);
		--color-second-level-nav-links-current-hover: var(--color-brand-secondary-hover);
		--color-nav-arrow: var(--color-brand-secondary);
		--color-nav-arrow-current-hover: var(--color-text-medium);
		--background-secondary-nav: var(--color-medium);
		--color-secondary-nav-link-current: var(--color-brand-primary);
		--color-secondary-nav-link-hover: var(--color-brand-primary-hover);
	}
}