/*
 * Theme Name: Prepistry
 * Theme URI: https://prepistry.com/
 * Author: Audai Mousa
 * Author URI: https://prepistry.com/about-audai
Description: A WordPress theme for recipe blogs with TL;DR and FAQ functionality.
 * @package Prepistry
 * Version: 1.0.5 - Optimized
 * License: GPL v2 or later
 * License URI: ./LICENSE
 * Text Domain: prepistry
 * File Name: style.css
*/

/* ============================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ============================================ */
:root {
    /* Color System */
    --primary: #2f463c;
    --primary-light: #4a6b5d;
    --bg: #fff;
    --text: #1a1a1a;
    --text-light: #666;
    --border: #e5e5e5;
    --accent: #f5f7f6;
    --orange: #d4471b;
    --orange-light: #ff6b35;
    --orange-dark: #e55a2b;
    
    /* Responsive Spacing System */
    --space-xs: clamp(.25rem,.4vw,.4rem);
    --space-sm: clamp(.4rem,.8vw,.6rem);
    --space-md: clamp(.6rem,1.6vw,1rem);
    --space-lg: clamp(.8rem,2.4vw,1.6rem);
    --space-xl: clamp(1.2rem,3.2vw,2.4rem);
    --space-xxl: clamp(1.6rem,4.8vw,3.2rem);
    
    /* Typography Scale */
    --font-xs: clamp(.9rem, 1.5vw, 1rem);
    --font-sm: clamp(.975rem, 1.8vw, 1.175rem);
    --font-base: clamp(1rem, 2vw, 1.2rem);
    --font-md: clamp(1rem, 2.2vw, 1.275rem);
    --font-lg: clamp(1.175rem, 2.8vw, 1.575rem);
    --font-xl: clamp(1.275rem, 4vw, 2.225rem);
    --font-xxl: clamp(1.575rem, 6vw, 3.225rem);
    
    /* Design System */
    --radius: clamp(.2rem,.4vw,.4rem);
    --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --container-width: 1000px;
    --container-padding: clamp(.8rem,3.2vw,1.6rem);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    font-size: var(--font-sm);
    overflow-x: hidden;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   UTILITY CLASSES - REPLACES 218+ DUPLICATES
   ============================================ */

/* Layout Utilities */
.w-full { inline-size: 100%; }
.h-full { block-size: 100%; }
.max-w-container { max-inline-size: var(--container-width); }
.mx-auto { margin-inline: auto; }
.px-container { padding-inline: var(--container-padding); }

/* Flexbox Utilities - Replaces 64+ flex patterns */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid Utilities */
.grid { display: grid; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Gap Utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Spacing Utilities - Replaces 100+ margin/padding declarations */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.py-xs { padding-block: var(--space-xs); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }

.px-xs { padding-inline: var(--space-xs); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }

.mb-xs { margin-block-end: var(--space-xs); }
.mb-sm { margin-block-end: var(--space-sm); }
.mb-md { margin-block-end: var(--space-md); }
.mb-lg { margin-block-end: var(--space-lg); }
.mb-xl { margin-block-end: var(--space-xl); }

/* Typography Utilities - Replaces 150+ font declarations */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-xxl { font-size: var(--font-xxl); }

.text-center { text-align: center; }
.text-start { text-align: start; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-tight { line-height: 1.1; }
.leading-snug { line-height: 1.2; }
.leading-normal { line-height: 1.3; }
.leading-relaxed { line-height: 1.4; }
.leading-loose { line-height: 1.5; }
.leading-extra-loose { line-height: 1.6; }
.leading-super-loose { line-height: 1.7; }

/* Color Utilities - Replaces 93+ color declarations */
.text-primary { color: var(--primary); }
.text-primary-light { color: var(--primary-light); }
.text-light { color: var(--text-light); }
.text-orange { color: var(--orange); }
.text-orange-light { color: var(--orange-light); }
.text-white { color: var(--bg); }

.bg-primary { background: var(--primary); }
.bg-primary-light { background: var(--primary-light); }
.bg-white { background: var(--bg); }
.bg-accent { background: var(--accent); }
.bg-orange { background: var(--orange); }
.bg-orange-light { background: var(--orange-light); }
.bg-orange-dark { background: var(--orange-dark); }

/* Border Utilities */
.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: 50%; }
.border { border: 1px solid var(--border); }
.border-primary { border-color: var(--primary); }
.border-orange { border-color: var(--orange-light); }

/* CSS Containment Utilities - Replaces 47+ containment declarations */
.contain-layout { contain: layout; }
.contain-paint { contain: paint; }
.contain-layout-paint { contain: layout paint; }
.contain-style { contain: style; }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }

/* ============================================
   COMPONENT BASE CLASSES
   ============================================ */

/* Container Component - Used throughout */
.container {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Section Component */
.section {
    inline-size: 100%;
    padding-block: var(--space-xl);
    contain: layout;
}

/* Card Component */
.card-base {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    contain: layout paint;
}

/* Button Components */
.btn-base {
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-weight: 600;
    font-size: var(--font-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--orange-light);
    color: var(--bg);
    border-color: var(--orange-light);
}
.btn-primary:hover {
    background: var(--orange-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-secondary:hover {
    background: var(--primary);
    color: var(--bg);
}

/* Common Flex Patterns */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Typography Components */
.heading-hero {
    font-size: var(--font-xxl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary);
    margin-block-end: var(--space-md);
}

.heading-section {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--primary);
    margin-block-end: var(--space-lg);
    text-align: center;
}

.heading-card {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

/* ============================================
   HEADER COMPONENT
   ============================================ */
.header {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-md);
    inline-size: 100%;
    contain: layout;
}

.header-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-sm);
    align-items: center;
}

.logo {
    grid-column: 1;
    grid-row: 1;
}

.logo img {
    inline-size: clamp(80px,16vw,140px);
    block-size: auto;
    object-fit: contain;
}

.nav {
    display: none;
    grid-column: 1/-1;
    grid-row: 2;
    background: rgba(255,255,255,.05);
    margin-block-start: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 0;
    inline-size: 100%;
}

.nav a {
    color: var(--bg);
    text-decoration: none;
    padding: var(--space-sm);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--font-sm);
    text-align: center;
    display: block;
    inline-size: 100%;
}

.nav a:hover {
    background: rgba(255,255,255,.1);
}

.search {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    background: var(--bg);
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid transparent;
    align-items: center;
    inline-size: clamp(100px,20vw,180px);
}

.search:focus-within {
    border-color: var(--orange);
}

.search input {
    border: none;
    outline: none;
    padding-inline: var(--space-sm);
    padding-block: var(--space-xs);
    background: var(--bg);
    color: var(--text);
    font-size: var(--font-xs);
    flex: 1;
    inline-size: 100%;
    min-inline-size: 0;
}

.search input::placeholder {
    color: var(--text-light);
}

.search button {
    background: var(--orange-light);
    color: var(--bg);
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(24px,4.8vw,36px);
    block-size: clamp(24px,4.8vw,36px);
    border-radius: 50%;
    margin: 2px;
    flex-shrink: 0;
}

.search button:hover {
    background: var(--orange-dark);
}

.search svg {
    inline-size: clamp(12px,2.4vw,16px);
    block-size: clamp(12px,2.4vw,16px);
    stroke-width: 2.5;
}

.mobile-toggle {
    display: none;
}

.mobile-btn {
    display: block;
    grid-column: 3;
    grid-row: 1;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius);
    color: var(--bg);
    margin-inline-start: var(--space-xs);
}

.mobile-btn:hover {
    background: rgba(255,255,255,.1);
}

.mobile-btn svg {
    inline-size: clamp(18px,3.6vw,22px);
    block-size: clamp(18px,3.6vw,22px);
}

.mobile-toggle:checked + .header-wrap .nav {
    display: flex;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.hero-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
}

.hero-content {
    inline-size: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.hero-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.hero-highlight {
    color: var(--orange-light);
}

.hero-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.hero-desc {
    color: var(--text-light);
    margin-block-end: 0;
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.hero-visual {
    position: relative;
    inline-size: 100%;
    max-inline-size: 500px;
    margin-inline: auto;
}

.hero-img-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    aspect-ratio: 1.2;
    inline-size: 100%;
}

.hero-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.hero-card {
    position: absolute;
    inset-block-end: clamp(-8px,1.6vw,-12px);
    inset-inline-end: clamp(-8px,1.6vw,-12px);
    background: var(--bg);
    padding: var(--space-sm);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    min-inline-size: clamp(80px,16vw,120px);
    contain: layout paint;
}

.hero-card h3 {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--primary);
    margin-block-end: var(--space-xs);
}

.hero-stats {
    display: flex;
    gap: var(--space-sm);
}

.hero-stat {
    text-align: center;
    flex: 1;
}

.hero-stat-num {
    display: block;
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
}

.hero-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
}

.hero-actions {
    margin-block-start: var(--space-xl);
    text-align: center;
    inline-size: 100%;
}

.hero-btns {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-direction: column;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.hero-btn {
    padding-block: var(--space-md);
    padding-inline: var(--space-lg);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: block;
    text-align: center;
    inline-size: 100%;
    max-inline-size: 280px;
    margin-inline: auto;
    font-size: var(--font-sm);
    border: 2px solid transparent;
}

.hero-btn--primary {
    background: var(--orange-light);
    color: var(--bg);
    border-color: var(--orange-light);
}

.hero-btn--primary:hover {
    background: var(--orange-dark);
}

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

.hero-btn--secondary:hover {
    background: var(--primary);
    color: var(--bg);
}

.hero-features {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-direction: column;
    inline-size: 100%;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-light);
    justify-content: center;
}

/* ============================================
   CORE CONTENT SECTION
   ============================================ */
.core {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.core-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.core-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.core-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.core-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    inline-size: 100%;
    line-height: 1.5;
}

.core-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.featured {
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--primary);
    text-decoration: none;
    display: block;
    inline-size: 100%;
    contain: layout paint;
}

.featured:hover {
    background: var(--primary-light);
}

.featured-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.featured-desc {
    font-size: var(--font-base);
    margin-block-end: var(--space-md);
    line-height: 1.5;
    inline-size: 100%;
}

.featured-count {
    display: inline-block;
    background: var(--orange-light);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-weight: 700;
    font-size: var(--font-sm);
}

.core-item {
    background: var(--accent);
    padding: var(--space-md);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid transparent;
    inline-size: 100%;
    contain: layout paint;
}

.core-item:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

.core-item--orange {
    background: #fff5f2;
    border-color: #ffe4dc;
}

.core-item--orange:hover {
    background: #ffede6;
    border-color: var(--orange-light);
}

.core-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.core-item-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    flex: 1;
    min-inline-size: 0;
}

.core-item-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.core-item-desc {
    font-size: var(--font-sm);
    color: var(--text-light);
    line-height: 1.4;
    inline-size: 100%;
}

.core-spotlight {
    margin-block-start: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg,var(--orange-light),var(--orange-dark));
    color: var(--bg);
    border-radius: var(--radius);
    text-align: center;
    inline-size: 100%;
    contain: layout paint;
}

.core-spotlight-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.core-spotlight-desc {
    font-size: var(--font-base);
    margin-block-end: var(--space-lg);
    line-height: 1.5;
    inline-size: 100%;
}

.core-spotlight-btn {
    display: inline-block;
    background: var(--bg);
    color: var(--orange);
    padding-block: var(--space-md);
    padding-inline: var(--space-xl);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-sm);
    max-inline-size: 100%;
}

.core-spotlight-btn:hover {
    background: #f8f8f8;
}

/* ============================================
   CHEF SECTION
   ============================================ */
.chef {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.chef-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
}

.chef-content {
    inline-size: 100%;
}

.chef-greeting {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    justify-content: center;
}

.chef-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    inline-size: 100%;
}

.chef-message {
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.chef-message p {
    margin-block-end: var(--space-md);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.chef-message p:last-child {
    margin-block-end: 0;
}

.chef-message strong {
    color: var(--orange-light);
    font-weight: 700;
}

.chef-signature {
    border-block-start: 1px solid rgba(255,255,255,.2);
    padding-block-start: var(--space-md);
    inline-size: 100%;
}

.chef-sig-line {
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.chef-sig-text {
    font-size: var(--font-sm);
}

.chef-name {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--orange-light);
    margin-inline-start: var(--space-xs);
    font-style: italic;
}

.chef-creds {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-xs);
    justify-content: center;
    inline-size: 100%;
}

.chef-cred {
    white-space: nowrap;
}

.chef-cred-sep {
    color: var(--orange-light);
}

.chef-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    inline-size: 100%;
}

.chef-portrait {
    inline-size: clamp(100px,20vw,160px);
    block-size: clamp(100px,20vw,160px);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.2);
    aspect-ratio: 1;
}

.chef-stats {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.chef-stat {
    text-align: center;
    padding: var(--space-sm);
    background: rgba(255,255,255,.1);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.1);
    min-inline-size: clamp(50px,12vw,70px);
    flex: 1;
    max-inline-size: 100px;
    contain: layout paint;
}

.chef-stat-num {
    display: block;
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--orange-light);
    margin-block-end: var(--space-xs);
}

.chef-stat-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    line-height: 1.2;
}

.quote-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ============================================
   CATEGORY SECTIONS
   ============================================ */
.cat-section {
    padding-block: var(--space-xl);
    background: #fff;
    inline-size: 100%;
    contain: layout;
}

.cat-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.cat-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.cat-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.cat-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 900px;
    margin-inline: auto;
}

.cat-item {
    background: #fafbfa;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid #e8ede8;
    inline-size: 100%;
    contain: layout paint;
}

.cat-item:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.cat-icon {
    inline-size: clamp(36px,3vw,38px);
    block-size: clamp(36px,3vw,38px);
    background: var(--orange-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-weight: 700;
    font-size: var(--font-xs);
    flex-shrink: 0;
}

.cat-content {
    flex: 1;
    min-inline-size: 0;
}

.cat-name {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    inline-size: 100%;
}

.cat-desc {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 600;
    inline-size: 100%;
}

/* ============================================
   RECENT POSTS SECTION
   ============================================ */
.recent {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.recent-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.recent-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-lg);
    font-weight: 700;
    text-align: center;
    inline-size: 100%;
}

.recent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.recent-item {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    inline-size: 100%;
    contain: layout paint;
}

.recent-item:hover {
    border-color: var(--primary);
}

.recent-img {
    aspect-ratio: 1.91;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    position: relative;
    inline-size: 100%;
}

.recent-date {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-xs);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    font-weight: 600;
    min-inline-size: clamp(2.4rem,8vw,4rem);
    text-align: center;
}

.recent-info {
    padding: var(--space-sm);
    inline-size: 100%;
}

.recent-item-title {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    font-size: var(--font-sm);
    inline-size: 100%;
}

.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.recent-count {
    font-size: var(--font-sm);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.recent-desc {
    font-size: var(--font-base);
    color: var(--text-light);
    line-height: 1.5;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.recent-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

/* ============================================
   TAXONOMY SECTIONS
   ============================================ */
.tax {
    padding-block: var(--space-lg);
    inline-size: 100%;
    contain: layout;
}

.tax--alt {
    background: var(--accent);
}

.tax-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.tax-header {
    text-align: center;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.tax-main-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-weight: 800;
    letter-spacing: -.02em;
    inline-size: 100%;
}

.tax-main-subtitle {
    font-size: var(--font-base);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.tax-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
}

.tax-section {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: var(--space-sm);
    inline-size: 100%;
    contain: layout paint;
}

.tax-section--alt {
    background: var(--accent);
    border-color: #e8ede8;
}

.tax-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--border);
    inline-size: 100%;
}

.tax-section--alt .tax-section-header {
    border-block-end-color: #e8ede8;
}

.tax-section-title {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    line-height: 1.2;
    flex: 1;
}

.tax-section-title:hover {
    color: var(--orange-light);
}

.tax-section-count {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--orange);
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tax-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    inline-size: 100%;
}

/* ============================================
   CARD COMPONENT
   ============================================ */
.card {
    background: rgba(255,255,255,.6);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,.05);
    inline-size: 100%;
    contain: layout paint;
}

.card:hover {
    background: var(--bg);
    border-color: var(--orange-light);
}

.tax-section--alt .card {
    background: var(--bg);
    border-color: var(--border);
}

.tax-section--alt .card:hover {
    border-color: var(--orange-light);
}

.card-content {
    flex: 1;
    min-inline-size: 0;
}

.card-name {
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary);
    inline-size: 100%;
}

.card-count {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--orange);
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
    background: var(--bg);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--border);
    inline-size: 100%;
    contain: layout;
}

.breadcrumbs-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-light);
    flex-wrap: wrap;
}

.breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumbs-link {
    color: var(--text-light);
    text-decoration: none;
}

.breadcrumbs-link:hover {
    color: var(--primary);
}

.breadcrumbs-separator {
    color: var(--border);
}

.breadcrumbs-current {
    color: var(--primary);
    font-weight: 600;
}

/* ============================================
   POST STRUCTURE
   ============================================ */
.post {
    background: var(--bg);
    inline-size: 100%;
    contain: layout;
}

.post-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.post-header {
    padding-block: var(--space-xl);
    text-align: center;
    inline-size: 100%;
    contain: layout;
}

.post-category {
    display: inline-block;
    background: var(--orange-light);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 700;
    margin-block-end: var(--space-md);
    text-decoration: none;
}

.post-category:hover {
    background: var(--orange-dark);
}

.post-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.post-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.post-excerpt {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

/* ============================================
   POST META
   ============================================ */
.post-meta {
    background: var(--accent);
    padding: var(--space-sm);
    border-radius: var(--radius);
    border: 1px solid var(--primary-light);
    margin-block-end: var(--space-lg);
    inline-size: 100%;
    contain: layout style;
}

.post-meta-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
    inline-size: 100%;
    text-align: start;
}

.post-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    grid-column: 1;
    grid-row: 1;
}

.post-author-avatar {
    inline-size: clamp(50px,10vw,70px);
    block-size: clamp(50px,10vw,70px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--orange-light);
    aspect-ratio: 1;
}

.post-author-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.post-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.post-author-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.post-author-name {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--font-sm);
    line-height: 1.2;
}

.post-author-info-icon {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.post-author-info-icon:hover .post-author-bio {
    opacity: 1;
    visibility: visible;
}

.post-author-bio {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    color: var(--text);
    padding: var(--space-md);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    line-height: 1.4;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    margin-block-start: var(--space-xs);
    border: 1px solid var(--border);
    min-inline-size: clamp(240px,40vw,300px);
    text-align: start;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.post-author-bio::before {
    content: '';
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 0;
    block-size: 0;
    border-inline: 4px solid transparent;
    border-block-end: 4px solid var(--bg);
}

.post-author-bio-text {
    margin-block-end: var(--space-sm);
}

.post-author-expertise {
    margin-block-end: var(--space-sm);
}

.post-author-expertise-title {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--primary);
    margin-block-end: var(--space-xs);
}

.post-author-expertise-list {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.post-author-expertise-item {
    background: var(--accent);
    color: var(--primary);
    padding: var(--space-xs);
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: 600;
}

.post-author-social {
    display: flex;
    gap: var(--space-sm);
}

.post-author-social a {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--font-xs);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    background: var(--accent);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.post-author-social a:hover {
    background: var(--primary);
    color: var(--bg);
}

.post-author-title {
    font-size: var(--font-xs);
    color: var(--text-light);
    line-height: 1.2;
}

.post-author-credentials {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 600;
}

.post-meta-stats {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    justify-self: end;
    align-self: center;
    font-size: var(--font-xs);
    color: var(--text-light);
    text-align: start;
}

.post-meta-dates {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-xs);
    color: var(--text-light);
    flex-wrap: wrap;
}

.post-meta-item {
    white-space: nowrap;
}

/* ============================================
   TL;DR SECTION
   ============================================ */
.tldr {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: style;
}

.tldr-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.tldr-header {
    text-align: start;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.tldr-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.tldr-icon {
    color: var(--orange-light);
    flex-shrink: 0;
}

.tldr-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin: 0;
    inline-size: 100%;
}

.tldr-desc {
    font-size: var(--font-base);
    line-height: 1.7;
    margin-block-end: var(--space-md);
    inline-size: 100%;
    text-align: start;
}

.tldr-desc:last-of-type {
    margin-block-end: var(--space-lg);
}

.tldr-takeaways-section {
    inline-size: 100%;
}

.tldr-takeaways-title {
    font-size: var(--font-lg);
    color: var(--orange-light);
    font-weight: 700;
    margin-block-end: var(--space-lg);
    text-align: start;
}

.tldr-takeaways {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.tldr-takeaway {
    background: rgba(255,255,255,.1);
    padding: var(--space-md);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    contain: layout paint;
}

.tldr-takeaway-badge {
    background: var(--orange-light);
    color: var(--bg);
    inline-size: clamp(20px,3.2vw,24px);
    block-size: clamp(20px,3.2vw,24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.tldr-takeaway-title {
    font-weight: 400;
    font-size: var(--font-sm);
    color: var(--bg);
    line-height: 1.3;
    flex: 1;
}

/* ============================================
   FEATURED IMAGE
   ============================================ */
.post-featured {
    margin-block: var(--space-lg);
    inline-size: 100%;
    contain: layout;
}

.post-featured-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    aspect-ratio: 1.91;
    inline-size: 100%;
}

.post-featured-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   POST CONTENT
   ============================================ */
.post-content {
    padding-block: var(--space-md);
    inline-size: 100%;
    contain: layout;
}

.post-content h2 {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block: var(--space-md) var(--space-md);
    font-weight: 700;
    line-height: 1.2;
}

.post-content h3 {
    font-size: var(--font-lg);
    color: var(--primary);
    margin-block: var(--space-lg) var(--space-md);
    font-weight: 600;
    line-height: 1.3;
}

.post-content p {
    margin-block-end: var(--space-md);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.post-content p:last-child {
    margin-block-end: 0;
}

.post-content strong {
    color: var(--orange-light);
    font-weight: 700;
}

.post-content ul {
    margin-block: var(--space-md) var(--space-md);
    padding-inline-start: var(--space-lg);
}

.post-content li {
    margin-block-end: var(--space-sm);
    line-height: 1.6;
}

/* ============================================
   POST FOOTER
   ============================================ */
.post-footer {
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--border);
    inline-size: 100%;
    contain: layout;
}

.post-tags {
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.post-tags-title {
    font-weight: 700;
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-size: var(--font-sm);
}

.post-tags-list {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.post-tag {
    background: var(--accent);
    color: var(--primary);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 50px;
    text-decoration: none;
    font-size: var(--font-xs);
    border: 1px solid var(--border);
}

.post-tag:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

/* ============================================
   SHARE SECTION
   ============================================ */
.post-share {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100vw;
    margin-inline-start: calc(-50vw + 50%);
    margin-block-end: var(--space-xl);
    contain: layout;
}

.post-share-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
}

.post-share-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-block-end: var(--space-sm);
    color: var(--bg);
}

.post-share-subtitle {
    font-size: var(--font-base);
    margin-block-end: var(--space-lg);
    color: rgba(255,255,255,.8);
    line-height: 1.5;
}

.post-share-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.post-share-btn {
    background: rgba(255,255,255,.1);
    color: var(--bg);
    padding-block: var(--space-md);
    padding-inline: var(--space-lg);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-inline-size: clamp(100px,20vw,120px);
    justify-content: center;
}

.post-share-btn:hover {
    background: var(--orange-light);
    border-color: var(--orange-light);
}

.post-share-btn svg {
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.faq-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.faq-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-lg);
    font-weight: 800;
    text-align: center;
    inline-size: 100%;
}

.faq-item {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-block-end: var(--space-sm);
    inline-size: 100%;
    contain: layout paint;
}

.faq-question {
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--primary);
    font-size: var(--font-sm);
    inline-size: 100%;
}

.faq-question:hover {
    background: var(--accent);
}

.faq-toggle {
    color: var(--orange-light);
    font-size: var(--font-lg);
    line-height: 1;
    flex-shrink: 0;
}

.faq-answer {
    padding-inline: var(--space-md);
    padding-block-end: var(--space-md);
    color: var(--text-light);
    line-height: 1.6;
    display: none;
    font-size: var(--font-sm);
    inline-size: 100%;
}

.faq-answer.show {
    display: block;
}

/* ============================================
   FOOTER COMPONENT
   ============================================ */
.footer {
    background: var(--primary);
    color: var(--bg);
    padding-block-end: var(--space-md);
    text-align: center;
    inline-size: 100%;
    contain: layout;
}

.footer-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.footer-newsletter {
    background: #40534b;
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
}

.footer-newsletter-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
}

.footer-newsletter-title {
    font-size: var(--font-xl);
    margin-block-end: var(--space-md);
    font-weight: 700;
    line-height: 1.2;
    inline-size: 100%;
}

.footer-newsletter-desc {
    margin-block-end: var(--space-lg);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.footer-newsletter-form {
    inline-size: 100%;
    max-inline-size: 800px;
    margin-inline: auto;
    margin-block-end: var(--space-md);
}

.footer-newsletter-input-group {
    display: flex;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    background: rgba(255,255,255,.1);
    padding: var(--space-xs);
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgba(255,255,255,.2);
    flex-direction: column;
    inline-size: 100%;
}

.footer-newsletter-input {
    flex: 1;
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-sm);
    outline: none;
    background: var(--bg);
    color: var(--text);
    inline-size: 100%;
}

.footer-newsletter-input::placeholder {
    color: var(--text-light);
}

.footer-newsletter-btn {
    background: var(--orange-light);
    color: var(--bg);
    border: none;
    padding: var(--space-md);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    font-size: var(--font-sm);
    white-space: nowrap;
    text-transform: uppercase;
    inline-size: 100%;
}

.footer-newsletter-btn:hover {
    background: var(--orange-dark);
}

.footer-newsletter-privacy {
    font-size: var(--font-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-newsletter-privacy svg {
    inline-size: 16px;
    block-size: 16px;
    opacity: .6;
    flex-shrink: 0;
}

.footer-content {
    background: var(--primary);
    padding-block-start: var(--space-xl);
    inline-size: 100%;
}

.footer-brand {
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-link {
    color: var(--bg);
    text-decoration: none;
    font-size: var(--font-xs);
    padding: var(--space-xs);
}

.footer-link:hover {
    opacity: .8;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-social-link {
    color: var(--bg);
    text-decoration: none;
    font-size: var(--font-xs);
    padding: var(--space-xs);
}

.footer-social-link:hover {
    opacity: .8;
}

.footer-copyright {
    font-size: var(--font-xs);
    border-block-start: 1px solid var(--primary-light);
    padding-block-start: var(--space-md);
    inline-size: 100%;
}

/* ============================================
   CATEGORY/ARCHIVE PAGES
   ============================================ */
.category-hero, .archive-hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.category-hero-wrap, .archive-hero-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
}

.category-hero-badge, .archive-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.category-hero-badge::before, .archive-hero-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.category-hero-title, .archive-hero-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.category-hero-subtitle, .archive-hero-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.category-hero-desc, .archive-hero-desc {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.category-hero-stats, .archive-hero-stats {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.category-hero-stat, .archive-hero-stat {
    text-align: center;
    flex: 1;
    min-inline-size: clamp(80px,15vw,120px);
}

.category-hero-stat-num, .archive-hero-stat-num {
    display: block;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.category-hero-stat-label, .archive-hero-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
}

/* ============================================
   POSTS GRID
   ============================================ */
.posts-grid-section {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.posts-grid-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.post-card {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    inline-size: 100%;
    contain: layout paint;
}

.post-card:hover {
    border-color: var(--primary);
}

.post-card-img {
    aspect-ratio: 1.91;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    position: relative;
    inline-size: 100%;
}

.post-card-date {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-xs);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    font-weight: 600;
    min-inline-size: clamp(2.4rem,8vw,4rem);
    text-align: center;
}

.post-card-content {
    padding: var(--space-sm);
    inline-size: 100%;
}

.post-card-title {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    font-size: var(--font-sm);
    inline-size: 100%;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.pagination-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg);
    color: var(--primary);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 600;
}

.pagination-btn:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.pagination-btn svg {
    inline-size: 16px;
    block-size: 16px;
    stroke-width: 2;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pagination-number {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(36px,6vw,44px);
    block-size: clamp(36px,6vw,44px);
    background: var(--bg);
    color: var(--primary);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 600;
}

.pagination-number:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.pagination-number--active {
    background: var(--primary);
    color: var(--bg);
    border-color: var(--primary);
}

.pagination-number--active:hover {
    background: var(--primary-light);
}

.pagination-dots {
    color: var(--text-light);
    font-weight: 600;
    padding-inline: var(--space-xs);
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.sidebar-wrap {
    inline-size: 100%;
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.sidebar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    inline-size: 100%;
}

.sidebar-section {
    background: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    inline-size: 100%;
    contain: layout paint;
}

.sidebar-section-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--accent);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
}

.sidebar-category:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

.sidebar-category-name {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--primary);
}

.sidebar-category-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 12px;
}

.sidebar-tags {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.sidebar-tag {
    background: var(--accent);
    color: var(--primary);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
}

.sidebar-tag:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (min-width: 280px) {
    .cat-grid { grid-template-columns: repeat(2,1fr); }
    .tax-items { grid-template-columns: repeat(2,1fr); }
    .tldr-takeaways { grid-template-columns: repeat(2,1fr); }
}

@media (min-width: 480px) {
    .mobile-btn { display: none; }
    
    .header-wrap {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: var(--space-lg);
    }
    
    .nav {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        background: transparent;
        margin-block-start: 0;
        padding: 0;
        border-radius: 0;
        flex-direction: row;
        gap: var(--space-md);
        justify-content: center;
    }
    
    .nav a {
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
        border-radius: 50px;
    }
    
    .search {
        grid-column: 3;
        grid-row: 1;
        inline-size: clamp(160px,20vw,220px);
    }
    
    .search input {
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
        font-size: var(--font-sm);
    }
    
    .search button {
        inline-size: clamp(32px,4.8vw,44px);
        block-size: clamp(32px,4.8vw,44px);
        margin: 3px;
    }
    
    .search svg {
        inline-size: clamp(14px,2.8vw,18px);
        block-size: clamp(14px,2.8vw,18px);
    }
    
    .recent-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
    
    .footer-newsletter-input-group { flex-direction: row; }
    .footer-newsletter-btn { inline-size: auto; }
    
    .hero-wrap {
        grid-template-columns: 1.2fr .8fr;
        text-align: start;
        align-items: center;
    }
    
    .hero-content { padding-inline-end: var(--space-md); }
    .hero-btns { flex-direction: row; max-inline-size: none; }
    .hero-btn { inline-size: auto; max-inline-size: none; margin-inline: 0; }
    .hero-features { flex-direction: row; }
    .hero-feature { justify-content: flex-start; }
    
    .core-content { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
    .featured { grid-column: span 2; }

    .chef-wrap {
        grid-template-columns: minmax(260px,2fr) minmax(160px,1fr);
        text-align: start;
        align-items: center;
    }
    
    .chef-greeting { justify-content: flex-start; }
    .chef-creds { justify-content: flex-start; }
    
    .cat-grid { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
    .tax-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
    .tax-items { grid-template-columns: repeat(2,1fr); }
    
    .post-meta-container {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto;
        align-items: center;
        gap: var(--space-lg);
    }
    
    .post-author { grid-column: 1; grid-row: 1; }
    .post-meta-stats {
        grid-column: 3;
        grid-row: 1;
        flex-direction: column;
        gap: var(--space-xs);
        text-align: start;
    }
    .post-meta-dates {
        grid-column: 4;
        grid-row: 1;
        flex-direction: column;
        gap: var(--space-xs);
        text-align: start;
    }
    
    .post-header { text-align: start; }
    .tldr-takeaways { grid-template-columns: repeat(2,1fr); }
    .posts-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
    .sidebar-grid { grid-template-columns: repeat(2,1fr); }
    .recent-posts { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
}

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

/* ============================================
   ULTRA-SMALL SCREENS
   ============================================ */
@media (max-width: 279px) {
    .cat-grid { grid-template-columns: 1fr; }
    .tax-items { grid-template-columns: 1fr; }
    .cat-icon {
        inline-size: clamp(20px,4vw,28px);
        block-size: clamp(20px,4vw,28px);
    }
    .hero-card { min-inline-size: clamp(60px,12vw,90px); }
    .tldr-takeaways { grid-template-columns: 1fr; }
    .post-author-bio { min-inline-size: clamp(200px,30vw,260px); }
    .posts-grid { grid-template-columns: 1fr; }
    .sidebar-grid { grid-template-columns: 1fr; }
    .pagination-nav { flex-direction: column; gap: var(--space-md); }
    .pagination-numbers { order: -1; }
    .recent-header { flex-direction: column; align-items: flex-start; }
}