/*
 * Design Guardrails (LAST-LOADED)
 *
 * Purpose:
 * - Catch and override any late-loading CSS that accidentally makes critical UI elements unreadable.
 * - Keep rules minimal and token-driven (smart-visibility / theme variables).
 *
 * NOTE:
 * - This file is intentionally enqueued at a very high wp_enqueue_scripts priority
 *   so it loads after theme + plugin CSS.
 *
 * CRITICAL v5.1.0: All primary-filled buttons MUST have #FFFFFF fallback (never rely on tokens alone)
 */

/* ========================================
   §1 — UNIVERSAL PRIMARY BUTTON TEXT GUARDRAIL
   These ensure ALL buttons on primary backgrounds default to WHITE
   ======================================== */

/* Newsletter CTA - ALWAYS white text by default */
.newsletter-cta,
.newsletter-cta span,
.newsletter-cta__label,
button.newsletter-cta,
.site-header__actions .newsletter-cta,
.primary-nav .newsletter-cta--mobile {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

.newsletter-cta svg,
.newsletter-cta__label svg,
button.newsletter-cta svg,
.site-header__actions .newsletter-cta svg,
.primary-nav .newsletter-cta--mobile svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* All primary buttons - force white text by default */
.btn-primary,
.button-primary,
.button--primary,
button[type="submit"],
input[type="submit"],
.wp-block-button__link:not(.is-style-outline .wp-block-button__link) {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

.btn-primary svg,
.button-primary svg,
.button--primary svg,
button[type="submit"] svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ========================================
   §2 — HERO/CAROUSEL CONTROLS
   Must never become white-on-white
   ======================================== */

/* Hero carousel arrows must never become white-on-white. */
.hero-carousel__prev,
.hero-carousel__next {
    background: rgba(var(--color-black-rgb, 0, 0, 0), 0.82) !important;
    border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.22) !important;
    color: var(--sv-text-on-dark, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

.hero-carousel__prev:hover,
.hero-carousel__next:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ========================================
   §3 — FOOTER & MISC WIDGETS
   ======================================== */

/* Cloudflare footer widgets: keep readable contrast and consistent button styling. */
.cf-footer-ip-reveal-btn {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border: 1px solid var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    border-radius: 999px !important;
    padding: 0.55rem 1rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.cf-footer-ip-reveal-btn:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
}

/* ========================================
   §4 — SECONDARY/OUTLINE BUTTONS
   Must not end up white-on-transparent
   ======================================== */

.button-secondary,
.btn-secondary,
a.button.button-secondary,
button.button-secondary {
    background: transparent !important;
    border-color: var(--color-primary, #0066CC) !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
}

.button-secondary:hover,
.btn-secondary:hover,
a.button.button-secondary:hover,
button.button-secondary:hover {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border-color: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ========================================
   §5 — CHAT LAUNCHER CONTRAST
   Floating chat button must always be visible
   ======================================== */

.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[class*="chat-launcher"] {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

.aiwp-chat-launcher svg,
.aiwp-chatbot-launcher svg,
#aiwp-chatbot-launcher svg,
[id*="chatbot-launcher"] svg,
[class*="chat-launcher"] svg {
    color: #FFFFFF !important;
    color: var(--smart-btn-text-on-primary, #FFFFFF) !important;
    stroke: #FFFFFF !important;
    stroke: var(--smart-btn-text-on-primary, #FFFFFF) !important;
}

/* ========================================
   §6 — EYEBROW/BADGE ON PRIMARY
   Force white text on accent backgrounds
   ======================================== */

.page-hero__eyebrow,
.archive-hero__eyebrow,
.front-hero__eyebrow,
.trending-palette__label,
[class*="eyebrow"][class*="primary"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow *,
.archive-hero__eyebrow *,
.front-hero__eyebrow * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-hero__eyebrow svg,
.archive-hero__eyebrow svg,
.front-hero__eyebrow svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* About CTA eyebrow - on LIGHT background, use PRIMARY color (not white) */
.about-cta__eyebrow,
.about-cta__eyebrow * {
    /* Force primary color and keep WebKit text-fill aligned to the resolved color */
    color: #0066CC !important;
    color: var(--color-primary, #0066CC) !important;
    -webkit-text-fill-color: currentColor !important;
}

.about-cta__eyebrow svg {
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

/* ========================================
   §7 — BLOG FUTURISTIC ENHANCEMENTS
   Bring admin dashboard level polish to public blog
   ======================================== */

/* Enhanced card hover glow effect */
.entry-card:hover,
.post-card:hover,
[class*="card"]:not([class*="stat"]):hover {
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 0 40px rgba(var(--color-primary-rgb, 0, 102, 204), 0.08) !important;
}

/* Stats blocks with accent strip */
.archive-metrics__card,
.synth-stat-card,
.aiwp-stat-card {
    position: relative !important;
    overflow: hidden !important;
}

.archive-metrics__card::before,
.synth-stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
}

/* Trend badges (like admin dashboard) */
.archive-metrics__trend,
.stat-trend,
[class*="trend-badge"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.archive-metrics__trend--up,
.stat-trend--up,
[class*="trend-badge--up"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
}

.archive-metrics__trend--down,
.stat-trend--down,
[class*="trend-badge--down"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
}

/* Enhanced reading progress bar */
.reading-progress,
.aiwp-reading-progress {
    height: 4px !important;
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb, 0, 102, 204), 0.4) !important;
}

/* Status badges */
.status-badge,
[class*="status-badge"] {
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.status-badge--success,
[class*="status-badge--success"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
}

.status-badge--warning,
[class*="status-badge--warning"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
}

.status-badge--error,
[class*="status-badge--error"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
}

.status-badge--info,
[class*="status-badge--info"] {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3B82F6 !important;
}

/* Category pills with modern hover */
.entry-card__category:hover,
.synth-badge:hover,
[class*="category-badge"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 0, 102, 204), 0.25) !important;
}

/* Modern button hover effect */
.button:hover,
.btn:hover,
[class*="btn-primary"]:hover,
[class*="button-primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35) !important;
}