/* 
Theme Name: KINGWINS
Theme URI: https://https://kingwins.mdev.sa/
Author: Mohamed Abdel Moneim Riyad 
Description: WordPress theme conversion of the KINGWINS static HTML/CSS/JS corporate site. Every page keeps the exact original Tailwind/CSS/JS design and behavior; only the file wrapping was changed so it can run inside WordPress.
Version: 1.2
Theme URI: https://kingwins.mdev.sa/
Author: Mohamed Abdel Moneim Riyad
Author URI: https://kingwins.mdev.sa/
Description: A professional, responsive corporate theme for KINGWINS, featuring editable homepage content and a structured product catalog with specifications, benefits, galleries, certificates, and calls to action.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.3
License: Proprietary
Text Domain: kingwins
Tags: custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, translation-ready, wide-blocks, accessibility-ready, business, portfolio, e-commerce
*/

/* Customizer color utilities. Values are declared in `--kw-*` properties. */
.kw-text-brand { color: var(--kw-brand); }
.kw-text-heading { color: var(--kw-heading); }
.kw-text-body { color: var(--kw-body); }
.kw-bg-brand { background-color: var(--kw-brand); }
.kw-bg-footer { background-color: var(--kw-footer-bg); }

/* Semantic replacements for Tailwind's brand utilities.
 * The CDN cannot apply opacity modifiers to a CSS variable color reliably. */
.bg-brand,
.bg-\[\#C8102E\],
.bg-\[\#CC2428\] { background-color: var(--kw-brand) !important; }
.text-brand,
.text-\[\#CC2428\] { color: var(--kw-brand) !important; }
.border-brand { border-color: var(--kw-brand) !important; }
.bg-brand\/5 { background-color: var(--kw-brand-05) !important; }
.bg-brand\/10 { background-color: var(--kw-brand-10) !important; }
.bg-\[\#CC2428\]\/50 { background-color: color-mix(in srgb, var(--kw-brand) 50%, transparent) !important; }
.bg-\[\#CC2428\]\/70 { background-color: color-mix(in srgb, var(--kw-brand) 70%, transparent) !important; }
.border-brand\/10 { border-color: var(--kw-brand-10) !important; }
.hover\:bg-brand\/5:hover { background-color: var(--kw-brand-05) !important; }
.hover\:bg-red-700:hover { background-color: var(--kw-brand-dark) !important; }
.hover\:border-brand\/10:hover { border-color: var(--kw-brand-10) !important; }
.hover\:border-brand\/20:hover { border-color: var(--kw-brand-20) !important; }
.hover\:bg-brand-dark:hover { background-color: var(--kw-brand-dark) !important; }
.group:hover .group-hover\:text-\[\#CC2428\] { color: var(--kw-brand) !important; }
.shadow-brand\/25 { --tw-shadow-color: var(--kw-brand-25) !important; }
.shadow-brand\/30 { --tw-shadow-color: var(--kw-brand-30) !important; }
.hover\:shadow-brand\/40:hover { --tw-shadow-color: var(--kw-brand-40) !important; }

#video-section h2,
#products > div > div > h2,
#applications > div > div > h2,
#projects > div > div > h2,
#why-us > div > div > h2,
#manufacturing > div > div > h2,
#contact h2 {
	color: var(--kw-section-title);
}

#video-section p,
#products > div > div > p,
#applications > div > div > p,
#projects > div > div > p,
#why-us > div > div > p,
#manufacturing > div > div > p,
#contact > div > div > p {
	color: var(--kw-section-description);
}

.product-card h3,
.app-card h3,
.why-card h3 {
	color: var(--kw-card-title);
}

.product-card p,
.app-card p,
.why-card p {
	color: var(--kw-card-text);
}

.product-card .text-gray-700,
.product-card .text-charcoal\/60,
.product-card .text-charcoal\/70 {
	color: var(--kw-card-text) !important;
}

/* Product templates use the same Customizer controls as homepage sections. */
.product-section .section-eyebrow {
	color: var(--kw-section-eyebrow);
}

.product-section .section-title {
	color: var(--kw-section-title);
}

.product-section .section-subtitle,
.product-section > div[style] {
	color: var(--kw-section-description) !important;
}

.product-section .benefit-title,
.product-section .color-name,
.product-section .accessory-code,
.product-section .cert-name {
	color: var(--kw-card-title);
}

.product-section .benefit-desc,
.product-section .cert-region {
	color: var(--kw-card-text);
}