/**
 * Multitrade FSE - Frontend Theme Styles
 *
 * Additional styles beyond theme.json capabilities.
 */

/* ============================================
   Base Overrides
   ============================================ */

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Link transitions */
a {
	transition: color 0.2s ease;
}

/* ============================================
   Header
   ============================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Custom logo styling - convert white PNG to Multitrade blue */
.site-header .custom-logo-link img,
.site-header .wp-block-site-logo img,
.mt-header-logo img {
	/* Convert white to Multitrade blue (#12296B) - dark navy */
	filter: brightness(0) saturate(100%) invert(12%) sepia(50%) saturate(2500%) hue-rotate(210deg) brightness(95%) contrast(95%);
	max-height: 55px;
	width: auto;
}

.mt-header-logo .wp-block-image {
	margin: 0;
}

.mt-header-logo .wp-block-image img {
	width: 300px !important;
	max-width: 300px !important;
}

/* ============================================
   Navigation Styling
   ============================================ */

.site-header .wp-block-navigation {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.site-header .wp-block-navigation-item__content {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.6rem 1rem;
	color: #333;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.2s ease;
	position: relative;
}

.site-header .wp-block-navigation-item__content:hover {
	color: #12296B;
	background: rgba(18, 41, 107, 0.08);
}

/* Active state underline effect */
.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: #12296B;
	font-weight: 600;
}

.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 1rem;
	right: 1rem;
	height: 2px;
	background: #12296B;
	border-radius: 1px;
}

/* Submenu dropdown styling */
.site-header .wp-block-navigation__submenu-container {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 0.5rem;
	min-width: 220px;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	border-radius: 4px;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(18, 41, 107, 0.06);
}

/* Submenu toggle button */
.site-header .wp-block-navigation-submenu__toggle {
	padding: 0.6rem 0.5rem 0.6rem 1rem;
	gap: 0.25rem;
}

.site-header .wp-block-navigation-submenu__toggle svg {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.site-header .wp-block-navigation-submenu:hover .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/* Mobile navigation */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.75rem 1rem;
	font-size: 1.1rem;
}

/* ============================================
   Hero Section
   ============================================ */

.hero-section .wp-block-cover__inner-container {
	padding: 2rem;
}

.hero-section .wp-block-search__input {
	padding: 16px 20px !important;
	font-size: 1.1rem !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero-section .wp-block-search__button {
	padding: 16px 24px !important;
	background: var(--wp--preset--color--secondary) !important;
	font-weight: 600;
}

.hero-section .wp-block-search__button:hover {
	background: var(--wp--preset--color--secondary-dark) !important;
}

/* ============================================
   Category Icons
   ============================================ */

.category-icons-section .category-icon {
	text-decoration: none;
	transition: transform 0.2s ease;
}

.category-icons-section .category-icon:hover {
	transform: translateY(-4px);
}

.category-icons-section .wp-block-image {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
	transition: box-shadow 0.2s ease;
}

.category-icons-section .wp-block-image:hover {
	box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

.category-icons-section .wp-block-image img {
	filter: brightness(0) invert(1);
	max-width: 50%;
	max-height: 50%;
	object-fit: contain;
}

/* ============================================
   Category Cards
   ============================================ */

.category-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.category-card img {
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* ============================================
   Product Cards
   ============================================ */

.product-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.product-card .wp-block-woocommerce-product-image img {
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--wp--preset--color--light);
}

/* ============================================
   Inquiry Form
   ============================================ */

.mt-inquiry-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mt-inquiry-form .mt-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mt-inquiry-form label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--dark);
}

.mt-inquiry-form input,
.mt-inquiry-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--gray-light);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mt-inquiry-form input:focus,
.mt-inquiry-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.mt-inquiry-form .mt-submit-btn {
	background: var(--wp--preset--color--secondary);
	color: white;
	border: none;
	padding: 14px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	margin-top: 0.5rem;
}

.mt-inquiry-form .mt-submit-btn:hover {
	background: var(--wp--preset--color--secondary-dark);
	transform: translateY(-1px);
}

.mt-inquiry-form .mt-submit-btn:active {
	transform: translateY(0);
}

.mt-inquiry-form .mt-form-message {
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.95rem;
}

.mt-inquiry-form .mt-form-message.success {
	background: rgba(40, 167, 69, 0.1);
	color: var(--wp--preset--color--success);
	border: 1px solid var(--wp--preset--color--success);
}

.mt-inquiry-form .mt-form-message.error {
	background: rgba(220, 53, 69, 0.1);
	color: #dc3545;
	border: 1px solid #dc3545;
}

/* ============================================
   Brands Section
   ============================================ */

.brands-section .brand-logo {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.brands-section .brand-logo:hover {
	opacity: 1;
}

/* ============================================
   Buttons
   ============================================ */

.wp-block-button__link {
	transition: all 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ============================================
   Footer
   ============================================ */

.site-footer a {
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: white !important;
}

/* ============================================
   WooCommerce Overrides
   ============================================ */

/* Hide prices (handled by PHP but CSS backup) */
.woocommerce-Price-amount {
	display: none;
}

/* Product tabs */
.woocommerce-tabs .tabs {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	display: flex;
	gap: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--light);
}

.woocommerce-tabs .tabs li a {
	display: block;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--gray);
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
	.hero-section .wp-block-heading {
		font-size: 2rem !important;
	}

	.category-icons-section .wp-block-group {
		gap: 1.5rem !important;
	}

	.site-header .wp-block-group {
		flex-direction: column;
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.hero-section .wp-block-heading {
		font-size: 1.5rem !important;
	}

	.wp-block-search__input {
		padding: 12px !important;
	}
}

/* ============================================
   Archive/Category Title Styles
   ============================================ */

.archive .page-title,
.woocommerce-products-header .woocommerce-products-header__title,
.woocommerce-products-header h1,
.tax-product_cat h1.page-title,
h1.woocommerce-products-header__title {
	font-size: 2.25rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--dark) !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 0.75rem !important;
	line-height: 1.2 !important;
}

.woocommerce-products-header .term-description,
.archive .archive-description {
	font-size: 1.05rem;
	color: var(--wp--preset--color--gray);
	line-height: 1.7;
	max-width: 800px;
	margin-bottom: 1.5rem;
}

/* ============================================
   Category Template Styles
   ============================================ */

/* Base product grid */
.mt-product-grid {
	margin-top: 1.5rem;
}

.mt-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mt-product-card a {
	text-decoration: none;
}

/* Technical Template - Spec-heavy (Wheels & Castors) */
.mt-template-technical .mt-product-card {
	border: 1px solid var(--wp--preset--color--gray-light, #e5e7eb);
}

.mt-template-technical .mt-product-card:hover {
	border-color: var(--wp--preset--color--primary, #0066cc);
}

.mt-template-technical .mt-product-card div[style*="font-family:ui-monospace"] {
	color: var(--wp--preset--color--primary, #0066cc);
	font-weight: 600;
}

/* Dimensional Template - Height-focused (Ladders) */
.mt-template-dimensional .mt-product-card {
	border-left: 3px solid var(--wp--preset--color--secondary, #f97316);
}

.mt-template-dimensional .mt-product-card div[style*="aspect-ratio"] {
	background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
}

/* Visual Template - Aesthetics-driven (Letterboxes) */
.mt-template-visual .mt-product-card {
	border-radius: 16px;
}

.mt-template-visual .mt-product-card img {
	border-radius: 12px 12px 0 0;
}

.mt-template-visual .mt-product-card:hover img {
	transform: scale(1.08);
}

/* Gallery Template - Decorative browsing (Wrought Iron) */
.mt-template-gallery .mt-product-card {
	border-radius: 8px;
	padding: 0;
}

.mt-template-gallery .mt-product-card img {
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mt-template-gallery .mt-product-card:hover img {
	transform: scale(1.12);
}

.mt-template-gallery .mt-product-card div[style*="padding"] {
	padding: 0.75rem !important;
	text-align: center;
}

.mt-template-gallery .mt-product-card h3 {
	font-size: 0.9rem !important;
}

/* Mixed Template - Functional + Decorative (Gate Accessories) */
.mt-template-mixed .mt-product-card {
	border-bottom: 2px solid var(--wp--preset--color--light, #f3f4f6);
}

.mt-template-mixed .mt-product-card:hover {
	border-bottom-color: var(--wp--preset--color--secondary, #f97316);
}

/* General Template - Default fallback */
.mt-template-general .mt-product-card {
	/* Standard styling, no modifications */
}

/* Product card attribute styling */
.mt-product-card .mt-attr {
	display: inline-block;
	margin-right: 0.5rem;
}

.mt-product-card .mt-attr-label {
	font-weight: 500;
	color: var(--wp--preset--color--gray, #6b7280);
}