/*
Theme Name: VCalm
Theme URI: 
Author: K Cox
Author URI: 
Description: 
Tags: 
Version: 2024.1
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.0
License: 
License URI: 
Text Domain: vcalm
*/

/* Reset Styles */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* 
 * General 
 */
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	line-height: 1.5em;
	background-color: #003300;
}
body > div {
	background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}
h1 {
	font-size: 2em;
	line-height: normal;
	margin: 0.5em 0;
}
h2 {
	font-size: 1.5em;
	line-height: normal;
	margin: 0.5em 0;
}
h3 {
	font-size: 1.3em;
	line-height: normal;
	margin: 0.5em 0;
}
h4 {
	font-size: 1em;
	line-height: normal;
	margin: 0.5em 0;
}
h5 {
	font-size: 0.8em;
	line-height: normal;
	margin: 0.5em 0;
}
h6 {
	font-size: 0.7em;
	line-height: normal;
	margin: 0.5em 0;
}
strong {
	font-weight: bold;
}
a, a * {
	text-decoration: none;
	color: #006600;
}
a:hover, 
a:hover *, 
p a {
	text-decoration: underline;
	color: #339933;
}
a img {
	opacity: 1;
	transition: opacity 1s;
}
a:hover img, 
a img:hover {
	opacity: 0.6;
	transition: opacity 1s;
}
.entry-content li {
	list-style-type: disc;
}
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1em;
	background: none;
}
#container {
	padding: 9em 1em 6em 1em;
}
#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0.5em;
	background-color: #ffffff;
}
#content .wc-block-grid .wc-block-grid__product {
	font-size: 1em;
}
.entry-content {
	max-width: 800px;
}
.entry-content p {
	margin-top: 1em;
	margin-bottom: 1em;
}
#vc-specifications p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.hidden-element {
	display: none;
}
table {
	display: block;
	width: 100%;
	overflow-x: scroll;
	border: solid #cccccc;
	border-collapse: separate;
}
table tbody {
	/* cursor: grab; */
}
table tbody:active {
	/* cursor: grabbing; */
}
table th {
	font-weight: bold;
}
table th:hover {
	cursor: pointer;
}
table tbody tr th, table tbody tr td {
	min-width: 8em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
table:not(.variations) th {
	background-color: #eeeeee;
	outline: solid 1px #cccccc;
}
table:not(.variations) tbody tr:nth-child(odd) {
	background-color: #eeeeee;
}

/* 
 * Header 
 */
/* Menu */
#secondary-menu {
	z-index: 110;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	background-color: #336633;
	color: #ffffff;
	text-align: right;
}
#secondary-menu * {
	color: #ffffff;
}
#secondary-menu ul {
	padding: 0 1em;
}
#secondary-menu li {
	display: inline-block;
	padding: 0.5em;
}
#secondary-menu a, 
#secondary-menu a * {
	font-weight: bold;
	text-decoration: none;
}
#secondary-menu a:hover, 
#secondary-menu a:hover * {
	text-decoration: underline;
}
nav ul.submenu {
	display: none;
	position: absolute;
	top: 100%;
	background-color: #336633;
	z-index: 1;
}
nav li:hover > ul.submenu, #secondary-menu .submenu li {
	display: block;
}
nav ul.submenu li {
	text-align: left;
}
#header {
	background-color: #003300;
	color: #ffffff;
	padding-top: 3em;
	z-index: 100;
}
#header a, 
#header a * {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}
#header a:hover, 
#header a:hover * {
	text-decoration: underline;
}
#header .custom-logo {
	max-width: 4em;
	max-height: 4em;
	width: auto;
	height: auto;
}
#header #branding, #header #menu {
	text-align: center;
}
#header #branding #site-title {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
}
#header #branding #site-title a {
	display: block;
}
#header #branding #site-title a span, 
#header #menu .menu-item span {
	padding: 0.5em;
}
#header #branding #site-title *, 
#header #menu * {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
#header #branding #site-description {
	display: inline-block;
	font-size: 0.7em;
}
#header > *, #secondary-menu > * {
	opacity: 0;
	max-height: 0;
	transition: max-height 0.2s, opacity 0.2s;
	overflow: hidden;
}
/* Mobile Menu */
@media only screen and (max-width: 600px) {
	#header:after {
		content: '';
		position: absolute;
		top: 1em;
		right: 1em;
		width: 2.5em;
		height: 0.5em;
		background-color: #eeeeee;
		border-radius: 0.5em;
		box-shadow: 0 0.75em 0 #eeeeee, 0 1.5em 0 #eeeeee;
	}
	#header #branding {
		position: absolute;
		top: 1em;
		left: 1em;
		opacity: 1;
		max-height: 2em;
		text-align: left;
	}
	#header #branding #site-title a {
		display: inline-block;
	}
	#header .custom-logo {
		max-height: 2em;
	}
	#header.mobile-menu {
		padding: 1em;
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}
	#header.mobile-menu > * {
		opacity: 1;
		max-height: none;
		overflow: auto;
	}
	#header.mobile-menu #menu ul, #header.mobile-menu #menu li {
		display: block;
	}
}
/* Desktop Menu */
@media only screen and (min-width: 600px) {
	#header > *, #secondary-menu > * {
		opacity: 1;
		max-height: none;
		overflow: auto;
	}
	#header {
		display: flex;
	}
	#header #branding, 
	#header #menu {
		flex: 1;
	}
	#header #branding {
		text-align: left;
	}
	#header #branding #site-description {
		position: absolute;
		left: 10em;
		top: 8em;
	}
	#header #menu {
		text-align: right;
	}
	#header #search {
		flex: auto;
	}
	#header li.menu-item {
		display: inline-block;
	}
	#header #branding #site-title a {
		display: inline-block;
	}
}
/* Search */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
	background: none;
}
.dgwt-wcas-suggestions-wrapp {
	border-radius: 0.5em;
}
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	line-height: inherit;
}
/* Login */
.modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
	color: #ffffff;
	background-color: #003300;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 1em;
	border-radius: 1em;
	width: 80%;
}
.close {
	color: #eeeeee;
	padding: 0.5em;
	float: right;
	font-size: 2em;
	font-weight: bold;
}
.close:hover, .close:focus {
	color: #cccccc;
	text-decoration: none;
	cursor: pointer;
}
.modal-content input {
	padding: 0.5em;
	border-radius: 1em;
	border: none;
	margin: 0.5em;
}
.modal-content input[type="submit"] {
	font-weight: bold;
}
.modal-columns {
	display: flex;
}
.modal-columns > div {
	flex: 1;
}

/* 
 * Body 
 */
#content {
	min-height: calc(100vh - 28em);
}
#content #main h2.category-title,
#content #main-content h2.category-title, 
#content h1.page-title {
	padding: 0.25em 1em;
	background-image: linear-gradient(to right, #eeeeee , transparent);
	border-radius: 2em;
}
#content #main-content h2.parent-category-title {
	margin-bottom: 1em;
}
.product-description article {
	margin: 1em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	flex-direction: column;
}
.product-description article > * {
	width: 100%;
}
.product-description video {
	margin: 1em;
}
.vc-img-expand {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 250, 250, 0.1);
}
.vc-img-expand img {
	position: absolute;
	top: 9em;
	left: 25vw;
	right: 0;
	margin: auto;
	width: auto !important;
	height: auto !important;
	max-width: 100vw;
	max-height: calc(100vh - 13em);
	background-color: #ffffff;
	border: 0.5em solid #336633;
	border-radius: 1em;
	opacity: 1 !important;
	z-index: -1;
}
#content input[type="checkbox"] {
	appearance: none;
	position: relative;
	width: 1em;
	height: 1em;
	background-color: #eeeeee;
	outline: 0.1em solid #666666;
	border-radius: 1em;
	margin-right: 0.5em;
}
#content input[type="checkbox"]::before {
	content: '';
	display: inline-block;
	position: relative;
	left: 0.1em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 1em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: 1em 1em #666666 inset;
}
#content input[type="checkbox"]:checked::before {
	transform: scale(1);
}
#content select:hover, #content input:hover, #content label:hover {
	cursor: pointer;
}
#content input[type="text"]:hover, #content input[type="tel"]:hover, #content input[type="email"]:hover {
	cursor: auto;
}
.vc-button {
	text-align: center;
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0 1em;
	border: 2px solid #006600;
	border-radius: 1em;
	background-color: #ffffff;
	-webkit-transition: background-color 120ms ease-in-out, border 120ms ease-in-out;
    -ms-transition: background-color 120ms ease-in-out, border 120ms ease-in-out;
    transition: background-color 120ms ease-in-out, border 120ms ease-in-out;
}
.vc-button:hover {
	border: 2px solid #eeeeee;
	background-color: #eeeeee;
}
.vc-button:active {
	border: 2px solid #cccccc;
	background-color: #cccccc;
}

/* Sidebar */
#vc-line-card, #vc-line-card * {
	color: #339933;
}
.current-page * {
	font-weight: bold;
}

/* 404 */
#content .post.not-found {
	text-align: center;
}
@media only screen and (min-width: 600px) {
	#content {
		display: flex;
		flex-direction: row-reverse;
	}
	#content #main-content, 
	#content #primary, 
	#content .post,
	#content .page {
		width: 75%;
	}
	
	/* Sidebar */
	#content #sidebar, #sidebar {
		width: 25%;
		position: fixed;
		top: 10em;
		left: 0;
		padding: 0 1em;
	}
	#container #sidebar ul.xoxo {
		background-color: rgba(255, 255, 255, 0.75);
		border-radius: 0.5em;
	}
	#container #sidebar ul.xoxo li, #sidebar ul.xoxo li {
		padding: 0.5em;
	}
	
	/* Flex Columns */
	.wp-block-columns {
		width: 100%;
	}
	.wp-block-group.is-vertical {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	/* 404 */
	#content .post.not-found {
		width: 50%;
		margin-right: 25%;
	}
}
@media only screen and (min-width: 768px) {
	.product-description article {
		flex-direction: row;
	}
	.product-description article > * {
		width: calc(33.33% - 1em);
	}
}

/* WooCommerce */
.woocommerce ul.products li.product .woocommerce-placeholder, 
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder,
#content .wc-block-grid__products .wc-block-grid__product-image img {
	border: none;
}
.woocommerce-product-details__short-description ul {
    margin: 1em;
}
.woocommerce-product-details__short-description ul li {
    font-weight: bold;
	line-height: 2em;
}
.woocommerce-product-details__short-description ul li::marker {
    content: '✓ ';
}
.woocommerce ul.products, 
.woocommerce-page ul.products {
	display: flex;
	flex-wrap: wrap;
}
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
	flex: 1;
	max-width: 33.33%;
	min-width: 33.33%;
	margin: 0;
	padding: 0.5em;
}
.wc-block-grid.has-6-columns li.wc-block-grid__product {
	max-width: 33.33%;
}
#content .summary {
	margin-right: 1em;
}
.vc-configurator select {
	width: 100%;
	padding: 0.5em;
	border-radius: 0.5em;
}
#content .summary .price {
	margin: 0.5em 0;
}
#content .product-description ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	break-before: avoid;
	break-inside: avoid;
}
#content .product-description ul li {
	padding-left: 1em;
}
#content .vc-specifications {
	/* column-count: 3; */
}
.woocommerce-product-gallery {
	z-index: 99;
}
.woocommerce-product-components label {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
}
@media only screen and (min-width: 600px) {
	.woocommerce ul.products li.product, 
	.woocommerce-page ul.products li.product {
		max-width: 16.66%;
		min-width: 16.66%;
	}
	.wc-block-grid.has-6-columns li.wc-block-grid__product {
		max-width: 24em;
	}
}
@media only screen and (min-width: 768px) {
	.woocommerce ul.products li.product, 
	.woocommerce-page ul.products li.product {
		padding: 1em;
	}
	.wc-block-grid.has-6-columns li.wc-block-grid__product {
		max-width: 24em;
	}
	div.vc-configurator {
		display: inline-block;
		max-height: 100%;
	}
	.woocommerce div.product div.vc-configurator > div.images.woocommerce-product-gallery {
		position: sticky;
		top: 10em;
	}
}

/* 
 * Footer 
 */
#footer {
	z-index: 100;
}
#footer, #footer * {
	text-align: center;
	background-color: #003300;
	color: #ffffff;
}
#copyright {
	font-size: 0.8em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#contact {
	padding-top: 1em;
	padding-bottom: 5em;
	color: #ffffff;
	background-color: #003300;
}
.contact-info p {
	margin: 0.5em;
	text-align: center;
}
@media only screen and (min-width: 768px) {
	.contact-info {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		flex-direction: row;
	}
	.contact-info > * {
		width: calc(33.33% - 1em);
	}
}