/**
 * Style Overrides for 3DAYS GC Theme
 * 
 * Este archivo sobrescribe estilos inline que tienen colores hardcodeados
 * para usar las variables CSS correctas del Design System.
 * 
 * Color primario correcto: #CD1920 (Rojo)
 */

/* ========================================
   BUTTONS - Override inline styles
   ======================================== */

/* Primary buttons */
.btn-primary,
.hero-cta .btn-primary,
button[type="submit"],
.btn.btn-primary {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	box-shadow: 0 4px 12px rgba(205, 25, 32, 0.3);
}

.btn-primary:hover,
.hero-cta .btn-primary:hover,
button[type="submit"]:hover {
	background-color: rgb(var(--color-primary-hover));
	box-shadow: 0 6px 20px rgba(205, 25, 32, 0.6);
}

/* Secondary buttons and links */
.btn-secondary,
.hero-section .btn-secondary {
	border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

/* CTA Buttons in header */
.header-cta .btn,
.header-cta a {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

.header-cta .btn:hover,
.header-cta a:hover {
	background-color: rgb(var(--color-primary-hover));
}

/* Logo */
.site-logo {
	max-width: 62px;
	height: auto
}


/* ========================================
   ICONS & SVG - Override hardcoded colors
   ======================================== */

/* Features cards icons */
.feature-icon svg path[fill="#D68D00"],
.feature-icon svg path[fill*="214"] {
	fill: #CD1920;
}

.feature-icon svg path[stroke="#D68D00"],
.feature-icon svg path[stroke*="214"] {
	stroke: #CD1920;
}

.feature-icon svg circle[fill="#D68D00"],
.feature-icon svg circle[fill*="214"] {
	fill: #CD1920;
}

/* Info cards icons background */
.info-card>div[style*="linear-gradient"],
.contact-info-side .info-card>div {
	background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-hover)) 100%);
}

/* ========================================
   LINKS - Override primary color links
   ======================================== */

a[style*="color: rgb(var(--color-primary))"],
.contact-info-side a,
.footer a[href^="tel"],
.footer a[href^="mailto"] {
	color: rgb(var(--color-primary));
}

a[style*="color: rgb(var(--color-primary))"]:hover,
.contact-info-side a:hover {
	color: rgb(var(--color-primary-hover));
}

/* ========================================
   SERVICES SECTION
   ======================================== */

/* Service cards hover effect */
.service-card:hover,
article[class*="service"]:hover {
	border-color: rgb(var(--color-primary));
}

/* Service icons - Removed override to keep beige background */

/* ========================================
   CTA SECTIONS
   ======================================== */

.cta-section,
section[style*="background"] {
	background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-hover)) 100%);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Focus states */
input:focus,
select:focus,
textarea:focus {
	border-color: rgb(var(--color-primary));
	outline: none;
	box-shadow: 0 0 0 3px rgba(205, 25, 32, 0.1);
}

/* Form icons */
.form-icon i,
.contact-section i {
	color: rgb(var(--color-primary));
}

/* ========================================
   FLOATING CONTACT BUTTON
   ======================================== */

.floating-contact-btn {
	background-color: rgb(var(--color-primary));
	box-shadow: 0 4px 20px rgba(205, 25, 32, 0.4);
}

.floating-contact-btn:hover {
	background-color: rgb(var(--color-primary-hover));
	box-shadow: 0 6px 30px rgba(205, 25, 32, 0.6);
}

/* ========================================
   NAVIGATION
   ======================================== */

.primary-navigation nav ul li a:hover {
	color: rgb(var(--color-primary));
	background-color: rgba(var(--color-primary) / 0.05);
}

/* ========================================
   PROJECT FILTERS
   ======================================== */

.filter-btn.active,
button.active {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

.filter-btn:hover {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

/* ========================================
   TESTIMONIALS
   ======================================== */

.testimonial-stars i {
	color: rgb(var(--color-primary));
}

/* ========================================
   FOOTER
   ======================================== */

.footer .social-links a:hover {
	background-color: rgb(var(--color-primary));
}

/* ========================================
   MISC CORRECTIONS
   ======================================== */

/* Replace any hardcoded orange/gold colors */
[style*="214, 141, 0"],
[style*="#D68D00"],
[style*="rgb(214, 141, 0)"] {
	color: rgb(var(--color-primary));
}

[style*="background-color: rgb(214, 141, 0)"],
[style*="background: rgb(214, 141, 0)"],
[style*="background-color: #D68D00"] {
	background-color: rgb(var(--color-primary));
}

/* Ensure all icon backgrounds use correct gradient */
.icon-wrapper,
.feature-icon>div {
	background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-hover)) 100%);
}

/* Service card icons should NOT use gradient - keep beige background */
.service-card-icon>div {
	background-color: #f5f5f0 !important;
	background: #f5f5f0 !important;
	padding: 0;
}

/* Service card icons should use original color - no darkening */
.service-card-icon i,
.service-card-icon svg {
	color: rgb(var(--color-primary)) !important;
	opacity: 1 !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {

	.btn-primary,
	.btn-secondary {
		width: 100%;
		justify-content: center;
	}
}

.entry-content h2 {
	line-height: 1.5;
	font-size: var(--font-size-3xl);
}

.entry-content p {
	line-height: 1.5;
	font-size: var(--font-size-lg);
}