/*
  Theme Name: mc2026
  Version: 1.0.0
  Author: Tony Scialdone of Straight Street Design
  Author URI: https://straightstreetdesign.com/
*/


/* RESET */
*, *::before, *::after { 
	margin: 0; padding: 0; box-sizing: border-box; max-width: 100%; background-clip: padding-box; background-repeat: no-repeat; line-height: calc(1em + 0.5rem); overscroll-behavior: contain; }


:root {

	--dark:		#000000;
	--light:	#9a999a;
	--medium:	#005B56;
	--grey:		#222;
	--blue:		#03a9f4;
	--hover:	all .2s ease-in-out;
	--scale:	scale(1.1);
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	hanging-punctuation: first allow-end last;
	tab-size: 2;
	word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: #15A7F0 #000;
}

::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { min-height: 100px; background: #15A7F0; border-radius: 10px; }

body:has(.header-home) {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

body { 
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font: normal 1rem/1.5 sans-serif;
	color: #222;
	hanging-punctuation: first last;
	text-rendering: optimizeSpeed;
	scroll-behavior: smooth;
}

.flex { display: flex; }
.fr { flex-direction: row; }
.fc { flex-direction: column; }
.jc { justify-content: center; }
.ja { justify-content: space-around; }
.jb { justify-content: space-between; }
.je { justify-content: flex-end; }
.as { align-items: flex-start; }
.ac { align-items: center; }
.ae { align-items: flex-end; }
.astretch { align-items: stretch; }
.fw { flex-wrap: wrap; }
.gap1 { gap: 1rem; }
.gap2 { gap: 2rem; } 

.narrow {
    margin: 0 auto;
    width: 100%; max-width: 1200px;
}

header.home-header {
  background-color: black;
  color: #fff;
  position: relative; /* Needed for positioning hamburger/mobile menu */
}

header {
  background-color: #fff;
  color: #222;
  position: relative; /* Needed for positioning hamburger/mobile menu */
}

header:not(.home-header) .hamburger-menu .icon-bar {
    background-color: #222;
}

hgroup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 1rem;
}

hgroup h1 {
	padding-top: 1rem; 
	font: 300 3rem/1.5 'Open Sans', sans-serif;
}

hgroup h2 {
	font-weight: 300; 
	font-size: 1.5rem;
}

.page-174 h1:not(hgroup h1) {
	margin: 0;
	padding: 0;
	font-size: 0;
}

h1:not(.page-174 h1) {
	margin: 0;
	padding: 1rem;
	background-color: var(--dark);
	color: #fff; 
	font-weight: 300;
	font-size: 3.5rem;
	text-align: center; 
}

.page-287 .wp-block-column { margin: 4rem 0; }

h2 {
	margin: 1rem 0 2rem;
	font-size: 2rem; 
	font-weight: 300; 
}

main {
	padding: 2rem 1rem;	
}

.triplets > div {
	width: 300px; max-width: 100%;
	text-align: center;
}

.triplets p[class*="icon"] {
	margin: 0 auto;
	width: 120px;
}


.home-imgs img { height: auto; width: 100%; max-width: 580px; }

.btns {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin-bottom: 2rem;
}

.btns a {
	padding: .5rem 1rem;
	background-color: var(--blue);
	background-clip: initial;
	font-size: .9rem;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--blue);
	border-radius: 2rem;
}

.btns a.ghost-btn {
	background-color: transparent;
	border: 2px solid;
}

.triplets {
	margin-bottom: 6rem;
}

.triplets p[class*="icon"] a {
	display: flex; 
	justify-content: center;
	align-items: center;
	height: 120px;
	width: 120px;
	background-color: var(--blue);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 70px;
	text-indent: -999999px;
	border-radius: 100%;
}

.triplets h2 {
	font-weight: 300;
	font-size: 2rem;
}

.icon-vibration a 	{ background-image: url(/wp-content/themes/mc2026/images/vibration.svg); }
.icon-alignment a	{ background-image: url(/wp-content/themes/mc2026/images/alignment.svg); }
.icon-balancing a	{ background-image: url(/wp-content/themes/mc2026/images/balancing.svg); }

.font15,
.btns.font15 a { font-size: 1.5rem; }
p { margin-bottom: 1.5rem; }
p.bar { 
	margin: 0 auto 1rem;
	padding: 1rem;
	width: fit-content;
	background-color: #222; 
	color: #fff; 
	text-align: center;
	border-radius: 2rem; 
}
p.width70 { margin: 0 auto 1.5rem; width: min(70%, 100%); }
article ul { margin: 0 1rem 2rem 3rem; }
.hide { display: none; }
.center { text-align: center; }

.height294 img { display: block; margin: 0 auto; height: 294px; width: auto; }
.img-center img { display: block; margin: 0 auto; }

#menu-topnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  padding: 1rem 3rem 1rem 1rem;
  list-style-type: none;
}

.home-header #menu-topnav a {
  color: #fff;
}

#menu-topnav > li:is(.current-menu-item):not(.submenu a),
li:has(.current-menu-item) {
	border-bottom: 2px solid var(--blue);
}

#menu-topnav a {
  font: bold .9rem/.9 'Open Sans', sans-serif;
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-item-has-children > a::after {
    content: "\25BE";
    display: inline-block; opacity: .9;
    position: relative; top: -3px; left: 1px;
    font-size: 1rem;
    color: inherit;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

.page-header .sub-menu {
	background-color: #ddd;
}

.page-header .sub-menu .sub-menu {
	background-color: #ccc;
}

.sub-menu {
  display: none;
  position: absolute;
  background-color: #444;
  padding: 1rem;
  list-style-type: none;
  z-index: 10;
}

.home-header .sub-menu .sub-menu {
	margin-left: 0; 
	background-color: #666;
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

.sub-menu .menu-item a {
    color: #fff;
}

ul.no-bullets {
	list-style: none; 
}

.link-list a {
	margin: 0;
	padding: 1rem 1.5rem;
	background-color: var(--blue);
	font-size: 1.25rem;
	color: #fff;
	text-decoration: none;
	border-radius: 2rem;
}


footer {
	margin-top: 4rem;
	padding: 2rem;
	background-color: var(--dark);
	color: #fff;
}

.copy {
    margin: 0;
	font: normal .8rem/1.5 'Open Sans', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.copy a {
	color: #fff !important;
	text-decoration: none;
}



/* Hamburger Menu & Mobile Nav */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.hamburger-menu:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.hamburger-menu .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.2s;
}

body.nav-open .hamburger-menu .icon-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.nav-open .hamburger-menu .icon-bar:nth-child(2) {
    opacity: 0;
}

body.nav-open .hamburger-menu .icon-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 850px) {

} 


@media (max-width: 850px) {
    #menu-topnav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: black;
        padding: 1rem;
    }

    body.nav-open #menu-topnav {
        display: flex;
		gap: 1rem;
    }

    .hamburger-menu {
        display: block;
    }

    .sub-menu {
        position: static;
        background: none;
        padding: 0.5rem 0 0.5rem 1rem;
        display: block; /* Show submenus by default on mobile */
        width: 100%;
    }
.home-header .sub-menu .sub-menu { background-color: transparent; }
}

@media (max-width: 480px) {
    hgroup h1 { font-size: 2rem; }
    hgroup h2 { font-size: 1.2rem; }
}

/* OVERRIDE */

#mc .wp-container-core-columns-is-layout-9d6595d7 { flex-wrap: wrap !important; }
#mc .wp-block-columns { flex-wrap: wrap !important; }
#mc .woocommerce-result-count,
#mc .woocommerce-ordering,
#mc .woocommerce-product-gallery__trigger { display: none; }

#mc .woocommerce.columns-4 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
}

#mc .products.columns-4 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

#mc .woocommerce ul.products li.product, 
#mc .woocommerce-page ul.products li.product {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%; max-width: 300px; 
}

#mc h2.woocommerce-loop-product__title {
	padding: .25rem .5rem;
	background-color: var(--blue);
	color: #fff !important;
	text-align: center;
	border-radius: 13px;
}

#mc .woocommerce ul.products li.product .price, 
.price {
    display: block;
    font-weight: 400;
    margin-bottom: .5em;
    font-size: .857em;
    text-align: center;
    margin: .5rem;
    font-size: 1rem;
}

#mc .woocommerce ul.products li.product .button {
    display: block;
    margin: 1em auto;
	text-align: center;
}

main.index.product {
	margin: 0 auto;
	padding: 1rem;
	width: 100%; max-width: 456px;
}

#mc .woocommerce-product-gallery__image a {
    pointer-events: none;
}

input[type="number"] {
	margin: 0 0 .25rem;
	padding: .25rem;
}

#mc button[name="add-to-cart"] {
	display: inline-block; 
	margin: 0; 
	padding: .125rem .5rem;
	background-color: var(--blue);
	color: #fff;
	text-transform: uppercase;
	border: 0; 
	border-radius: 7px;
}