/*
Theme Name: WPAgent Child Theme
Description: Child theme for WPAgent - WordPress Theme Analysis Platform
Template: kadence
Version: 1.1.21


Author: WPAgent
*/

/* Lucide Icons - Global Styling */
i[data-lucide] {
    stroke-width: 2;
    stroke: currentColor;
    display: inline-block;
}

/* SVG Icon Fix - Prevent Stretching */
svg {
    display: block;
    flex-shrink: 0;
    min-width: fit-content;
    min-height: fit-content;
}

/* Icon Container Fix */
.w-14.h-14 {
    flex-shrink: 0 !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
}

.w-11.h-11 {
    flex-shrink: 0 !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
}

/* Methodology Page Styles */
.wpagent-methodology {
    background-color: #f9fafb;
    min-height: 100vh;
}

.wpagent-methodology>div {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.wpagent-methodology section {
    margin-bottom: 3rem;
}

.wpagent-methodology .section-inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.wpagent-methodology .section-inner-no-padding {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   WPAgent Custom Styles - STYLEGUIDE.md Lavender Fields Compliant
   ========================================================================== */

/* ==========================================================================
   NOTICE: CSS Custom Properties moved to assets/css/layers/base.css
   ==========================================================================

   As of version 2.0.0, all design tokens (CSS custom properties) have been
   moved to assets/css/layers/base.css and wrapped in @layer base for better
   cascade control and architectural consistency.

   The variables below are kept for backward compatibility ONLY.
   New code should rely on base.css being loaded via functions.php.

   To activate the new architecture:
   1. Enqueue assets/css/layers/setup.css (first)
   2. Enqueue assets/css/layers/base.css (second)
   3. See: docs/MIGRATION_PROOF_OF_CONCEPT.md
   ========================================================================== */

/* CSS Custom Properties - Following STYLEGUIDE.md Design System */
/* DEPRECATED: Use assets/css/layers/base.css instead */
:root {

    /* Primary Colors (Purple) */
    --primary-50: #f8fafc;
    --primary-100: #f1f5f9;
    --primary-300: #cbd5e1;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;

    /* Neutral Colors (Grays) - Full palette */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* Legacy gray scale aliases */
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-900: #0f172a;

    /* Semantic Colors */
    --success-500: #22c55e;
    --error-500: #ef4444;
    --warning-500: #f59e0b;
    --info-500: #3b82f6;

    /* Border Radius Design Tokens */
    --radius-sm: 0.25rem;
    /* 4px - Small inputs, badges */
    --radius-md: 0.5rem;
    /* 8px - Buttons, cards */
    --radius-lg: 0.75rem;
    /* 12px - Large cards, modals */
    --radius-xl: 1rem;
    /* 16px - Hero sections */
    --radius-pill: 9999px;
    /* Full rounded - Pills, avatars */

    /* VARIANT B: Borders */
    --border-width: 2px;
    --border-color-default: #1e293b;
    /* neutral-800 */
    --border-color-light: #e2e8f0;
    /* neutral-200 */

    /* VARIANT B: Shadows - Purple Glow Effects */
    --shadow-glow-purple: 0 0 25px rgba(139, 92, 246, 0.35);
    --shadow-glow-purple-subtle: 0 0 15px rgba(139, 92, 246, 0.2);
    --shadow-ring-purple: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* Back to Top Button - Lavender Fields Colors */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-400);
    transform: translateY(-2px) scale(1.05);
}

/* Loading States - Lavender Fields Colors */
.themes-loading {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-100);
    border-top: 3px solid var(--primary-500);
    border-radius: var(--radius-pill);
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Gallery Active State - Lavender Fields Colors */
.theme-gallery .gallery-item img.active {
    border: 3px solid var(--primary-500);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Mobile Navigation */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--primary-600);
}

.mobile-nav-toggle:hover {
    color: var(--primary-500);
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 9999;
    }

    .main-navigation.is-open {
        transform: translateX(0);
    }
}

/* Lazy Loading Images */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.lazy.loaded {
    opacity: 1;
}

/* Responsive Design Improvements */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }
}

/* Button System - VARIANT B (Dark Border Edition) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background-color: var(--primary-600);
    /* VARIANT B: primary-600 */
    border: var(--border-width) solid var(--primary-600);
    border-radius: var(--radius-lg);
    transition: all 200ms ease;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.btn-primary:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
    box-shadow: var(--shadow-glow-purple);
    /* VARIANT B: Purple glow */
    transform: translateY(-2px);
    /* VARIANT B: Lift effect */
}

.btn-primary:active {
    background-color: var(--primary-700);
    transform: translateY(0);
}

.btn-primary:focus {
    outline: none;
    box-shadow: var(--shadow-ring-purple);
}

.btn-primary-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--neutral-700);
    background-color: transparent;
    border: var(--border-width) solid var(--neutral-800);
    /* VARIANT B: Dark border */
    border-radius: var(--radius-lg);
    transition: all 200ms ease;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.btn-secondary:hover {
    background-color: var(--neutral-900);
    /* VARIANT B: Fill black on hover */
    color: white;
    border-color: var(--neutral-900);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-600);
    background-color: transparent;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    transition: all 150ms ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.btn-outline:hover {
    background-color: var(--primary-50);
    border-color: var(--primary-500);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-pill);
    transition: all 150ms ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.btn-ghost:hover {
    color: var(--primary-600);
    background-color: var(--primary-50);
}

/* Focus Ring Utility */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-500), 0 0 0 4px rgba(139, 92, 246, 0.2);
}

/* Typography Classes - Following STYLEGUIDE.md */
.heading-xl {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--gray-900);
}

.heading-lg {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--gray-900);
}

.heading-md {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.heading-sm {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
}

.heading-xs {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.body-lg {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--gray-700);
}

.body-base {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--gray-700);
}

.body-sm {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gray-600);
}

.text-muted {
    color: var(--gray-500);
}

.text-emphasis {
    color: var(--gray-900);
    font-weight: 500;
}

/* Theme-specific utilities */
.theme-architecture-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}

.theme-architecture-block {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.theme-architecture-classic {
    background-color: #dbeafe;
    color: #1e40af;
}

.theme-architecture-hybrid {
    background-color: #dcfce7;
    color: #166534;
}

/* Performance indicators */
.performance-excellent {
    color: #059669;
    background-color: #ecfdf5;
}

.performance-good {
    color: var(--primary-600);
    background-color: var(--primary-50);
}

.performance-fair {
    color: #d97706;
    background-color: #fffbeb;
}

.performance-poor {
    color: #dc2626;
    background-color: #fef2f2;
}

/* Price formatting */
.price-free {
    color: #059669;
    font-weight: 600;
}

.price-premium {
    color: var(--primary-600);
    font-weight: 600;
}

.price-enterprise {
    color: var(--primary-700);
    font-weight: 600;
}

/* Demo Gallery Overrides */
.demo-item p {
    margin-bottom: 8px !important;
}

/* Note: Most theme styles now use Tailwind CSS classes following STYLEGUIDE.md Lavender Fields palette */
/* Only essential custom styles and theme-specific functionality remain here */
/* All colors now use CSS custom properties from STYLEGUIDE.md Lavender Fields system */

/* Source reference link styling */
.source-ref {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.75em;
    vertical-align: super;
    margin-left: 1px;
}

/* Highlight target source when clicked */
.sources-list>div:target {
    animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
    0% {
        background-color: rgb(254 249 195);
    }

    /* yellow-100 */
    100% {
        background-color: transparent;
    }
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Mobile Navigation - Hide on desktop (768px and above) */
@media (min-width: 768px) {
    .mobile-nav {
        display: none !important;
    }
}

/* ============================================
   VARIANT B UTILITIES
   ============================================ */

/* Hover Lift Effect */
.hover-lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Hover Glow Effect */
.hover-glow:hover {
    box-shadow: var(--shadow-glow-purple);
}

/* Gradient Text (Purple → Cyan) */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-500), #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card with dark border - Variant B */
.card-variant-b {
    background-color: white;
    border: var(--border-width) solid var(--border-color-default);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card-variant-b.interactive {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.card-variant-b.interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Sidebar Fix - Variant B - High Specificity */
.sidebar-card.variant-b {
    border: 2px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
    background-color: #ffffff;
}

/* ============================================
   VERDICT SYSTEM CARD OVERRIDES
   ============================================ */

/* Safe Verdict */
.card-verdict-safe {
    background: linear-gradient(to bottom right, #f0fdf4, rgba(240, 253, 244, 0.5));
    /* green-50 */
    border-color: #86efac !important;
    /* green-300 */
}

.card-verdict-safe .card-icon {
    background-color: #22c55e;
    /* green-500 */
}

.card-verdict-safe .card-title {
    color: #15803d;
    /* green-700 */
}

/* Caution Verdict */
.card-verdict-caution {
    background: linear-gradient(to bottom right, #fefce8, rgba(254, 252, 232, 0.5));
    /* yellow-50 */
    border-color: #fde047 !important;
    /* yellow-300 */
}

.card-verdict-caution .card-icon {
    background-color: #eab308;
    /* yellow-500 */
}

.card-verdict-caution .card-title {
    color: #a16207;
    /* yellow-700 */
}

/* Avoid Verdict */
.card-verdict-avoid {
    background: linear-gradient(to bottom right, #fef2f2, rgba(254, 242, 242, 0.5));
    /* red-50 */
    border-color: #fca5a5 !important;
    /* red-300 */
}

.card-verdict-avoid .card-icon {
    background-color: #ef4444;
    /* red-500 */
}

.card-verdict-avoid .card-title {
    color: #b91c1c;
    /* red-700 */
}

/* ============================================
   MISSING UTILITY OVERRIDES (Manual Fix)
   ============================================ */
.bg-neutral-900 .text-neutral-50 {
    color: #f8fafc !important;
}

.bg-neutral-900 .text-neutral-100 {
    color: #f1f5f9 !important;
}

.bg-neutral-900 .text-neutral-200 {
    color: #e2e8f0 !important;
}

.bg-neutral-900 .text-neutral-400 {
    color: #94a3b8 !important;
}

/* ============================================
   MC 4 WP
   ============================================ */

.mc4wp-response .mc4wp-error p,
.mc4wp-response .mc4wp-alert.mc4wp-notice p,
.mc4wp-response .mc4wp-alert.mc4wp-success p,
.mc4wp-response .mc4wp-alert.mc4wp-error p {
    font-size: 12px;
    max-width: 400px;
    margin: 10px auto;
}