/*
Theme Name: Mech Tech Theme
Theme URI: https://mechtech.com
Author: Mech Tech
Author URI: https://mechtech.com
Description: A custom WordPress classic theme built with Tailwind CSS v4.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mech-tech
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   WordPress Dynamic Navigation Menu Styles
   ========================================================================== */

/* Main Header Navigation Container */
.main-navigation ul,
.main-navigation .nav-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li > a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4a5568;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
}

.main-navigation li > a:hover,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current > a {
	color: #0f4c81;
	background-color: rgba(15, 76, 129, 0.06);
}

/* Submenu Dropdown Container */
.main-navigation li.menu-item-has-children > a,
.main-navigation li.nav-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.nav-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: 0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.nav-item-has-children:hover > a::after {
	transform: rotate(225deg) translateY(-2px);
}

.main-navigation li.menu-item-has-children > .sub-menu,
.main-navigation li.nav-item-has-children > .sub-menu,
.main-navigation li.menu-item-has-children > .nav-dropdown,
.main-navigation li.nav-item-has-children > .nav-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background-color: #ffffff;
	border-radius: 0.75rem;
	padding: 0.5rem;
	min-width: 14rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.nav-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:hover > .nav-dropdown,
.main-navigation li.nav-item-has-children:hover > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.main-navigation li.menu-item-has-children > .sub-menu li,
.main-navigation li.nav-item-has-children > .sub-menu li {
	width: 100%;
}

.main-navigation li.menu-item-has-children > .sub-menu li a,
.main-navigation li.nav-item-has-children > .sub-menu li a {
	display: block;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	color: #4a5568;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.main-navigation li.menu-item-has-children > .sub-menu li a:hover,
.main-navigation li.nav-item-has-children > .sub-menu li a:hover {
	color: #0f4c81;
	background-color: #f5f7fa;
}

/* Mobile Drawer Menu */
.mobile-menu-overlay .mobile-menu-list,
.mobile-menu-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-overlay li a {
	display: block;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	color: #1b1b1f;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
}

.mobile-menu-overlay li a:hover {
	color: #0f4c81;
	background-color: #f5f7fa;
}

.mobile-menu-overlay li.menu-item-has-children > .sub-menu {
	list-style: none;
	padding-left: 1rem;
	margin-top: 0.25rem;
}

.mobile-menu-overlay li.menu-item-has-children > .sub-menu li a {
	font-size: 0.875rem;
	color: #5f6b7a;
}

/* Footer Menus */
.footer-main .footer-links,
.footer-main ul.menu,
.footer-main div > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-main .footer-links li,
.footer-main ul.menu li,
.footer-main div > ul li {
	margin-bottom: 0.75rem;
	list-style: none;
}

.footer-main .footer-links li a,
.footer-main ul.menu li a,
.footer-main div > ul li a,
.footer-links a {
	padding: 0 !important;
	margin: 0 !important;
	display: inline-block !important;
	color: rgba(255, 255, 255, 0.45) !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	background: transparent !important;
}

.footer-main .footer-links li a:hover,
.footer-main ul.menu li a:hover,
.footer-main div > ul li a:hover,
.footer-links a:hover {
	color: #f57c00 !important;
	background: transparent !important;
}

/* Footer Grid Column Spacing Fix */
.footer-main .footer-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2.5rem;
}

@media (min-width: 640px) {
	.footer-main .footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.footer-main .footer-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2rem;
	}
	.footer-main .footer-grid > div:nth-child(1) { grid-column: span 4 / span 4; }
	.footer-main .footer-grid > div:nth-child(2) { grid-column: span 2 / span 2; }
	.footer-main .footer-grid > div:nth-child(3) { grid-column: span 3 / span 3; }
	.footer-main .footer-grid > div:nth-child(4) { grid-column: span 3 / span 3; }
}

/* Floating Back to Top Button */
.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 99;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background-color: #f57c00;
	color: #ffffff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(245, 124, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all 0.3s ease;
}

.back-to-top.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background-color: #e06800;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(245, 124, 0, 0.5);
}

/* ==========================================================================
   Contact Form Validation Styles
   ========================================================================== */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
	border-color: #ef4444 !important;
	background-color: #fef2f2 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
	border-color: #22c55e !important;
	background-color: #f0fdf4 !important;
}

.field-error-text {
	font-size: 0.75rem;
	color: #dc2626;
	margin-top: 0.35rem;
	font-weight: 500;
	display: block;
	animation: fadeInError 0.2s ease-in-out;
}

@keyframes fadeInError {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.form-status-banner.status-error {
	background-color: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.form-status-banner.status-success {
	background-color: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}