/*
Theme Name: Nattercan
Author: Nattercan.com
Author URI: http://nattercan.com
Text Domain: nattercan
Description: A custom WordPress theme for Watson Industrial Solutions.
*/

:root {
	--primary-color: #004b8d;
	--secondary-color: #333e48;
	--text-color: #333e48;
	--light-gray: #eeefef;
	--dark-gray: #84858c;
}

html {
	position: relative;
	min-height: 100%;
	margin: 0;
}

body {
	margin: 0;
	color: var(--text-color);
	background-color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2em;
}

a, a * {
	transition: all 0.25s ease-in-out;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul {
	padding-left: 1em;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 6em;
}

.wpcf7 .row {
	margin-bottom: 12px;
}
.wpcf7 .row p {
	margin-top: 0;
	margin-bottom: 0;
}
.wpcf7 .row .field {
	font-weight: 500;
	width: 90px;
	line-height: 40px;
}
.wpcf7 input, .wpcf7 textarea {
	width: 300px;
}
.wpcf7 textarea {
	height: 100px;
}
.wpcf7 input[type=submit] {
	color: #888888;
	font-weight: 700;
	width: 100px;
}

button,
input,
select,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px;
	padding: 0.428571429rem;
}
button,
input {
	line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}

input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled], input[disabled] {
	cursor: default;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border-color: transparent;
}

body .two-column {
	display: grid;
	grid-template-columns: 1fr 400px;
	grid-gap: 3em;
	align-items: start;
}
body .two-column p:first-child {
	margin-top: 0;
}

.column-table {
	border-collapse: collapse;
	width: 100%;
}
.column-table td {
	border-left: 1px solid #ccc;
	padding: 0 10px;
	text-align: left;
}
.column-table td:last-child {
	border-right: 1px solid #ccc;
}
.column-table tr:first-child td {
	border-left: none;
	border-right: none;
}
.column-table td:first-child {
	border-left: none;
}

/* Header */
header .banner {
	background-color: var(--primary-color);
	background-image: url("/wp-content/themes/nattercan/header_bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top-bar {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.logos {
	display: flex;
	align-items: center;
}

.wis-logo {
	height: 150px;
	width: auto;
}

.micron-logo {
	height: 75px;
	width: auto;
}

.main-navigation {
	background-color: #377199;
	text-align: center;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-around;
}

.main-navigation li a {
	display: block;
	padding: 15px 20px;
	color: #bbb;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9em;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-ancestor a,
.main-navigation li.current-menu-item a {
	font-weight: bold;
	color: #fff;
}

.main-navigation li.current-menu-ancestor, .main-navigation li.current-menu-item {
	background-image: url(/wp-content/themes/nattercan/yellow_triangle.svg);
	background-size: 20px;
	background-position: bottom center;
	background-repeat: no-repeat;
}
.main-navigation li.current-menu-ancestor .sub-menu li.current-menu-item {
	background-image: none;
}

.main-navigation .menu-item-has-children { position: relative; }
.main-navigation .menu-item-has-children:hover ul.sub-menu, .main-navigation .menu-item-has-children ul.sub-menu:hover { display: flex; }
.main-navigation .sub-menu {
	font-weight: 700;
	display: none;
	flex-direction: column;
	position: absolute;
	z-index: 1000;
	background-color: #edd2d5;
	text-align: left;
}
.main-navigation .sub-menu li a {
	color: #000000;
}
.main-navigation .sub-menu li {
	transition: all 0.25s ease-in-out;
	border-bottom: 1px solid #cbb3b8;
}
.main-navigation .sub-menu li:last-child {
	border-bottom: none;
}
.main-navigation .sub-menu li.current-menu-item,
.main-navigation .sub-menu li:hover {
	background-color: #9a1a20;
}
.main-navigation .sub-menu li.current-menu-item a,
.main-navigation .sub-menu li:hover a {
	color: #ffffff;
}
.main-navigation .sub-menu a {
	color: #72585b;
	white-space: nowrap;
	text-transform: none;
}

.hamburger {
	display: none;
	width: 36px;
	height: 28px;
	padding: 6px;
	box-sizing: content-box;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: relative;
	z-index: 1100;
}
.hamburger span {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	transition: transform 200ms ease, opacity 200ms ease;
	width: 100%;
}
.hamburger .sr-only {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.carousel {
	display: flex;
	overflow-x: hidden;
	gap: 1em;
	padding: 0;
	white-space: nowrap;
}
.carousel img {
	position: relative;
	height: auto;
	max-height: 200px;
	box-shadow: 0 6px 6px rgba(0,0,0,0.5);
	transition: none;
}
.carousel .shrinking-image {
	transition: left 0.5s ease-in-out;
}

/* Hero Section */
.home .hero-section {
	background-image: url(/wp-content/themes/nattercan/home_hero.webp);
	background-size: cover;
	background-position-x: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
	padding-top: 1em;
	padding-bottom: 25em;
	margin-bottom: -5em;
}
.home .hero-section .hero-image {
	width: 100%;
	height: auto;
	opacity: 0.7;
}
.home .hero-section .carousel {
	width: 100%;
	height: 150px;
}
.home .strip_bench_exploded {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 65.9322%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/wp-content/themes/nattercan/Strip Bench_Exploded View.jpg");
	overflow: hidden;
}
.home .strip_bench_exploded h3 {
	margin: 1em;
	position: relative;
	z-index: 2;
}
.hotspot-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hotspots {
	width: 100%;
	height: 100%;
}
.hotspot {
	fill: #8da8df37;
	stroke: #8da8df;
	stroke-width: 0.1;
	cursor: pointer;
	transition: transform 0.2s, stroke-width 0.4s ease-in-out;
}
.strip_bench_exploded.in-view .hotspot {
	animation: hotspot-pulse 2s ease-in-out;
	animation-iteration-count: 1;
	will-change: fill-opacity, stroke-opacity, stroke-width;
}
.strip_bench_exploded .hotspot:hover {
	animation-play-state: paused;
	stroke-width: 0.3;
	cursor: pointer;
}
.hotspot-popup {
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0.5em;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	width: 400px;
	font-size: 0.7em;
	z-index: 10;
	cursor: pointer;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.hotspot-popup *:first-child {
	margin-top: 0;
}
.hotspot-popup .close-button {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 25px;
	height: 25px;
}
.hotspot-popup.show {
	visibility: visible;
	opacity: 1;
}
.hotspot-popup.hidden {
	visibility: hidden;
	opacity: 0;
}
.hotspot-popup img.popup-hero {
	float: right;
	width: 25%;
	height: auto;
	border-radius: 0.25em;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}
.hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Page Content */
.section-intro {
	text-align: left;
	padding: 40px 0;
}

.tooling-section {
	padding: 40px 0 5em;
}

.tooling-text ul {
	list-style-type: disc;
	padding-left: 20px;
}

.tooling-list {
	display: grid;
	grid-template-columns: 1fr 30%;
	grid-gap: 1em;
	flex-direction: column;
	align-items: center;
}

.tooling-text {
	padding-bottom: 3em;
}

.tooling-list img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* Footer */
footer {
	background-color: var(--secondary-color);
	color: #fff;
	padding: 20px 0;
	margin-top: 5em;
	font-size: 0.8em;
	text-align: center;
}
.footer-content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer-content .social-links {
	position: absolute;
	left: 0;
	top: 0;
}
.footer-content a:has(img) {
	border-bottom: 1px solid transparent;
}
.footer-content a {
	color: white;
	border-bottom: 1px solid white;
}
.footer-content a:hover {
	border-bottom: 1px solid transparent;
}
.footer-content .wis-logo {
	position: absolute;
	height: 200px;
	width: auto;
	bottom: 20%;
	right: 0;
}

/* contact us */
#page-contact-us {
	margin-top: 4em;
}


/* product */
.single-product .product-hero .images {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;       /* Fixed total width */
	gap: 10px;         /* Spacing between images */
	align-items: stretch; /* Crucial: Makes all items the same height */
	margin: 20px 0;
}

.images > div {
	/* Initial settings. JS will override the flex property. */
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}

.images img {
	/* Ensures image fills its assigned width and allows height to adjust */
	width: 100%;
	height: auto;
	display: block;
}

.images span {
	font-size: 0.8em;
	font-weight: bold;
}
.single-product .product-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3em;
	align-items: start;
}
.single-product .product-details > div > *:first-child {
	margin-top: 0;
}
.single-product .product-hero {
	margin-bottom: 4em;
}
.single-product .product-hero h1 {
	text-align: center;
	text-transform: uppercase;
	padding: 0.5em;
	line-height: 1.2em;
}

@media (max-width: 1024px) {
	.single-product .product-details {
		display: block;
	}
	.product-details iframe {
		max-width: 100%;
	}
	.single-product .product-hero {
		margin-bottom: 0;
	}
}
@media (max-width: 768px) {
	.top-bar {
		justify-content: center;
	}
	.wis-logo {
		max-width: 90%;
		height: auto;
		max-height: 150px;
	}
	.micron-logo {
		display: none;
	}
	.tooling-section {
		grid-template-columns: 1fr;
	}
	body .two-column {
		grid-template-columns: 1fr 200px;
	}
	.columns {
		display: flex;
		flex-direction: column;
		grid-gap: 0;
	}
	#page-contact-us {
		margin-top: 0;
	}
}
@media (max-width: 600px) {
	.footer-content .wis-logo { display: none; }
	.footer-content .social-links { display: none; }
	.home .strip_bench_exploded { display: none; }
	.home .hero-section.carousel img { display: none; }
	.home .hero-section { padding-bottom: 10em; }
	.home .tooling-text { padding-top: 2em; line-height: 1.3em; }
	.home .tooling-section { padding-bottom: 0; }
	body .two-column { display: inline; }
	.hamburger {
		background-color: #377199;
		padding-right: calc(100% - 42px);
		display: flex;
		flex-direction: column;
		grid-gap: 0.3em;
	}
	.main-navigation li.current-menu-ancestor, .main-navigation li.current-menu-item {
		background-image: none;
	}
	.main-navigation {
		position: relative;
		text-align: left;
	}
	.main-navigation ul {
		display: none;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
		width: 100%;
		box-sizing: border-box;
	}
	.main-navigation.expanded ul {
		display: flex;
	}
	.main-navigation li {
		width: 100%;
		box-sizing: border-box;
	}
	.main-navigation li a {
		display: block;
		padding: 12px 16px;
		color: #fff;
		background: transparent;
		border-top: 1px solid rgba(255,255,255,0.06);
		text-transform: uppercase;
		font-size: 0.9em;
	}
	.main-navigation li a:hover { background: rgba(255,255,255,0.04); }
	.main-navigation .sub-menu {
		position: static;
		display: none;
		flex-direction: column;
		background: rgba(255,255,255,0.03);
		margin: 0;
	}
	.main-navigation .menu-item-has-children.open > .sub-menu {
		display: flex;
	}
	.main-navigation .sub-menu li a {
		padding-left: 28px;
		text-transform: none;
		color: #fff;
		border-top: none;
	}
	.main-navigation.expanded + .hamburger,
	.hamburger.expanded {}
	.main-navigation.expanded ~ .hamburger span:nth-child(1),
	.main-navigation.expanded ~ .hamburger span:nth-child(3),
	.main-navigation.expanded + .hamburger span:nth-child(1),
	.main-navigation.expanded + .hamburger span:nth-child(3) {
		transform-origin: center;
	}
	.hamburger.is-open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.hamburger.is-open span:nth-child(2) {
		height: 1px;
		opacity: 0;
	}
	.hamburger.is-open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	.top-bar { padding-top: 28px; padding-bottom: 28px; }
	.main-navigation.expanded li.current-menu-item a { color: #bbb; }
	.main-navigation.expanded .sub-menu li.current-menu-item, .main-navigation .sub-menu li:hover { background-color: inherit; }
}

@keyframes hotspot-pulse {
	0% {
		stroke-opacity: 1;
		stroke-width: 0.1;
	}
	30% {
		stroke-opacity: 1;
		stroke-width: 0.1;
	}
	60% {
		stroke-opacity: 0.9;
		stroke-width: 0.3;
	}
	100% {
		stroke-opacity: 1;
		stroke-width: 0.1;
	}
}