/*
Theme Name: MW Paints
Theme URI: mwpaints.com
Author: Matt Whetherly
Author URI: mwpaints.com
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/ 

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--black:#111111;
	--grey:#222222;
	--grey-light:#dedede;
}

* { box-sizing: border-box; }
/* ===== GENERAL ===== */
html, body { width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;background:var(--black);color:var(--grey-light);font-weight:300;font-family:"Jost", sans-serif; }

img { display:block; }

.container { width:100%;max-width:1400px;margin:0 auto;padding:0 1rem; }
.small-container { width:100%;max-width:840px;margin:0 auto; }

h1,h2,h3,h4,h5,h6 { font-weight:300 }

p { font-weight:300; }




/* ===== NAV MENU ===== */
header { z-index:999;padding:30px 0px;display:flex;justify-content:space-between;align-items:flex-start;position:relative;top:0;left:0;width:100%; }
a.logo { letter-spacing:0.1rem;display:inline-block;color:#fff;text-transform:uppercase;text-decoration:none;font-weight:500;font-size:1.25rem;position:relative;padding-bottom:5px;margin-bottom:10px; }
a.logo span { opacity:0.8;font-weight:200; }
a.logo span.subtitle { display:block;font-weight:200;opacity:0.6;font-size:0.8rem; }
/*a.logo::after { content:"";display:block;height:1px;width:150%;background:#fff;position:absolute;bottom:0;left:-25%;opacity:0.3; }*/
nav { display:flex;align-items:center;gap:1rem; }
#navmenu .menu { list-style: none;padding:0;margin:0;display:flex;flex-wrap:wrap;width:100%;z-index:100;position:relative;justify-content:center;gap:1rem; }
#navmenu .menu a { text-decoration:none;color:#fff;font-weight:200;letter-spacing:0.05rem; }
#navmenu .menu a:hover { opacity:0.5; }
#navmenu { display:flex;gap:1rem;align-items:center; }
a.social { display:inline-block;position:relative;z-index:2; }
a.social img { width:20px;height:20px;object-fit:contain; }
a.social:hover { opacity:0.6; }

#navmenu .menu li { display:table-cell;text-align:center;padding:10px;position:relative; }
#navmenu .sub-menu { display:none;position:absolute;top:100%;left:0;background:#000;list-style: none;padding:0 10px;margin:0; }
#navmenu .sub-menu li { display:inline-block;width:100%; }
#navmenu .menu li:hover .sub-menu { display:inline-block; }

.mobile-toggle { width:30px;height:20px;display:none; }
.toggle-bar { width:100%;height:2px;margin-bottom:5px;background:var(--grey-light); }
.mobile-toggle.active .toggle-bar { background:#666; }

footer { background:#000;padding:3rem 0 5rem;margin-top:3rem; }
footer .menu { list-style: none;padding:0;margin:0; }
footer .menu a { color:#fff;opacity:0.5; }

/* ===== MODULES ===== */
.module { display:block; }


.header-banner { width:100%;height:clamp(250px,25vw,500px);margin-top:-150px;position:relative;margin-bottom:4rem; }
.header-banner img { width:100%;height:100%;object-fit:cover;object-position:top; }
.header-banner::after { content:"";display:block;background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 100%);opacity:1;position:absolute;top:0;left:0;width:100%;height:100%; }

.masonry { margin-top:2rem;margin-bottom:4rem;column-count: 4;column-gap: 1rem; }
.item {width: 100%;position:relative;display:inline-block;margin: 0 0 1rem; }
.item a { position:relative;color:#fff;text-decoration:none; }
.grid-title { padding:30px;transition:opacity 0.3s ease-in-out;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);font-size:1.5rem;display:flex;align-items:center;justify-content:center;font-weight:400;text-transform:uppercase; }
.grid-title span { display:block;text-transform:none;opacity:0.5;font-size:1rem; }
.item:hover .grid-title { opacity:1; }

.intro { width:100%;max-width:750px; }
.item img { width:100%;display:block; }
.blog-title { margin:5px 0 0; }
.masonry.blog { gap:2rem; }
.blog .item { margin-bottom:2rem; }
.blog .item p { margin-top:5px; }
.blog .item img { display:block; }
.nav-links { text-align:center;width:100%;padding:0 0 3rem; }
.nav-links a { color:var(--grey-light);display:inline-block;padding:5px; }
.nav-links a:hover { opacity:0.5; }
.screen-reader-text { display:none; }


.wp-block-media-text,
.wp-block-gallery,
.wp-block-image  { padding:1rem 0; }

 .wp-block-gallery .wp-block-image { padding:0; }
article { padding:0 0 5rem; }

.slick-slide img { aspect-ratio:1/1;object-fit:contain; }


@media only screen and (max-width: 768px) {
  .masonry {column-count: 3;column-gap:0.5rem;}
  .grid-title { font-size:1rem; }
}

@media only screen and (max-width: 560px) {
  .masonry {
    column-count: 2;
  }
}



@media(max-width:768px){
	/* Move this to it's own query if it needs to break down earlier */
		.mobile-toggle { display:inline-block;position:relative;z-index:2; }

		#navmenu { transition:left 0.5s ease-in-out;display:block;position:fixed;top:0;left:100%;background:#000;width:100%;height:100%; }
		#navmenu.active { left:0; }
		.menu-main-menu-container { height:100%;display:flex;align-items:center; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0; }
		#navmenu .menu a { display:inline-block;width:100%;padding:10px;font-size:clamp(1rem,5vw,3rem); }
		#navmenu .sub-menu { display: none;width:100%;position:static; }
		#navmenu .menu li:hover .sub-menu { display:none; }
	/* ---------------------- */
}


@media (min-width: 1024px) {

}

@media (max-width: 768px) {

}