/* ==========================================================================
   SMARTREMOTEGIGS — DESIGN SYSTEM 2026 (v3.6.0)
   - Core visual tokens, theme variables, and global semantic styles.
   - Refactored for dynamic context-aware CPT color-sync.
   - Strictly clean English documentation and border-free standards.
   ========================================================================== */

:root {
    /* ── 1. Brand Colors — Violet #7C3AED ── */
    --srg-brand-50:  #f5f3ff;
    --srg-brand-100: #ede9fe;
    --srg-brand-200: #ddd6fe;
    --srg-brand-300: #c4b5fd;
    --srg-brand-400: #a78bfa;
    --srg-brand-500: #8b5cf6;
    --srg-brand-600: #7c3aed; /* Primary Core Accent */
    --srg-brand-700: #6d28d9;
    --srg-brand-800: #5b21b6;
    --srg-brand-900: #4c1d95;
    --srg-brand-950: #2e1065;

    /* ── 2. Secondary Colors — Cyan #06B6D4 ── */
    --srg-secondary-50:  #ecfeff;
    --srg-secondary-100: #cffafe;
    --srg-secondary-200: #a5f3fc;
    --srg-secondary-300: #67e8f9;
    --srg-secondary-400: #22d3ee;
    --srg-secondary-500: #06b6d4;
    --srg-secondary-600: #0891b2;
    --srg-secondary-700: #0e7490;
    --srg-secondary-800: #155e75;
    --srg-secondary-900: #164e63;

    /* ── 3. Success / Accent Colors — Emerald #10B981 ── */
    --srg-accent-50:  #ecfdf5;
    --srg-accent-100: #d1fae5;
    --srg-accent-500: #10b981; /* Success Core */
    --srg-accent-600: #059669;
    --srg-accent-700: #047857;

    /* ── 4. Slate Neutral Scale ── */
    --srg-neutral-50:  #f8fafc; /* Surface Background */
    --srg-neutral-100: #f1f5f9;
    --srg-neutral-200: #e2e8f0;
    --srg-neutral-300: #cbd5e1;
    --srg-neutral-400: #94a3b8;
    --srg-neutral-500: #64748b;
    --srg-neutral-600: #475569;
    --srg-neutral-700: #334155;
    --srg-neutral-800: #1e293b;
    --srg-neutral-900: #0f172a;
    --srg-neutral-950: #020617;

    /* ── 5. Semantic Base Tokens — Light Mode ── */
    --srg-bg-primary:   #ffffff; /* Global Base Canvas */
    --srg-bg-secondary: color-mix(in srgb, var(--srg-context-accent) 3%, var(--srg-neutral-50, #f8fafc));
    --srg-bg-tertiary:  color-mix(in srgb, var(--srg-context-accent) 6%, var(--srg-neutral-100, #f1f5f9));
    --srg-bg-elevated:  #ffffff;
    --srg-bg-inverse:   var(--srg-neutral-900);
    --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 3%, var(--srg-neutral-50, #f8fafc));

    --srg-text-primary:   #222222; /* High Contrast Text */
    --srg-text-secondary: var(--srg-neutral-600);
    --srg-text-tertiary:  var(--srg-neutral-500);
    --srg-text-inverse:   #ffffff;
    --srg-text-link:      var(--srg-brand-600);
    --srg-text-link-hover: var(--srg-brand-700);

    --srg-border-primary:   color-mix(in srgb, var(--srg-context-accent) 12%, #e5e7eb);
    --srg-border-secondary: color-mix(in srgb, var(--srg-context-accent) 8%, var(--srg-neutral-200, #e2e8f0));
    --srg-border-focus:     var(--srg-brand-500);

    /* Status Colors */
    --srg-success: var(--srg-accent-500);
    --srg-warning: #f59e0b;
    --srg-error:   #ef4444;
    --srg-info:    var(--srg-secondary-500);

    /* ── 6. Typography Foundations ── */
    --srg-font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --srg-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --srg-font:         var(--srg-font-body);
    --srg-font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace;

    --srg-text-xs:   0.75rem;   /* 12px */
    --srg-text-sm:   0.875rem;  /* 14px */
    --srg-text-base: 1rem;      /* 16px */
    --srg-text-lg:   1.125rem;  /* 18px */
    --srg-text-xl:   1.25rem;   /* 20px */
    --srg-text-2xl:  1.5rem;    /* 24px */
    --srg-text-3xl:  1.875rem;  /* 30px */
    --srg-text-4xl:  2.25rem;   /* 36px */
    --srg-text-5xl:  3rem;      /* 48px */
    --srg-text-6xl:  3.75rem;   /* 60px */

    --srg-leading-tight:  1.25;
    --srg-leading-normal: 1.6;
    --srg-leading-relaxed: 1.75;

    --srg-tracking-tight: -0.025em;
    --srg-tracking-normal: 0;
    --srg-tracking-wide: 0.025em;

    /* Font Weights */
    --srg-weight-normal: 400;
    --srg-weight-medium: 500;
    --srg-weight-semibold: 600;
    --srg-weight-bold: 700;

    /* ── 7. Spacing Scale ── */
    --srg-space-0: 0;
    --srg-space-1: 0.25rem;   /* 4px */
    --srg-space-2: 0.5rem;    /* 8px */
    --srg-space-3: 0.75rem;   /* 12px */
    --srg-space-4: 1rem;      /* 16px */
    --srg-space-5: 1.25rem;   /* 20px */
    --srg-space-6: 1.5rem;    /* 24px */
    --srg-space-8: 2rem;      /* 32px */
    --srg-space-10: 2.5rem;   /* 40px */
    --srg-space-12: 3rem;     /* 48px */
    --srg-space-16: 4rem;     /* 64px */
    --srg-space-20: 5rem;     /* 80px */
    --srg-space-24: 6rem;     /* 96px */

    /* Container Boundaries */
    --srg-container-sm: 640px;
    --srg-container-md: 768px;
    --srg-container-lg: 1024px;
    --srg-container-xl: 1280px;
    --srg-container-wide: 1400px;

    /* Border Radius Scale */
    --srg-radius-sm: 0.25rem;   /* 4px */
    --srg-radius-md: 0.5rem;    /* 8px */
    --srg-radius-lg: 0.75rem;   /* 12px */
    --srg-radius-xl: 1rem;      /* 16px */
    --srg-radius-2xl: 1.25rem;  /* 20px */
    --srg-radius-full: 9999px;

    /* Shadows (Restrained and optimized to prevent eye fatigue) */
    --srg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --srg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --srg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --srg-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --srg-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --srg-shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);

    /* Transitions */
    --srg-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --srg-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --srg-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Hierarchy */
    --srg-z-dropdown: 100;
    --srg-z-sticky: 200;
    --srg-z-modal: 300;
    --srg-z-popover: 400;
    --srg-z-toast: 500;

    /* Context Accent Token Defaults (Violet Brand default) */
    --srg-context-accent: var(--srg-brand-600);
    --srg-context-accent-hover: var(--srg-brand-700);
    --srg-context-accent-subtle: var(--srg-brand-50);
    --srg-context-accent-rgb: 124, 58, 237;
}

/* ── Semantic Base Tokens — Dark Mode Override ── */
html.srg-dark {
    --srg-bg-primary:   color-mix(in srgb, var(--srg-context-accent) 4%, #04020a);
    --srg-bg-secondary: color-mix(in srgb, var(--srg-context-accent) 8%, #04020a);
    --srg-bg-tertiary:  color-mix(in srgb, var(--srg-context-accent) 12%, #04020a);
    --srg-bg-elevated:  color-mix(in srgb, var(--srg-context-accent) 8%, #04020a);
    --srg-bg-inverse:   var(--srg-neutral-50);
    --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 6%, #04020a);

    --srg-border-primary:   color-mix(in srgb, var(--srg-context-accent) 20%, #04020a);
    --srg-border-secondary: color-mix(in srgb, var(--srg-context-accent) 12%, #04020a);
}

@media (prefers-color-scheme: dark) {
    html:not(.srg-light) {
        --srg-bg-primary:   color-mix(in srgb, var(--srg-context-accent) 4%, #04020a);
        --srg-bg-secondary: color-mix(in srgb, var(--srg-context-accent) 8%, #04020a);
        --srg-bg-tertiary:  color-mix(in srgb, var(--srg-context-accent) 12%, #04020a);
        --srg-bg-elevated:  color-mix(in srgb, var(--srg-context-accent) 8%, #04020a);
        --srg-bg-inverse:   var(--srg-neutral-50);
        --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 6%, #04020a);

        --srg-border-primary:   color-mix(in srgb, var(--srg-context-accent) 20%, #04020a);
        --srg-border-secondary: color-mix(in srgb, var(--srg-context-accent) 12%, #04020a);
    }
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY SETTINGS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--srg-font-heading);
    font-weight: var(--srg-weight-bold);
    line-height: var(--srg-leading-tight);
    color: var(--srg-text-primary);
    letter-spacing: var(--srg-tracking-tight);
    margin-bottom: var(--srg-space-4);
}

h1 { font-size: var(--srg-text-4xl); }
h2 { font-size: var(--srg-text-3xl); }
h3 { font-size: var(--srg-text-2xl); }
h4 { font-size: var(--srg-text-xl); }
h5 { font-size: var(--srg-text-lg); }
h6 { font-size: var(--srg-text-base); }

@media (min-width: 768px) {
    h1 { font-size: var(--srg-text-5xl); }
    h2 { font-size: var(--srg-text-4xl); }
    h3 { font-size: var(--srg-text-3xl); }
}

p {
    margin-bottom: var(--srg-space-4);
    color: var(--srg-text-secondary);
}

a {
    color: var(--srg-text-link);
    text-decoration: none;
    transition: color var(--srg-transition-fast);
}

a:hover {
    color: var(--srg-text-link-hover);
    text-decoration: underline;
}

strong, b { font-weight: var(--srg-weight-semibold); }

/* Lists formatting */
ul, ol {
    margin-bottom: var(--srg-space-4);
    padding-left: var(--srg-space-6);
}

li { margin-bottom: var(--srg-space-2); }

/* Inline Codes */
code {
    font-family: var(--srg-font-mono);
    font-size: 0.70em;
    background: var(--srg-bg-code);
    padding: 0.15em 0.4em;
    border-radius: var(--srg-radius-sm);
    color: var(--srg-brand-700);
}

pre {
    font-family: var(--srg-font-mono);
    background: var(--srg-bg-code);
    padding: var(--srg-space-4);
    border-radius: var(--srg-radius-lg);
    overflow-x: auto;
    margin-bottom: var(--srg-space-4);
    border: 1px solid var(--srg-border-primary);
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ==========================================================================
   GLOBAL LAYOUT UTILITIES
   ========================================================================== */
.srg-container {
    width: 100%;
    max-width: var(--srg-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--srg-space-4);
    padding-right: var(--srg-space-4);
}

.srg-container-sm { max-width: var(--srg-container-sm); }
.srg-container-md { max-width: var(--srg-container-md); }
.srg-container-lg { max-width: var(--srg-container-lg); }
.srg-container-wide { max-width: var(--srg-container-wide); }

.srg-section {
    padding-top: var(--srg-space-6);
    padding-bottom: var(--srg-space-16);
}

.srg-section-sm {
    padding-top: var(--srg-space-10);
    padding-bottom: var(--srg-space-10);
}

/* Fluid responsive Grid System */
.srg-grid {
    display: grid;
    gap: var(--srg-space-6);
}

.srg-grid-2 { grid-template-columns: repeat(1, 1fr); }
.srg-grid-3 { grid-template-columns: repeat(1, 1fr); }
.srg-grid-4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
    .srg-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .srg-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .srg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .srg-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .srg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flexbox Helpers */
.srg-flex { display: flex; }
.srg-flex-col { flex-direction: column; }
.srg-items-center { align-items: center; }
.srg-justify-between { justify-content: space-between; }
.srg-gap-2 { gap: var(--srg-space-2); }
.srg-gap-4 { gap: var(--srg-space-4); }
.srg-gap-6 { gap: var(--srg-space-6); }

/* ==========================================================================
   A11Y ACCESSIBILITY STANDARD
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--srg-border-focus);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--srg-space-4);
    z-index: var(--srg-z-modal);
    background: var(--srg-brand-600);
    color: #fff;
    padding: var(--srg-space-3) var(--srg-space-4);
    border-radius: var(--srg-radius-md);
    font-weight: var(--srg-weight-semibold);
    transition: top var(--srg-transition-fast);
}

.skip-link:focus {
    top: var(--srg-space-4);
}

/* ==========================================================================
   CLS PREVENTION — Sticky Header Reserve
   ========================================================================== */
html {
    scroll-padding-top: 80px;
}

@media (max-width: 1023px) {
    html {
        scroll-padding-top: 60px;
    }
}

/* ==========================================================================
   DYNAMIC CPT SECTION CONTEXT ACCENTS (Blue, Orange, & Purple Sync)
   ========================================================================== */

/* Software Section (Blue #2563EB) */
body.single-software,
body.archive-software,
body.post-type-archive-software,
body.tax-price-model,
body.tax-tool-category {
    --srg-context-accent: #2563EB;
    --srg-context-accent-hover: #1d4ed8;
    --srg-context-accent-subtle: rgba(37, 99, 235, 0.08);
    --srg-context-accent-rgb: 37, 99, 235;
}
html.srg-dark body.single-software,
html.srg-dark body.archive-software,
html.srg-dark body.post-type-archive-software,
html.srg-dark body.tax-price-model,
html.srg-dark body.tax-tool-category {
    --srg-context-accent-hover: #3b82f6;
    --srg-context-accent-subtle: rgba(37, 99, 235, 0.15);
}

/* Templates Section (Orange #F97316) */
body.single-template,
body.archive-template,
body.post-type-archive-template,
body.tax-template-type {
    --srg-context-accent: #F97316;
    --srg-context-accent-hover: #ea580c;
    --srg-context-accent-subtle: rgba(249, 115, 22, 0.08);
    --srg-context-accent-rgb: 249, 115, 22;
}
html.srg-dark body.single-template,
html.srg-dark body.archive-template,
html.srg-dark body.post-type-archive-template,
html.srg-dark body.tax-template-type {
    --srg-context-accent-hover: #fb923c;
    --srg-context-accent-subtle: rgba(249, 115, 22, 0.15);
}

/* Tools Section (Purple #7C3AED) */
body.single-tools,
body.archive-tools,
body.post-type-archive-tools,
body.tax-tools-type,
body.tax-tool-type {
    --srg-context-accent: #7C3AED;
    --srg-context-accent-hover: #6d28d9;
    --srg-context-accent-subtle: rgba(124, 58, 237, 0.08);
    --srg-context-accent-rgb: 124, 58, 237;
}
html.srg-dark body.single-tools,
html.srg-dark body.archive-tools,
html.srg-dark body.post-type-archive-tools,
html.srg-dark body.tax-tools-type,
html.srg-dark body.tax-tool-type {
    --srg-context-accent-hover: #a78bfa;
    --srg-context-accent-subtle: rgba(124, 58, 237, 0.15);
}

/* ── 10. Editorial Blog Hub Alignment ── */
.srg-blog-archive-wrapper .srg-archive-hero-block {
    width: 100% !important;
    background-color: var(--srg-bg-secondary) !important;
    border-bottom: 1px solid var(--srg-border-secondary);
    padding: 36px 0 36px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

html.srg-dark .srg-blog-archive-wrapper .srg-archive-hero-block {
    background-color: var(--srg-neutral-900) !important;
    border-bottom: 1px solid var(--srg-neutral-800);
}

.srg-blog-archive-wrapper .srg-archive-breadcrumb {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.srg-blog-archive-wrapper #main-content {
    padding-top: 48px !important;
}

/* ==========================================================================
   MICRO-INTERACTIONS & TRANSITIONS (v2026.3.0)
   ========================================================================== */

/* ── Phase 1: Smooth Dropdown Transitions ── */
.srg-filter-dropdown .srg-dropdown-menu {
    transform: scale(0.95) translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.srg-filter-dropdown.is-open .srg-dropdown-menu,
.srg-filter-dropdown.active .srg-dropdown-menu {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ── Phase 2: Dynamic Clipboard Copy Feedback ── */
#srg-copy-btn, .srg-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Base states of SVG icons inside copy button */
.srg-icon-copy, .srg-copy-icon {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.srg-icon-check, .srg-check-icon {
    display: inline-block !important; /* overrides inline style="display:none;" in PHP */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Copied button state active transitions */
.copied .srg-icon-copy, .copied .srg-copy-icon {
    opacity: 0;
    transform: scale(0.5);
}

.copied .srg-icon-check, .copied .srg-check-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Support direct utility classes added by main.js */
.srg-icon--hidden {
    opacity: 0 !important;
    transform: scale(0.5) !important;
}

.srg-icon--visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Absolute CSS Tooltip */
.srg-copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.9);
    background: var(--srg-neutral-900, #0f172a);
    color: #ffffff;
    font-size: var(--srg-text-xs, 12px);
    padding: 6px 10px;
    border-radius: var(--srg-radius-md, 6px);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    box-shadow: var(--srg-shadow-md, 0 4px 6px rgba(0,0,0,0.05));
    z-index: 10;
}

.srg-copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: var(--srg-neutral-900, #0f172a) transparent transparent transparent;
}

.srg-copy-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Phase 3: Dark Mode Switcher Micro-animations ── */
.srg-dark-toggle svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.srg-dark-toggle .srg-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.srg-dark-toggle .srg-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

html.srg-dark .srg-dark-toggle .srg-icon-sun {
    opacity: 0;
    transform: rotate(360deg) scale(0);
}

html.srg-dark .srg-dark-toggle .srg-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ── Phase 4: Interactive Button Arrow-Slide Hover ── */
.srg-btn .arrow,
.srg-btn .srg-view-all-arrow,
.srg-btn svg:last-child,
.srg-eco-btn .arrow,
.srg-eco-btn .srg-view-all-arrow,
.srg-eco-btn svg:last-child {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.srg-btn:hover .arrow,
.srg-btn:hover .srg-view-all-arrow,
.srg-btn:hover svg:last-child,
.srg-eco-btn:hover .arrow,
.srg-eco-btn:hover .srg-view-all-arrow,
.srg-eco-btn:hover svg:last-child {
    transform: translateX(6px);
}

.srg-btn:active .arrow,
.srg-btn:active .srg-view-all-arrow,
.srg-btn:active svg:last-child,
.srg-eco-btn:active .arrow,
.srg-eco-btn:active .srg-view-all-arrow,
.srg-eco-btn:active svg:last-child {
    transform: translateX(4px);
}

/* ── Phase 5: Accessibility prefers-reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
    .srg-filter-dropdown .srg-dropdown-menu,
    .srg-dark-toggle svg,
    .srg-icon-copy, .srg-copy-icon,
    .srg-icon-check, .srg-check-icon,
    .srg-copy-tooltip,
    .srg-btn .arrow,
    .srg-btn .srg-view-all-arrow,
    .srg-btn svg:last-child,
    .srg-eco-btn .arrow,
    .srg-eco-btn .srg-view-all-arrow,
    .srg-eco-btn svg:last-child {
        transition: none !important;
        transform: none !important;
    }
}

/* ── Phase 6: Monetization Ad-Blocker Fallback Safeguard ── */
.srg-ad-fallback-promo {
    display: none;
    opacity: 0;
}

.srg-ad-fallback-promo.show-fallback {
    display: block !important;
    animation: srgAdFadeIn 0.4s ease-in-out forwards;
}

@keyframes srgAdFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Phase 7: FAQ Container Spacing Reset ── */
.srg-faq-container {
    margin-bottom: 48px !important; /* Elegant spacing to prevent App Card from sticking directly to FAQs */
}

/* ── Phase 8: Standardize Single Software Typography & In-Content Links ── */
.srg-post-content-col {
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Typographic definitions to match standard post style from blog.css */
.srg-post-content-col h1,
.srg-post-content-col h2,
.srg-post-content-col h3,
.srg-post-content-col h4 {
    font-family: var(--srg-font-heading);
    color: var(--srg-text-primary);
    letter-spacing: var(--srg-tracking-tight);
}

.srg-post-content-col h2 {
    font-size: var(--srg-text-2xl);
    font-weight: var(--srg-weight-bold);
    margin-top: var(--srg-space-12);
    margin-bottom: var(--srg-space-4);
    padding-bottom: var(--srg-space-3);
    border-bottom: 0px solid var(--srg-border-secondary);
    scroll-margin-top: 100px;
}

.srg-post-content-col h3 {
    font-size: var(--srg-text-xl);
    font-weight: var(--srg-weight-semibold);
    margin-top: var(--srg-space-8);
    margin-bottom: var(--srg-space-3);
    scroll-margin-top: 100px;
}

.srg-post-content-col h4 {
    font-size: var(--srg-text-lg);
    font-weight: var(--srg-weight-semibold);
    margin-top: var(--srg-space-6);
    margin-bottom: var(--srg-space-2);
}

.srg-post-content-col p,
.srg-post-content-col li {
    font-family: var(--srg-font-body);
    margin-bottom: var(--srg-space-4);
    font-size: var(--srg-text-lg);
    line-height: var(--srg-leading-relaxed);
    color: var(--srg-text-secondary);
}

.srg-post-content-col li {
    margin-bottom: var(--srg-space-2);
}

/* Mobile responsive font sizes and line heights (under 640px) */
@media (max-width: 640px) {
    .srg-post-content-col h2 {
        font-size: var(--srg-text-xl) !important;
        margin-top: var(--srg-space-8) !important;
    }
    .srg-post-content-col h3 {
        font-size: var(--srg-text-lg) !important;
    }
    .srg-post-content-col p {
        font-size: var(--srg-text-base) !important;
        line-height: 1.75 !important;
    }
}

/* Section-Aware Inline Link Coloring */
.srg-post-content-col a {
    color: var(--srg-context-accent) !important;
    text-decoration: underline !important;
    text-decoration-color: color-mix(in srgb, var(--srg-context-accent) 30%, transparent) !important;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.srg-post-content-col a:hover {
    color: var(--srg-context-accent-hover, var(--srg-context-accent)) !important;
    text-decoration-color: var(--srg-context-accent) !important;
}

/* ── Phase 9: Single Software Width Lock, Metadata Spacing & H2 Standardizations ── */
.single-software .srg-container {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.single-software .srg-post-metadata-wrap {
    margin-top: 20px !important;
}

.single-software h2.srg-section-title,
.single-software h2.srg-reviews-title,
.srg-post-content-col h2 {
    font-size: var(--srg-text-2xl) !important;
    font-weight: var(--srg-weight-bold) !important;
    margin-top: var(--srg-space-12) !important;
    margin-bottom: var(--srg-space-4) !important;
    padding-bottom: var(--srg-space-3) !important;
    border-bottom: 1px solid var(--srg-border-secondary) !important;
    scroll-margin-top: 100px !important;
}