/*
Theme Name: SEO Inspector Hub Blog
Theme URI: https://seoinspectorhub.com/
Author: SEO Inspector Hub
Author URI: https://seoinspectorhub.com/
Description: A modern, fast, SEO-focused blog theme for SEO Inspector Hub. Optimized for Core Web Vitals, schema markup, and high readability. Matches the SEOInspectorHub.com brand.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sih-blog
Tags: blog, seo, custom-colors, custom-logo, featured-images, responsive-layout, right-sidebar, sticky-post, translation-ready
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Base
   3.  Typography
   4.  Layout & Grid
   5.  Header & Navigation
   6.  Hero Section
   7.  Homepage Sections
   8.  Post Cards
   9.  Category Badges
   10. Newsletter Section
   11. Single Post
   12. Sidebar
   13. Archive & Category Pages
   14. Search Page
   15. 404 Page
   16. Footer
   17. Components (Callouts, TOC, FAQ, Tables, Code)
   18. Pagination
   19. Comments
   20. Utilities
   21. Responsive – Tablet (≤1024px)
   22. Responsive – Mobile (≤768px)
   23. Responsive – Small Mobile (≤480px)
   24. Print Styles
============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   Colors extracted from seoinspectorhub.com
============================================================ */
:root {
    /* ── Primary Brand ── */
    --color-primary:        #2563EB;   /* Vibrant blue – main CTAs, links */
    --color-primary-dark:   #1D4ED8;   /* Hover state */
    --color-primary-light:  #DBEAFE;   /* Tint for backgrounds */
    --color-primary-xlight: #EFF6FF;   /* Very light tint */

    /* ── Secondary / Accent ── */
    --color-secondary:      #0F172A;   /* Deep navy – headings, hero bg */
    --color-accent:         #7C3AED;   /* Purple accent – badges, highlights */
    --color-accent-light:   #EDE9FE;   /* Purple tint */
    --color-success:        #10B981;   /* Green – passed checks */
    --color-warning:        #F59E0B;   /* Amber – warnings */
    --color-danger:         #EF4444;   /* Red – critical */

    /* ── Neutrals ── */
    --color-dark:           #0F172A;   /* Body text, headings */
    --color-dark-2:         #1E293B;   /* Card backgrounds dark */
    --color-gray-700:       #374151;
    --color-gray-600:       #4B5563;
    --color-gray-500:       #6B7280;
    --color-gray-400:       #9CA3AF;
    --color-gray-300:       #D1D5DB;
    --color-gray-200:       #E5E7EB;
    --color-gray-100:       #F3F4F6;
    --color-gray-50:        #F9FAFB;
    --color-white:          #FFFFFF;

    /* ── Typography ── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:   'Georgia', 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

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

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;
    --leading-loose:  1.75;

    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ── Spacing ── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;

    /* ── Layout ── */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1280px;
    --container-2xl:  1440px;
    --content-width:  760px;

    /* ── Border ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── Shadow ── */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.1);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.12);
    --shadow-card: 0 2px 12px rgba(37,99,235,.08);

    /* ── Transitions ── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ── Header ── */
    --header-height:  72px;
    --header-bg:      rgba(255,255,255,.95);
    --header-border:  rgba(0,0,0,.08);
}

/* ============================================================
   2. CSS RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-dark);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; width: 100%; }
svg { display: inline-block; vertical-align: middle; }

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    z-index: 9999;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

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

/* ============================================================
   3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
    color: var(--color-dark);
    letter-spacing: -0.02em;
}
h1 { font-size: var(--text-5xl); font-weight: var(--fw-black); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-semi); }
em, i { font-style: italic; }

.lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    font-weight: var(--fw-normal);
}

/* ============================================================
   4. LAYOUT & GRID
============================================================ */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-8);
}

.container--narrow { max-width: var(--container-lg); }
.container--wide   { max-width: var(--container-2xl); }

.site-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* Content + Sidebar two-column */
.content-sidebar-wrap {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: var(--space-12);
    align-items: start;
}

.main-content { min-width: 0; }

/* Section spacing */
.section { padding-block: var(--space-20); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-24); }

.section__header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-12);
}
.section__header h2 { margin-bottom: var(--space-4); }
.section__header p { color: var(--color-gray-600); font-size: var(--text-lg); }

/* ============================================================
   5. HEADER & NAVIGATION
   Pixel-matched to seoinspectorhub.com screenshots:
   – Pure white background
   – Full-colour gradient logo (icon + "SEO" cyan/blue + "InspectorHub" light slate)
   – Nav links: dark navy (#0F172A), no background on normal state
   – Standalone search icon (no box), navy colour
   – CTA: solid blue (#2563EB), fully-rounded pill, white text, search icon
============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,.07);
    height: var(--header-height);
    transition: box-shadow var(--transition-base);
}
.site-header.scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,.09);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--space-6);
}

/* ── Logo ── */
.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    gap: 0;
}

/*
 * Custom logo uploaded via Appearance → Customize → Site Identity.
 * Height is driven entirely by the CSS custom property --sih-logo-height
 * which is injected by the Customizer (default 52 px).
 * We NEVER hard-code a pixel value here — the Customizer owns that.
 * Width auto-scales proportionally so the logo never distorts.
 */
.site-logo .custom-logo,
.custom-logo-link img {
    height: var(--sih-logo-height, 52px);
    width: auto;
    max-width: none;       /* don't let parent containers clip it  */
    display: block;
    object-fit: contain;
}

/* Remove the outer <a> wrapper WordPress adds around the logo */
.custom-logo-link {
    display: flex;
    align-items: center;
}

/* Inline SVG fallback logo (shown when no logo is uploaded) */
.site-logo__inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    height: var(--sih-logo-height, 52px);  /* same height as img logo */
}

/* The SVG icon scales to ~85 % of the wordmark height */
.site-logo__icon {
    flex-shrink: 0;
    height: calc( var(--sih-logo-height, 52px) * 0.85 );
    width:  calc( var(--sih-logo-height, 52px) * 0.85 );
    filter: drop-shadow(0 2px 6px rgba(0, 212, 255, .25));
}
.site-logo__wordmark {
    display: flex;
    align-items: baseline;
    line-height: 1;
    white-space: nowrap;
}
/* "SEO" — cyan-to-blue gradient, heavy weight, large */
.site-logo__seo {
    font-size: 1.625rem;        /* ~26px */
    font-weight: 800;
    background: linear-gradient(90deg, #00BFFF 0%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
}
/* "InspectorHub" — light slate, thinner, slightly smaller */
.site-logo__hub {
    font-size: 1.5rem;          /* ~24px */
    font-weight: 400;
    color: #8FA8C8;             /* muted blue-gray, matches screenshot */
    letter-spacing: -0.01em;
    -webkit-text-fill-color: #8FA8C8;
}

/* ── Primary Navigation ── */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;  /* push right so it sits between logo and actions */
    padding-right: var(--space-4);
}
.main-nav__list {
    display: flex;
    align-items: center;
    gap: 0;                     /* screenshot shows compact spacing */
    list-style: none;
}
/* WordPress wraps each item in <li> — target the <a> inside */
.main-nav__list li a,
.main-nav__link {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;       /* ~15px, matches screenshot */
    font-weight: 500;
    color: #1a2744;             /* dark navy from the site */
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.main-nav__list li a:hover,
.main-nav__list li.current-menu-item > a,
.main-nav__link:hover,
.main-nav__link.current-menu-item {
    color: var(--color-primary);
    background: var(--color-primary-xlight);
}

/* ── Header Actions ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* Search icon — bare, no background box, dark navy */
.search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: #1a2744;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    padding: 0;
}
.search-toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-xlight);
}

/* CTA Button — solid blue, fully-rounded pill, search icon + text */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5625rem 1.125rem;   /* ~9px 18px — compact pill from screenshot */
    background: #2563EB;
    color: #FFFFFF;
    border-radius: var(--radius-full);   /* fully rounded — key detail */
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 10px rgba(37,99,235,.35);
    letter-spacing: 0.005em;
}
.btn-cta:hover {
    background: #1D4ED8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(37,99,235,.45);
}
.btn-cta svg { flex-shrink: 0; }

/* Mobile hamburger */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    padding: 0;
}
.mobile-menu-toggle:hover { background: var(--color-gray-100); }
.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a2744;
    border-radius: 2px;
    transition: all var(--transition-base);
}
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.main-nav.mobile-open {
    display: flex;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: #FFFFFF;
    flex-direction: column;
    padding: var(--space-6);
    z-index: 999;
    overflow-y: auto;
    border-top: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xl);
    justify-content: flex-start;
}
.main-nav.mobile-open .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.main-nav.mobile-open .main-nav__list li a,
.main-nav.mobile-open .main-nav__link {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
}
.main-nav.mobile-open .mobile-cta {
    display: flex !important;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: var(--fw-semi);
    justify-content: center;
    text-decoration: none;
    font-size: var(--text-base);
}

/* ── Search Overlay ── */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    padding-top: 130px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-overlay__inner {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    padding-inline: var(--space-8);
}
.search-overlay__form {
    display: flex;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.search-overlay__input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-xl);
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
}
.search-overlay__btn {
    padding: var(--space-4) var(--space-6);
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: var(--fw-semi);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    transition: background var(--transition-fast);
}
.search-overlay__btn:hover { background: var(--color-primary-dark); }
.search-overlay__close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-8);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.15);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.search-overlay__close:hover { background: rgba(255,255,255,.25); }

/* ============================================================
   6. HERO SECTION
============================================================ */
.hero {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #1e3a8a 60%, #1D4ED8 100%);
    padding-block: var(--space-24) var(--space-20);
    position: relative;
    overflow: hidden;
}

/* Decorative grid pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Decorative glows */
.hero::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-6);
    backdrop-filter: blur(4px);
}
.hero__badge-dot {
    width: 6px;
    height: 6px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero__title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--fw-black);
    color: var(--color-white);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6);
    letter-spacing: -0.03em;
}
.hero__title-highlight {
    background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__subtitle {
    font-size: var(--text-xl);
    color: rgba(255,255,255,.75);
    line-height: var(--leading-relaxed);
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
    transition: all var(--transition-base);
}
.hero__cta:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(37,99,235,.4);
}

.hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,.1);
}
.hero__stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.hero__stat-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.6);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ============================================================
   7. HOMEPAGE SECTIONS
============================================================ */

/* Featured Posts */
.featured-posts { background: var(--color-gray-50); }

/*
 * Featured Grid Layout
 * ─────────────────────────────────────────────────────────
 * 3 posts:  col 1 spans 2 rows (portrait hero) + 2 smaller cards
 * 2 posts:  2-column equal layout
 * 1 post:   full-width single card (no grid needed)
 *
 * The :only-child and nth-child rules handle all three cases.
 * ─────────────────────────────────────────────────────────
 */
.featured-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-5);
    align-items: start;
}

/* ── Single card (only-child): full-width, horizontal layout ── */
.featured-grid .post-card:only-child {
    grid-column: 1 / -1;          /* span all 3 columns */
    grid-row: span 1;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* image left, content right */
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 340px;
}
.featured-grid .post-card:only-child .post-card__thumb {
    aspect-ratio: unset;           /* let the grid height define it */
    height: 100%;
    max-height: none;
    border-radius: 0;              /* no radius — grid handles edges */
}
.featured-grid .post-card:only-child .post-card__thumb img {
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}
.featured-grid .post-card:only-child .post-card__body {
    padding: var(--space-8) var(--space-8);
    justify-content: center;
}
.featured-grid .post-card:only-child .post-card__title {
    font-size: var(--text-3xl);
    -webkit-line-clamp: 3;
}
.featured-grid .post-card:only-child .post-card__excerpt {
    -webkit-line-clamp: 4;
    font-size: var(--text-base);
}

/* ── Two cards: 2-column equal ── */
.featured-grid .post-card:first-child:nth-last-child(2) {
    grid-row: span 1;
}
.featured-grid .post-card:first-child:nth-last-child(2),
.featured-grid .post-card:first-child:nth-last-child(2) ~ .post-card {
    grid-column: span 1;
}

/* ── Three+ cards: first card spans both rows ── */
.featured-grid .post-card:first-child:not(:only-child):nth-last-child(n+3) {
    grid-row: span 2;
}

/* ── Thumb aspect ratios ── */
.post-card__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--color-gray-100);
    flex-shrink: 0;
}
.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.post-card:hover .post-card__thumb img { transform: scale(1.04); }

/* Hero card (first of 3+) gets taller image */
.featured-grid .post-card:first-child:not(:only-child) .post-card__thumb {
    aspect-ratio: 3/2;
    max-height: 280px;
}

/* Latest Articles */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.section-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}
.section-header-row h2 { margin-bottom: 0; }
.view-all-link {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--transition-fast);
}
.view-all-link:hover { gap: var(--space-2); }

/* Popular Categories */
.popular-categories { background: var(--color-gray-50); }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.category-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
}
.category-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}
.category-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: var(--color-primary-xlight);
}
.category-card__name {
    font-weight: var(--fw-semi);
    color: var(--color-dark);
    font-size: var(--text-base);
    line-height: 1.25;
    display: block;
    margin-bottom: 2px;
}
.category-card__count {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* Footer CTA Banner */
.footer-cta {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #1e3a8a 100%);
    padding-block: var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 40px 40px;
}
.footer-cta__inner { position: relative; z-index: 1; }
.footer-cta__title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-black);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}
.footer-cta__subtitle {
    color: rgba(255,255,255,.7);
    font-size: var(--text-lg);
    margin-bottom: var(--space-8);
}
.btn-cta--white {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    font-size: var(--text-base);
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
    transition: all var(--transition-base);
}
.btn-cta--white:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(37,99,235,.4);
}

/* ============================================================
   8. POST CARDS
============================================================ */
.post-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* NOTE: .post-card__thumb is defined above in section 7 (featured grid)
   and applies globally to all cards. Only overrides are here. */
.post-card__thumb--tall { aspect-ratio: 4/5; }

.post-card__body {
    padding: var(--space-5) var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.post-card__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    line-height: var(--leading-snug);
    color: var(--color-dark);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.post-card__title a:hover { color: var(--color-primary); }

.post-card__title--lg { font-size: var(--text-2xl); -webkit-line-clamp: 3; }

.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-4);
    flex: 1;
}

.post-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}
.post-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.post-card__author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.post-card__reading-time {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* ============================================================
   9. CATEGORY BADGES
============================================================ */
.cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.cat-badge--blue    { background: var(--color-primary-light);  color: var(--color-primary); }
.cat-badge--purple  { background: var(--color-accent-light);   color: var(--color-accent); }
.cat-badge--green   { background: #D1FAE5; color: #065F46; }
.cat-badge--amber   { background: #FEF3C7; color: #92400E; }
.cat-badge--red     { background: #FEE2E2; color: #991B1B; }
.cat-badge--gray    { background: var(--color-gray-100);        color: var(--color-gray-600); }
.cat-badge:hover    { filter: brightness(0.95); transform: none; }

/* Reading time */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* ============================================================
   10. NEWSLETTER SECTION
============================================================ */
.newsletter-section {
    background: var(--color-primary-xlight);
    border-top: 1px solid var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary-light);
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
    align-items: center;
}

.newsletter-content h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}
.newsletter-content p {
    color: var(--color-gray-600);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.newsletter-form__row {
    display: flex;
    gap: var(--space-3);
}
.newsletter-form__input {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--transition-fast);
    background: var(--color-white);
}
.newsletter-form__input:focus { border-color: var(--color-primary); }
.newsletter-form__btn {
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--fw-semi);
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.newsletter-form__btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}
.newsletter-form__disclaimer {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* ============================================================
   11. SINGLE POST
============================================================ */
.single-post-header {
    padding-block: var(--space-12);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.breadcrumbs a { color: var(--color-gray-500); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: var(--color-gray-300); }
.breadcrumbs__current { color: var(--color-gray-700); font-weight: var(--fw-medium); }

.single-post-title {
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: var(--fw-black);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-6);
    max-width: 900px;
}

.single-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.post-author-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.post-author-inline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-gray-200);
}
.post-author-inline__name {
    font-weight: var(--fw-semi);
    font-size: var(--text-sm);
    color: var(--color-dark);
    display: block;
}
.post-author-inline__role {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}
.post-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.post-meta-divider { color: var(--color-gray-300); }

/* Featured Image */
.single-post-featured {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

/* Article Body */
.article-body {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-gray-700);
    max-width: var(--content-width);
}
.article-body h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin-top: var(--space-12);
    margin-bottom: var(--space-5);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.article-body h3 {
    font-size: var(--text-2xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--color-dark);
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.article-body h4 {
    font-size: var(--text-xl);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-dark);
}
.article-body p { margin-bottom: var(--space-5); }
.article-body ul, .article-body ol {
    margin: var(--space-5) 0;
    padding-left: var(--space-6);
    list-style: initial;
}
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--space-2); padding-left: var(--space-2); }
.article-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(37,99,235,.3);
    text-underline-offset: 3px;
    transition: all var(--transition-fast);
}
.article-body a:hover {
    text-decoration-color: var(--color-primary);
}
.article-body strong { font-weight: var(--fw-semi); color: var(--color-dark); }
.article-body img {
    border-radius: var(--radius-md);
    margin-block: var(--space-6);
    width: 100%;
}
.article-body figcaption {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}
.article-body blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-xlight);
    padding: var(--space-5) var(--space-6);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-6);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-gray-700);
}
.article-body blockquote p { margin-bottom: 0; }
.article-body hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin-block: var(--space-8);
}

/* ── Table of Contents ──────────────────────────────────────
   The PHP generator (functions.php) outputs:
     <ul class="toc__list">          ← top-level items (h2)
       <li>
         <a href="#...">Heading</a>
         <ul class="toc__sub">       ← sub-items (h3), optional
           <li><a href="#...">Sub</a></li>
         </ul>
       </li>
     </ul>
   Both lists are <ul> — NO <ol> → NO native browser numbers.
   Numbering is done ONLY via CSS counter on .toc__list > li.
──────────────────────────────────────────────────────────── */
.toc {
    background: var(--color-primary-xlight);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    margin-bottom: var(--space-8);
}
.toc__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.01em;
}
.toc__title svg   { transition: transform var(--transition-base); flex-shrink: 0; }
.toc.collapsed .toc__title svg   { transform: rotate(-90deg); }
.toc.collapsed .toc__list        { display: none; }

/* ── Top-level list (h2 items) ── */
.toc__list {
    list-style: none;          /* no browser bullets/numbers */
    padding: 0;
    margin: 0;
    counter-reset: toc-h2 0;  /* start counter at 0 */
}
.toc__list > li {
    counter-increment: toc-h2;  /* increment before ::before renders */
    margin-bottom: 1px;
}

/* The link — flex row so number badge + text sit inline */
.toc__list > li > a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-gray-700);
    text-decoration: none;
    line-height: 1.45;
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* Number prefix — ONE source of truth, no ol involved */
.toc__list > li > a::before {
    content: counter(toc-h2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
    line-height: 1;
}

.toc__list > li > a:hover,
.toc__list > li > a.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.toc__list > li > a.active::before {
    background: var(--color-primary);
    color: #fff;
}

/* ── Sub-list (h3 items) ── */
.toc__sub {
    list-style: none;        /* no browser bullets */
    padding: 2px 0 4px 1.875rem;
    margin: 0;
}
.toc__sub li { margin-bottom: 1px; }
.toc__sub a {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-decoration: none;
    line-height: 1.45;
    transition: background var(--transition-fast), color var(--transition-fast);
}
/* Dash prefix for h3 items — no counter, no double numbering */
.toc__sub a::before {
    content: "–";
    margin-right: 0.375rem;
    color: var(--color-gray-400);
    font-size: 0.6875rem;
}
.toc__sub a:hover,
.toc__sub a.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ── Callout Boxes ── */
.callout {
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-block: var(--space-6);
    border-left: 4px solid;
    display: flex;
    gap: var(--space-4);
}
.callout__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.callout__content { flex: 1; }
.callout__title { font-weight: var(--fw-bold); font-size: var(--text-base); margin-bottom: var(--space-1); }
.callout--tip    { background: var(--color-primary-xlight); border-color: var(--color-primary); }
.callout--tip .callout__title { color: var(--color-primary-dark); }
.callout--warning { background: #FFFBEB; border-color: var(--color-warning); }
.callout--warning .callout__title { color: #92400E; }
.callout--danger  { background: #FEF2F2; border-color: var(--color-danger); }
.callout--danger .callout__title  { color: #991B1B; }
.callout--success { background: #ECFDF5; border-color: var(--color-success); }
.callout--success .callout__title { color: #065F46; }

/* ── FAQ Accordion ── */
.faq-section { margin-block: var(--space-8); }
.faq-section__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}
.faq-item {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.faq-item__question {
    width: 100%;
    text-align: left;
    padding: var(--space-5) var(--space-6);
    font-weight: var(--fw-semi);
    font-size: var(--text-base);
    color: var(--color-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-white);
    transition: background var(--transition-fast);
}
.faq-item__question:hover { background: var(--color-gray-50); }
.faq-item.open .faq-item__question { background: var(--color-primary-xlight); color: var(--color-primary-dark); }
.faq-item__icon { flex-shrink: 0; transition: transform var(--transition-base); }
.faq-item.open .faq-item__icon { transform: rotate(180deg); }
.faq-item__answer {
    padding: 0 var(--space-6);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-base);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    background: var(--color-white);
}
.faq-item.open .faq-item__answer {
    padding-block: var(--space-4) var(--space-5);
    max-height: 600px;
}

/* ── Comparison Tables ── */
.comparison-table-wrap { overflow-x: auto; margin-block: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-gray-200); }
.comparison-table { width: 100%; font-size: var(--text-sm); }
.comparison-table thead tr { background: var(--color-dark); }
.comparison-table thead th {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-weight: var(--fw-semi);
    color: var(--color-white);
    white-space: nowrap;
}
.comparison-table thead th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.comparison-table thead th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }
.comparison-table tbody tr:nth-child(even) { background: var(--color-gray-50); }
.comparison-table tbody tr:hover { background: var(--color-primary-xlight); }
.comparison-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    vertical-align: middle;
}
.comparison-table td:first-child { font-weight: var(--fw-medium); color: var(--color-dark); }
.comparison-table .check  { color: var(--color-success); font-size: 16px; }
.comparison-table .cross  { color: var(--color-danger);  font-size: 16px; }

/* ── Code Blocks ── */
pre {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    overflow-x: auto;
    margin-block: var(--space-6);
    position: relative;
}
pre code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: #E2E8F0;
    line-height: 1.7;
}
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-gray-100);
    color: var(--color-primary-dark);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
pre code { background: transparent; color: inherit; padding: 0; }

/* ── Social Share ── */
.social-share {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    margin-block: var(--space-8);
}
.social-share__label {
    font-weight: var(--fw-semi);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-right: var(--space-2);
}
.social-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.social-share__btn--twitter  { background: #000; color: #fff; }
.social-share__btn--linkedin { background: #0077B5; color: #fff; }
.social-share__btn--copy     { background: var(--color-gray-100); color: var(--color-gray-700); }
.social-share__btn:hover     { opacity: .85; transform: translateY(-1px); }

/* ── Author Bio ── */
.author-bio {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    gap: var(--space-6);
    margin-block: var(--space-8);
}
.author-bio__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--color-gray-200);
}
.author-bio__name {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-1);
}
.author-bio__title {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-3);
}
.author-bio__text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

/* ── Related Posts ── */
.related-posts { margin-top: var(--space-12); }
.related-posts__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}
.related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* ============================================================
   12. SIDEBAR  — Clean, professional redesign
============================================================ */
.sidebar {
    /*
     * FIX: The previous max-height + overflow-y: auto was compressing
     * the entire sidebar into a small scrollable box, making all widgets
     * appear squashed. Sidebars should be full-height and scroll with
     * the page. Only the STICKY positioning is kept so the sidebar
     * follows the user as they read — the content itself is never clipped.
     */
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    /* No max-height, no overflow — let the sidebar be as tall as it needs */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Align to top of the content area */
    align-self: start;
}

/* ── Base Widget Card ── */
.sidebar-widget {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Widget heading row */
.sidebar-widget__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}
/* Left accent bar */
.sidebar-widget__header::before {
    content: '';
    display: block;
    width: 3px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}
.sidebar-widget__header span,
.sidebar-widget__header {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-gray-500);
}
.sidebar-widget__body {
    padding: var(--space-4) var(--space-5);
}

/* ── Author Card ── */
.sidebar-author {
    text-align: center;
    padding: var(--space-6) var(--space-5);
}
.sidebar-author__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    margin-inline: auto;
    margin-bottom: var(--space-3);
    border: 3px solid var(--color-white);
    outline: 2px solid var(--color-primary-light);
    display: block;
}
.sidebar-author__name {
    font-weight: var(--fw-bold);
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 3px;
}
.sidebar-author__role {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: var(--fw-semi);
    margin-bottom: var(--space-3);
    display: block;
}
.sidebar-author__bio {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.6;
}
.sidebar-author__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    font-weight: var(--fw-semi);
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}
.sidebar-author__link:hover { gap: var(--space-2); }

/* ── Popular Posts ── */
.popular-post-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.popular-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* Number badge */
.popular-post-item__num {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    background: var(--color-primary-xlight);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.popular-post-item:nth-child(1) .popular-post-item__num { background: var(--color-primary); color: #fff; }

.popular-post-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-gray-100);
}
.popular-post-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.popular-post-item__content { flex: 1; min-width: 0; }
.popular-post-item__title {
    font-size: 0.8125rem;
    font-weight: var(--fw-semi);
    line-height: 1.4;
    color: var(--color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    text-decoration: none;
    display: block;
    transition: color var(--transition-fast);
}
.popular-post-item__title:hover { color: var(--color-primary); }
.popular-post-item__meta {
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* ── Category List ── */
.sidebar-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-categories li {
    border-bottom: 1px solid var(--color-gray-100);
}
.sidebar-categories li:last-child { border-bottom: none; }
.sidebar-categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
    gap: var(--space-2);
}
.sidebar-categories a:hover { color: var(--color-primary); }
/* Category icon + name */
.sidebar-categories a span:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.sidebar-categories__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    font-size: 0.6875rem;
    border-radius: var(--radius-full);
    font-weight: var(--fw-semi);
    flex-shrink: 0;
}
.sidebar-categories a:hover .sidebar-categories__count {
    background: var(--color-primary-xlight);
    color: var(--color-primary);
}

/* ── Sidebar Newsletter Widget ── */
.sidebar-newsletter {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-primary) 0%, #4F46E5 100%);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--color-white);
    position: relative;
}
/* Subtle pattern overlay */
.sidebar-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
    pointer-events: none;
}
.sidebar-newsletter > * { position: relative; z-index: 1; }

.sidebar-newsletter h3 {
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    color: var(--color-white);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}
.sidebar-newsletter p {
    font-size: 0.8125rem;
    color: rgba(255,255,255,.8);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}
.sidebar-newsletter input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    outline: none;
    color: var(--color-dark);
    background: rgba(255,255,255,.95);
}
.sidebar-newsletter input::placeholder { color: var(--color-gray-400); }
.sidebar-newsletter input:focus { background: var(--color-white); }
.sidebar-newsletter button {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background var(--transition-fast);
}
.sidebar-newsletter button:hover { background: #000; }
.sidebar-newsletter .nl-disclaimer {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.6);
    margin-top: var(--space-2);
}

/* ── Tool CTA Widget (soft tint card) ── */
.sidebar-tool-cta {
    background: var(--color-primary-xlight);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5);
    text-align: center;
}
.sidebar-tool-cta__icon {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
    line-height: 1;
}
.sidebar-tool-cta h3 {
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin-bottom: 4px;
}
.sidebar-tool-cta p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}
.sidebar-tool-cta .btn-cta {
    width: 100%;
    justify-content: center;
    font-size: 0.875rem;
    padding: var(--space-3) var(--space-4);
}

/* ============================================================
   13. ARCHIVE & CATEGORY PAGES
============================================================ */
.archive-header {
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    padding-block: var(--space-12);
}
.archive-header__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.archive-header__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}
.archive-header__desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 640px;
}

.archive-list { display: flex; flex-direction: column; gap: var(--space-6); }
.archive-post {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}
.archive-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.archive-post__thumb {
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--color-gray-100);
}
.archive-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.archive-post:hover .archive-post__thumb img { transform: scale(1.04); }
.archive-post__body { padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.archive-post__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}
.archive-post__title a { color: inherit; }
.archive-post__title a:hover { color: var(--color-primary); }
.archive-post__excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.archive-post__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    align-items: center;
}

/* ============================================================
   14. SEARCH PAGE
============================================================ */
.search-hero {
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    padding-block: var(--space-10);
}
.search-hero__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.search-form-large {
    display: flex;
    max-width: 640px;
}
.search-form-large input {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-gray-300);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--transition-fast);
}
.search-form-large input:focus { border-color: var(--color-primary); }
.search-form-large button {
    padding: var(--space-4) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-weight: var(--fw-semi);
    transition: background var(--transition-fast);
}
.search-form-large button:hover { background: var(--color-primary-dark); }

/* ============================================================
   15. 404 PAGE
============================================================ */
.page-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--space-20);
}
.page-404__code {
    font-size: 120px;
    font-weight: var(--fw-black);
    color: var(--color-primary-light);
    line-height: 1;
    margin-bottom: var(--space-4);
}
.page-404__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.page-404__text { color: var(--color-gray-600); max-width: 480px; margin-inline: auto; margin-bottom: var(--space-8); }
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    transition: all var(--transition-fast);
    text-decoration: none;
    margin-left: var(--space-3);
}
.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ============================================================
   16. FOOTER
   Pixel-matched to seoinspectorhub.com screenshot:
   – Very dark navy/charcoal background (#0D1117)
   – Full-colour logo (icon + gradient wordmark, NOT inverted)
   – Description in muted white (~60% opacity)
   – Social icons: dark rounded squares, icon at ~65% white, blue fill on hover
   – 3 right columns: uppercase bold white headings, muted link text
   – Thin separator, bottom bar: copyright left, 3 legal links right
============================================================ */
.site-footer {
    background: #0D1117;        /* very dark navy — matches screenshot exactly */
    color: rgba(255,255,255,.75);
    padding-top: var(--space-16);
}

/* ── Main grid: brand col wider than link cols ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr 1fr;
    gap: 2rem 3rem;
    padding-bottom: var(--space-14, 3.5rem);
    border-bottom: 1px solid rgba(255,255,255,.08);
    align-items: start;
}

/* ── Brand column ── */
.footer-col--brand {}

/* Logo link wrapper */
.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: var(--space-5);
}

/* Inline SVG logo (no filter invert — keeps full colour) */
.footer-logo-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-logo-wordmark {
    display: flex;
    align-items: baseline;
    line-height: 1;
}
.footer-logo-seo {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, #00BFFF 0%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
}
.footer-logo-hub {
    font-size: 1.375rem;
    font-weight: 400;
    color: #8FA8C8;
    -webkit-text-fill-color: #8FA8C8;
    letter-spacing: -0.01em;
}

/* Description text */
.footer-brand-desc {
    font-size: 0.9375rem;       /* ~15px — readable, matches screenshot */
    line-height: 1.7;
    color: rgba(255,255,255,.58);
    margin-bottom: var(--space-6);
    max-width: 340px;
}

/* ── Social icons ── */
.footer-social {
    display: flex;
    gap: 0.625rem;
}
.footer-social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);          /* square with rounded corners */
    background: rgba(255,255,255,.10);        /* dark box, matches screenshot */
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}
.footer-social__icon:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* ── Link columns ── */
.footer-col {
    /* generic column — applied to all 4 */
}

/* Uppercase bold column headings */
.footer-col__heading {
    font-size: 0.75rem;                       /* ~12px */
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 1.125rem;
    line-height: 1;
}

/* Link list */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 0.625rem;
}
.footer-links a {
    font-size: 0.9375rem;
    color: rgba(255,255,255,.58);
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition-fast);
    display: inline-block;
}
.footer-links a:hover {
    color: #FFFFFF;
}

/* Audience tagline in contact column */
.footer-col__audience {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,.32);
    line-height: 1.65;
}

/* ── Bottom bar ── */
.footer-bottom {
    padding-block: 1.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.footer-bottom__copy {
    font-size: 0.875rem;
    color: rgba(255,255,255,.35);
    line-height: 1.5;
}
.footer-bottom__links {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.footer-bottom__links a {
    font-size: 0.875rem;
    color: rgba(255,255,255,.38);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.footer-bottom__links a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   17. PAGINATION
============================================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-8);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.pagination a { color: var(--color-gray-600); border: 1px solid var(--color-gray-200); }
.pagination a:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-xlight); }
.pagination .current { background: var(--color-primary); color: var(--color-white); border: 1px solid var(--color-primary); }
.pagination .prev, .pagination .next { width: auto; padding-inline: var(--space-4); gap: var(--space-2); }
.pagination .dots { border: none; color: var(--color-gray-400); }

/* ============================================================
   18. COMMENTS
============================================================ */
.comments-section { margin-top: var(--space-12); }
.comments-section__title { font-size: var(--text-2xl); margin-bottom: var(--space-6); }

.comment-list { list-style: none; }
.comment-item { margin-bottom: var(--space-6); }
.comment-body {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-gray-200);
}
.comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comment-author { font-weight: var(--fw-semi); font-size: var(--text-sm); }
.comment-date { font-size: var(--text-xs); color: var(--color-gray-500); }
.comment-text { font-size: var(--text-sm); color: var(--color-gray-700); line-height: var(--leading-relaxed); }
.comment-children { margin-left: var(--space-8); margin-top: var(--space-4); }

.comment-form { margin-top: var(--space-8); }
.comment-form__title { font-size: var(--text-xl); font-weight: var(--fw-bold); margin-bottom: var(--space-5); }
.comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition-fast);
    resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); }
.comment-form textarea { min-height: 140px; margin-bottom: var(--space-4); }
.comment-form__submit {
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    transition: all var(--transition-fast);
}
.comment-form__submit:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

/* ============================================================
   19. UTILITIES
============================================================ */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.bg-light { background: var(--color-gray-50); }
.mt-auto { margin-top: auto; }
.hidden { display: none; }

/* Progress bar for reading */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    width: 0%;
    z-index: 2000;
    transition: width 0.1s linear;
}

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37,99,235,.4);
    transition: all var(--transition-base);
    opacity: 0;
    visibility: hidden;
    z-index: 500;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); background: var(--color-primary-dark); }

/* ============================================================
   21. RESPONSIVE – TABLET (≤1024px)
============================================================ */
@media (max-width: 1024px) {
    :root { --header-height: 68px; }

    .container { padding-inline: var(--space-6); }

    /* Header logo scales down slightly */
    .site-logo__seo { font-size: 1.375rem; }
    .site-logo__hub { font-size: 1.25rem; }
    .site-logo__icon { width: 38px; height: 38px; }

    .content-sidebar-wrap { grid-template-columns: 1fr; }
    /* On tablet the sidebar sits below content, full-width, 2-col widget grid */
    .sidebar {
        position: static;   /* no longer sticky when stacked below content */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        align-self: auto;
    }

    /* Featured grid: collapse to 2 cols on tablet */
    .featured-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    /* First card (3+ scenario) goes full-width across top, stops spanning rows */
    .featured-grid .post-card:first-child:not(:only-child):nth-last-child(n+3) {
        grid-row: span 1;
        grid-column: span 2;
    }
    .featured-grid .post-card:first-child:not(:only-child) .post-card__thumb {
        aspect-ratio: 16/9;
        max-height: none;
    }
    /* Single card: stack vertically on tablet */
    .featured-grid .post-card:only-child {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .featured-grid .post-card:only-child .post-card__thumb {
        aspect-ratio: 16/9;
        height: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .featured-grid .post-card:only-child .post-card__thumb img { min-height: unset; }
    .featured-grid .post-card:only-child .post-card__body { padding: var(--space-5) var(--space-6); }
    .featured-grid .post-card:only-child .post-card__title { font-size: var(--text-2xl); }

    .articles-grid { grid-template-columns: 1fr 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter-inner { grid-template-columns: 1fr; gap: var(--space-8); }

    /* Footer: 2 columns on tablet */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-col--brand { grid-column: span 2; }
    .footer-brand-desc { max-width: 100%; }

    .related-posts__grid { grid-template-columns: 1fr 1fr; }
    .archive-post { grid-template-columns: 200px 1fr; }
}

/* ============================================================
   22. RESPONSIVE – MOBILE (≤768px)
============================================================ */
@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }

    .container { padding-inline: var(--space-4); }

    /* ── Header mobile ── */
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    /* Hide desktop CTA on mobile; shown again inside mobile menu */
    .header-actions .btn-cta { display: none; }
    /* Logo text shrinks on small screens */
    .site-logo__seo { font-size: 1.1875rem; }
    .site-logo__hub { font-size: 1.0625rem; }
    .site-logo__icon { width: 32px; height: 32px; }

    /* Hero */
    .hero { padding-block: var(--space-16) var(--space-12); }
    .hero__stats { gap: var(--space-5); flex-wrap: wrap; justify-content: center; }

    /* Grids */
    /* Featured grid: single column on mobile — all cards stack */
    .featured-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .featured-grid .post-card:first-child:not(:only-child):nth-last-child(n+3),
    .featured-grid .post-card:first-child:not(:only-child) {
        grid-row: span 1;
        grid-column: span 1;
        display: flex;           /* back to flex for mobile */
        flex-direction: column;
    }
    .featured-grid .post-card:first-child:not(:only-child) .post-card__thumb {
        aspect-ratio: 16/9;
        max-height: none;
    }
    .featured-grid .post-card:only-child {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
    .featured-grid .post-card:only-child .post-card__thumb {
        aspect-ratio: 16/9;
        height: auto;
    }
    .featured-grid .post-card:only-child .post-card__thumb img { min-height: unset; }
    .featured-grid .post-card:only-child .post-card__body { padding: var(--space-5); }
    .featured-grid .post-card:only-child .post-card__title { font-size: var(--text-xl); }
    .articles-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: 1fr; }
    .related-posts__grid { grid-template-columns: 1fr; }
    /* Mobile sidebar: single column, flow naturally */
    .sidebar {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Footer: single column on mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-col--brand { grid-column: span 1; }
    .footer-brand-desc { max-width: 100%; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }

    /* Archive */
    .archive-post { grid-template-columns: 1fr; }
    .archive-post__thumb { aspect-ratio: 16/9; }

    /* Blog post */
    .single-post-meta { gap: var(--space-3); }
    .author-bio { flex-direction: column; align-items: center; text-align: center; }
    .comment-form__row { grid-template-columns: 1fr; }

    /* Newsletter */
    .newsletter-form__row { flex-direction: column; }

    .section { padding-block: var(--space-12); }
    .section--lg { padding-block: var(--space-16); }
}

/* ============================================================
   23. RESPONSIVE – SMALL MOBILE (≤480px)
============================================================ */
@media (max-width: 480px) {
    .hero__title { font-size: var(--text-3xl); }
    .single-post-title { font-size: var(--text-3xl); }
    .footer-cta__title { font-size: var(--text-3xl); }
    .social-share { flex-wrap: wrap; }
    .back-to-top { bottom: var(--space-5); right: var(--space-5); }
    /* Logo: icon only on very small screens */
    .site-logo__hub { display: none; }
    .site-logo__seo { font-size: 1.125rem; }
}

/* ============================================================
   24. PRINT STYLES
============================================================ */
@media print {
    .site-header, .sidebar, .newsletter-section, .footer-cta,
    .site-footer, .social-share, .back-to-top, .toc,
    .related-posts { display: none !important; }
    body { font-size: 12pt; color: #000; }
    .article-body a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
    .single-post-header { background: none; border: none; }
}