/*
 * Zinn Cream Theme — retired-dark to cream re-skin.
 *
 * =============================== READ THIS FIRST ===============================
 * WHY EVERY SELECTOR IS DOUBLED (.alt-hero.alt-hero rather than .alt-hero)
 *
 * The dark rules are NOT in a stylesheet. They sit in a <style> block INSIDE the page body,
 * inside the Elementor HTML widget. A body <style> is applied AFTER a <head> stylesheet, so
 * when two declarations have the SAME specificity and BOTH carry !important, the page rule
 * wins on document order and this file loses.
 *
 * v1.0.1 got this backwards. Backgrounds converted (the page did not mark those !important)
 * but every `color: #fff !important` beat us, leaving white text on a cream background.
 *
 * The fix is SPECIFICITY, not !important. Repeating the class lifts each selector one class
 * level above the page rule, so these win regardless of document order. Do not "tidy" the
 * doubled classes away — that is the whole mechanism.
 * ===============================================================================
 *
 * PALETTE — lifted verbatim from the live cream marketplace design (.mp-hero):
 *   surface gradient  linear-gradient(135deg, #fdfcf5 0%, #fef9e6 50%, #fdfcf5 100%)
 *   card              #ffffff
 *   heading           #1a1a1a
 *   body              #3d3d3d
 *   muted             #6a6a6a
 *   gold (TEXT)       #8a6410      <- #B8860B is too low-contrast on cream, never use it for text
 *   gold (structural) #b8860b      <- borders, rules, button fills
 *   success tick      #22c55e      <- deliberately preserved, readable on cream
 */

/* ============================================================================
 * 1. DARK SURFACES -> CREAM
 *
 * The border is deliberately NOT overridden: the dark designs already use
 * 2px solid #B8860B, exactly what the cream hero uses, and leaving it alone keeps this file a
 * true no-op on the two comparison pages that were hand-converted to cream with a 1px border.
 * ========================================================================== */

.loc-hero.loc-hero,
.loc-services.loc-services,
.alt-hero.alt-hero,
.alt-section-dark.alt-section-dark,
.alt-cta.alt-cta,
.alt-related.alt-related,
.comp-hero.comp-hero,
.comp-table-section.comp-table-section,
.comp-cta.comp-cta,
.comp-related.comp-related,
.zinn-quick-links.zinn-quick-links,
.zinn-social-block.zinn-social-block {
	background: linear-gradient(135deg, #fdfcf5 0%, #fef9e6 50%, #fdfcf5 100%) !important;
	box-shadow: 0 10px 40px rgba(184, 134, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.loc-hero.loc-hero::before,
.loc-services.loc-services::before,
.alt-hero.alt-hero::before,
.alt-section-dark.alt-section-dark::before,
.alt-cta.alt-cta::before,
.alt-related.alt-related::before,
.comp-hero.comp-hero::before,
.comp-table-section.comp-table-section::before,
.comp-cta.comp-cta::before,
.comp-related.comp-related::before,
.zinn-social-block.zinn-social-block::before {
	background: linear-gradient(90deg, transparent, #b8860b, transparent) !important;
}

/* ============================================================================
 * 2. NUCLEAR TEXT DEFAULT
 *
 * Rather than naming every light-on-dark rule and hoping none was missed (v1.0.1 missed
 * several), force body colour on EVERY descendant of a converted surface, then re-assert the
 * exceptions below. This is the same "nuclear default" pattern the site social block already
 * uses to defeat theme overrides.
 *
 * Excluded: the green success tick, and anything inside a brand-coloured social button, both
 * of which are already readable and carry meaning through their colour.
 * ========================================================================== */

.loc-hero.loc-hero *,
.loc-services.loc-services *,
.alt-hero.alt-hero *,
.alt-section-dark.alt-section-dark *,
.alt-cta.alt-cta *,
.alt-related.alt-related *,
.comp-hero.comp-hero *,
.comp-table-section.comp-table-section *,
.comp-cta.comp-cta *,
.comp-related.comp-related *,
.zinn-quick-links.zinn-quick-links *,
.zinn-social-block.zinn-social-block * {
	color: #3d3d3d !important;
}

/* ============================================================================
 * 3. EXCEPTIONS — re-asserted at higher specificity than the nuclear default
 * ========================================================================== */

/* 3a. Headings */
.loc-hero.loc-hero h1,
.loc-hero.loc-hero h2,
.loc-services.loc-services h2,
.loc-services.loc-services h3,
.loc-services.loc-services h4,
.alt-hero.alt-hero h1,
.alt-section-dark.alt-section-dark h2,
.alt-section-dark.alt-section-dark h3,
.alt-section-dark.alt-section-dark h4,
.alt-cta.alt-cta h2,
.alt-related.alt-related h2,
.alt-related.alt-related h4,
.comp-hero.comp-hero h1,
.comp-table-section.comp-table-section h2,
.comp-table-section.comp-table-section h3,
.comp-cta.comp-cta h2,
.comp-related.comp-related h2,
.comp-related.comp-related h3,
.zinn-quick-links.zinn-quick-links h3,
.zinn-quick-links.zinn-quick-links h4,
.zinn-social-block.zinn-social-block h3 {
	color: #1a1a1a !important;
}

/* 3b. The gold word inside a heading, and gold eyebrow/accent text */
.loc-hero.loc-hero h1 span,
.loc-hero.loc-hero .loc-hero-vs,
.alt-hero.alt-hero h1 span,
.alt-section-dark.alt-section-dark h2 span,
.alt-cta.alt-cta h2 span,
.alt-related.alt-related h2 span,
.comp-hero.comp-hero h1 span,
.comp-hero.comp-hero .comp-hero-vs,
.comp-cta.comp-cta h2 span,
.zinn-social-block.zinn-social-block h3 span,
.alt-compare-table.alt-compare-table th,
.loc-hero.loc-hero .loc-hero-badge,
.loc-hero.loc-hero .loc-hero-badge *,
.alt-hero.alt-hero .alt-hero-badge,
.alt-hero.alt-hero .alt-hero-badge *,
.comp-hero.comp-hero .comp-hero-badge,
.comp-hero.comp-hero .comp-hero-badge * {
	color: #8a6410 !important;
}

/* 3c. First column of a comparison table reads as a row label */
.alt-compare-table.alt-compare-table td:first-child {
	color: #1a1a1a !important;
	font-weight: 600;
}

/* 3d. Muted secondary copy */
.alt-related.alt-related .alt-related-card p {
	color: #6a6a6a !important;
}

/* 3e. The green success tick keeps its meaning-bearing colour */
.alt-check.alt-check,
.alt-section-dark.alt-section-dark .alt-check,
.alt-compare-table.alt-compare-table .alt-check {
	color: #22c55e !important;
}

/* ============================================================================
 * 4. CARDS, BADGES AND CHIPS INSIDE CONVERTED SURFACES
 * ========================================================================== */

.loc-hero.loc-hero .loc-hero-badge,
.alt-hero.alt-hero .alt-hero-badge,
.comp-hero.comp-hero .comp-hero-badge {
	background: #ffffff !important;
	border-color: rgba(184, 134, 11, 0.3) !important;
}

/* Cards were rgba(255,255,255,0.03) — invisible on cream. */
.alt-service-link.alt-service-link,
.alt-related-card.alt-related-card,
.zinn-quick-links.zinn-quick-links .zinn-quick-links-category,
.zinn-quick-links.zinn-quick-links .zinn-quick-links-list a {
	background: #ffffff !important;
	border-color: rgba(184, 134, 11, 0.2) !important;
}

.alt-service-link.alt-service-link:hover,
.alt-related-card.alt-related-card:hover,
.zinn-quick-links.zinn-quick-links .zinn-quick-links-list a:hover {
	background: #fdfcf5 !important;
	border-color: #b8860b !important;
	box-shadow: 0 8px 20px rgba(184, 134, 11, 0.18);
}

.alt-service-link.alt-service-link:hover h4,
.alt-related-card.alt-related-card:hover h4,
.zinn-quick-links.zinn-quick-links .zinn-quick-links-list a:hover {
	color: #8a6410 !important;
}

.alt-compare-table.alt-compare-table th,
.alt-compare-table.alt-compare-table td {
	border-bottom-color: rgba(184, 134, 11, 0.25) !important;
}

/* Neutral platform chip in the "X vs Zinn Hub" device. Brand-coloured chips keep their fill. */
.loc-hero.loc-hero .loc-hero-platform-icon.generic {
	background: #ecd9a0 !important;
}

/* ============================================================================
 * 5. GOLD CTA BUTTONS — label colour locked on every link state (CLAUDE.md §3)
 *    Listed AFTER the nuclear default so these win, and doubled so they beat the page rules.
 * ========================================================================== */

.loc-hero-cta.loc-hero-cta,
.alt-hero-cta.alt-hero-cta,
.alt-cta-btn.alt-cta-btn,
.comp-hero-cta.comp-hero-cta,
.comp-cta-btn.comp-cta-btn {
	background: linear-gradient(135deg, #b8860b 0%, #d4a527 100%) !important;
}

.loc-hero-cta.loc-hero-cta:link,
.loc-hero-cta.loc-hero-cta:visited,
.loc-hero-cta.loc-hero-cta:hover,
.loc-hero-cta.loc-hero-cta:focus,
.loc-hero-cta.loc-hero-cta:active,
.alt-hero-cta.alt-hero-cta:link,
.alt-hero-cta.alt-hero-cta:visited,
.alt-hero-cta.alt-hero-cta:hover,
.alt-hero-cta.alt-hero-cta:focus,
.alt-hero-cta.alt-hero-cta:active,
.alt-cta-btn.alt-cta-btn:link,
.alt-cta-btn.alt-cta-btn:visited,
.alt-cta-btn.alt-cta-btn:hover,
.alt-cta-btn.alt-cta-btn:focus,
.alt-cta-btn.alt-cta-btn:active,
.comp-hero-cta.comp-hero-cta:link,
.comp-hero-cta.comp-hero-cta:visited,
.comp-hero-cta.comp-hero-cta:hover,
.comp-hero-cta.comp-hero-cta:focus,
.comp-hero-cta.comp-hero-cta:active,
.comp-cta-btn.comp-cta-btn:link,
.comp-cta-btn.comp-cta-btn:visited,
.comp-cta-btn.comp-cta-btn:hover,
.comp-cta-btn.comp-cta-btn:focus,
.comp-cta-btn.comp-cta-btn:active {
	color: #1a1a1a !important;
	text-decoration: none !important;
}

.loc-hero-cta.loc-hero-cta:hover,
.alt-hero-cta.alt-hero-cta:hover,
.alt-cta-btn.alt-cta-btn:hover,
.comp-hero-cta.comp-hero-cta:hover,
.comp-cta-btn.comp-cta-btn:hover {
	background: linear-gradient(135deg, #a67a0a 0%, #c9991f 100%) !important;
	box-shadow: 0 8px 25px rgba(184, 134, 11, 0.35) !important;
}

/* ============================================================================
 * 6. BRAND-COLOURED SOCIAL BUTTONS keep their own fill and white label — they are readable
 *    and the colour identifies the platform. Re-asserted above the nuclear default.
 * ========================================================================== */

.zinn-social-block.zinn-social-block .zinn-social-block-btn,
.zinn-social-block.zinn-social-block .zinn-social-block-btn * {
	color: #ffffff !important;
}

/* ============================================================================
 * 7. REDUCED MOTION / HIGH CONTRAST
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.loc-hero-cta.loc-hero-cta,
	.alt-hero-cta.alt-hero-cta,
	.alt-cta-btn.alt-cta-btn,
	.comp-hero-cta.comp-hero-cta,
	.comp-cta-btn.comp-cta-btn,
	.alt-service-link.alt-service-link,
	.alt-related-card.alt-related-card {
		transition: none !important;
	}

	.loc-hero-cta.loc-hero-cta:hover,
	.alt-hero-cta.alt-hero-cta:hover,
	.alt-cta-btn.alt-cta-btn:hover,
	.comp-hero-cta.comp-hero-cta:hover,
	.comp-cta-btn.comp-cta-btn:hover,
	.alt-service-link.alt-service-link:hover,
	.alt-related-card.alt-related-card:hover {
		transform: none !important;
	}
}

@media (forced-colors: active) {
	.loc-hero.loc-hero,
	.loc-services.loc-services,
	.alt-hero.alt-hero,
	.alt-section-dark.alt-section-dark,
	.alt-cta.alt-cta,
	.alt-related.alt-related,
	.comp-hero.comp-hero,
	.comp-table-section.comp-table-section,
	.comp-cta.comp-cta,
	.comp-related.comp-related,
	.zinn-quick-links.zinn-quick-links,
	.zinn-social-block.zinn-social-block {
		border: 1px solid CanvasText !important;
	}
}
