/*
    Theme Name: myTheme
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: LOBL THEME
    Version: 1.
    Author: hamiltro
*/

/* Breakpoints: 600 - 768/769 - 992 - 1200 w side-pad 4% */



/* PALETTE / VARIABLES
*****************************************/
:root {
/* palette */
	--color: #666;
	--color-strong: BLACK;
	--color-background: WHITE;
	--color-accent1: #58371c; /* darkest brown - siteTitle /  rgba(88,55,28,1) */	
	--color-accent2: #594029; /* medium-dark brown -  / rgba(89,64,41,1) */
	--color-accent3: #b88067; /* dark-peach - mainNav links / rgba(184,128,103,1) */
	--color-accent4: #c2cab5; /* pale green - footerBG; 2xbannerBG / rgba(194,202,181,1) */
	--color-accent5: #e0e5da; /* very pale green - bannerBG / rgba(224,229,218,1) */
	--color-accent6: #8a9d6a; /* darker green for quotes */
	--color-headers: var(--color-accent2);
	--color-a: var(--color-accent2);
	--color-a-hover: var(--color-accent1);
	--color-banner-background: var(--color-accent5);
	--color-editLink: BLACK;
	--color-hero-span-line1: var(--color-accent3);
	--color-hero-span-line2: var(--color-accent3);
	--color-row-border: #EEE;
	--color-quotes-background: linear-gradient(to right, #f7f409, #e5cd29);

/* siteTitle/mainNav */
	--color-mainNav-text-link: var(--color-accent2);
	--color-mainNav-text-link-hover: var(--color-accent1);
	--color-mob-menu-li-background-color:TRANSPARENT;
	--color-mob-menu-li-border: TRANSPARENT;
	--color-navbar-wrapper-background: WHITE;
	--color-outline: #DDD; /* tabbing */
	--color-sub-menu-li-background: var(--color-navbar-wrapper-background);
	--color-sub-menu-li-background-hover: rgba(243,243,243,0.98);
	--color-sub-menu-li-border: rgba(209,209,209,0.25);

/* headers by class */
	--color-headersDefault: black;
	--color-siteSlogan: var(--color-accent2); 
	--color-siteTitle: var(--color-accent1); 
	--color-siteTitle-hover: var(--color-accent1); 
	--color-siteTitle-shadow-hover: TRANSPARENT;
	--color-overBanner: WHITE;
	--color-pageTitle: var(--color-accent1); 
	--color-sectionTitle: var(--color-accent1);
	--color-rowHeader: var(--color-accent1);

/* buttons */
	--color-a-button: var(--color-accent1);
	--color-a-button-background: rgba(255,255,255,0.4);
	--color-a-button-border: var(--color-accent1);
	--color-a-button-hover: WHITE;
	--color-a-button-background-hover: var(--color-accent2); 
	--color-a-button-border-hover: var(--color-accent1);

	--color-readMore-a: var(--color-accent2);
	--color-readMore-a-background: var(--color-accent5);
	--color-readMore-a-border: var(--color-accent2);
	--color-readMore-a-hover: var(--color-accent1);
	--color-readMore-a-hover-background: var(--color-accent5);
	--color-readMore-a-hover-border: var(--color-accent1);

/* forms */
	--color-form-input-border: TRANSPARENT;
	--color-form-button-background: TRANSPARENT;
	--color-form-button-text: TRANSPARENT;
	--color-form-button-bg-hover: TRANSPARENT;
	--color-wpcf7-sent: GREY;
	--color-wpcf7-sent-border: GREY;
	--color-wpcf7-sent-background: WHITE; 

/* footer */
	--color-footer: #eee;
	--color-footer-a: #DDD;
	--color-footer-a-hover:#FFF;
	--color-footer-background: rgba(89,64,41,0.7); /&* variation of 4 */
	--color-footer-border: #888;
	--color-footer-credit: #aaa;
	--color-footer-credit-a:#bbb;
	--color-footer-credit-a-hover:#FFF;
	--color-icon-style: grey;
	--color-icon-style-hover: white;
	--color-icon-style: #744b37;
	--color-icon-style-hover: rgba(116,56,27, 1.0); /* #74381b */

/* fonts */
	--font-body: 'Open Sans', sans-serif; 
	--font-input: 'Open Sans', sans-serif; 
	--font-nav:   'Lora','Calicanto', serif;
	--font-quote: 'Lora','Playfair Display', Baskerville, serif;
	--font-readMore:  'Open Sans', sans-serif;
	--font-siteTitle:  'Lora','Calicanto', serif;
	--font-siteSubTitle: 'Open Sans', sans-serif;
	--font-pageTitle:  'Open Sans', sans-serif;
	--font-sectionTitle:  'Open Sans', sans-serif;

	/*--font-size--2: clamp(.69rem, .64rem + .22vw, .8rem);
    --font-size--1: clamp(.83rem, .75rem + .35vw, 1rem);
    --font-size-1: clamp(1rem, calc(.88rem + .52vw), 1.25rem);
    --font-size-2: clamp(1.2rem, calc(.02rem + .76vw), 1.56rem);
    --font-size-3: clamp(1.44rem, 1.19rem + 1.07vw, 1.95rem);
    --font-size-4: clamp(1.73rem, 1.38rem + 1.49vw, 2.44rem);
    --font-size-5: clamp(2.07rem, 1.59rem + 2.05vw, 3.05rem);
    --font-size-6: clamp(2.49rem, 1.84rem + 2.78vw, 3.82rem);*/
    
    --space: clamp(1.25rem, -.294rem + 6.59vw, 3rem);
}

/*
https://www.w3schools.com/tags/tag_hn.asp
h1 { display: block; font-size: 2em; }
h2 { display: block; font-size: 1.5em; } 
h3 { display: block; font-size: 1.17em; }
h4 { display: block; font-size: 1em; } 
h5 { display: block; font-size: .83em; } 
h6 { display: block; font-size: .67em; }
*/

html{font-size: 16px;} /* default is 16px */


/*
https://www.w3schools.com/tags/tag_hn.asp
h1 { display: block; font-size: 2em; }
h2 { display: block; font-size: 1.5em; } 
h3 { display: block; font-size: 1.17em; }
h4 { display: block; font-size: 1em; } 
h5 { display: block; font-size: .83em; } 
h6 { display: block; font-size: .67em; }
*/

body{font-size: 16px;line-height: calc(1rem + .7em)} /* default is 16px */

	p { font-size: var(--font-size-1);}
	p,li { font-size: clamp(1rem, 1rem + .1vw, 1.3rem);} /* [ ] needs aligning w base */
	h1 {font-size: clamp(2.07rem, 1.59rem + 2.05vw, 3.05rem);}
	h2 {font-size: clamp(1.73rem, 1.38rem + 1.49vw, 2.44rem);line-height: calc(1rem + 1em);}
	h3 {font-size: clamp(1.34rem, 1.09rem + 1vw, 1.85rem);line-height: calc(1rem + .7em);}
	h4 {font-size: clamp(1.2rem, calc(.02rem + .76vw), 1.56rem);}
	h5 {font-size: clamp(.83rem, .75rem + .35vw, 1rem);}
	h6 {font-size: clamp(.69rem, .64rem + .22vw, .8rem); margin-bottom: .5rem}

/*@media (max-width: 2560px) {}
@media (max-width: 2048px) {body { font-size: var(--font-size-1);}}
@media (max-width: 900px)  {body { font-size: var(--font-size-0);}}
@media (max-width: 400px)  {body { font-size: var(--font-size-0);}}*/




/* From here on, use rems (or % or vh?) for divs and ems for font-sizes within divs) */

/* SCREENSIZE TESTER (for: template-parts/screensize.php; change breakpoints as needed)
*****************************************/
p.screensize {display: none;} /* BLOCK FOR TESTING; NONE FOR LIVE */
p.screensize	{font-size: .5em; padding: 4px 10px;margin:0;max-width: 100%;text-align: right; background-color: #fff;}
@media (max-width: 768px) {p.screensize	{color: red;}}
@media (max-width: 992px) {p.screensize	{color: orange;}}
@media (min-width: 993px) {p.screensize	{color: green;}}

/*
@media (max-width: 2560px) {body { color: red;}}
@media (max-width: 2048px) {body { color: orange;}}
@media (max-width: 900px)  {body { color: green;}}
@media (max-width: 400px)  {body { color: blue;}}
*/


/* BREAKPOINTS: 600 - 768/769 - 991/992 - 1200 w side-pad 4%
****************************************/

@media (min-width:769px) {
	.flex, .flexContainer {flex-direction: row;}
	.mobileOnly {display:none;}
	.desktopOnly {display:block;}
	.flex-col-11 {width: 91.7%;padding: 0 1%;}
	.flex-col-10 {width: 83.3%;padding: 0 1%;}
	.flex-col-9 {width: 75%;padding: 0 1%;}
	.flex-col-8 {width: 66.7%;padding: 0 1%;}	
	.flex-col-7 {width: 58.3%;padding: 0 1%;}
	.flex-col-6 {width: 50%;padding: 0 1%;}
	.flex-col-5 {width: 41.7%;padding: 0 1%;}
	.flex-col-4 {width: 33.3%;padding: 0 1%;}
	.flex-col-3 {width: 25%;padding: 0 1%;}
	.flex-col-2 {width: 16.7%;padding: 0 1%;}
	.flex-col-1 {width: 8.3%;padding: 0 1%;}
	
	.thumb.flex-col-3,
	.thumb.flex-col-4	{padding-left: 0;}
	.excerpt.flex-col-8,
	.excerpt.flex-col-9	{padding-right: 0;}
}

/* unique to this site */

@media (min-width: 992px) {
	li#menu-item-48 .sub-menu {
		width: 240px;
	}
}

h6.wp-block-heading {
	font-weight: normal;
	text-align: center;
	width: 90%;
	font-size: clamp(1.07rem, 1.39rem + 2.05vw, 2.45rem);
	color: var(--color-accent4);
	/*margin: 1vw auto 1.5vw;
	padding: .5vw 0 .9vw;*/
	border: 1px solid #fff;	
	margin: 0 auto;
	padding: 0;
	font-family: var(--font-quote);
	letter-spacing: 0.01em;

}

h6.wp-block-heading:after, h6.wp-block-heading:before {
    content: "";
    display: block;
    width: 40%;
    border: 0.25px solid #d3dce6;
    margin: 55px auto;
}

5rem);}
	h4 {font-size: clamp(1.2rem, calc(.02rem + .76vw), 1.56rem);}
	h5 {font-size: clamp(.83rem, .75rem + .35vw, 1rem);}
	h6 {font-size: clamp(.69rem, .64rem + .22vw, .8rem); margin-bottom: .5rem}

/*@media (max-width: 2560px) {}
@media (max-width: 2048px) {body { font-size: var(--font-size-1);}}
@media (max-width: 900px)  {body { font-size: var(--font-size-0);}}
@media (max-width: 400px)  {body { font-size: var(--font-size-0);}}*/




/* From here on, use rems (or % or vh?) for divs and ems for font-sizes within divs) */

/* SCREENSIZE TESTER (for: template-parts/screensize.php; change breakpoints as needed)
*****************************************/
p.screensize {display: none;} /* BLOCK FOR TESTING; NONE FOR LIVE */
p.screensize	{font-size: .5em; padding: 4px 10px;margin:0;max-width: 100%;text-align: right; background-color: #fff;}
@media (max-width: 768px) {p.screensize	{color: red;}}
@media (max-width: 992px) {p.screensize	{color: orange;}}
@media (min-width: 993px) {p.screensize	{color: green;}}

/*
@media (max-width: 2560px) {body { color: red;}}
@media (max-width: 2048px) {body { color: orange;}}
@media (max-width: 900px)  {body { color: green;}}
@media (max-width: 400px)  {body { color: blue;}}
*/


/* BREAKPOINTS: 600 - 768/769 - 991/992 - 1200 w side-pad 4%
****************************************/

@media (min-width:769px) {
	.flex, .flexContainer {flex-direction: row;}
	.mobileOnly {display:none;}
	.desktopOnly {display:block;}
	.flex-col-11 {width: 91.7%;padding: 0 1%;}
	.flex-col-10 {width: 83.3%;padding: 0 1%;}
	.flex-col-9 {width: 75%;padding: 0 1%;}
	.flex-col-8 {width: 66.7%;padding: 0 1%;}	
	.flex-col-7 {width: 58.3%;padding: 0 1%;}
	.flex-col-6 {width: 50%;padding: 0 1%;}
	.flex-col-5 {width: 41.7%;padding: 0 1%;}
	.flex-col-4 {width: 33.3%;padding: 0 1%;}
	.flex-col-3 {width: 25%;padding: 0 1%;}
	.flex-col-2 {width: 16.7%;padding: 0 1%;}
	.flex-col-1 {width: 8.3%;padding: 0 1%;}
	
	.thumb.flex-col-3,
	.thumb.flex-col-4	{padding-left: 0;}
	.excerpt.flex-col-8,
	.excerpt.flex-col-9	{padding-right: 0;}
}

/* unique to this site */


@media (min-width: 992px) {
	li#menu-item-48 .sub-menu {
		width: 240px;

	}
}

h6.wp-block-heading {
	font-weight: normal;
	text-align: center;
	width: 90%;
	max-width: 40rem;
	margin: 1vw auto 1.5vw;
	font-size: clamp(1.07rem, 1.09rem + 2.05vw, 2.05rem);
	color: var(--color-accent4);
	padding: .5vw 0 1vw;
	border: 1px solid #fff;	
	font-family: var(--font-quote);
	line-height: calc(1em + .5rem);

}

h6.wp-block-heading:after, h6.wp-block-heading:before {
    content: "";
    display: block;
    width: 30%;
    border: 0.25px solid #d3dce6;
    margin: 60px auto;
}

.page-education-training .two-col	{
	width: 70rem;
	max-width: 100%;

}