/**
 * ============================================================================
 * SENTINEL COMMAND - CUSTOM COMPONENTS
 * ============================================================================
 * 
 * This file contains custom component styles for the Bit Sentinel theme.
 * These are unique to the brand and not part of the Tailwind utility classes.
 * 
 * SECTIONS:
 * 1. Glassmorphism Effects
 * 2. Glow Effects
 * 3. Text Gradients
 * 4. Background Effects
 * 5. Button Variants
 * 6. Card Variants
 * 7. Status Indicators
 * 8. Navigation Components
 * 9. Form Components
 * 10. Badge & Label Styles
 * 
 * ============================================================================
 */

/* ============================================================================
 * 1. GLASSMORPHISM EFFECTS
 * ============================================================================ */

.glass {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid hsl(var(--glass-border));
}

.glass-subtle {
    background: hsl(var(--background) / 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid hsl(var(--border) / 0.5);
}

.glass-strong {
    background: hsl(var(--card) / 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid hsl(var(--border) / 0.8);
}

/* ============================================================================
 * 2. GLOW EFFECTS
 * ============================================================================ */

.glow-red {
    box-shadow: var(--shadow-red);
}

.glow-blue {
    box-shadow: var(--shadow-blue);
}

.glow-cyan {
    box-shadow: var(--shadow-cyan);
}

.glow-red-intense {
    box-shadow: 0 0 60px -5px hsl(357 90% 58% / 0.6);
}

.glow-blue-intense {
    box-shadow: 0 0 60px -5px hsl(196 68% 66% / 0.6);
}

.glow-cyan-intense {
    box-shadow: 0 0 60px -5px hsl(196 62% 54% / 0.6);
}

/* Hover glow effects */
.hover\:glow-red:hover {
    box-shadow: var(--shadow-red);
}

.hover\:glow-blue:hover {
    box-shadow: var(--shadow-blue);
}

.hover\:glow-cyan:hover {
    box-shadow: var(--shadow-cyan);
}

/* ============================================================================
 * 3. TEXT GRADIENTS
 * ============================================================================ */

.text-gradient-red {
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cyan {
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Multi-color gradient */
.text-gradient-sentinel {
    background: linear-gradient(135deg, 
        hsl(357 90% 58%), 
        hsl(196 68% 66%), 
        hsl(196 62% 54%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================
 * 4. BACKGROUND EFFECTS
 * ============================================================================ */

/* Network Grid Pattern */
.bg-grid {
    background-image: 
        linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
    background-size: 60px 60px;
}

.bg-grid-subtle {
    background-image: 
        linear-gradient(hsl(var(--border) / 0.15) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-grid-dense {
    background-image: 
        linear-gradient(hsl(var(--border) / 0.2) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Gradient Backgrounds */
.bg-gradient-dark {
    background: var(--gradient-dark);
}

.bg-gradient-red-subtle {
    background: linear-gradient(135deg, hsl(357 90% 58% / 0.1), transparent);
}

.bg-gradient-blue-subtle {
    background: linear-gradient(135deg, hsl(196 68% 66% / 0.1), transparent);
}

.bg-gradient-cyan-subtle {
    background: linear-gradient(135deg, hsl(196 62% 54% / 0.1), transparent);
}

/* ============================================================================
 * 5. BUTTON VARIANTS - Sentinel Brand Buttons
 * ============================================================================ */

/* Base button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Size variants */
.btn-sm {
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

.btn-md,
.btn {
    height: 2.5rem;
    padding: 0 1rem;
}

.btn-lg {
    height: 2.75rem;
    padding: 0 2rem;
}

.btn-xl {
    height: 3.5rem;
    padding: 0 2.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

/* Sentinel Red Button - Offensive/Alert */
.btn-sentinel-red {
    background-color: hsl(357 90% 58%);
    color: white;
    font-weight: 600;
    box-shadow: 0 0 40px -10px hsl(357 90% 58% / 0.5);
}

.btn-sentinel-red:hover {
    background-color: hsl(357 90% 52%);
    transform: scale(1.02);
}

/* Sentinel Blue Button - Defensive/Trust */
.btn-sentinel-blue {
    background-color: hsl(196 68% 66%);
    color: hsl(220 14% 5%);
    font-weight: 600;
    box-shadow: 0 0 40px -10px hsl(196 68% 66% / 0.5);
}

.btn-sentinel-blue:hover {
    background-color: hsl(196 68% 58%);
    transform: scale(1.02);
}

/* Sentinel Cyan Button - Education/Training */
.btn-sentinel-cyan {
    background-color: hsl(196 62% 54%);
    color: hsl(220 14% 5%);
    font-weight: 600;
    box-shadow: 0 0 40px -10px hsl(196 62% 54% / 0.5);
}

.btn-sentinel-cyan:hover {
    background-color: hsl(196 62% 46%);
    transform: scale(1.02);
}

/* Emergency Button */
.btn-emergency {
    background-color: hsl(357 90% 58%);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 40px -10px hsl(357 90% 58% / 0.5);
}

.btn-emergency:hover {
    background-color: hsl(357 90% 52%);
    transform: scale(1.02);
}

/* Ghost Light Button */
.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
    background-color: transparent;
    border: 1px solid hsl(var(--foreground) / 0.2);
    color: hsl(var(--foreground) / 0.9);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.btn-ghost-light:hover {
    background-color: hsl(var(--foreground) / 0.05);
    border-color: hsl(var(--foreground) / 0.4);
}

/* Mission Selector Button - Enhanced styling */
.mission-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border) / 0.5);
    background-color: hsl(var(--card) / 0.5);
    backdrop-filter: blur(8px);
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    transition: all 0.3s ease;
}

.mission-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}

.mission-btn.hover-red:hover {
    background-color: hsl(357 90% 58%);
    border-color: hsl(357 90% 58%);
    color: white;
}

.mission-btn.hover-blue:hover {
    background-color: hsl(196 68% 66%);
    border-color: hsl(196 68% 66%);
    color: white;
}

.mission-btn.hover-cyan:hover {
    background-color: hsl(180 70% 50%);
    border-color: hsl(180 70% 50%);
    color: white;
}

/* Primary Button */
.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    border: 1px solid hsl(var(--input));
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
}

.btn-ghost:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* ============================================================================
 * 6. CARD VARIANTS
 * ============================================================================ */

.card {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
}

.card-elevated {
    background-color: hsl(var(--card-elevated));
    box-shadow: var(--shadow-elevated);
}

.card-red {
    border-color: hsl(357 90% 58% / 0.3);
    background: linear-gradient(135deg, hsl(357 90% 58% / 0.1), transparent);
}

.card-blue {
    border-color: hsl(196 68% 66% / 0.3);
    background: linear-gradient(135deg, hsl(196 68% 66% / 0.1), transparent);
}

.card-cyan {
    border-color: hsl(196 62% 54% / 0.3);
    background: linear-gradient(135deg, hsl(196 62% 54% / 0.1), transparent);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px hsl(0 0% 0% / 0.3);
}

.card-hover-scale {
    transition: all 0.5s ease;
}

.card-hover-scale:hover {
    transform: scale(1.02);
}

/* ============================================================================
 * 7. STATUS INDICATORS
 * ============================================================================ */

/* Status Label (Mono font, uppercase) */
.status-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Live Status Indicator */
.status-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-live::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: hsl(142 76% 36%);
    animation: pulse 2s infinite;
}

/* Status Dots */
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.status-dot-success {
    background-color: hsl(142 76% 36%);
}

.status-dot-warning {
    background-color: hsl(38 92% 50%);
}

.status-dot-error {
    background-color: hsl(357 90% 58%);
}

.status-dot-info {
    background-color: hsl(196 68% 66%);
}

/* Pulse indicator (used in hero) */
.pulse-indicator {
    position: relative;
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
}

.pulse-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: hsl(196 68% 66%);
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pulse-indicator::after {
    content: '';
    position: relative;
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: hsl(196 68% 66%);
}

/* ============================================================================
 * 8. NAVIGATION COMPONENTS
 * ============================================================================ */

/* Mega Menu Container */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0.5rem;
    z-index: var(--z-dropdown, 1000);
}

.mega-menu-content {
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
    padding: 2rem;
}

/* Nav Link */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground) / 0.7);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--accent) / 0.5);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(var(--background));
    border-top: 1px solid hsl(var(--border) / 0.5);
    overflow-y: auto;
    z-index: var(--z-fixed, 1030);
}

/* Polylang Language Switcher Dropdown */
.pll-switcher {
    position: relative;
}

.pll-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px hsl(0 0% 0% / 0.3);
    z-index: var(--z-dropdown, 1000);
}

/* Add invisible padding to prevent hover gap */
.pll-dropdown::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.pll-lang-item {
    margin: 0;
    padding: 0;
}

.pll-lang-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground) / 0.7);
    text-decoration: none;
    transition: all 0.15s ease;
}

.pll-lang-item a:hover {
    background-color: hsl(var(--accent) / 0.5);
    color: hsl(var(--foreground));
}

.pll-lang-item.current a {
    color: hsl(var(--primary));
    font-weight: 500;
    background-color: hsl(var(--accent) / 0.3);
}

/* Polylang flag images */
.pll-switcher img,
.pll-lang-item img {
    width: 1.25rem;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Align flag in main button */
.pll-switcher > button span {
    display: inline-flex;
    align-items: center;
}

/* Show dropdown on hover - override hidden class */
.pll-switcher:hover .pll-dropdown.hidden,
.pll-switcher:focus-within .pll-dropdown.hidden,
.pll-switcher:hover .pll-dropdown,
.pll-switcher:focus-within .pll-dropdown {
    display: block !important;
}


/* ============================================================================
 * 9. FORM COMPONENTS
 * ============================================================================ */

/* Input base */
.input {
    display: flex;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Textarea */
.textarea {
    min-height: 5rem;
    padding: 0.5rem 0.75rem;
    resize: vertical;
}

/* ============================================================================
 * 10. BADGE & LABEL STYLES
 * ============================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.badge-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge-red {
    background-color: hsl(357 90% 58% / 0.1);
    color: hsl(357 90% 58%);
    border-color: hsl(357 90% 58% / 0.3);
}

.badge-blue {
    background-color: hsl(196 68% 66% / 0.1);
    color: hsl(196 68% 66%);
    border-color: hsl(196 68% 66% / 0.3);
}

.badge-cyan {
    background-color: hsl(196 62% 54% / 0.1);
    color: hsl(196 62% 54%);
    border-color: hsl(196 62% 54% / 0.3);
}

.badge-outline {
    background-color: transparent;
    border-color: hsl(var(--border));
}

/* Urgent Badge */
.badge-urgent {
    background-color: hsl(357 90% 58% / 0.2);
    color: hsl(357 90% 58%);
    border-color: hsl(357 90% 58% / 0.4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
 * 11. GRADIENT BORDERS
 * ============================================================================ */

.border-gradient-red {
    border-image: var(--gradient-red) 1;
}

.border-gradient-blue {
    border-image: var(--gradient-blue) 1;
}

.border-gradient-cyan {
    border-image: var(--gradient-cyan) 1;
}

/* ============================================================================
 * 12. SCROLLBAR STYLING
 * ============================================================================ */

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted)) hsl(var(--background));
}

/* ============================================================================
 * 13. SELECTION STYLING
 * ============================================================================ */

::selection {
    background-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

::-moz-selection {
    background-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

/* ============================================================================
 * 14. BLOG & PAGINATION STYLES
 * ============================================================================ */

/* Pagination Container */
.pagination,
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* UL-based pagination (from paginate_links with type='list') */
ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.page-numbers li {
    margin: 0;
    padding: 0;
}

/* Page Numbers - Base Style */
.pagination .page-numbers,
.nav-links .page-numbers,
ul.page-numbers li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: hsl(var(--muted-foreground));
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
    border: 1px solid hsl(var(--border) / 0.4);
    border-radius: 0.625rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Subtle glow effect on hover */
.pagination .page-numbers::before,
.nav-links .page-numbers::before,
ul.page-numbers li .page-numbers::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, hsl(var(--primary) / 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Hover State */
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover,
ul.page-numbers li .page-numbers:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--primary) / 0.5);
    background: linear-gradient(135deg, hsl(var(--primary) / 0.12) 0%, hsl(var(--primary) / 0.06) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px hsl(var(--primary) / 0.15);
}

.pagination .page-numbers:hover::before,
.nav-links .page-numbers:hover::before,
ul.page-numbers li .page-numbers:hover::before {
    opacity: 1;
}

/* Current/Active Page */
.pagination .page-numbers.current,
.nav-links .page-numbers.current,
ul.page-numbers li .page-numbers.current,
.pagination .page-numbers[aria-current="page"],
.nav-links .page-numbers[aria-current="page"],
ul.page-numbers li .page-numbers[aria-current="page"] {
    color: hsl(var(--primary-foreground));
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.85) 100%);
    border-color: hsl(var(--primary));
    font-weight: 600;
    box-shadow: 
        0 2px 8px -2px hsl(var(--primary) / 0.4),
        inset 0 1px 1px hsl(0 0% 100% / 0.1);
    cursor: default;
    pointer-events: none;
}

.pagination .page-numbers.current::before,
.nav-links .page-numbers.current::before,
ul.page-numbers li .page-numbers.current::before {
    display: none;
}

/* Ellipsis/Dots */
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots,
ul.page-numbers li .page-numbers.dots {
    background: transparent;
    border: none;
    min-width: 2rem;
    padding: 0 0.25rem;
    color: hsl(var(--muted-foreground) / 0.6);
    pointer-events: none;
    box-shadow: none;
}

.pagination .page-numbers.dots::before,
.nav-links .page-numbers.dots::before,
ul.page-numbers li .page-numbers.dots::before {
    display: none;
}

/* Prev/Next Navigation Buttons */
.pagination .prev,
.pagination .next,
.nav-links .prev,
.nav-links .next,
ul.page-numbers li .prev,
ul.page-numbers li .next {
    gap: 0.5rem;
    padding: 0 1rem;
    min-width: auto;
    font-weight: 500;
}

/* Icon styling within prev/next */
.pagination .prev svg,
.pagination .next svg,
.pagination .prev i,
.pagination .next i,
.nav-links .prev svg,
.nav-links .next svg,
.nav-links .prev i,
.nav-links .next i,
ul.page-numbers li .prev svg,
ul.page-numbers li .next svg,
ul.page-numbers li .prev i,
ul.page-numbers li .next i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pagination .prev:hover svg,
.pagination .prev:hover i,
.nav-links .prev:hover svg,
.nav-links .prev:hover i,
ul.page-numbers li .prev:hover svg,
ul.page-numbers li .prev:hover i {
    transform: translateX(-2px);
}

.pagination .next:hover svg,
.pagination .next:hover i,
.nav-links .next:hover svg,
.nav-links .next:hover i,
ul.page-numbers li .next:hover svg,
ul.page-numbers li .next:hover i {
    transform: translateX(2px);
}

/* Focus styles for accessibility */
.pagination .page-numbers:focus-visible,
.nav-links .page-numbers:focus-visible,
ul.page-numbers li .page-numbers:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* Screen reader only text */
.pagination .screen-reader-text,
.nav-links .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .pagination .page-numbers,
    .nav-links .page-numbers,
    ul.page-numbers li .page-numbers {
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 0.625rem;
        font-size: 0.8125rem;
    }
    
    .pagination .prev,
    .pagination .next,
    .nav-links .prev,
    .nav-links .next,
    ul.page-numbers li .prev,
    ul.page-numbers li .next {
        padding: 0 0.75rem;
    }
    
    /* Hide text on small screens, keep icons */
    .pagination .prev span:not(.screen-reader-text),
    .pagination .next span:not(.screen-reader-text),
    ul.page-numbers li .prev span:not(.screen-reader-text),
    ul.page-numbers li .next span:not(.screen-reader-text) {
        display: none;
    }
}

/* Line Clamp Utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Article Prose Reset */
.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

/* Blog Card Hover Effects */
.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Comments Section Styling */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: hsl(var(--card) / 0.3);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
}

.comment .comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.comment .comment-author img {
    border-radius: 9999px;
}

.comment .comment-author .fn {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.comment .comment-meta {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.comment .comment-content {
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

.comment .reply {
    margin-top: 1rem;
}

.comment .reply a {
    font-size: 0.875rem;
    color: hsl(var(--primary));
}

.comment .reply a:hover {
    text-decoration: underline;
}

/* Comment Form */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: hsl(var(--card) / 0.5);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.5);
}

.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.comment-form .form-submit input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.comment-form .form-submit input[type="submit"]:hover {
    opacity: 0.9;
}

/* ============================================================================
 * 15. PROSE / CONTENT TYPOGRAPHY STYLES
 * ============================================================================
 * Professional styling for blog posts and pages not using Elementor.
 * These styles apply to .entry-content and .prose containers.
 * ============================================================================ */

/* Entry Content Container */
.entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: hsl(var(--muted-foreground));
    /* max-width: 75ch; */
}

.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * HEADINGS
 * -------------------------------------------------------------------------- */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 700;
    line-height: 1.25;
    color: hsl(var(--foreground));
    letter-spacing: -0.02em;
    scroll-margin-top: 6rem;
}

.entry-content h1 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.15;
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--foreground) / 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.entry-content h2 {
    font-size: 1.875rem;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.4);
    position: relative;
}

.entry-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.5));
    border-radius: 1px;
}

.entry-content h3 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: hsl(var(--foreground) / 0.95);
}

.entry-content h4 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: hsl(var(--foreground) / 0.9);
}

.entry-content h5 {
    font-size: 1.125rem;
    margin-top: 1.75rem;
    margin-bottom: 0.625rem;
    color: hsl(var(--foreground) / 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.entry-content h6 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Heading links (anchor targets) */
.entry-content h1:target,
.entry-content h2:target,
.entry-content h3:target,
.entry-content h4:target {
    animation: heading-highlight 2s ease-out;
}

@keyframes heading-highlight {
    0% { 
        background-color: hsl(var(--primary) / 0.15);
        margin-left: -1rem;
        padding-left: 1rem;
        border-radius: 0.25rem;
    }
    100% { 
        background-color: transparent;
        margin-left: 0;
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
 * PARAGRAPHS
 * -------------------------------------------------------------------------- */

.entry-content p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-wrap: pretty;
}

.entry-content p:has(+ ul),
.entry-content p:has(+ ol) {
    margin-bottom: 0.75rem;
}

/* Lead paragraph (first paragraph after headings) */
.entry-content h1 + p,
.entry-content > p:first-of-type {
    font-size: 1.1875rem;
    color: hsl(var(--muted-foreground) / 0.9);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
 * INLINE ELEMENTS
 * -------------------------------------------------------------------------- */

/* Strong / Bold */
.entry-content strong,
.entry-content b {
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Italic / Emphasis */
.entry-content em,
.entry-content i:not([data-lucide]):not([class*="lucide"]) {
    font-style: italic;
    color: hsl(var(--foreground) / 0.9);
}

/* Strong + Italic combo */
.entry-content strong em,
.entry-content em strong {
    font-weight: 700;
    color: hsl(var(--foreground));
}

/* Underline */
.entry-content u {
    text-decoration-color: hsl(var(--primary) / 0.5);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Strikethrough */
.entry-content s,
.entry-content del {
    text-decoration-color: hsl(var(--muted-foreground) / 0.5);
}

/* --------------------------------------------------------------------------
 * MARK / HIGHLIGHT STYLES
 * -------------------------------------------------------------------------- */

/* Base mark styling */
.entry-content mark {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.25), hsl(var(--primary) / 0.15));
    padding: 0.15em 0.4em;
    border-radius: 0.25em;
    color: hsl(var(--foreground));
    font-weight: 500;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* WordPress/Gutenberg inline color marks - preserve user colors but enhance */
.entry-content mark[style*="background-color"] {
    background: var(--user-bg, inherit) !important;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    font-weight: 600;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* White text on colored backgrounds */
.entry-content mark.has-white-color {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Cyan/Primary colored marks */
.entry-content mark[style*="#0aadcf"],
.entry-content mark[style*="0aadcf"],
.entry-content mark.has-cyan-background-color,
.entry-content mark.has-primary-background-color {
    background: linear-gradient(135deg, #0aadcf, #0891b2) !important;
    box-shadow: 
        0 2px 8px rgba(10, 173, 207, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Highlight effect for attention-grabbing marks */
.entry-content mark[style*="background-color"]:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Warning/Alert yellow marks */
.entry-content mark.has-warning-background-color,
.entry-content mark[style*="#fbbf24"],
.entry-content mark[style*="#f59e0b"] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a1a1a !important;
    text-shadow: none;
}

/* Success/Green marks */
.entry-content mark.has-success-background-color,
.entry-content mark[style*="#22c55e"],
.entry-content mark[style*="#16a34a"] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

/* Danger/Red marks */
.entry-content mark.has-danger-background-color,
.entry-content mark[style*="#ef4444"],
.entry-content mark[style*="#dc2626"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* Subtle underline highlight style */
.entry-content mark.highlight-underline {
    background: transparent;
    border-bottom: 3px solid hsl(var(--primary));
    padding: 0;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
 * KEYBOARD / CODE INLINE ELEMENTS
 * -------------------------------------------------------------------------- */

/* Keyboard shortcuts */
.entry-content kbd {
    display: inline-block;
    padding: 0.15em 0.5em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.875em;
    font-weight: 500;
    line-height: 1.4;
    color: hsl(var(--foreground));
    background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--card) / 0.7));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375em;
    box-shadow: 
        0 2px 0 hsl(var(--border)),
        inset 0 -1px 0 hsl(var(--border) / 0.5);
    white-space: nowrap;
}

.entry-content kbd + kbd {
    margin-left: 0.25em;
}

/* Sample output */
.entry-content samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background-color: hsl(var(--muted) / 0.5);
    border-radius: 0.25em;
    color: hsl(var(--primary));
}

/* Variables */
.entry-content var {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-style: italic;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
}

/* --------------------------------------------------------------------------
 * INSERTED / DELETED TEXT
 * -------------------------------------------------------------------------- */

/* Inserted text */
.entry-content ins {
    text-decoration: none;
    background-color: hsl(142 76% 36% / 0.2);
    color: hsl(142 76% 70%);
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    border-bottom: 2px solid hsl(142 76% 36%);
}

/* Deleted text - enhanced */
.entry-content del {
    text-decoration: line-through;
    text-decoration-color: hsl(0 84% 60%);
    text-decoration-thickness: 2px;
    color: hsl(var(--muted-foreground) / 0.7);
    background-color: hsl(0 84% 60% / 0.1);
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}

/* --------------------------------------------------------------------------
 * CALLOUT / ALERT BOXES (inline style support)
 * -------------------------------------------------------------------------- */

/* Info callout */
.entry-content .callout,
.entry-content .alert,
.entry-content .notice {
    display: block;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    border-left: 4px solid hsl(var(--primary));
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent);
}

.entry-content .callout-info,
.entry-content .alert-info,
.entry-content .notice-info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
}

.entry-content .callout-warning,
.entry-content .alert-warning,
.entry-content .notice-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
}

.entry-content .callout-success,
.entry-content .alert-success,
.entry-content .notice-success {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
}

.entry-content .callout-danger,
.entry-content .alert-danger,
.entry-content .notice-danger,
.entry-content .callout-error,
.entry-content .alert-error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
}

/* --------------------------------------------------------------------------
 * FOOTNOTES & REFERENCES
 * -------------------------------------------------------------------------- */

.entry-content .footnote,
.entry-content sup a[href^="#fn"],
.entry-content a.footnote-ref {
    font-size: 0.75em;
    font-weight: 600;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.15);
    padding: 0.1em 0.4em;
    border-radius: 0.25em;
    text-decoration: none;
    margin-left: 0.1em;
}

.entry-content .footnote:hover,
.entry-content sup a[href^="#fn"]:hover,
.entry-content a.footnote-ref:hover {
    background: hsl(var(--primary) / 0.25);
}

/* --------------------------------------------------------------------------
 * DEFINITION TERMS
 * -------------------------------------------------------------------------- */

.entry-content dfn {
    font-style: italic;
    font-weight: 500;
    color: hsl(var(--foreground));
    border-bottom: 1px dashed hsl(var(--primary) / 0.5);
}

/* --------------------------------------------------------------------------
 * ADDRESS / CONTACT INFO
 * -------------------------------------------------------------------------- */

.entry-content address {
    font-style: normal;
    padding: 1rem;
    background: hsl(var(--card) / 0.5);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* --------------------------------------------------------------------------
 * CITATION
 * -------------------------------------------------------------------------- */

.entry-content cite {
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

.entry-content cite::before {
    content: "— ";
}

/* --------------------------------------------------------------------------
 * TIME ELEMENT
 * -------------------------------------------------------------------------- */

.entry-content time {
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
 * BADGE / TAG STYLES
 * -------------------------------------------------------------------------- */

.entry-content .badge,
.entry-content .tag {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.15);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.3);
}

.entry-content .badge-success,
.entry-content .tag-success {
    background: hsl(142 76% 36% / 0.15);
    color: hsl(142 76% 60%);
    border-color: hsl(142 76% 36% / 0.3);
}

.entry-content .badge-warning,
.entry-content .tag-warning {
    background: hsl(38 92% 50% / 0.15);
    color: hsl(38 92% 60%);
    border-color: hsl(38 92% 50% / 0.3);
}

.entry-content .badge-danger,
.entry-content .tag-danger {
    background: hsl(0 84% 60% / 0.15);
    color: hsl(0 84% 70%);
    border-color: hsl(0 84% 60% / 0.3);
}

/* Small text */
.entry-content small {
    font-size: 0.875em;
    color: hsl(var(--muted-foreground));
}

/* Superscript / Subscript */
.entry-content sup,
.entry-content sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.entry-content sup {
    top: -0.5em;
}

.entry-content sub {
    bottom: -0.25em;
}

/* Abbreviations */
.entry-content abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: hsl(var(--primary) / 0.5);
    cursor: help;
}

/* --------------------------------------------------------------------------
 * LINKS
 * -------------------------------------------------------------------------- */

.entry-content a:not(.wp-block-button__link):not(.btn):not([class*="button"]) {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease;
}

.entry-content a:not(.wp-block-button__link):not(.btn):not([class*="button"])::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.entry-content a:not(.wp-block-button__link):not(.btn):not([class*="button"]):hover {
    color: hsl(var(--primary) / 0.8);
}

.entry-content a:not(.wp-block-button__link):not(.btn):not([class*="button"]):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* External links indicator - reset the underline ::after and use ::before for icon */
.entry-content a[target="_blank"]:not(.wp-block-button__link)::after {
    /* Keep the underline animation for external links too */
}

.entry-content a[target="_blank"]:not(.wp-block-button__link)::before {
    content: '';
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    margin-right: 0.3em;
    /* Using cyan/primary color for visibility on dark backgrounds */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.entry-content a[target="_blank"]:not(.wp-block-button__link):hover::before {
    opacity: 1;
    transform: translate(-1px, -1px);
}

/* --------------------------------------------------------------------------
 * LISTS
 * -------------------------------------------------------------------------- */

/* Unordered Lists */
.entry-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.entry-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
}

.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.65em;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.6));
    border-radius: 50%;
}

/* Nested unordered lists */
.entry-content ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.entry-content ul ul li::before {
    width: 5px;
    height: 5px;
    background: transparent;
    border: 1.5px solid hsl(var(--primary) / 0.6);
}

.entry-content ul ul ul li::before {
    border-radius: 0;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
}

/* Ordered Lists */
.entry-content ol {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
    counter-reset: list-counter;
}

.entry-content ol li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.75rem;
    counter-increment: list-counter;
}

.entry-content ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    border: 1px solid hsl(var(--primary) / 0.2);
    border-radius: 0.375rem;
}

/* Nested ordered lists */
.entry-content ol ol {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.entry-content ol ol li::before {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
    border-radius: 50%;
}

/* Definition Lists */
.entry-content dl {
    margin-bottom: 1.5rem;
}

.entry-content dt {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.entry-content dt:first-child {
    margin-top: 0;
}

.entry-content dd {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid hsl(var(--primary) / 0.3);
    color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
 * BLOCKQUOTES
 * -------------------------------------------------------------------------- */

.entry-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    background: linear-gradient(135deg, hsl(var(--card) / 0.6) 0%, hsl(var(--muted) / 0.3) 100%);
    border-left: 4px solid hsl(var(--primary));
    border-radius: 0 0.75rem 0.75rem 0;
    font-size: 1.0625rem;
    font-style: italic;
    color: hsl(var(--foreground) / 0.9);
}

.entry-content blockquote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: hsl(var(--primary) / 0.2);
    line-height: 1;
}

.entry-content blockquote p {
    margin: 0;
    position: relative;
    z-index: 1;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content blockquote footer {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    color: hsl(var(--muted-foreground));
}

.entry-content blockquote cite::before,
.entry-content blockquote footer::before {
    content: '— ';
}

/* Nested blockquotes */
.entry-content blockquote blockquote {
    margin: 1rem 0;
    border-left-color: hsl(var(--primary) / 0.5);
    background: hsl(var(--muted) / 0.2);
}

/* --------------------------------------------------------------------------
 * CODE & PREFORMATTED TEXT
 * -------------------------------------------------------------------------- */

/* Inline code */
.entry-content code:not(pre code) {
    padding: 0.2em 0.4em;
    font-size: 0.875em;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    border: 1px solid hsl(var(--primary) / 0.15);
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Code blocks */
.entry-content pre {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: hsl(var(--foreground));
    position: relative;
}

.entry-content pre::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    background: hsl(var(--destructive) / 0.8);
    border-radius: 50%;
    box-shadow: 
        1.25rem 0 0 hsl(50 90% 50% / 0.8),
        2.5rem 0 0 hsl(145 80% 42% / 0.8);
}

.entry-content pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    white-space: pre;
    display: block;
    padding-top: 1.5rem;
}

/* Keyboard input */
.entry-content kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8125em;
    font-family: inherit;
    font-weight: 500;
    color: hsl(var(--foreground));
    background: linear-gradient(180deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.7) 100%);
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    box-shadow: 
        0 2px 0 hsl(var(--border)),
        inset 0 -1px 0 hsl(var(--background) / 0.2);
    white-space: nowrap;
}

/* Sample output */
.entry-content samp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
    color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
 * TABLES
 * -------------------------------------------------------------------------- */

.entry-content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border) / 0.5);
}

.entry-content thead {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--primary) / 0.04) 100%);
}

.entry-content th {
    padding: 0.875rem 1rem;
    font-weight: 600;
    text-align: left;
    color: hsl(var(--foreground));
    border-bottom: 2px solid hsl(var(--primary) / 0.2);
    white-space: nowrap;
}

.entry-content td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    color: hsl(var(--muted-foreground));
    vertical-align: top;
}

.entry-content tbody tr:last-child td {
    border-bottom: none;
}

.entry-content tbody tr {
    transition: background-color 0.15s ease;
}

.entry-content tbody tr:hover {
    background: hsl(var(--muted) / 0.3);
}

/* Striped table rows (alternate) */
.entry-content tbody tr:nth-child(even) {
    background: hsl(var(--muted) / 0.15);
}

.entry-content tbody tr:nth-child(even):hover {
    background: hsl(var(--muted) / 0.35);
}

/* Responsive table wrapper */
.entry-content .table-wrapper,
.entry-content .wp-block-table {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 0.75rem;
}

.entry-content .wp-block-table table {
    margin: 0;
}

/* --------------------------------------------------------------------------
 * IMAGES & FIGURES
 * -------------------------------------------------------------------------- */

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    display: block;
}

.entry-content figure {
    margin: 2.5rem 0;
}

.entry-content figure img {
    margin: 0 auto;
    box-shadow: 
        0 4px 6px -1px hsl(var(--foreground) / 0.05),
        0 10px 20px -5px hsl(var(--foreground) / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-content figure img:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 12px -2px hsl(var(--foreground) / 0.08),
        0 16px 30px -8px hsl(var(--foreground) / 0.15);
}

.entry-content figcaption {
    margin-top: 0.875rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    font-style: italic;
}

/* Aligned images */
.entry-content .alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
    max-width: 50%;
}

.entry-content .alignright {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
    max-width: 50%;
}

.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.entry-content .alignnone {
    margin: 1.5rem 0;
}

/* Wide and full-width images */
.entry-content .alignwide {
    margin-left: -5%;
    margin-right: -5%;
    max-width: 110%;
    width: 110%;
}

.entry-content .alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

/* Image with caption */
.entry-content .wp-caption {
    margin: 2rem 0;
    max-width: 100%;
}

.entry-content .wp-caption-text {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    font-style: italic;
}

/* Gallery */
.entry-content .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.entry-content .gallery-item {
    margin: 0;
}

.entry-content .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
 * HORIZONTAL RULES
 * -------------------------------------------------------------------------- */

.entry-content hr {
    border: none;
    height: 1px;
    margin: 3rem 0;
    background: linear-gradient(
        90deg,
        transparent,
        hsl(var(--border) / 0.3) 20%,
        hsl(var(--primary) / 0.3) 50%,
        hsl(var(--border) / 0.3) 80%,
        transparent
    );
    position: relative;
}

.entry-content hr::before {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: hsl(var(--background));
    padding: 0 1rem;
    color: hsl(var(--primary) / 0.4);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * FORMS WITHIN CONTENT
 * -------------------------------------------------------------------------- */

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content input[type="password"],
.entry-content input[type="search"],
.entry-content input[type="number"],
.entry-content input[type="tel"],
.entry-content textarea,
.entry-content select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: hsl(var(--foreground));
    background: hsl(var(--card) / 0.5);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.entry-content input[type="submit"],
.entry-content input[type="button"],
.entry-content button:not(.wp-block-button__link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(var(--primary-foreground));
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.9) 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.entry-content input[type="submit"]:hover,
.entry-content input[type="button"]:hover,
.entry-content button:not(.wp-block-button__link):hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 * DIVS & CONTAINERS
 * -------------------------------------------------------------------------- */

/* Notice boxes */
.entry-content .notice,
.entry-content .alert,
.entry-content .note,
.entry-content .warning,
.entry-content .info,
.entry-content .tip {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border-left: 4px solid;
}

.entry-content .note,
.entry-content .info {
    background: hsl(210 100% 50% / 0.08);
    border-color: hsl(210 100% 50%);
    color: hsl(210 100% 70%);
}

.entry-content .warning,
.entry-content .caution {
    background: hsl(38 92% 50% / 0.08);
    border-color: hsl(38 92% 50%);
    color: hsl(38 92% 70%);
}

.entry-content .alert,
.entry-content .danger,
.entry-content .error {
    background: hsl(0 84% 60% / 0.08);
    border-color: hsl(0 84% 60%);
    color: hsl(0 84% 75%);
}

.entry-content .tip,
.entry-content .success {
    background: hsl(142 71% 45% / 0.08);
    border-color: hsl(142 71% 45%);
    color: hsl(142 71% 60%);
}

/* Callout boxes */
.entry-content .callout {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, hsl(var(--card) / 0.8) 0%, hsl(var(--muted) / 0.4) 100%);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
}

.entry-content .callout-title {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
 * EMBEDS & IFRAMES
 * -------------------------------------------------------------------------- */

.entry-content iframe {
    max-width: 100%;
    border-radius: 0.75rem;
}

.entry-content .wp-block-embed,
.entry-content .embed-responsive {
    margin: 2rem 0;
}

.entry-content .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
}

.entry-content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
 * RESPONSIVE ADJUSTMENTS
 * -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .entry-content {
        font-size: 1rem;
    }
    
    .entry-content h1 {
        font-size: 2rem;
    }
    
    .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }
    
    .entry-content h3 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }
    
    .entry-content h4 {
        font-size: 1.125rem;
    }
    
    .entry-content blockquote {
        padding: 1.25rem 1rem 1.25rem 1.5rem;
        margin: 1.5rem 0;
    }
    
    .entry-content blockquote::before {
        font-size: 3rem;
        left: 0.5rem;
    }
    
    .entry-content pre {
        padding: 1rem;
        margin: 1.5rem -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        margin: 1.5rem 0;
        max-width: 100%;
    }
    
    .entry-content table {
        font-size: 0.875rem;
    }
    
    .entry-content th,
    .entry-content td {
        padding: 0.625rem 0.75rem;
    }
    
    .entry-content ol li {
        padding-left: 2.25rem;
    }
    
    .entry-content ol li::before {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6875rem;
    }
}

/* --------------------------------------------------------------------------
 * CLEARFIX
 * -------------------------------------------------------------------------- */

.entry-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ============================================================================
 * 16. ELEMENTOR PAGE STYLING
 * ============================================================================
 * Styles for Elementor-based pages that were NOT created in our React/TS project.
 * These styles target Elementor-specific classes to avoid conflicts.
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * ELEMENTOR BASE TYPOGRAPHY
 * --------------------------------------------------------------------------
 * IMPORTANT: These styles are scoped to .entry-content to avoid
 * overriding styles on our React/TS-based pages.
 * -------------------------------------------------------------------------- */

/* Elementor text editor widget - only in entry-content (WordPress pages) */
.entry-content .elementor-widget-text-editor {
    font-size: 1rem;
    line-height: 1.75;
    color: hsl(var(--muted-foreground));
}

.entry-content .elementor-widget-text-editor p {
    margin-bottom: 1em;
}

.entry-content .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

/* Red color accent in headings - scoped to entry-content */
.entry-content .elementor-heading-title .red-color,
.entry-content .elementor-widget-text-editor .red-color {
    color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
 * ELEMENTOR BUTTONS
 * --------------------------------------------------------------------------
 * Scoped to .entry-content to avoid conflicts with React pages
 * -------------------------------------------------------------------------- */

.entry-content .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.85));
    color: hsl(var(--background));
    border: none;
    cursor: pointer;
}

.entry-content .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.entry-content .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px hsl(var(--primary) / 0.5);
}

.entry-content .elementor-button:hover::before {
    transform: translateX(100%);
}

/* Arrow icon buttons - scoped to entry-content */
.entry-content .arrow-white-right-icon .elementor-button::after,
.entry-content .arrow-down-blue-icon .elementor-button::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0C0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.entry-content .arrow-down-blue-icon .elementor-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}

.entry-content .arrow-down-blue-icon .elementor-button {
    background: transparent;
    border: 1px solid hsl(var(--primary) / 0.5);
    color: hsl(var(--primary));
}

.entry-content .arrow-down-blue-icon .elementor-button:hover {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary));
}

.entry-content .elementor-button:hover::after {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
 * ELEMENTOR ICON LIST
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-icon-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entry-content .elementor-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, hsl(var(--muted) / 0.5), hsl(var(--muted) / 0.2));
    border-radius: 0.5rem;
    border-left: 3px solid hsl(var(--primary) / 0.5);
    transition: all 0.3s ease;
}

.entry-content .elementor-icon-list-item:hover {
    background: linear-gradient(135deg, hsl(var(--muted) / 0.7), hsl(var(--muted) / 0.3));
    border-left-color: hsl(var(--primary));
    transform: translateX(4px);
}

.entry-content .elementor-icon-list-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.entry-content .elementor-icon-list-icon svg {
    width: 100%;
    height: 100%;
    fill: hsl(var(--primary));
}

.entry-content .elementor-icon-list-text {
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
    padding: 10px;
}

.entry-content .elementor-icon-list-text b,
.entry-content .elementor-icon-list-text strong {
    color: hsl(var(--foreground));
    font-weight: 600;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR TABS
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-tabs {
    background: linear-gradient(135deg, hsl(var(--muted) / 0.3), hsl(var(--muted) / 0.1));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Vertical tabs layout */
.entry-content .elementor-tabs-view-vertical .elementor-tabs {
    display: flex;
    flex-wrap: wrap;
}

.entry-content .elementor-tabs-view-vertical .elementor-tabs-wrapper {
    width: 35%;
    border-right: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--muted) / 0.3);
}

.entry-content .elementor-tabs-view-vertical .elementor-tabs-content-wrapper {
    width: 65%;
    padding: 1.5rem;
}

.entry-content .elementor-tab-title {
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    position: relative;
}

.entry-content .elementor-tab-title:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--primary) / 0.05);
}

.entry-content .elementor-tab-title.elementor-active {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    font-weight: 600;
}

.entry-content .elementor-tabs-view-vertical .elementor-tab-title.elementor-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: hsl(var(--primary));
}

.entry-content .elementor-tab-content {
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
    padding: 1.5rem;
    margin-top: 0.5rem;
    background: hsl(var(--muted) / 0.15);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Active tab content styling */
.entry-content .elementor-tab-content.elementor-active {
    border-color: hsl(var(--primary) / 0.3);
    background: hsl(var(--muted) / 0.25);
    box-shadow: 0 4px 20px -8px hsl(var(--primary) / 0.15);
}

.entry-content .elementor-tab-content p {
    margin-bottom: 1em;
}

.entry-content .elementor-tab-content p:last-child {
    margin-bottom: 0;
}

.entry-content .elementor-tab-content ul {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.entry-content .elementor-tab-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75em;
}

.entry-content .elementor-tab-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.5rem;
    height: 0.5rem;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.5));
    border-radius: 50%;
}

/* Mobile tab titles */
.entry-content .elementor-tab-mobile-title {
    display: none;
}

@media (max-width: 768px) {
    .entry-content .elementor-tabs-view-vertical .elementor-tabs-wrapper {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid hsl(var(--border) / 0.5);
    }
    
    .entry-content .elementor-tabs-view-vertical .elementor-tabs-content-wrapper {
        width: 100%;
    }
    
    .entry-content .elementor-tab-desktop-title {
        display: none;
    }
    
    .entry-content .elementor-tab-mobile-title {
        display: block;
    }
}

/* --------------------------------------------------------------------------
 * ELEMENTOR ACCORDION
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-accordion {
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    overflow: hidden;
}

.entry-content .elementor-accordion-item {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.entry-content .elementor-accordion-item:last-child {
    border-bottom: none;
}

.entry-content .elementor-accordion .elementor-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    background: hsl(var(--muted) / 0.2);
    border-bottom: none;
}

.entry-content .elementor-accordion .elementor-tab-title::after {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.entry-content .elementor-accordion .elementor-tab-title.elementor-active::after {
    transform: rotate(180deg);
}

.entry-content .elementor-accordion .elementor-tab-content {
    padding: 1.5rem;
    background: hsl(var(--muted) / 0.15);
    border-left: 3px solid hsl(var(--primary) / 0.3);
    margin-left: 0.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.entry-content .elementor-accordion .elementor-tab-content.elementor-active {
    border-left-color: hsl(var(--primary));
    background: hsl(var(--muted) / 0.2);
}

.entry-content .elementor-accordion-title {
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* Red numbered accordion items */
.entry-content .elementor-accordion-title .red-color {
    font-weight: 700;
    margin-right: 0.5rem;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR TOGGLE
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.entry-content .elementor-toggle-item {
    background: linear-gradient(135deg, hsl(var(--muted) / 0.4), hsl(var(--muted) / 0.2));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.entry-content .elementor-toggle-item:hover {
    border-color: hsl(var(--primary) / 0.3);
}

.entry-content .elementor-toggle .elementor-tab-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border-bottom: none;
}

.entry-content .elementor-toggle .elementor-tab-title::before {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.entry-content .elementor-toggle .elementor-tab-title.elementor-active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.entry-content .elementor-toggle .elementor-tab-content {
    padding: 1rem 1.25rem 1.25rem 3.75rem;
    margin-top: 0.5rem;
    background: hsl(var(--muted) / 0.1);
    border-radius: 0 0 0.5rem 0.5rem;
    border-top: 1px solid hsl(var(--border) / 0.3);
}

.entry-content .elementor-toggle .elementor-tab-content.elementor-active {
    border-top-color: hsl(var(--primary) / 0.3);
}

.entry-content .elementor-toggle-title {
    flex: 1;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR TESTIMONIAL
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-testimonial-wrapper {
    background: linear-gradient(135deg, hsl(var(--muted) / 0.4), hsl(var(--muted) / 0.15));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

.entry-content .elementor-testimonial-wrapper::before {
    content: '"';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: hsl(var(--primary) / 0.2);
    line-height: 1;
}

.entry-content .elementor-testimonial-wrapper:hover {
    border-color: hsl(var(--primary) / 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -12px hsl(var(--primary) / 0.15);
}

.entry-content .elementor-testimonial-content {
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
    font-size: 0.9375rem;
    flex: 1;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.entry-content .elementor-testimonial-meta {
    border-top: 1px solid hsl(var(--border) / 0.5);
    padding-top: 1rem;
}

.entry-content .elementor-testimonial-meta-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.entry-content .elementor-testimonial-name {
    font-weight: 600;
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
}

.entry-content .elementor-testimonial-job {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}

.entry-content .elementor-testimonial-job .red-color {
    color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
 * ELEMENTOR IMAGE CAROUSEL / SWIPER
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-image-carousel-wrapper {
    position: relative;
}

.entry-content .swiper-slide-image {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.entry-content .swiper-slide:hover .swiper-slide-image,
.entry-content .swiper-slide-active .swiper-slide-image {
    filter: grayscale(0%);
    opacity: 1;
}

/* Carousel navigation - scoped to entry-content */
.entry-content .elementor-swiper-button {
    width: 2.5rem;
    height: 2.5rem;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.entry-content .elementor-swiper-button:hover {
    background: hsl(var(--primary) / 0.2);
    border-color: hsl(var(--primary));
}

.entry-content .elementor-swiper-button svg {
    width: 1rem;
    height: 1rem;
    fill: hsl(var(--foreground));
}

/* Pagination bullets - scoped to entry-content */
.entry-content .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
    background: hsl(var(--muted-foreground) / 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.entry-content .swiper-pagination-bullet-active {
    background: hsl(var(--primary));
    width: 1.5rem;
    border-radius: 0.25rem;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR SPACER
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-widget-spacer .elementor-spacer-inner {
    height: 100%;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR SECTIONS
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

/* Landing top section styling */
.entry-content .bit-landing-top {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.entry-content .bit-landing-top-heading .elementor-heading-title {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    font-weight: 800;
}

/* TOC section sidebar */
.entry-content .cs-toc-heading .elementor-heading-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.entry-content .cs-toc-bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.entry-content .cs-toc-bottom .elementor-heading-title a {
    color: hsl(var(--primary));
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.entry-content .cs-toc-bottom .elementor-heading-title a:hover {
    color: hsl(var(--foreground));
}

.entry-content .cs-toc-bottom .elementor-heading-title a::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Wheel / CTA block with circles - scoped to entry-content */
.entry-content .wheel {
    position: relative;
    text-align: center;
    padding: 4rem 0;
    background: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.3), hsl(var(--background)));
    overflow: hidden;
}

.entry-content .bit-cta-block-circles-box {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.entry-content .bit-cta-block-circle-main,
.entry-content .bit-cta-block-circles-1,
.entry-content .bit-cta-block-circles-2,
.entry-content .bit-cta-block-circles-3,
.entry-content .bit-cta-block-circles-4 {
    position: absolute;
    border-radius: 50%;
    border: 1px solid hsl(var(--primary) / 0.1);
}

.entry-content .bit-cta-block-circle-main {
    width: 400px;
    height: 400px;
    border-color: hsl(var(--primary) / 0.2);
    animation: pulse-ring 4s ease-in-out infinite;
}

.entry-content .bit-cta-block-circles-1 {
    width: 300px;
    height: 300px;
    animation: pulse-ring 4s ease-in-out 0.5s infinite;
}

.entry-content .bit-cta-block-circles-2 {
    width: 500px;
    height: 500px;
    animation: pulse-ring 4s ease-in-out 1s infinite;
}

.entry-content .bit-cta-block-circles-3 {
    width: 600px;
    height: 600px;
    animation: pulse-ring 4s ease-in-out 1.5s infinite;
}

.entry-content .bit-cta-block-circles-4 {
    width: 700px;
    height: 700px;
    animation: pulse-ring 4s ease-in-out 2s infinite;
}

@keyframes pulse-ring {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* ============================================================================
 * TABLE OF CONTENTS - UNIFIED STYLES
 * ============================================================================
 * Styles for both #toc (Elementor pages) and #table-of-contents (blog posts)
 * Auto-generated by toc-generator.js
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * STICKY SIDEBAR - Elementor TOC Column
 * -------------------------------------------------------------------------- */

/* Make the Elementor column containing #toc sticky */
#toc-section .elementor-column:has(#toc) .elementor-widget-wrap,
.elementor-column:has(#toc) .elementor-widget-wrap {
    position: sticky;
    top: 6rem; /* Below header */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
}

.elementor-column:has(#toc) .elementor-widget-wrap::-webkit-scrollbar {
    width: 4px;
}

.elementor-column:has(#toc) .elementor-widget-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.elementor-column:has(#toc) .elementor-widget-wrap::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 2px;
}

.elementor-column:has(#toc) .elementor-widget-wrap::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
}

/* --------------------------------------------------------------------------
 * TOC CONTAINER STYLES
 * -------------------------------------------------------------------------- */

/* Container styles - consistent for both */
#toc,
#table-of-contents {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Add spacing to the right for #toc */
#toc {
    margin-right: 1rem;
}

/* Container card styling for Elementor TOC */
.elementor-column:has(#toc) {
    background: linear-gradient(135deg, hsl(var(--card) / 0.5), hsl(var(--card) / 0.3));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

/* Title styling for Elementor TOC */
.elementor-column:has(#toc) .elementor-heading-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Add icon before title */
.elementor-column:has(#toc) .elementor-heading-title::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
 * TOC LINK STYLES - Shared between both containers
 * -------------------------------------------------------------------------- */

#toc a,
#table-of-contents a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.5rem 0;
    color: hsl(var(--muted-foreground));
    transition: all 0.2s ease;
    border-radius: 0.25rem;
}

#toc a:hover,
#table-of-contents a:hover {
    color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
 * TOC ICON STYLES
 * -------------------------------------------------------------------------- */

#toc .toc-icon,
#table-of-contents .toc-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
    transition: all 0.2s ease;
}

#toc a:hover .toc-icon,
#table-of-contents a:hover .toc-icon {
    opacity: 1;
    transform: translateX(2px);
}

#toc a.text-primary .toc-icon,
#table-of-contents a.text-primary .toc-icon {
    opacity: 1;
    color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
 * ACTIVE STATE STYLES
 * -------------------------------------------------------------------------- */

#toc a.text-primary,
#table-of-contents a.text-primary {
    color: hsl(var(--primary));
    font-weight: 600;
}

/* Add left border indicator for active item */
#toc a.text-primary,
#table-of-contents a.text-primary {
    position: relative;
}

#toc a.text-primary::before,
#table-of-contents a.text-primary::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 2px;
    background: hsl(var(--primary));
    border-radius: 1px;
}

/* --------------------------------------------------------------------------
 * INDENTATION LEVELS
 * -------------------------------------------------------------------------- */

#toc a.pl-4,
#table-of-contents a.pl-4 {
    padding-left: 1rem;
    font-size: 0.8125rem;
}

#toc a.pl-8,
#table-of-contents a.pl-8 {
    padding-left: 2rem;
    font-size: 0.75rem;
}

#toc a.pl-10,
#table-of-contents a.pl-10 {
    padding-left: 2.5rem;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * RESPONSIVE TOC
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .elementor-column:has(#toc) .elementor-widget-wrap {
        position: relative;
        top: 0;
        max-height: none;
        overflow-y: visible;
    }
    
    .elementor-column:has(#toc) {
        display: none;
    }
}

/* --------------------------------------------------------------------------
 * BOTTOM CTA LINK (Talk to Expert, Contact, etc.)
 * -------------------------------------------------------------------------- */

.elementor-column:has(#toc) .cs-toc-bottom,
.elementor-column:has(#toc) [class*="toc-bottom"] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.elementor-column:has(#toc) .cs-toc-bottom a,
.elementor-column:has(#toc) [class*="toc-bottom"] a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.elementor-column:has(#toc) .cs-toc-bottom a:hover,
.elementor-column:has(#toc) [class*="toc-bottom"] a:hover {
    color: hsl(var(--foreground));
}

/* --------------------------------------------------------------------------
 * ELEMENTOR MENU ANCHOR
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-menu-anchor {
    display: block;
    margin-top: -5rem;
    padding-top: 5rem;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
 * ELEMENTOR IMAGES
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

.entry-content .elementor-widget-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.entry-content .elementor-widget-image.elementor-widget-image-bordered img {
    border: 1px solid hsl(var(--border) / 0.5);
}

/* --------------------------------------------------------------------------
 * CONTENT-AREA WRAPPER STYLING
 * -------------------------------------------------------------------------- */

/* Reduce prose styles interference on Elementor pages */
.content-area .entry-content.prose.prose-invert .elementor {
    max-width: none;
}

/* Ensure Elementor sections have proper text colors - scoped to entry-content */
.entry-content .elementor .elementor-section {
    color: hsl(var(--muted-foreground));
}

.entry-content .elementor strong,
.entry-content .elementor b {
    color: hsl(var(--foreground));
    font-weight: 600;
}

.entry-content .elementor em,
.entry-content .elementor i:not([class]) {
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

/* Elementor lists - scoped to entry-content */
.entry-content .elementor-widget-text-editor ul,
.entry-content .elementor-widget-text-editor ol {
    margin: 1em 0;
    padding-left: 0;
    list-style: none;
}

.entry-content .elementor-widget-text-editor li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.entry-content .elementor-widget-text-editor ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.375rem;
    height: 0.375rem;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.6));
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
 * RESPONSIVE ELEMENTOR STYLES
 * --------------------------------------------------------------------------
 * Scoped to .entry-content
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .entry-content .elementor-inner-section .elementor-column {
        width: 100% !important;
    }
    
    .entry-content .elementor-tabs-view-vertical .elementor-tabs-wrapper {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid hsl(var(--border) / 0.5);
    }
    
    .entry-content .elementor-tabs-view-vertical .elementor-tabs-content-wrapper {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .entry-content .elementor-testimonial-wrapper {
        padding: 1.5rem;
    }
    
    .entry-content .elementor-icon-list-item {
        padding: 0.625rem 0.875rem;
    }
    
    .entry-content .bit-landing-top-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .entry-content .elementor-accordion .elementor-tab-title,
    .entry-content .elementor-toggle .elementor-tab-title {
        padding: 1rem;
        font-size: 0.9375rem;
    }
    
    .entry-content .elementor-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        width: 100%;
    }
    
    .entry-content .wheel .elementor-heading-title {
        font-size: 1.5rem;
    }
    
    .entry-content .bit-cta-block-circle-main,
    .entry-content .bit-cta-block-circles-1,
    .entry-content .bit-cta-block-circles-2,
    .entry-content .bit-cta-block-circles-3,
    .entry-content .bit-cta-block-circles-4 {
        width: 200px;
        height: 200px;
    }
    
    .entry-content .bit-cta-block-circles-1 { width: 150px; height: 150px; }
    .entry-content .bit-cta-block-circles-2 { width: 250px; height: 250px; }
    .entry-content .bit-cta-block-circles-3 { width: 300px; height: 300px; }
    .entry-content .bit-cta-block-circles-4 { width: 350px; height: 350px; }
}

.elementor-widget .elementor-icon-list-item {
    margin: 10px 0 !important;
}

.elementor-element .elementor-tabs-content-wrapper {
    background-color: transparent !important;
    margin-left: 0px !important;
    padding:0px !important;
}

.elementor-button.elementor-button-link.elementor-size-md {
    color: hsl(var(--primary-foreground)) !important;
}

.elementor-element.elementor-widget.elementor-widget-testimonial {
    background-color: transparent !important;
}

.elementor-1311 .elementor-element .elementor-tab-content {
    padding: 1rem 1.25rem 1.25rem 3.75rem !important;
}

.entry-content .elementor-widget-text-editor li {
    padding-left: 2.5rem !important;
}

.entry-content ul.elementor-icon-list-items .elementor-icon-list-icon {
    margin-top: 0.6rem;
    margin-left: 0.5rem;
    margin-right: -1rem;
}

.entry-content ul.elementor-icon-list-items li::before {
    content: none !important;
}

.elementor-element .elementor-button {
    background-color: hsl(var(--primary)) !important;
}

.entry-content .arrow-down-blue-icon .elementor-button::after {
    background-image: none !important;
}