/**
 * Contextual Content Builder Styles
 * Heuristic-based styling triggered by content analysis
 *
 * @package HRDC_AI_Writer
 * @since 8.4.0
 */

/* ========================================
   PHASE 1: MUST-HAVE ELEMENTS
   ======================================== */

/* 1. DROP CAPS - First paragraph only */
.entry-content > p:first-of-type::first-letter,
.wp-block-post-content > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.85;
    margin: 0.1em 0.15em 0 0;
    font-weight: 700;
    color: #2563EB;
    font-family: Georgia, serif;
}

/* 2. STAT CARDS - Market data highlights */
.re-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.re-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
    transition: transform 0.2s ease;
}

.re-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
}

.re-stat-card .icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.re-stat-card strong {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0.5rem 0;
    line-height: 1;
}

.re-stat-card small {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

/* Alternative: Single stat card */
.re-stat-card-single {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    display: inline-block;
    margin: 1rem 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.re-stat-card-single .number {
    font-size: 2rem;
    font-weight: 700;
    margin-right: 0.75rem;
}

.re-stat-card-single .label {
    font-size: 1rem;
    opacity: 0.95;
}

/* 3. KEY TAKEAWAYS BOX - Summary highlight */
.re-box-takeaway {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 3px solid #f59e0b;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.re-box-takeaway::before {
    content: "🔑 Key Takeaways";
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    color: #92400e;
    margin-bottom: 1rem;
}

.re-box-takeaway h3 {
    color: #92400e;
    margin-top: 0;
    font-size: 1.125rem;
}

.re-box-takeaway ul {
    margin: 0;
    padding-left: 1.5rem;
}

.re-box-takeaway li {
    margin-bottom: 0.5rem;
    color: #78350f;
}

/* 4. ENHANCED ALERT BOXES - Context-specific warnings/tips */
.re-alert {
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 5px solid;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.95rem; /* Small text for alert content */
    line-height: 1.5;
}

.re-alert::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.re-alert > div {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

.re-alert strong {
    font-weight: 600;
    display: inline; /* Keep strong inline for better text flow */
}

.re-alert p {
    margin: 0;
}

.re-alert p:not(:last-child) {
    margin-bottom: 0.75rem;
}

/* Warning/Danger - Legal, Important notices */
.re-alert-warning,
.re-alert-danger {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.re-alert-warning::before,
.re-alert-danger::before {
    background-image: url('https://www.moyeraz.com/wp-content/uploads/2025/12/ask.svg');
}

/* Success/Tip - Pro tips, helpful advice */
.re-alert-success,
.re-alert-tip {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.re-alert-success::before,
.re-alert-tip::before {
    background-image: url('https://www.moyeraz.com/wp-content/uploads/2025/12/idea.svg');
}

/* Info - General information, did you know */
.re-alert-info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.re-alert-info::before {
    background-image: url('https://www.moyeraz.com/wp-content/uploads/2025/12/key-button.svg');
}

/* ========================================
   PHASE 2: SHOULD-HAVE ELEMENTS
   ======================================== */

/* 5. TIMELINE/PROCESS STEPS - Sequential guides */
.re-timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 0;
}

.re-timeline-item {
    position: relative;
    padding-left: 3.5rem;
    padding-bottom: 2.5rem;
    border-left: 3px solid #e5e7eb;
    list-style: none;
}

.re-timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.re-timeline-item::before {
    content: attr(data-step);
    position: absolute;
    left: -1.5rem;
    top: 0;
    background: linear-gradient(135deg, #2563EB 0%, #3b82f6 100%);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.re-timeline-item h3,
.re-timeline-item h4 {
    margin-top: 0;
    color: #1f2937;
}

.re-timeline-item p {
    color: #4b5563;
}

/* 6. COMPARISON CARDS - Side-by-side options */
.re-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.re-comparison-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
}

.re-comparison-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563EB 0%, #3b82f6 100%);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.re-comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #2563EB;
}

.re-comparison-card:hover::before {
    opacity: 1;
}

.re-comparison-card h3,
.re-comparison-card h4 {
    color: #1f2937;
    margin-top: 0;
}

.re-comparison-card .re-comparison-pros,
.re-comparison-card .re-comparison-cons {
    margin: 1rem 0;
}

.re-comparison-card .re-comparison-pros li::before {
    content: "✓ ";
    color: #10b981;
    font-weight: 700;
}

.re-comparison-card .re-comparison-cons li::before {
    content: "✗ ";
    color: #ef4444;
    font-weight: 700;
}

/* 7. AUTHOR BOX - Expert signature */
.re-author-box {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-top: 4px solid #2563EB;
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.re-author-box img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.re-author-box .re-author-info {
    flex: 1;
}

.re-author-box .re-author-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
}

.re-author-box .re-author-title {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
}

.re-author-box .re-author-bio {
    font-size: 0.9375rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.6;
}

/* 8. DATA TABLES WITH ICONS - Market reports */
.re-data-table {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin: 2rem 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.re-data-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.re-data-table th {
    padding: 1rem 1.25rem;
    font-weight: 600;
    text-align: left;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.re-data-table tbody tr {
    transition: background-color 0.2s ease;
}

.re-data-table tbody tr:nth-child(odd) {
    background: #f9fafb;
}

.re-data-table tbody tr:hover {
    background: #eff6ff;
}

.re-data-table td {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    color: #374151;
}

/* Trend indicators */
.re-data-table .trend-up::after {
    content: " ↗";
    color: #10b981;
    font-weight: 700;
    margin-left: 0.25rem;
}

.re-data-table .trend-down::after {
    content: " ↘";
    color: #ef4444;
    font-weight: 700;
    margin-left: 0.25rem;
}

.re-data-table .trend-neutral::after {
    content: " →";
    color: #6b7280;
    font-weight: 700;
    margin-left: 0.25rem;
}

/* ========================================
   PHASE 3: REAL ESTATE SPECIFIC
   ======================================== */

/* Neighborhood Badges */
.re-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.re-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s ease;
}

.re-badge:hover {
    border-color: #2563EB;
    background: #eff6ff;
}

.re-badge .icon {
    font-size: 1.125rem;
}

.re-badge-rating {
    background: #10b981;
    color: white;
    border-color: #10b981;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* FAQ Accordion (Native HTML) */
.re-faq-accordion {
    margin: 2rem 0;
}

.re-faq-accordion details {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.re-faq-accordion details:hover {
    border-color: #2563EB;
}

.re-faq-accordion details[open] {
    background: #eff6ff;
    border-color: #2563EB;
}

.re-faq-accordion summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 3rem;
}

.re-faq-accordion summary::after {
    content: "▼";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #2563EB;
    transition: transform 0.3s ease;
}

.re-faq-accordion details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.re-faq-accordion .re-faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: #4b5563;
    line-height: 1.7;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    /* Drop caps smaller on mobile */
    .entry-content > p:first-of-type::first-letter,
    .wp-block-post-content > p:first-of-type::first-letter {
        font-size: 2.5em;
    }

    /* Stack stat cards */
    .re-stat-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .re-stat-card {
        padding: 1.5rem;
    }

    /* Takeaways box */
    .re-box-takeaway {
        padding: 1.5rem;
    }

    /* Timeline adjustments */
    .re-timeline-item {
        padding-left: 2.5rem;
    }

    .re-timeline-item::before {
        width: 2.5rem;
        height: 2.5rem;
        left: -1.25rem;
        font-size: 1rem;
    }

    /* Comparison cards stack */
    .re-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Author box stack */
    .re-author-box {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    /* Tables scroll horizontally */
    .re-data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .re-stat-card,
    .re-box-takeaway,
    .re-alert {
        border-width: 3px;
    }

    .re-data-table thead {
        background: #1f2937;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .re-stat-card,
    .re-comparison-card,
    .re-timeline-item,
    .re-faq-accordion details {
        transition: none;
    }

    .re-stat-card:hover,
    .re-comparison-card:hover {
        transform: none;
    }
}

/* Print styles */
@media print {
    .re-stat-card,
    .re-box-takeaway {
        break-inside: avoid;
    }

    .re-stat-card {
        background: white;
        border: 2px solid #000;
        color: #000;
    }

    .re-timeline-item::before {
        background: #000;
    }
}

/**
 * Semantic Block Styles for AI-Generated Content
 * Automatically applied based on content structure and semantics
 *
 * @package HRDC_AI_Writer
 * @since 7.9.0
 */

/* ========================================
   PARAGRAPH VARIATIONS
   ======================================== */

/* Lead Paragraph - First substantive paragraph after intro */
.is-style-lead-paragraph {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* Callout - For statistics, data points, or important facts */
.is-style-callout {
    background: #f3f4f6;
    border-left: 4px solid #2563EB;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
}

.is-style-callout::before {
    content: "💡";
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

/* Note - Important information or warnings */
.is-style-note {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.is-style-note::before {
    content: "📌";
    margin-right: 0.75rem;
    font-size: 1.125rem;
}

/* ========================================
   HEADING VARIATIONS
   ======================================== */

/* Section Divider - Major section breaks */
.wp-block-heading.is-style-section-divider {
    border-top: 2px solid #e5e7eb;
    padding-top: 2rem;
    margin-top: 3rem;
}

/* Featured Heading - Key takeaways or important sections */
.wp-block-heading.is-style-featured-heading {
    position: relative;
    padding-left: 1rem;
}

.wp-block-heading.is-style-featured-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 4px;
    background: linear-gradient(to bottom, #2563EB, #3b82f6);
    border-radius: 2px;
}

/* With Icon - Adds visual interest to headings */
.wp-block-heading.is-style-with-icon::before {
    content: "📍 ";
    margin-right: 0.5rem;
}

/* ========================================
   QUOTE BLOCK ENHANCEMENTS
   ======================================== */

/* Testimonial Style */
.wp-block-quote.is-style-testimonial {
    background: #f9fafb;
    border: none;
    border-left: 5px solid #10b981;
    padding: 2rem;
    font-size: 1.125rem;
    font-style: italic;
    margin: 2rem 0;
}

.wp-block-quote.is-style-testimonial cite {
    font-style: normal;
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 1rem;
    display: block;
}

/* Large Pullquote */
.wp-block-quote.is-style-pullquote {
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center;
    border: 3px solid #2563EB;
    border-radius: 8px;
    padding: 2rem 3rem;
    margin: 3rem auto;
    max-width: 80%;
    font-style: italic;
    color: #1f2937;
}

/* ========================================
   IMAGE/FIGURE ENHANCEMENTS
   ======================================== */

/* Rounded Images */
.wp-block-image.is-style-rounded img {
    border-radius: 12px;
    overflow: hidden;
}

/* Elevated/Shadow Images */
.wp-block-image.is-style-elevated img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-radius: 8px;
}

/* Full-Width Images */
.wp-block-image.is-style-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.wp-block-image.is-style-full-width img {
    width: 100%;
    max-width: none;
}

/* ========================================
   TABLE ENHANCEMENTS
   ======================================== */

/* Striped Rows */
.wp-block-table.is-style-striped tbody tr:nth-child(even) {
    background: #f9fafb;
}

.wp-block-table.is-style-striped tbody tr:hover {
    background: #f3f4f6;
}

/* Compact Table */
.wp-block-table.is-style-compact td,
.wp-block-table.is-style-compact th {
    padding: 0.5rem;
    font-size: 0.875rem;
}

/* Pricing Table */
.wp-block-table.is-style-pricing {
    border: 2px solid #2563EB;
    border-radius: 8px;
    overflow: hidden;
}

.wp-block-table.is-style-pricing thead {
    background: #2563EB;
    color: white;
}

.wp-block-table.is-style-pricing tbody tr:hover {
    background: #eff6ff;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .is-style-lead-paragraph {
        font-size: 1.0625rem;
    }

    .is-style-callout,
    .is-style-note {
        padding: 1rem;
        margin: 1rem 0;
    }

    .wp-block-quote.is-style-pullquote {
        font-size: 1.25rem;
        padding: 1.5rem 2rem;
        max-width: 95%;
    }

    .wp-block-heading.is-style-section-divider {
        margin-top: 2rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Ensure sufficient contrast */
@media (prefers-contrast: high) {
    .is-style-callout {
        border-left-width: 6px;
    }

    .is-style-note {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wp-block-heading.is-style-featured-heading::before {
        background: #2563EB;
    }
}

/* Print styles */
@media print {
    .is-style-callout::before,
    .is-style-note::before,
    .wp-block-heading.is-style-with-icon::before {
        content: none;
    }

    .wp-block-image.is-style-elevated img {
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}

/**
 * Moyer Realty Services - Blog CTA Styles (v2.0 - Trusted Advisor)
 * Enhanced conversion-focused design with trust indicators
 *
 * @package HRDC_AI_Writer
 * @since 7.6.3
 */

/* ========================================
   END-OF-POST CTA (Primary)
   ======================================== */

.mrs-blog-cta {
    margin: 3rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.mrs-blog-cta--primary {
    background: #FAFAFA; /* Subtle grey background */
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.75rem 2rem; /* Reduced from 3rem to 1.75rem (42% reduction) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.mrs-blog-cta__inner {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.mrs-blog-cta__logo {
    margin: 0 auto 1rem auto;
    text-align: center;
}

.mrs-blog-cta__logo img {
    max-width: 180px;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.mrs-blog-cta__headline {
    font-size: 1.375rem; /* H3 size */
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.mrs-blog-cta__body {
    font-size: 0.9375rem;
    line-height: 1.6; /* Increased from 1.5 for easier scanning */
    color: #4b5563;
    margin: 0 0 1.25rem 0;
}

/* Button Container */
.mrs-blog-cta__actions {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    justify-content: center; /* Center the buttons */
    gap: 12px; /* Space between buttons */
    margin-bottom: 1rem;
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

/* Base Button Styles */
.mrs-blog-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px; /* Increased from 6px for friendlier feel */
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    border: 2px solid transparent;
}

/* Primary Button (Blue Solid) */
.mrs-blog-cta__btn--primary {
    background-color: #2563EB;
    color: #ffffff;
    border-color: #2563EB;
}

.mrs-blog-cta__btn--primary:hover {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    transform: translateY(-1px); /* Reduced lift */
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
}

/* Secondary Button - Text Link Style (Subtle) */
.mrs-blog-cta__btn--secondary {
    background-color: transparent;
    color: #6b7280; /* Muted grey instead of blue */
    border: none; /* Remove border */
    padding: 8px 16px; /* Smaller padding */
    font-size: 14px; /* Smaller text */
    font-weight: 500; /* Lighter weight */
    text-decoration: underline;
    text-decoration-color: transparent;
}

.mrs-blog-cta__btn--secondary:hover {
    color: #2563EB;
    background-color: transparent;
    transform: none; /* No lift */
    box-shadow: none;
    text-decoration-color: #2563EB;
}

/* Trust Indicators - Subtle footnote style */
.mrs-blog-cta__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem; /* Reduced spacing */
}

.mrs-blog-cta__stars {
    font-size: 11px; /* Smaller */
    line-height: 1;
    opacity: 0.8;
}

.mrs-blog-cta__trust-text {
    font-size: 11px; /* Smaller */
    color: #9ca3af; /* More muted */
    font-weight: 400; /* Lighter */
}

/* Footer Note */
.mrs-blog-cta__note {
    font-size: 0.75rem; /* Smaller */
    color: #9ca3af;
    margin: 0;
    font-style: italic;
}

.mrs-blog-cta__note strong {
    color: #6b7280;
}

/* ========================================
   INLINE CTA (Soft)
   ======================================== */

.mrs-blog-cta--inline {
    background: #f9fafb;
    border-left: 4px solid #2563EB;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.mrs-blog-cta__inline-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
}

.mrs-blog-cta__inline-text strong {
    color: #111827;
    font-size: 1.125rem;
}

.mrs-blog-cta__inline-link {
    color: #2563EB;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.mrs-blog-cta__inline-link:hover {
    border-bottom-color: #2563EB;
}

/* ========================================
   CONTEXT-SPECIFIC OVERRIDES
   ======================================== */

/* Buyer context - green accent */
.mrs-blog-cta--buyer .mrs-blog-cta__btn--primary {
    background-color: #10b981;
    border-color: #10b981;
}

.mrs-blog-cta--buyer .mrs-blog-cta__btn--primary:hover {
    background-color: #059669;
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.mrs-blog-cta--buyer .mrs-blog-cta__btn--secondary {
    color: #10b981;
    border-color: #10b981;
}

.mrs-blog-cta--buyer .mrs-blog-cta__btn--secondary:hover {
    background-color: #d1fae5;
}

.mrs-blog-cta--inline.mrs-blog-cta--buyer {
    border-left-color: #10b981;
}

.mrs-blog-cta--inline.mrs-blog-cta--buyer .mrs-blog-cta__inline-link {
    color: #10b981;
}

.mrs-blog-cta--inline.mrs-blog-cta--buyer .mrs-blog-cta__inline-link:hover {
    border-bottom-color: #10b981;
}

/* Seller context - red accent */
.mrs-blog-cta--seller .mrs-blog-cta__btn--primary {
    background-color: #ef4444;
    border-color: #ef4444;
}

.mrs-blog-cta--seller .mrs-blog-cta__btn--primary:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.mrs-blog-cta--seller .mrs-blog-cta__btn--secondary {
    color: #ef4444;
    border-color: #ef4444;
}

.mrs-blog-cta--seller .mrs-blog-cta__btn--secondary:hover {
    background-color: #fee2e2;
}

.mrs-blog-cta--inline.mrs-blog-cta--seller {
    border-left-color: #ef4444;
}

.mrs-blog-cta--inline.mrs-blog-cta--seller .mrs-blog-cta__inline-link {
    color: #ef4444;
}

.mrs-blog-cta--inline.mrs-blog-cta--seller .mrs-blog-cta__inline-link:hover {
    border-bottom-color: #ef4444;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (min-width: 768px) {
    .mrs-blog-cta__actions {
        flex-direction: row;
    }

    .mrs-blog-cta__btn {
        min-width: auto;
    }
}

@media (max-width: 767px) {
    .mrs-blog-cta--primary {
        padding: 1.5rem 1.25rem;
    }

    .mrs-blog-cta__headline {
        font-size: 1.25rem;
    }

    .mrs-blog-cta__body {
        font-size: 0.875rem;
    }

    .mrs-blog-cta__actions {
        flex-direction: column; /* Stack on mobile */
        width: 100%;
        gap: 10px;
    }

    .mrs-blog-cta__btn--primary {
        width: 100%;
    }

    .mrs-blog-cta__btn--secondary {
        width: auto;
    }

    .mrs-blog-cta__trust {
        flex-direction: row;
        gap: 0.375rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states for keyboard navigation */
.mrs-blog-cta__btn:focus-visible {
    outline: 3px solid #2563EB;
    outline-offset: 2px;
}

.mrs-blog-cta__inline-link:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ensure sufficient contrast */
@media (prefers-contrast: high) {
    .mrs-blog-cta__headline {
        color: #000000;
    }

    .mrs-blog-cta__body {
        color: #1f2937;
    }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .mrs-blog-cta__btn,
    .mrs-blog-cta__inline-link {
        transition: none;
    }

    .mrs-blog-cta__btn:hover {
        transform: none;
    }
}

/**
 * FAQ Block Frontend Styles
 *
 * Modern CSS without external dependencies
 */

.hrdc-faq-block {
    --faq-border-color: #e2e8f0;
    --faq-border-active: #3b82f6;
    --faq-bg-primary: #f8fafc;
    --faq-bg-answer: #ffffff;
    --faq-text-primary: #0f172a;
    --faq-text-secondary: #475569;
    --faq-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --faq-shadow-hover: 0 6px 16px rgba(15, 23, 42, 0.1);
    --faq-transition: all 0.3s ease;

    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    max-width: 100%;
    margin: 2rem 0;
}

/* Header */
.hrdc-faq-header {
    margin-bottom: 1.5rem;
}

.hrdc-faq-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--faq-text-primary);
    margin: 0 0 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.hrdc-faq-description {
    font-size: 1rem;
    color: var(--faq-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Items Container */
.hrdc-faq-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual FAQ Item */
.hrdc-faq-item {
    background: var(--faq-bg-primary);
    border: 2px solid var(--faq-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: var(--faq-transition);
}

.hrdc-faq-item:hover {
    box-shadow: var(--faq-shadow-hover);
}

.hrdc-faq-item.is-active {
    border-color: var(--faq-border-active);
    box-shadow: var(--faq-shadow);
}

/* Question Button */
.hrdc-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--faq-transition);
}

.hrdc-faq-question:hover {
    background: rgba(59, 130, 246, 0.05);
}

.hrdc-faq-question:focus-visible {
    outline: 2px solid var(--faq-border-active);
    outline-offset: -2px;
}

.hrdc-faq-question-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--faq-text-primary);
    line-height: 1.5;
}

/* Icon Animation */
.hrdc-faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--faq-border-active);
    transition: transform 0.3s ease;
}

.hrdc-faq-item.is-active .hrdc-faq-icon {
    transform: rotate(45deg);
}

/* Answer Section */
.hrdc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.hrdc-faq-item.is-active .hrdc-faq-answer {
    max-height: 1000px;
    transition: max-height 0.6s ease-in, padding 0.4s ease-in;
}

.hrdc-faq-answer-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--faq-text-secondary);
    line-height: 1.7;
}

.hrdc-faq-answer-content > *:first-child {
    margin-top: 0;
}

.hrdc-faq-answer-content > *:last-child {
    margin-bottom: 0;
}

.hrdc-faq-answer-content p {
    margin: 0.75rem 0;
}

.hrdc-faq-answer-content ul,
.hrdc-faq-answer-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.hrdc-faq-answer-content li {
    margin: 0.375rem 0;
}

/* Style Variations */

/* Bordered Style (default) */
.hrdc-faq-style-bordered .hrdc-faq-item {
    border-width: 2px;
    border-left-width: 5px;
}

/* Flat Style */
.hrdc-faq-style-flat .hrdc-faq-item {
    border: none;
    border-bottom: 1px solid var(--faq-border-color);
    border-radius: 0;
    background: transparent;
}

.hrdc-faq-style-flat .hrdc-faq-item:last-child {
    border-bottom: none;
}

/* Card Style */
.hrdc-faq-style-card .hrdc-faq-item {
    background: white;
    box-shadow: var(--faq-shadow);
}

.hrdc-faq-style-card .hrdc-faq-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--faq-shadow-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .hrdc-faq-title {
        font-size: 1.5rem;
    }

    .hrdc-faq-question {
        padding: 1rem;
    }

    .hrdc-faq-question-text {
        font-size: 1rem;
    }

    .hrdc-faq-answer-content {
        padding: 0 1rem 1rem;
        font-size: 0.9375rem;
    }
}

/* Print Styles */
@media print {
    .hrdc-faq-item {
        page-break-inside: avoid;
        border: 1px solid #000;
        box-shadow: none;
    }

    .hrdc-faq-answer {
        max-height: none !important;
    }

    .hrdc-faq-icon {
        display: none;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .hrdc-faq-item,
    .hrdc-faq-question,
    .hrdc-faq-answer,
    .hrdc-faq-icon {
        transition: none;
    }
}

/* Note: Dark mode is intentionally disabled to keep a consistent light style */