/**
 * MMM Design System -- sitewide override stylesheet (v1.1.0)
 *
 * Loaded by mmm-design-system.php as a mu-plugin. Maps Divi + WooCommerce
 * defaults onto our :root design tokens so a single token edit re-skins everything.
 *
 * DUAL-TOKEN COLOR SYSTEM (locked 2026-05-29 by Miguel):
 *   --mmm-brand        = PRIMARY red/magenta (#dc2626).
 *                        Drives primary CTAs (Add to Cart, Get Quote, Free Proposal),
 *                        header brand strip, primary headings.
 *   --mmm-brand-dark   = primary hover/pressed.
 *   --mmm-accent       = LIGHTNING BLUE (#1da1f2).
 *                        Drives interactive states (links, focus rings, hover
 *                        underlines), secondary/info buttons + badges, and
 *                        live-data callouts (sale prices, countdown text, live
 *                        counters). NEVER replaces primary CTAs.
 *   --mmm-accent-dark  = accent hover/pressed.
 *
 * Specificity strategy: use a body-class lock (the html selector) + !important on
 * color/background-color/border-color ONLY. We intentionally do NOT !important
 * layout properties (padding, width, etc.) -- only color values.
 *
 * Fallbacks: every var() call has a hex fallback so the page still looks right
 * if the :root block ever fails to emit (paranoid guard for cache edge cases).
 */

/* ----------------------------------------------------------------------------
   1) Divi button defaults -- PRIMARY CTAs use brand red
   ---------------------------------------------------------------------------- */
html .et_pb_button,
html .et_pb_button:visited,
html a.et_pb_button,
html a.et_pb_button:visited {
	color: #ffffff !important;
	background-color: var(--mmm-brand, #dc2626) !important;
	border-color: var(--mmm-brand, #dc2626) !important;
	transition: background-color .2s ease, border-color .2s ease;
}
html .et_pb_button:hover,
html a.et_pb_button:hover,
html .et_pb_button:focus,
html a.et_pb_button:focus {
	background-color: var(--mmm-brand-dark, #b91c1c) !important;
	border-color: var(--mmm-brand-dark, #b91c1c) !important;
	color: #ffffff !important;
}

/* Divi "promo" / call-to-action button alt variant -- still PRIMARY */
html .et_pb_promo_button,
html .et_pb_more_button {
	background-color: var(--mmm-brand, #dc2626) !important;
	border-color: var(--mmm-brand, #dc2626) !important;
	color: #ffffff !important;
}

/* Divi SECONDARY button (alt class our markup uses) -- accent blue */
html .et_pb_button.et_pb_button_alt,
html .et_pb_button.mmm-btn-secondary,
html a.mmm-btn-secondary,
html button.mmm-btn-secondary {
	background-color: var(--mmm-accent, #1da1f2) !important;
	border-color: var(--mmm-accent, #1da1f2) !important;
	color: #ffffff !important;
}
html .et_pb_button.et_pb_button_alt:hover,
html .et_pb_button.mmm-btn-secondary:hover,
html a.mmm-btn-secondary:hover,
html button.mmm-btn-secondary:hover {
	background-color: var(--mmm-accent-dark, #0d8bd9) !important;
	border-color: var(--mmm-accent-dark, #0d8bd9) !important;
}

/* ----------------------------------------------------------------------------
   2) WooCommerce action buttons -- PRIMARY (Add to Cart, Checkout) = red
   ---------------------------------------------------------------------------- */
html .woocommerce a.button,
html .woocommerce button.button,
html .woocommerce input.button,
html .woocommerce #respond input#submit,
html .woocommerce a.button.alt,
html .woocommerce button.button.alt,
html .woocommerce input.button.alt,
html .woocommerce #respond input#submit.alt,
html .woocommerce-page a.button,
html .woocommerce-page button.button,
html .woocommerce-page input.button,
html .woocommerce a.added_to_cart {
	background-color: var(--mmm-brand, #dc2626) !important;
	border-color: var(--mmm-brand, #dc2626) !important;
	color: #ffffff !important;
}
html .woocommerce a.button:hover,
html .woocommerce button.button:hover,
html .woocommerce input.button:hover,
html .woocommerce #respond input#submit:hover,
html .woocommerce a.button.alt:hover,
html .woocommerce button.button.alt:hover,
html .woocommerce input.button.alt:hover,
html .woocommerce a.added_to_cart:hover {
	background-color: var(--mmm-brand-dark, #b91c1c) !important;
	border-color: var(--mmm-brand-dark, #b91c1c) !important;
	color: #ffffff !important;
}

/* Onsale ribbon -- LIVE DATA callout, so accent blue */
html .woocommerce span.onsale {
	background-color: var(--mmm-accent, #1da1f2) !important;
	color: #ffffff !important;
}

/* Sale price (ins) -- LIVE DATA callout, so accent blue */
html .woocommerce ins,
html .woocommerce-page ins,
html .price ins,
html .price ins .amount,
html .woocommerce ul.products li.product .price ins,
html .woocommerce-Price-amount.amount.mmm-live-price {
	color: var(--mmm-accent, #1da1f2) !important;
	text-decoration: none !important;
	font-weight: 700;
}

/* Quantity steppers (neutral) */
html .woocommerce .quantity .qty {
	border-color: var(--mmm-border, #e2e8f0) !important;
	color: var(--mmm-text-primary, #1a202c) !important;
}

/* WC notices: info uses accent (informational, not a CTA), error stays red */
html .woocommerce-message,
html .woocommerce-info {
	border-top-color: var(--mmm-accent, #1da1f2) !important;
}
html .woocommerce-message::before,
html .woocommerce-info::before {
	color: var(--mmm-accent, #1da1f2) !important;
}
html .woocommerce-error {
	border-top-color: var(--mmm-red, #ef4444) !important;
}
html .woocommerce-error::before {
	color: var(--mmm-red, #ef4444) !important;
}

/* ----------------------------------------------------------------------------
   3) Header bar / top utility bar -- BRAND STRIP = primary red
   ---------------------------------------------------------------------------- */
html #top-header,
html #et-secondary-nav,
html .et_pb_top_menu,
html .mmm-top-bar {
	background-color: var(--mmm-brand, #dc2626) !important;
}
html #top-header a,
html #top-header,
html #et-secondary-nav a,
html #et-secondary-nav .et-cart-info,
html #et-secondary-menu > ul > li > a {
	color: #ffffff !important;
}

/* Header phone / account / cart icons -- icon colors use brand red on light header */
html .et-cart-info,
html .et-cart-info span,
html .et_pb_menu .et-cart-info span,
html .header-phone,
html .header-account,
html .header-cart {
	color: var(--mmm-brand, #dc2626) !important;
}
html .et_pb_top_menu .et-cart-info span:before {
	color: #ffffff !important;
}

/* Countdown timer text in top bar -- white on red brand strip */
html .mmm-top-bar .countdown,
html .mmm-top-bar .countdown *,
html .top-bar-countdown,
html .top-bar-countdown * {
	color: #ffffff !important;
}

/* Live-data badges sitting OUTSIDE the brand strip use accent blue */
html .mmm-live-badge,
html .mmm-countdown-callout,
html .mmm-live-counter {
	background-color: var(--mmm-accent, #1da1f2) !important;
	color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   4) Links + body text -- INTERACTIVE STATE = accent blue
   ---------------------------------------------------------------------------- */
html body a {
	color: var(--mmm-accent, #1da1f2);
}
html body a:hover {
	color: var(--mmm-accent-dark, #0d8bd9);
}
html body {
	color: var(--mmm-text-primary, #1a202c);
}

/* ----------------------------------------------------------------------------
   5) Form input focus states -- INTERACTIVE STATE = accent blue
   ---------------------------------------------------------------------------- */
html input[type="text"]:focus,
html input[type="email"]:focus,
html input[type="url"]:focus,
html input[type="tel"]:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="password"]:focus,
html textarea:focus,
html select:focus,
html .et_pb_contact_field input:focus,
html .et_pb_contact_field textarea:focus {
	border-color: var(--mmm-accent, #1da1f2) !important;
	box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.18) !important;
	outline: none !important;
}

/* Primary CTA focus ring uses primary red rgba */
html .et_pb_button:focus-visible,
html .woocommerce .button:focus-visible {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.30) !important;
	outline: none !important;
}

/* ----------------------------------------------------------------------------
   6) Footer accents -- brand red headers, accent blue hover
   ---------------------------------------------------------------------------- */
html #main-footer .footer-widget h4,
html #main-footer .footer-widget .widgettitle {
	color: var(--mmm-brand, #dc2626) !important;
}
html #main-footer a:hover {
	color: var(--mmm-accent, #1da1f2) !important;
}
html #footer-bottom {
	background-color: var(--mmm-brand-dark, #b91c1c) !important;
}

/* ----------------------------------------------------------------------------
   7) Kill common orange/red hex values inherited from theme/plugins
   Universal sweep -- covers inline style attributes that use these hexes.
   Only applies where the property is color/background-color/border-color.
   ---------------------------------------------------------------------------- */
[style*="#f59e0b"],
[style*="#fbbf24"],
[style*="#fb923c"],
[style*="#f97316"],
[style*="#ea580c"],
[style*="#ff5733"],
[style*="#ff6b6b"],
[style*="#e74c3c"],
[style*="color:orange"],
[style*="color: orange"],
[style*="background:orange"],
[style*="background: orange"],
[style*="background-color:orange"],
[style*="background-color: orange"] {
	/* visual nudge in dev only -- comment this out in production if you don't want it */
	/* outline: 1px dashed var(--mmm-amber); */
}

/* ----------------------------------------------------------------------------
   8) Divi specific: pricing tables, blurbs, testimonials accent
   Pricing heading = primary (red). Blurb icons + tab active = accent (blue).
   ---------------------------------------------------------------------------- */
html .et_pb_pricing_table .et_pb_pricing_heading {
	background-color: var(--mmm-brand, #dc2626) !important;
}
html .et_pb_blurb_position_left .et_pb_main_blurb_image,
html .et_pb_blurb_position_top .et_pb_main_blurb_image {
	color: var(--mmm-accent, #1da1f2) !important;
}
html .et_pb_testimonial .et_pb_testimonial_portrait {
	border-color: var(--mmm-accent, #1da1f2) !important;
}

/* Divi tabs -- active tab = INTERACTIVE STATE = accent blue */
html .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active {
	color: var(--mmm-accent, #1da1f2) !important;
	border-bottom-color: var(--mmm-accent, #1da1f2) !important;
}

/* Divi toggle / accordion -- INTERACTIVE STATE = accent blue */
html .et_pb_toggle_title:before,
html .et_pb_accordion .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
	color: var(--mmm-accent, #1da1f2) !important;
}

/* ----------------------------------------------------------------------------
   9) Card surfaces (use throughout admin/biz app pages)
   ---------------------------------------------------------------------------- */
.mmm-card {
	background: var(--mmm-card, #ffffff);
	border: 1px solid var(--mmm-border, #e2e8f0);
	border-radius: 8px;
	color: var(--mmm-text-primary, #1a202c);
}
.mmm-card .mmm-card-title {
	color: var(--mmm-brand, #dc2626);
}

/* Utility classes -- BOTH brand (primary red) and accent (blue) families */
.mmm-bg-brand        { background-color: var(--mmm-brand, #dc2626) !important; color: #fff !important; }
.mmm-bg-brand-dark   { background-color: var(--mmm-brand-dark, #b91c1c) !important; color: #fff !important; }
.mmm-text-brand      { color: var(--mmm-brand, #dc2626) !important; }
.mmm-text-brand-dark { color: var(--mmm-brand-dark, #b91c1c) !important; }
.mmm-border-brand    { border-color: var(--mmm-brand, #dc2626) !important; }

.mmm-bg-accent        { background-color: var(--mmm-accent, #1da1f2) !important; color: #fff !important; }
.mmm-bg-accent-dark   { background-color: var(--mmm-accent-dark, #0d8bd9) !important; color: #fff !important; }
.mmm-text-accent      { color: var(--mmm-accent, #1da1f2) !important; }
.mmm-text-accent-dark { color: var(--mmm-accent-dark, #0d8bd9) !important; }
.mmm-border-accent    { border-color: var(--mmm-accent, #1da1f2) !important; }

.mmm-bg-success { background-color: var(--mmm-success, #10b981) !important; color: #fff !important; }
.mmm-bg-amber   { background-color: var(--mmm-amber, #f59e0b) !important; color: #fff !important; }
.mmm-bg-red     { background-color: var(--mmm-red, #ef4444) !important; color: #fff !important; }