/* ==========================================================================
   PlayGuitar Theme — Design System
   Aligned with Web Design System, Blog Post Design,
   and Performance & Core Web Vitals skills.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Colors — warm green palette with depth */
    --color-primary:        #1a6b3c;
    --color-primary-dark:   #12502c;
    --color-primary-darker: #0d3b20;
    --color-primary-light:  #e8f5ee;
    --color-primary-mid:    #22875a;
    --color-accent:         #e67e22;
    --color-accent-dark:    #cc6a10;
    --color-accent-light:   #fdf0e0;

    --color-text:           #2d2d2d;
    --color-text-muted:     #5c5c5c;
    --color-text-light:     #8a8a8a;
    --color-heading:        #1a1a1a;
    --color-text-inverse:   #ffffff;

    --color-bg:             #ffffff;
    --color-bg-alt:         #f7f6f3;
    --color-bg-warm:        #fdfcfa;
    --color-bg-dark:        #1a1f16;
    --color-bg-hero:        #f0efe8;

    --color-border:         #ddd9d2;
    --color-border-light:   #eae7e1;

    --color-success:        #1a6b3c;
    --color-error:          #c0392b;
    --color-warning:        #e67e22;

    /* Typography — Literata for soul, Inter for clarity */
    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:  'Literata', Georgia, 'Times New Roman', serif;
    --font-mono:     'Courier New', Courier, monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-md:    1.125rem;
    --text-lg:    1.25rem;
    --text-xl:    1.5rem;
    --text-2xl:   1.875rem;
    --text-3xl:   2.25rem;
    --text-4xl:   2.75rem;

    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.6;
    --leading-loose:   1.8;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Spacing — 8px grid */
    --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 */
    --width-content:   720px;
    --width-wide:      960px;
    --width-max:       1200px;
    --width-narrow:    580px;
    --container-padding: var(--space-5);

    /* Borders */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Shadows — warmer tones */
    --shadow-sm:    0 1px 3px rgba(26,31,22,0.06), 0 1px 2px rgba(26,31,22,0.04);
    --shadow-md:    0 4px 16px rgba(26,31,22,0.08), 0 2px 4px rgba(26,31,22,0.04);
    --shadow-lg:    0 12px 36px rgba(26,31,22,0.12), 0 4px 8px rgba(26,31,22,0.06);
    --shadow-focus: 0 0 0 3px rgba(26,107,60,0.25);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;
    --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* Reset margins/padding on theme elements only — don't nuke page builder content */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}
/* Restore paragraph spacing inside Thrive Architect content */
.tve_shortcode_rendered p,
[class*="thrv_"] p,
.sales-page__content p {
    margin-bottom: 1em;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg-warm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- Headings ---------- */
h1 {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-heading);
    letter-spacing: -0.01em;
}

h2 {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-heading);
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

h4, h5, h6 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

/* ---------- Links ---------- */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(26,107,60,0.3);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}

.skip-link:focus {
    clip: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    padding: var(--space-3) var(--space-5);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--text-lg);
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--width-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--content {
    max-width: var(--width-content);
}

.container--wide {
    max-width: var(--width-wide);
}

.container--narrow {
    max-width: var(--width-narrow);
}

.site-main {
    min-height: 60vh;
}

/* ==========================================================================
   HEADER — The first impression
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 1px 8px rgba(26,31,22,0.04);
}

/* Header container — match global .container padding */
.site-header > .container {
    max-width: var(--width-max);
    padding-inline: var(--container-padding);
    margin-inline: auto;
}

/* Green accent bar at very top */
.site-header::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-darker) 0%, var(--color-primary) 30%, var(--color-primary-mid) 70%, var(--color-accent) 100%);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: var(--space-3);
}

.site-logo:hover {
    text-decoration: none;
}

.site-logo__img {
    height: 40px;
    width: auto;
    display: block;
    margin-left: -4px; /* trim whitespace baked into logo PNG */
}

/* Custom logo image */
.custom-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.custom-logo {
    height: 40px;
    width: auto;
    display: block;
}

.site-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

/* Subtle guitar pick / accent beside title */
.site-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50% 50% 50% 2px;
    transform: rotate(45deg);
    margin-right: var(--space-2);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Navigation */
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-6);
}

.nav-menu a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--transition-normal);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: width var(--transition-normal) var(--ease-out-back);
}

.nav-menu a:hover {
    color: var(--color-primary);
}

.nav-menu a:hover::after,
.nav-menu .current-menu-item a::after {
    width: 100%;
}

/* Dropdown sub-menus */
.nav-menu .menu-item-has-children {
    position: relative;
}

.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    min-width: 260px;
    z-index: var(--z-dropdown);
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

.nav-menu .sub-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    white-space: nowrap;
}

.nav-menu .sub-menu a::after {
    display: none;
}

.nav-menu .sub-menu a:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

/* Dropdown arrow indicator */
.nav-menu .menu-item-has-children > a::after {
    content: '';
    position: static;
    display: inline-block;
    width: 0;
    height: 0;
    background: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: var(--space-1);
    vertical-align: middle;
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-heading);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

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

    .nav-menu {
        display: none;
        position: absolute;
        top: calc(72px + 3px); /* account for accent bar */
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-bg);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        gap: 0;
    }

    .nav-menu li {
        border-bottom: 1px solid var(--color-border-light);
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-menu a {
        display: block;
        padding: var(--space-4) 0;
        font-size: var(--text-base);
    }

    .nav-menu.is-active {
        display: flex;
    }

    /* Mobile dropdowns expand inline */
    .nav-menu .sub-menu {
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0 0 0 var(--space-4);
        display: block;
    }

    .nav-menu .sub-menu a {
        padding: var(--space-2) 0;
        font-size: var(--text-sm);
    }
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs,
.rank-math-breadcrumb {
    padding: var(--space-4) 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
    content: '\203A'; /* single right angle quote — cleaner than / */
    margin-left: var(--space-2);
    color: var(--color-text-light);
}

.breadcrumbs a,
.rank-math-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   POST GRID (Archive / Homepage)
   ========================================================================== */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-8);
    padding-block: var(--space-8);
}

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

@media (max-width: 960px) {
    .post-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .post-grid,
    .post-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   POST CARD — The workhorse component
   ========================================================================== */
.post-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Image with zoom on hover */
.post-card__image,
.post-card__image-link {
    display: block;
    overflow: hidden;
}

.post-card__image img,
.post-card__image-link img,
.post-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image img,
.post-card:hover .post-card__image-link img,
.post-card:hover .post-card__img {
    transform: scale(1.05);
}

/* No-image placeholder */
.post-card:not(:has(.post-card__image)):not(:has(.post-card__image-link)):not(:has(.post-card__img)) .post-card__content {
    border-top: 4px solid var(--color-primary);
}

.post-card__content,
.post-card__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.post-card__title {
    font-size: var(--text-lg);
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-3);
}

.post-card__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* ==========================================================================
   CATEGORY BADGES
   ========================================================================== */
.post-categories {
    margin-bottom: var(--space-3);
}

.category-badge,
.post-category-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.category-badge:hover,
.post-category-badge:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ==========================================================================
   SINGLE POST — Where the magic happens
   ========================================================================== */

/* Post header — warm tinted background */
.post-header {
    background: var(--color-bg-hero);
    padding: var(--space-10) 0 var(--space-8);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
}

.post-meta-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.post-title {
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
    max-width: 800px;
    margin-inline: auto;
}

.post-meta-sep {
    color: var(--color-text-light);
}

.post-hero,
.post-hero-image {
    margin: 0 auto var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: var(--width-wide);
    box-shadow: var(--shadow-md);
}

.post-hero__img,
.post-hero-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Post body */
.post-body {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    background: var(--color-bg);
}

/* ==========================================================================
   POST CONTENT (Prose) — The reading experience
   ========================================================================== */
.post-content {
    max-width: var(--width-content);
    margin-inline: auto;
}

.post-content p {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-6);
}

.page-header {
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}

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


.post-content h2 {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-top: var(--space-16);
    margin-bottom: var(--space-5);
    letter-spacing: -0.01em;
}

.post-content h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.post-content h4 {
    font-size: var(--text-lg);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.post-content ul,
.post-content ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
}

.post-content li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-loose);
    font-size: var(--text-md);
}

.post-content li::marker {
    color: var(--color-primary);
}

/* Blockquote — distinctive and warm */
.post-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-6) var(--space-8);
    margin: var(--space-10) 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-primary-darker);
    position: relative;
}

.post-content blockquote::before {
    content: '\201C'; /* left double quotation mark */
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: 3rem;
    font-family: var(--font-heading);
    color: var(--color-primary);
    opacity: 0.3;
    line-height: 1;
}

.post-content blockquote p {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-8) 0;
    display: block;
}

.post-content figure {
    margin: var(--space-10) 0;
    text-align: center;
}

.post-content figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-top: var(--space-3);
    font-style: italic;
}

.post-content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    font-weight: var(--weight-medium);
}

.post-content pre {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.post-content code {
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.post-content p > code,
.post-content li > code {
    background: var(--color-bg-alt);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.post-content th,
.post-content td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    text-align: left;
}

.post-content th {
    background: var(--color-bg-alt);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.post-content hr {
    border: none;
    height: 1px;
    background: var(--color-border);
    margin: var(--space-12) 0;
}

/* Responsive video embeds */
.post-content iframe,
.post-content .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   YOUTUBE FACADE — Performance-first video embeds
   ========================================================================== */
.video-facade {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: var(--space-10) 0;
    border-radius: var(--radius-lg);
    background: #000;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.video-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.video-facade:hover img {
    transform: scale(1.03);
}

.video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.video-facade:hover .video-facade__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* ---------- YouTube Embed Wrapper ---------- */
.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: var(--space-10) 0;
    border-radius: var(--radius-lg);
    background: #000;
    box-shadow: var(--shadow-md);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   CHORD & SCALE DIAGRAMS — Guitar-specific character
   ========================================================================== */
.chord-diagram {
    display: inline-block;
    text-align: center;
    margin: var(--space-2);
    vertical-align: top;
}

.chord-diagram-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-heading);
    margin-bottom: var(--space-1);
    display: block;
    color: var(--color-heading);
}

.chord-group,
.rn-chords-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin: var(--space-8) 0;
    padding: var(--space-8) var(--space-6);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}

@media (max-width: 480px) {
    .chord-group,
    .rn-chords-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

/* Scale Diagram */
.scale-diagram {
    margin: var(--space-8) 0;
    overflow-x: auto;
}

.scale-diagram-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scale-diagram svg,
.scale-diagram table {
    max-width: 100%;
}

/* ==========================================================================
   POST TAGS
   ========================================================================== */
.tag-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.tag-badge:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-10);
}

/* ==========================================================================
   RELATED POSTS — "Keep Learning"
   ========================================================================== */
.related-posts {
    background: var(--color-bg-alt);
    padding: var(--space-16) 0 var(--space-20);
    margin-top: 0;
    border-top: 1px solid var(--color-border-light);
}

.related-posts__title {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    margin-bottom: var(--space-3);
    text-align: center;
    color: var(--color-heading);
}

/* Subtitle for related posts */
.related-posts__title::after {
    content: 'More lessons you might enjoy';
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-10);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    background: var(--color-bg);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* ==========================================================================
   BUTTONS — Warm and inviting
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(26,107,60,0.2);
}

.btn--primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,107,60,0.3);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(230,126,34,0.2);
}

.btn--accent:hover:not(:disabled) {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230,126,34,0.3);
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--color-bg-alt);
    border-color: var(--color-text-muted);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-md);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 36px;
}

/* ==========================================================================
   FORMS (Global)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

/* ==========================================================================
   OPT-IN FORMS — Thrive Leads replacement
   ========================================================================== */
.optin-form {
    margin-block: var(--space-10);
}

.optin-form--card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: var(--shadow-md);
}

.optin-form--card .optin-form__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.optin-form--card .optin-form__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .optin-form--card {
        grid-template-columns: 1fr 1fr;
    }

    .optin-form--card .optin-form__image {
        aspect-ratio: auto;
    }
}

.optin-form__content {
    padding: var(--space-8);
}

.optin-form__heading {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}

.optin-form__subheading {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.optin-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.optin-form__field {
    width: 100%;
}

.optin-form__button {
    width: 100%;
}

.optin-form__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
    background: var(--color-bg);
}

.optin-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.optin-form__button {
    width: 100%;
}

.optin-form__privacy {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-top: var(--space-3);
    text-align: center;
}

.optin-form__message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-top: var(--space-3);
    text-align: center;
}

.optin-form__message--success {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary);
}

.optin-form__message--error {
    background: #fce4ec;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* Inline CTA — within blog content */
.optin-form--inline {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    text-align: center;
    border: none;
    position: relative;
    overflow: hidden;
}

/* Subtle texture on dark inline CTA */
.optin-form--inline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(26,107,60,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(230,126,34,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.optin-form--inline .optin-form__content {
    position: relative;
    z-index: 1;
}

.optin-form--inline .optin-form__heading {
    color: var(--color-text-inverse);
}

.optin-form--inline .optin-form__subheading {
    color: rgba(255, 255, 255, 0.75);
}

.optin-form--inline .optin-form__privacy {
    color: rgba(255, 255, 255, 0.45);
}

.optin-form--inline .optin-form__input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
}

.optin-form--inline .optin-form__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
    .optin-form--inline .optin-form__form {
        flex-direction: row;
        max-width: 440px;
        margin-inline: auto;
    }

    .optin-form--inline .optin-form__input {
        flex: 1;
    }

    .optin-form--inline .optin-form__button {
        width: auto;
        white-space: nowrap;
    }
}

/* Banner style — full-width */
.optin-form--banner {
    background: var(--color-bg-dark);
    border-radius: 0;
    margin-inline: calc(var(--container-padding) * -1);
    padding: var(--space-12) var(--container-padding);
    color: var(--color-text-inverse);
    text-align: center;
    border: none;
}

.optin-form--banner .optin-form__heading {
    color: var(--color-text-inverse);
    font-size: var(--text-3xl);
}

.optin-form--banner .optin-form__subheading {
    color: rgba(255, 255, 255, 0.75);
}

.optin-form--banner .optin-form__privacy {
    color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 640px) {
    .optin-form--banner .optin-form__form {
        flex-direction: row;
        max-width: 500px;
        margin-inline: auto;
    }

    .optin-form--banner .optin-form__input {
        flex: 1;
    }

    .optin-form--banner .optin-form__button {
        width: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-form {
    max-width: 600px;
    margin-block: var(--space-8);
}

.contact-form__heading {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    margin-bottom: var(--space-5);
}

.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form__button {
    align-self: flex-start;
}

.contact-form__message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-top: var(--space-3);
}

.contact-form__message--success {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.contact-form__message--error {
    background: #fce4ec;
    color: var(--color-error);
}

/* ==========================================================================
   FOOTER — Substantial, warm, trustworthy
   ========================================================================== */
.site-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-16) 0 var(--space-8);
    position: relative;
}

/* Green accent on top of footer */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-mid) 50%, var(--color-accent) 100%);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.site-footer__brand {
    max-width: 360px;
}

.site-footer__logo {
    margin-bottom: var(--space-4);
}

.site-footer__logo img {
    max-height: 40px;
    width: auto;
}

.site-footer__social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.social-link {
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
}

.social-link:hover {
    color: var(--color-accent);
}

/* Footer opt-in form */
.site-footer__optin {
    max-width: 320px;
}

.footer-optin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-optin-form__input {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid #fff;
    background: #fff !important;
    color: var(--text-color, #1a1a1a);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
}

.footer-optin-form__input::placeholder {
    color: #999;
    opacity: 1;
}

.footer-optin-form__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.footer-optin-form__btn {
    font-size: var(--text-sm);
}

.footer-optin-form__note {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    margin-top: var(--space-1);
}

.site-footer__brand .site-title {
    color: var(--color-text-inverse);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    display: block;
}

.site-footer__brand .site-title::before {
    background: var(--color-accent);
}

.site-footer__tagline {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.6);
    line-height: var(--leading-normal);
}

.footer-nav-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    margin-bottom: var(--space-4);
}

.site-footer__optin .footer-nav-title {
    color: rgba(255,255,255,0.95);
    font-size: var(--text-base);
}

.footer-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: var(--space-3);
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-menu a:hover {
    color: var(--color-text-inverse);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.site-footer__bottom p {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    margin: 0;
}

.site-footer__bottom p:first-child {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: rgba(255,255,255,0.6);
    font-style: italic;
}

.site-footer__bottom a {
    color: inherit;
    text-decoration: none;
}

.site-footer__bottom a:hover {
    color: rgba(255,255,255,0.8);
}

.site-footer__info {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
}

.site-footer__legal {
    display: flex;
    gap: var(--space-5);
    list-style: none;
}

.site-footer__legal a {
    color: rgba(255,255,255,0.4);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer__legal a:hover {
    color: rgba(255,255,255,0.8);
}

/* ==========================================================================
   ARCHIVE / HOMEPAGE HEADER
   ========================================================================== */
.archive-header {
    text-align: center;
    padding: var(--space-12) 0 var(--space-6);
    background: var(--color-bg-hero);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-4);
}

.archive-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.archive-header__desc {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    max-width: 560px;
    margin-inline: auto;
}

/* ==========================================================================
   OPT-IN RIBBON — Thrive Leads ribbon replacement
   ========================================================================== */
.optin-ribbon {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-3) 0;
    position: relative;
    z-index: calc(var(--z-sticky) - 1);
}

.optin-ribbon__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    padding-right: var(--space-8); /* room for close button */
}

.optin-ribbon__text {
    font-size: var(--text-sm);
    margin: 0;
    color: rgba(255,255,255,0.9);
    line-height: var(--leading-snug);
}

.optin-ribbon__text strong {
    color: var(--color-accent);
}

.optin-ribbon__form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

.optin-ribbon__input {
    padding: var(--space-2) var(--space-3);
    border: 2px solid #fff;
    border-radius: var(--radius-md);
    background: #fff !important;
    color: var(--text-color, #1a1a1a);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    width: 220px;
    height: 38px;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.optin-ribbon__btn {
    height: 38px;
    white-space: nowrap;
}

.optin-ribbon__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.optin-ribbon__input::placeholder {
    color: #999;
}

.optin-ribbon__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: var(--text-xl);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    line-height: 1;
    transition: color var(--transition-fast);
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
}

.optin-ribbon__close:hover {
    color: rgba(255,255,255,0.8);
}

@media (max-width: 768px) {
    .optin-ribbon__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding-right: var(--space-8);
    }

    .optin-ribbon__form {
        width: 100%;
    }

    .optin-ribbon__input {
        flex: 1;
        width: auto;
    }
}

/* ==========================================================================
   POST LAYOUT — Content + Sidebar
   ========================================================================== */
.post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
    align-items: start;
}

.post-layout__content {
    min-width: 0; /* prevent overflow */
}

.post-layout__sidebar {
    position: sticky;
    top: calc(72px + 3px + var(--space-6)); /* header + accent bar + gap */
}

@media (max-width: 960px) {
    .post-layout {
        grid-template-columns: 1fr;
    }

    .post-layout__sidebar {
        position: static;
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-8);
        margin-top: var(--space-8);
    }
}

/* ==========================================================================
   SIDEBAR — Widgets
   ========================================================================== */

/* Sidebar Opt-in — dark card style */
.post-layout__sidebar .optin-form--card {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    margin-block: 0 var(--space-8);
    position: relative;
    overflow: hidden;
    border: none;
    display: block; /* override grid layout */
}

.post-layout__sidebar .optin-form__content {
    padding: var(--space-5);
    width: 100%;
}

.post-layout__sidebar .optin-form--card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, rgba(26,107,60,0.2) 0%, transparent 60%);
    pointer-events: none;
}

.post-layout__sidebar .optin-form__heading {
    font-size: var(--text-lg);
    color: var(--color-text-inverse);
    position: relative;
}

.post-layout__sidebar .optin-form__subheading {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    position: relative;
}

.post-layout__sidebar .optin-form__input {
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1) !important;
    color: var(--color-text-inverse);
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
}

.post-layout__sidebar .optin-form__input:focus {
    border-color: var(--color-accent);
    background: rgba(255,255,255,0.15);
}

.post-layout__sidebar .optin-form__input::placeholder {
    color: rgba(255,255,255,0.5);
}

.post-layout__sidebar .optin-form__privacy {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    position: relative;
}

.post-layout__sidebar .optin-form__content {
    position: relative;
}

.post-layout__sidebar .optin-form__button {
    width: 100%;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}

.post-layout__sidebar .optin-form__form {
    gap: var(--space-3);
}

.post-layout__sidebar .optin-form__input {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-3);
}

/* Sidebar Widgets */
.sidebar-widget {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.sidebar-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-widget__title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* Sidebar Categories */
.sidebar-categories {
    list-style: none;
    padding: 0;
}

.sidebar-categories li {
    border-bottom: 1px solid var(--color-border-light);
}

.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;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebar-categories a:hover {
    color: var(--color-primary);
    padding-left: var(--space-2);
}

.sidebar-categories__count {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: var(--weight-medium);
}

/* Sidebar Post List */
.sidebar-posts {
    list-style: none;
    padding: 0;
}

.sidebar-post-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.sidebar-post-item:last-child {
    border-bottom: none;
}

.sidebar-post-item__img {
    flex-shrink: 0;
    width: 64px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sidebar-post-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-post-item__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    text-decoration: none;
    line-height: var(--leading-snug);
    display: block;
    transition: color var(--transition-fast);
}

.sidebar-post-item__title:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   VIDEO HERO — YouTube at top of posts
   ========================================================================== */
.post-hero-video {
    margin: 0 auto var(--space-6);
    max-width: var(--width-wide);
}

.post-hero-video .video-facade {
    margin: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.post-hero-video .video-facade img {
    loading: eager;
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --container-padding: var(--space-4);
    }

    .post-content p,
    .post-content li {
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }

    .post-header {
        padding: var(--space-6) 0 var(--space-5);
    }

    .post-title {
        font-size: var(--text-2xl);
    }

    .related-posts {
        padding: var(--space-10) 0 var(--space-12);
    }

    .site-footer__inner {
        text-align: center;
    }

    .site-footer__brand {
        max-width: none;
    }
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* ---------- Hero Section ---------- */
.hp-hero {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-16) 0;
    overflow: hidden;
}

.hp-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-10);
    align-items: center;
}

.hp-hero__kicker {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary-mid);
    margin-bottom: var(--space-4);
}

.hp-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-5);
}

.hp-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.7);
    line-height: var(--leading-normal);
    margin-bottom: 0;
    max-width: 480px;
}

.hp-hero__cta .btn {
    font-size: var(--text-md);
    padding: var(--space-4) var(--space-8);
}

.hp-hero__form {
    margin-top: var(--space-6);
}

.hp-hero__fields {
    display: flex;
    gap: var(--space-3);
    max-width: 480px;
}

.hp-hero__input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 2px solid #fff;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    font-size: var(--text-md);
    transition: border-color 0.2s;
}

.hp-hero__input::placeholder {
    color: var(--text-muted);
}

.hp-hero__input:hover {
    border-color: #fff;
}

.hp-hero__input:focus {
    outline: none;
    border-color: var(--accent);
}

.hp-hero__btn {
    white-space: nowrap;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-md);
}

.hp-hero__proof {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.45);
    margin-top: var(--space-3);
}

.hp-hero__browse {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.hp-hero__browse a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.hp-hero__browse a:hover {
    color: rgba(255,255,255,0.8);
}

.hp-hero__image img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    margin-left: auto;
}

.hp-hero__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    margin-left: auto;
}

.hp-hero__placeholder img {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .hp-hero {
        padding: var(--space-10) 0;
    }

    .hp-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hp-hero__title {
        font-size: var(--text-3xl);
    }

    .hp-hero__subtitle {
        max-width: none;
    }

    .hp-hero__image {
        display: none; /* hide on mobile — CTA is what matters */
    }
}

/* ---------- Section Headers (shared) ---------- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.section-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}

.section-header__desc {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    margin: 0;
}

/* ---------- Category Cards ---------- */
.hp-categories {
    background: var(--color-bg-alt);
    padding: var(--space-16) 0;
}

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

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.category-card__icon {
    margin-bottom: var(--space-3);
    display: block;
    line-height: 1;
    color: var(--color-primary);
}

.category-card__icon svg {
    width: 36px;
    height: 36px;
}

.category-card:hover .category-card__icon {
    color: var(--color-accent);
}

.category-card--no-icon {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.category-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin: 0 0 var(--space-2);
}

.category-card__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .hp-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hp-categories__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .category-card {
        padding: var(--space-4) var(--space-3);
    }
}

/* ---------- Social Proof Strip ---------- */
.hp-proof {
    background: var(--color-bg);
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.hp-proof__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    justify-content: center;
    flex-wrap: wrap;
}

.hp-proof__photo img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary-light);
}

.hp-proof__bio {
    margin-right: var(--space-8);
}

.hp-proof__name {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--color-heading);
    margin: 0;
}

.hp-proof__role {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.hp-proof__stats {
    display: flex;
    gap: var(--space-8);
}

.hp-proof__stat {
    text-align: center;
}

.hp-proof__stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
}

.hp-proof__stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .hp-proof__inner {
        flex-direction: column;
        text-align: center;
    }

    .hp-proof__bio {
        margin-right: 0;
    }

    .hp-proof__stats {
        gap: var(--space-6);
    }
}

/* ---------- Latest Posts Section ---------- */
.hp-latest {
    padding: var(--space-16) 0;
    background: var(--color-bg);
}

.hp-latest__more {
    text-align: center;
    margin-top: var(--space-8);
}

/* ---------- Featured Courses ---------- */
.hp-courses {
    padding: var(--space-16) 0;
    background: var(--color-bg-alt);
}

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

.course-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.course-card__image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.course-card__placeholder span {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: rgba(255,255,255,0.3);
}

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

.course-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin: 0 0 var(--space-2);
}

.course-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    flex: 1;
}

.course-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-card__price {
    font-weight: var(--weight-bold);
    color: var(--color-heading);
}

.course-card__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

.course-card:hover .course-card__link {
    color: var(--color-primary-dark);
}

@media (max-width: 1024px) {
    .hp-courses__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hp-courses__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CATEGORY / PILLAR PAGES
   ========================================================================== */

/* ---------- Category Hero ---------- */
.cat-hero {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-12) 0 var(--space-10);
}

.cat-hero .breadcrumbs {
    margin-bottom: var(--space-4);
}

.cat-hero .breadcrumbs,
.cat-hero .breadcrumbs a {
    color: rgba(255,255,255,0.5);
}

.cat-hero .breadcrumbs a:hover {
    color: rgba(255,255,255,0.8);
}

.cat-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-4);
    line-height: var(--leading-tight);
}

.cat-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.7);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
    max-width: 640px;
}

.cat-hero__meta {
    margin-bottom: var(--space-6);
}

.cat-hero__count {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-mid);
    background: rgba(26, 107, 60, 0.15);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.cat-hero__cta .btn {
    font-size: var(--text-md);
}

.cat-hero--compact {
    padding: var(--space-8) 0 var(--space-6);
}

@media (max-width: 768px) {
    .cat-hero__title {
        font-size: var(--text-3xl);
    }
}

/* ---------- Pillar Content ---------- */
.cat-pillar {
    padding: var(--space-12) 0 var(--space-8);
    background: var(--color-bg);
}

.container--narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* ---------- Inline CTA ---------- */
.cat-optin {
    padding: var(--space-8) 0;
}

.inline-cta {
    background: var(--color-bg-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-8);
}

.inline-cta__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-6);
}

.inline-cta__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.inline-cta__desc {
    font-size: var(--text-md);
    color: rgba(255,255,255,0.7);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.inline-cta__form {
    display: flex;
    flex-direction: column;
}

.inline-cta__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inline-cta__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgba(255,255,255,0.12) !important;
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: var(--text-base);
    height: 48px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
}

.inline-cta__btn {
    width: 100%;
    height: 48px;
}

.inline-cta__input::placeholder {
    color: rgba(255,255,255,0.5);
    opacity: 1;
}

.inline-cta__input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255,255,255,0.12);
}


.inline-cta__note {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    margin: var(--space-3) 0 0;
}

@media (max-width: 768px) {
    .inline-cta {
        padding: var(--space-6);
    }

    .inline-cta__body {
        grid-template-columns: 1fr;
    }

    .inline-cta__fields {
        flex-direction: column;
    }

    .inline-cta__btn {
        width: 100%;
    }
}

/* ---------- Lesson Grid on Pillar ---------- */
.cat-lessons {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-bg-alt);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ==========================================================================
   Course Catalog / Shop Grid
   ========================================================================== */

/* ── Shop Hero ── */
.shop-hero {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-24) 0;
    text-align: center;
}
.shop-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    color: var(--color-text-inverse);
}
.shop-hero__subtitle {
    font-size: var(--text-md);
    color: rgba(255,255,255,0.8);
    max-width: var(--width-narrow);
    margin: 0 auto var(--space-6);
    line-height: var(--leading-normal);
}
.shop-hero__subtitle em {
    color: var(--color-accent);
    font-style: normal;
}
.shop-hero__roadmap {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    margin: 0;
}
.shop-hero__roadmap a {
    color: var(--color-accent);
    text-decoration: none;
}
.shop-hero__roadmap a:hover {
    text-decoration: underline;
}

/* ── Catalog Section ── */
.shop-catalog {
    padding: var(--space-20) 0;
    background: var(--color-bg-alt);
}

/* ── Catalog Filters ── */
.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-16);
}
.catalog-filter {
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.catalog-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.catalog-filter--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.catalog-filter--active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

/* ── Course Grid ── */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
    max-width: var(--width-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ── Course Card ── */
.course-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.course-card__image-link {
    display: none;
}
.course-card__header {
    background: var(--color-bg-dark);
    padding: var(--space-6) var(--space-6) var(--space-5);
}
.course-card__header .course-card__title {
    color: var(--color-text-inverse);
    margin: 0;
    font-size: var(--text-xl);
}
.course-card__header .course-card__title a {
    color: var(--color-text-inverse);
}
.course-card__header .course-card__title a:hover {
    color: var(--color-accent);
}
.course-card__header .course-card__skill {
    margin-bottom: var(--space-3);
    display: inline-block;
}
.course-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.course-card__meta {
    display: none;
}
.course-card__price--large {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}
.course-card__skill {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}
.course-card__price {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
}
.course-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-2);
    color: var(--color-heading);
}
.course-card__title a {
    color: inherit;
    text-decoration: none;
}
.course-card__title a:hover {
    color: var(--color-primary);
}
.course-card__tagline {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-6);
    flex: 1;
}
.course-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 0;
    margin-bottom: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}
.course-card__links a {
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--weight-medium);
}
.course-card__links a:hover {
    text-decoration: underline;
}
.course-card__links a + a::before {
    content: "·";
    color: var(--color-text-light);
    margin: 0 var(--space-2);
    font-weight: var(--weight-bold);
}
.course-card__buy {
    display: block;
    text-align: center;
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.course-card__buy:hover {
    background: var(--color-accent-dark);
    color: #fff;
}
.course-card__buy:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Guarantee Section ── */
.shop-guarantee {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    text-align: center;
    padding: var(--space-20) 0;
}
.shop-guarantee h2 {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    color: var(--color-text-inverse);
}
.shop-guarantee p {
    font-size: var(--text-md);
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: var(--leading-normal);
}
.shop-guarantee a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .catalog-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .catalog-filters {
        gap: var(--space-2);
    }
    .catalog-filter {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
    .shop-hero {
        padding: var(--space-16) 0;
    }
    .shop-catalog {
        padding: var(--space-12) 0;
    }
}

/* ---------- Simple Footer (Courses Site) ---------- */
.site-footer__simple {
    padding: var(--space-8) 0 var(--space-6);
}
.footer-guarantee {
    text-align: center;
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-guarantee a {
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-style: italic;
    font-weight: var(--weight-bold);
    letter-spacing: 0.01em;
}
.footer-guarantee a:hover {
    color: var(--color-accent);
}
.footer-simple-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-footer__simple .footer-logo {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.site-footer__simple .footer-logo:hover {
    opacity: 1;
}
.footer-inline-links {
    display: flex;
    gap: var(--space-6);
}
.footer-inline-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}
.footer-inline-links a:hover {
    color: #ffffff;
}
.footer-copyright {
    color: rgba(255,255,255,0.4);
    font-size: var(--text-sm);
    margin: 0;
}
.footer-guarantee-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-style: italic;
}
.footer-guarantee-link:hover {
    color: #ffffff;
}

/* ---------- Sales Page Template ---------- */
.sales-page {
    /* No container constraint — Architect controls layout */
}
.sales-page__content {
    /* Full width, no padding — let page builder own it */
    width: 100%;
}
/* Remove any default page margins/padding */
.page-template-template-sales .site-main {
    padding: 0;
}
.page-template-template-sales .sales-page {
    margin: 0;
}
/* Non-sticky header on sales pages — Architect content wasn't built for sticky */
.page-template-template-sales .site-header {
    position: relative;
}


/* ==========================================================================
   Testimonials
   ========================================================================== */

/* ---------- Grid layout ---------- */
.pg-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ---------- List layout ---------- */
.pg-testimonial-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 720px;
}

.pg-testimonial-list .pg-testimonial-card {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-5) 0;
    background: none;
}

.pg-testimonial-list .pg-testimonial-card:last-child {
    border-bottom: none;
}

/* ---------- Card ---------- */
.pg-testimonial-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

blockquote.pg-testimonial-card__quote,
.post-content blockquote.pg-testimonial-card__quote {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    flex: 1;
    quotes: none;
    background: none;
    border-left: none;
    border-radius: 0;
    padding: 0;
    font-style: normal;
    font-family: var(--font-body);
    position: static;
}

blockquote.pg-testimonial-card__quote::before,
.post-content blockquote.pg-testimonial-card__quote::before {
    content: "\201C";
    font-size: 3rem;
    font-family: var(--font-heading);
    color: var(--color-primary, #2d6a4f);
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: var(--space-2);
    position: static;
    opacity: 0.6;
}

.pg-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

/* Only show author divider in grid cards */
.pg-testimonial-grid .pg-testimonial-card__author {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-3);
}

.pg-testimonial-card__avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.pg-testimonial-card__info {
    display: flex;
    flex-direction: column;
}

.pg-testimonial-card__name {
    font-weight: var(--weight-semibold);
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-heading);
}

.pg-testimonial-card__role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---------- Submission form ---------- */
.pg-testimonial-form {
    max-width: 600px;
}

.pg-testimonial-form__row {
    margin-bottom: var(--space-5);
}

.pg-testimonial-form__row label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    margin-bottom: var(--space-1);
}

.pg-testimonial-form__row .required {
    color: #a00;
}

.pg-testimonial-form__row input[type="text"],
.pg-testimonial-form__row input[type="email"],
.pg-testimonial-form__row textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: var(--color-bg);
    transition: border-color 0.15s ease;
}

.pg-testimonial-form__row input:focus,
.pg-testimonial-form__row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.pg-testimonial-form__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

.pg-testimonial-form__success {
    padding: var(--space-4) var(--space-5);
    background: var(--color-primary-light);
    border-radius: var(--radius-md, 8px);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

.pg-testimonial-form__error {
    padding: var(--space-4) var(--space-5);
    background: #fff0f0;
    border-radius: var(--radius-md, 8px);
    color: #a00;
    font-size: var(--text-sm);
}

/* ---------- Bottom CTA ---------- */
.pg-testimonial-cta {
    text-align: center;
    padding: var(--space-10) 0 var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.pg-testimonial-cta h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-2);
}

.pg-testimonial-cta p {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .pg-testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pg-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.page-404 {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-404__title {
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
    margin-bottom: var(--space-4);
}

.page-404__message {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    max-width: 480px;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-8);
}

.page-404__btn {
    margin-bottom: var(--space-6);
}

.page-404__help {
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.page-404__help a {
    color: var(--color-primary);
}