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

@import url('https://fonts.googleapis.com/css2?family=Charm&family=Open+Sans:wght@300;400;500;600&display=swap');

@font-face {
    font-family: 'Stone';
    src: url('./fonts/StoneSansMedium.woff2') format('woff2'),
        url('./fonts/StoneSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* HTML / FONTS
------------------------------------------------------------------------------------*/
html {
  font-size: 24px;
}
@media (max-width: 2048px) {
  html { font-size: 17px;}
}

@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}
/* From here on, use rems (or % or vh) for divs and ems for font-sizes within divs) */

html .clamp {font-size: 16px;}


/* PALETTE / VARIABLES
*****************************************/
:root {
	--color: #FFF;
	--color-a: #777;
	--color-a-button: BLACK;
	--color-a-button-background: WHITE;
	--color-a-button-border: WHITE;
	--color-a-button-hover: WHITE;
	--color-a-button-background-border-hover: BLACK;
	--color-a-button-border-hover: BLACK;
	--color-a-hover: #780009;  /* deep red1 */
	--color-accent1: #99ffcc; /* pale green */
	--color-accent2: #9accfd; /* pale blue */
	--color-accent3: #82010a;  /* deep red */
	--color-background: BLACK;
	--color-border-subtle: TRANSPARENT;
	--color-current-page-menu-item: WHITE;
	--color-editLink: #FFFFFF;
	--color-footer: #CCC;
	--color-footer-a: #99ffcc;
	--color-footer-a-hover:#FFF;
	--color-footer-background: #000000;
	--color-footer-border: #888;
	--color-footer-credit: #666;
	--color-footer-credit-a:#777;
	--color-footer-credit-a-hover:#FFF;
	--color-form-input-border: TRANSPARENT;
	--color-form-button-background: TRANSPARENT;
	--color-form-button-text: TRANSPARENT;
	--color-form-button-bg-hover: TRANSPARENT;
	--color-mainNav-text-link: #99ffcc;
	--color-mainNav-text-link-hover: #780009;  /* deep red */
	--color-mob-menu-li-background-color:rgba(0,0,0,0.7);
	--color-mob-menu-li-border: TRANSPARENT;
	--color-navbar-wrapper-background: TRANSPARENT;
	--color-outline: #DDD; /* tabbing */
	--color-pageTitle: #FFFFFF; 
	--color-projectTitle: #CCCCCC;
	--color-readMore-a: #666666;
	--color-readMore-a-background: #EEE;
	--color-readMore-a-border: #EEE;
	--color-readMore-a-hover: #616161!important;
	--color-readMore-a-hover-background: #CCC;
	--color-readMore-a-hover-border: #CCC;
	--color-current-menu-item: #9accfd;
	--color-siteTitle: #9accfd;
	--color-siteTitle-hover: #9accfd;
	--color-siteTitle-home: #99ffcc;
	--color-siteTitle-hover-home: #99ffcc;
	--color-social-icon: #cccccc;
	--color-social-icon-hover: #99ffcc;
	--color-sub-menu-li-background: rgba(238,238,238,0.98);
	--color-sub-menu-li-background-hover: rgba(243,243,243,0.98);
	--color-sub-menu-li-border: rgba(209, 209,209,0.25);
	--color-wpcf7-sent: GREY; /* GREY */


	
	--font-body: 'Open Sans', sans-serif; 
	--font-nav:   'Stone', 'Open Sans', sans-serif;
	--font-pageTitle:  'Stone', 'Open Sans', sans-serif;
	--font-quote: Baskerville, 'Palatino Linotype','Century Schoolbook L', 'Times New Roman', serif;
	--font-readMore:  'Stone', 'Open Sans', sans-serif;
	--font-siteTitle:  'Lucida Handwriting','Sriracha', 'Kaushan Script', 'Stone', 'Open Sans', sans-serif;
}
/* Google's 'Mukta Malar' was closest alt to Stone */ 

/* 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; color: green;background-color: #fff;}

@media (max-width: 992px) {p.screensize	{color: orange;}}
@media (max-width: 768px) {p.screensize	{color: red;}}


.navbar-wrapper .container	{
	width: 92%;
}

.navbar-default.flexContainer	{
	flex-direction: column;
}

.siteTitle.flexItem,
.mainNavigation.flexItem {
	margin: 0 auto;
	text-align: center;
	width: 92%;
}

ul.navbar-nav.flexContainer {
	justify-content: center;
	gap: 2px 30px;
	margin: 0 auto;
}

.menu-main-navigation-container	{
	max-width: 100%;
	margin: 0 auto;
}

.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a,
.navbar-nav > li {
	padding: 0;
	font-weight: bold;
	color: var(--color-accent2);
}


.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a,
.navbar-nav > li a,
.siteTitle	h1 {
	text-shadow: 1px 1px 1px BLACK;
}

.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a:hover,
.navbar-nav > li a:hover	{
	color: var(--color-mainNav-text-link);
	text-shadow: 3px 3px 5px BLACK;
	text-decoration: underline;
}

h1,
h2.pageTitle	{
	font-family: var(--font-siteTitle);
	text-transform: uppercase;
}

h2.pageTitle {
	font-family: var(--font-pageTitle);
}

.siteTitle .siteSlogan	{
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 1.6em;

}
  
  
@media only screen and (min-width: 501px)	{
	.pageTitle	{
		display: none;
	}
}

@media only screen and (min-width: 501px)	{
	.menu-main-navigation-container ul.nav.navbar-nav>li.current_page_item>a,
	.menu-main-navigation-container ul.nav.navbar-nav>li.current_page_item>a:hover		{
		color: var(--color-current-page-menu-item);
		text-decoration: none;
	}
}

.mainContent ul.gallery	{padding: 0;}