/*
    Theme Name: myTheme
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: BASE 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: #218bc7; /* butterfly blue */
	--color-accent2: #e6e0f1; /* PALE lilac */
	--color-accent3: #988db5; /* butterfly purple */
	--color-accent4: #403ea1; /* Purple - footerBG;  */
	--color-accent5: #84b5de; /* dusty blue;  */
	--color-accent6: #260e11; /* blackish */
	--color-headers: var(--color-accent2);
	--color-a: var(--color-accent4);
	--color-a-hover: var(--color-accent1);
	--color-banner-background: #CCC;
	--color-editLink: BLACK;
	--color-hero-span-line1: #FFF;
	--color-hero-span-line2: #FFF;
	--color-row-border: #EEE;

/* siteTitle/mainNav */
	--color-mainNav-text-link: var(--color-accent4); 
	--color-mainNav-text-link-hover: var(--color-accent1);
	--color-mob-menu-li-current-background-color:white;
	--color-mob-menu-li-background-color:white;
	--color-mob-menu-li-border: TRANSPARENT;
	--color-navbar-wrapper-background: white;
	--color-navbar-wrapper-border:  TRANSPARENT;
	--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-accent4);  
	--color-siteTitle-hover: var(--color-accent1); 
	--color-siteTitle-shadow-hover: TRANSPARENT;
	--color-overBanner: WHITE;
	--color-pageTitle: #FFF;
	--color-sectionTitle: var(--color-accent6);
	--color-rowHeader: var(--color-accent1);

/* buttons */
	--color-a-button: var(--color-accent1);
	--color-a-button-background: WHITE;
	--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-accent2);
	--color-readMore-a-border: var(--color-accent2);
	--color-readMore-a-border: #a48946; /* gold*/
	--color-readMore-a-hover: WHITE;
	--color-readMore-a-hover-background: var(--color-accent3);
	--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: var(--color-accent3);
	--color-footer-border: #888;
	--color-footer-credit: #ddd;
	--color-footer-credit-a:#eee;
	--color-footer-credit-a-hover:#FFF;
	--color-icon-style: grey;
	--color-icon-style-hover: white;
	--color-icon-style: var(--color-accent2);
	--color-icon-style-hover: var(--color-accent3);

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

/*
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; }
*/

	--font-size-xs: clamp(.69rem, .64rem + .22vw, .8rem);
    --font-size-sm: clamp(.83rem, .75rem + .35vw, 1rem);
    --font-size-1: clamp(1rem, calc(.88rem + .52vw), 1.25rem);
    --font-size-1b: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    --font-size-2: clamp(1.2rem, .92rem + .76vw, 1.56rem);
    --font-size-3: clamp(1.44rem, calc(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);
}


html{font-size: 17px;} /* default is 16px */
body {line-height: calc(1.1em + 0.5rem);}

p,li { font-size: clamp(1rem, 1rem + .2vw, 1.4rem);}
h1, .pageTitle {font-size: clamp(2rem, 2rem + .8vw, 2.44rem); line-height: calc(1.1em + 0.5rem);}
h2 {font-size: clamp(1.5rem, 1.5rem + .6vw, 2rem);line-height: calc(1.1em + 0.5rem);}
h3 {font-size: clamp(1.17rem, 1.17rem + .4vw, 1.67rem);line-height: calc(1.1em + 0.5rem);}
h4 {font-size: clamp(1rem, 1rem + .3vw, 1.5rem); line-height: calc(1.1em + 0.4rem);font-weight: bold;}
h5 {font-size: clamp(.83rem, .75rem + .35vw, 1rem);line-height: calc(1.1em + 0.4rem);}
h6 {font-size: clamp(.67rem, .64rem + .22vw, .8rem); line-height: calc(1.1em + 0.4rem); margin-bottom: .5rem}

h2.siteTitle	{
	font-weight: bold;
	padding-top: 6px;
}
/* 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;}
}

.flexContainerThumbnails{
    display: flex;
    flex-direction: row;
}

.thumb{
    margin-bottom: 20px;
    padding: 10px;
}
.thumb img {
    border: 1px solid #eee;
}
.thumbnailTitle {
    font-size: 14px;
    position: relative;
    width: 360px;
    /* height: auto; */
    text-align: center;
    height: 6.3em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thumbnailTitle h4 {
    padding-top: 20px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: bold;
    text-transform: capitalize;
}
.readMore a.button {
    border: 1px solid var(--color-readMore-a-border);
    background-color: var(--color-readMore-a-background);
    color: var(--color-readMore-a-border);
    text-align: center;
    padding: 10px 30px;
    border-radius: 0px;
    font-weight: 200;
    font-size: 1em;
    font-family: var(--font-readMore);
    text-shadow: .5px .5px .5px var(--color-readMore-a-border);
}
.readMore a.button:hover {
	text-shadow: .5px .5px .5px white;
}
.flexWrapper {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

section.subpageBannerImage {
    background-image: url('/wp-content/themes/witte/images/blue-butterfly-tree-5.jpg');
}

img	{
	box-shadow: 2px 2px 10px #0a1520;
}

img#toggle-button	{
	box-shadow: 1px 1px 10px #8987b0 ;

}

.page-about section.subpageBannerImage {
	background-image: url('/wp-content/themes/witte/images/blue-butterfly-tree-about.jpg');
}

.flexContainer.about	{
	width: min(1500px, 100%);
	margin: 0 auto;
}

li.menu-item-24	{
	display: none;
}


/*  FOOTER
___________________________________________ */

section.footer	{
	background-image: url('/wp-content/themes/witte/images/candles-footer2.jpg');
	background-image: url('/wp-content/themes/witte/images/energy-healing-hands.jpg');	
	background-position: center center;
	min-height: 700px;
}

section.footer:not(.page-home section.footer)	{
	display: none;
}

.container.flexContainer.contact {
    width: 90%;
    max-width: 60rem;
    min-height: 250px;
    padding: 2rem 0 1rem;
    margin: 1rem auto 2rem;
    background: linear-gradient(to right, rgb(38,14,17,0.6), rgba(255,255,255,0.2));
    flex-direction: column;

}

.container.flexContainer.contact .footerForm.form {
	padding-top: 2rem;
}

.footerForm.text h2	{
	text-align: center;
	color: #fff;
}

@media (min-width: 769px) {
	.container.flexContainer.contact {
		flex-direction: row;
	}
	.footerForm {
    	width: 50%;
	}
	
	.container.flexContainer.contact .footerForm {
    	padding: 2rem;
	}
}

div.wpcf7 {
	max-width: 100%;
}

.container.flexContainer.contact .footerForm h2.sectionHeader, .container.flexContainer.contact .footerForm.text p {
    width: 100%;
    max-width: 100%;
    display: block;
    padding: 0 1rem;
    margin: 2rem auto 0;
    line-height: calc(1.1em + 0.5rem);
}

section.footer input {
	background: rgba(255,255,255,0.8);
}
section.footer textarea {
	background: rgba(255,255,255,0.8);
}

p.copyright,
p.credit	{
	/*text-shadow: 1px 1px 1px #432c44;*/
}

section.postFooter	{
	background-color: #716468;
	text-align: center;
	background: linear-gradient(to top, rgb(38,14,17,0.8), rgba(38,14,17,0.4));

}

section.postFooter h2	{
	font-family: 'Times New Roman', serif;
	font-size: clamp(2rem, 2rem + .6vw, 2.5rem);
    line-height: calc(1.2em + 0.5rem);
}

section.postFooter h2 span.line1 {
	font-weight: bold;
}

section.postFooter h2 span.line2 {
	font-style: italic;
}

section.postFooter .finals {
	margin-top: 30px;
}

section.postFooter p.copyright,
section.postFooter  p.credit,
section.postFooter p.copyright a,
section.postFooter  p.credit a	{
	font-size: .8rem;
	color: #bbb;
	margin: 2px auto;
}


#audio-container {
    position: relative;
    width: 100%;
    margin-top: 20px;

}

#toggle-button {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.page-services img 	{
	box-shadow: none;
	border-radius: 50%;
}

.pageTitle {
	margin-bottom: 4vh;
	margin-top: -2vh;
	width: min(100%, 55rem);
}


.pageTitle a {
	color: var(--color-accent4);

}

#nav-single a	{
	color: rgb(38,14,17,0.8);
}

#nav-single a:hover	{
	color: rgb(38,14,17,1);
}

.footerForm strong a	{
	color: white;
}

.credit