/**
 * Pawsome Pets Theme - Modern Clean Design
 * Matching the reference design with proper styling
 */

/* ==========================================================================
   1. CSS Variables & Reset
   ========================================================================== */

:root {
    /* Primary Colors */
    --color-primary: #1a5f7a;
    --color-primary-hover: #164e65;
    --color-secondary: #c9a227;

    /* Text Colors */
    --color-text: #1a3a4a;
    --color-text-light: #4a6a7a;
    --color-text-muted: #6b8a99;

    /* Background Colors */
    --color-bg: #f5f8fa;
    --color-surface: #ffffff;
    --color-border: #e1e8ed;

    /* Typography */
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Nunito', sans-serif;
    --font-logo: 'Pacifico', cursive;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Layout */
    --container-width: 1440px;
    --header-height: 70px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* Dark Mode */
[data-theme="dark"] {
    --color-text: #e8f0f4;
    --color-text-light: #a8c0cc;
    --color-text-muted: #7a99a8;
    --color-bg: #0f1f28;
    --color-surface: #1a3040;
    --color-border: rgba(255,255,255,0.1);
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
    background: #1a3a4a; /* Footer color as fallback */
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
    background: var(--color-surface);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

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

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-logo .logo-text {
    font-family: var(--font-logo);
    font-size: 1.75rem;
    color: var(--color-primary);
}

.site-logo img {
    max-height: 42px; /* Reduced by 30% */
    width: auto;
    object-fit: contain;
}

/* Main Navigation */
.main-nav {
    display: none;
}

@media (min-width: 768px) {
    .main-nav {
        display: block;
    }
}

.main-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
}

.main-nav .nav-menu li a {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.main-nav .nav-menu li a:hover,
.main-nav .nav-menu li a.active {
    color: var(--color-primary);
    background: rgba(26, 95, 122, 0.08);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}


/* Mobile Search in Hamburger Menu */
.mobile-search {
    display: flex;
    padding: 15px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.mobile-search input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-right: none;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
}

.mobile-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.mobile-search button {
    padding: 10px 15px;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-search button:hover {
    background: var(--color-primary-hover);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    z-index: 999;
    padding: var(--space-6);
    overflow-y: auto;
}

.mobile-nav.active {
    display: block;
}

.mobile-nav .nav-menu {
    list-style: none;
}

.mobile-nav .nav-menu li a {
    display: block;
    padding: var(--space-4);
    color: var(--color-text);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   4. Hero Section
   ========================================================================== */

.blog-hero {
    background: var(--color-surface);
    padding: var(--space-12) 0;
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--space-8);
    color: var(--color-text);
}

.hero-title span {
    color: var(--color-primary);
    font-weight: 700;
}

/* Hero Search */
.hero-search {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.hero-search input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
}

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

.hero-search button {
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 4px;
    border-radius: var(--radius-full);
}

.hero-search button:hover {
    background: var(--color-primary-hover);
}

/* ==========================================================================
   5. Featured Section
   ========================================================================== */

.featured-section {
    padding: var(--space-8) 0;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 992px) {
    .featured-grid {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* Featured Main (Large Post) */
.featured-main {
    position: relative;
}

.featured-card-large {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.featured-card-large .featured-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.featured-card-large .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-card-large:hover .featured-image img {
    transform: scale(1.03);
}

.featured-card-large .featured-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events: none;
}

.featured-card-large .featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    color: white;
}

.featured-card-large .featured-title {
    font-size: 1.5rem;
    margin: 0;
    color: white;
    line-height: 1.3;
}

.featured-card-large .featured-title a {
    color: white;
}

.featured-card-large .featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Featured Category Badge - on image like cute cards */
.featured-category-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255,255,255,0.95);
    color: #333;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.featured-card-large:hover .featured-category-badge {
    background: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

/* Featured Sidebar (Most Popular) */
.featured-sidebar {
    display: flex;
    flex-direction: column;
}

/* When featured-sidebar is alone (no featured-main), show as 2-column grid */
.featured-grid > .featured-sidebar:only-child {
    max-width: 900px;
    margin: 0 auto;
}

.featured-grid > .featured-sidebar:only-child .popular-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .featured-grid > .featured-sidebar:only-child .popular-posts {
        grid-template-columns: 1fr;
    }
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary);
}

.sidebar-title span {
    color: var(--color-primary);
}

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

/* Popular Card (Horizontal Mini Card) */
.popular-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    border: 1px solid var(--color-border);
}

.popular-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.popular-content {
    flex: 1;
    min-width: 0;
    order: 1;
}

.popular-image {
    order: 2;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%);
}

.popular-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hide broken image icon and alt text */
    font-size: 0;
    color: transparent;
}

/* Placeholder for missing images */
.popular-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%);
}

.popular-image-placeholder svg {
    fill: var(--color-text-muted);
    opacity: 0.4;
}

.popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.popular-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.popular-title a {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-title a:hover {
    color: var(--color-primary);
}

.popular-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.popular-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Placeholder */
.post-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f4f8 0%, #d0e8ef 100%);
    color: var(--color-primary);
    opacity: 0.5;
}

/* ==========================================================================
   6. Category Tags
   ========================================================================== */

.category-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(26, 95, 122, 0.1);
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tag:hover {
    background: var(--color-primary);
    color: white;
}

.category-tag.small {
    padding: 2px var(--space-2);
    font-size: 0.6875rem;
}

/* Category specific colors */
.category-dogs { background: rgba(26, 95, 122, 0.1); color: #1a5f7a; }
.category-cats { background: rgba(201, 162, 39, 0.1); color: #a8861f; }
.category-birds { background: rgba(230, 126, 34, 0.1); color: #c96c1f; }
.category-health { background: rgba(231, 76, 60, 0.1); color: #c94434; }
.category-training { background: rgba(26, 188, 156, 0.1); color: #16a085; }
.category-nutrition { background: rgba(39, 174, 96, 0.1); color: #219a52; }

/* ==========================================================================
   7. Category Filter Pills
   ========================================================================== */

.category-filter-section {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.category-pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ==========================================================================
   8. Posts Grid
   ========================================================================== */

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

.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

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

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

/* Post Card */
.post-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

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

.post-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.05);
}

.post-card-content {
    padding: var(--space-4);
}

.post-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.post-card-title a {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

/* No Posts */
.no-posts {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--color-text-muted);
}

.no-posts svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-posts h3 {
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */

.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

.pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-item {
    display: inline-flex;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    text-decoration: none;
}

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

.pagination-link.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.pagination-link.prev,
.pagination-link.next {
    padding: 0 var(--space-4);
}

.pagination-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.pagination-item.ellipsis .pagination-link {
    background: transparent;
    border: none;
    min-width: auto;
    padding: 0 var(--space-2);
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.pagination-info svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.5;
}

/* ==========================================================================
   10. Newsletter Section
   ========================================================================== */

.newsletter-section {
    padding: var(--space-16) 0;
    margin-top: var(--space-8);
}

.newsletter-section.dark {
    background: var(--color-primary);
    color: white;
}

.newsletter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-content {
    flex: 1;
}

.newsletter-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: white;
}

.newsletter-text {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: var(--space-6);
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input-group {
    display: flex;
    gap: var(--space-3);
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
    padding: 4px;
}

.newsletter-input-group input {
    flex: 1;
    padding: var(--space-3) var(--space-6);
    border: none;
    background: transparent;
    color: white;
    font-size: 1rem;
    outline: none;
}

.newsletter-input-group input::placeholder {
    color: rgba(255,255,255,0.7);
}

.newsletter-input-group button {
    padding: var(--space-3) var(--space-6);
    background: var(--color-secondary);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-input-group button:hover {
    background: #d4ad32;
}

.newsletter-image {
    display: none;
}

@media (min-width: 768px) {
    .newsletter-image {
        display: block;
    }

    .newsletter-image svg {
        width: 100px;
        height: 100px;
        opacity: 0.3;
    }
}

/* ==========================================================================
   11. Footer - Minimal 2-Column Layout
   ========================================================================== */

.site-footer {
    background: #1a3a4a;
    color: #a8c0cc;
    padding-top: var(--space-12);
    margin-top: auto;
    flex-shrink: 0;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .footer-main {
        grid-template-columns: 1.5fr 1fr;
        gap: var(--space-12);
    }
}

/* Footer Brand & Info */
.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: white;
    text-decoration: none;
}

.footer-brand .footer-logo span {
    font-family: var(--font-logo);
    font-size: 1.5rem;
    color: white;
}

.footer-brand .footer-logo svg {
    fill: var(--color-primary);
}

.footer-brand .footer-logo-img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* SVG logo white filter for dark footer background */
.footer-brand .footer-logo-img.is-svg {
    filter: brightness(0) invert(1);
}

.footer-info {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #7a99a8;
    max-width: 400px;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.footer-social-link:hover {
    transform: translateY(-3px);
}

.footer-social-link.facebook,
.footer-social-link.instagram,
.footer-social-link.twitter,
.footer-social-link.youtube,
.footer-social-link.pinterest,
.footer-social-link.linkedin,
.footer-social-link.tiktok {
    background: rgba(255,255,255,0.1);
}

.footer-social-link:hover {
    background: rgba(255,255,255,0.25);
}

/* Social Icons (SVG background) */
.footer-social-link span,
.social-link-cute span {
    width: 20px;
    height: 20px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
}

.social-icon-facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"); }
.social-icon-instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E"); }
.social-icon-twitter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.social-icon-youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.social-icon-pinterest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z'/%3E%3C/svg%3E"); }
.social-icon-linkedin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }
.social-icon-tiktok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }

/* Sidebar Cute Social Links */
.social-links-cute {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link-cute {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.social-link-cute:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.social-link-cute.facebook { background: #3b5998; }
.social-link-cute.instagram { background: linear-gradient(45deg, #f56040, #c13584); }
.social-link-cute.twitter { background: #1da1f2; }
.social-link-cute.youtube { background: #ff0000; }
.social-link-cute.pinterest { background: #bd081c; }
.social-link-cute.linkedin { background: #0077b5; }
.social-link-cute.tiktok { background: #000; }

.social-link-cute span {
    filter: brightness(0) invert(1);
}

/* Footer Categories */
.footer-categories h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-categories h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--color-primary);
    margin-top: var(--space-2);
}

.footer-categories ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-4);
}

@media (max-width: 480px) {
    .footer-categories ul {
        grid-template-columns: 1fr;
    }
}

.footer-categories li {
    margin: 0;
}

.footer-categories a {
    font-size: 0.875rem;
    color: #7a99a8;
    transition: color 0.2s ease;
}

.footer-categories a:hover {
    color: white;
}

/* Footer Bottom Bar */
.footer-bottom {
    background: #142d3a;
    padding: var(--space-4) 0;
}

.footer-bottom .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
}

@media (min-width: 640px) {
    .footer-bottom .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.footer-copyright {
    font-size: 0.8125rem;
    color: #6b8a99;
    margin: 0;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .footer-legal {
        justify-content: flex-end;
    }
}

.footer-legal a {
    font-size: 0.8125rem;
    color: #6b8a99;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: white;
}

.footer-legal a:not(:last-child)::after {
    content: '|';
    margin-left: var(--space-2);
    color: #4a6a7a;
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-4px);
}

/* ==========================================================================
   12. Single Post
   ========================================================================== */

.single-post {
    padding: 0;
}

.post-header {
    max-width: 100%;
    margin-bottom: var(--space-8);
    text-align: center;
}

.post-header .category-tag {
    margin-bottom: var(--space-4);
}

.post-title {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}

.post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.post-featured-image {
    max-width: 100%;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-featured-image img {
    width: 100%;
    height: auto;
}

.post-content,
.post-body {
    max-width: 100%;
    font-size: 1.125rem;
    line-height: 1.8;
}

.post-content h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
}

.post-content h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.post-content p {
    margin-bottom: var(--space-6);
}

.post-content img {
    border-radius: var(--radius-md);
    margin: var(--space-8) 0;
}

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

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

.post-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
    font-style: italic;
    color: var(--color-text-light);
}

/* ==========================================================================
   13. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    color: white;
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text);
}

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

.btn-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* ==========================================================================
   14. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease;
}

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

/* ==========================================================================
   15. Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none !important; }
.visible { display: block !important; }

/* ==========================================================================
   16. Responsive Overrides
   ========================================================================== */

@media (max-width: 767px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-search {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .hero-search input {
        padding: var(--space-4);
    }

    .hero-search button {
        margin: var(--space-2);
        border-radius: var(--radius-sm);
    }

    .featured-card-large .featured-title {
        font-size: 1.25rem;
    }

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

    .popular-image {
        width: 60px;
        height: 60px;
    }

    .newsletter-wrapper {
        flex-direction: column;
    }

    .newsletter-input-group {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .newsletter-input-group button {
        border-radius: var(--radius-sm);
    }
}

/* ==========================================================================
   17. Toast Notifications
   ========================================================================== */

.toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-4) var(--space-6);
    background: var(--color-text);
    color: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    z-index: 2000;
    transition: bottom 0.3s ease;
    box-shadow: var(--shadow-lg);
    max-width: calc(100vw - 2rem);
    text-align: center;
}

.toast.show {
    bottom: 2rem;
}

.toast.success {
    background: #059669;
    color: white;
}

.toast.error {
    background: #dc2626;
    color: white;
}

.toast.info {
    background: var(--color-primary);
    color: white;
}

/* ==========================================================================
   18. Loading Spinner
   ========================================================================== */

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   19. Screen Reader Only
   ========================================================================== */

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

/* ==========================================================================
   20. Image Placeholder
   ========================================================================== */

.post-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%);
}

.post-image-placeholder svg {
    fill: var(--color-text-muted);
    opacity: 0.5;
}

/* ==========================================================================
   21. Reading Progress
   ========================================================================== */

#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 1100;
    transition: width 0.1s ease-out;
}

/* ==========================================================================
   22. Single Post Page - Complete Styles
   ========================================================================== */

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: var(--space-4);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
}

.breadcrumb-item::after {
    content: '›';
    margin-left: var(--space-2);
    color: var(--color-border);
}

.breadcrumb-item:last-child::after {
    display: none;
}

.breadcrumb-item a {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item a svg {
    width: 14px;
    height: 14px;
}

.breadcrumb-item.active {
    color: var(--color-text);
    font-weight: 500;
}

/* Post Categories */
.post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-4);
}

.category-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(26, 95, 122, 0.1);
    border-radius: var(--radius-full);
}

/* Author Meta */
.post-author-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.post-author-meta .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.post-author-meta .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-author-meta .author-info {
    text-align: left;
}

.post-author-meta .author-name {
    font-weight: 600;
    color: var(--color-text);
}

.post-author-meta .post-date {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Post Content Images */
.post-content img,
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
}

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

.post-tags span {
    font-weight: 600;
    color: var(--color-text);
}

.post-tags a {
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    background: var(--color-bg);
    border-radius: var(--radius-full);
}

.post-tags a:hover {
    background: var(--color-primary);
    color: white;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.share-buttons span {
    font-weight: 600;
    font-size: 0.875rem;
}

.share-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    background: var(--color-bg);
    transition: all 0.2s ease;
}

.share-buttons a:hover {
    color: white;
    background: var(--color-primary);
}

/* Author Bio Box */
.author-bio {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    margin-top: var(--space-12);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.author-bio .author-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.author-bio .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-bio .author-content h4 {
    margin-bottom: var(--space-2);
}

.author-bio .author-content p {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
}

/* Related Posts - Base (extended in Section 24) */
.related-posts h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-6);
}

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

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

.related-post-card {
    background: var(--color-surface);
    overflow: hidden;
    border-top: 3px solid var(--card-border, var(--color-primary));
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.related-post-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.related-post-card .post-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.related-post-card .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

.related-post-card .post-info {
    padding: var(--space-4);
}

.related-post-card .post-info h4 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
}

.related-post-card .post-info h4 a {
    color: var(--color-text);
}

.related-post-card .post-info h4 a:hover {
    color: var(--color-primary);
}

/* Comments Section - Base styles */

.comments-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-6);
}

.comments-list {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-8);
}

.comment {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid #e5e5e5;
}

.comment:first-child {
    border-top: 1px solid #e5e5e5;
}

.comment-avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-body {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.comment-author {
    font-weight: 600;
    color: #333;
}

.comment-header .says {
    color: #999;
    font-size: 0.9rem;
}

.comment-date {
    font-size: 0.85rem;
    color: #999;
    margin-left: auto;
}

.comment-date::before {
    content: "📅 ";
    font-size: 0.8rem;
}

.comment-content {
    color: #555;
    line-height: 1.7;
    margin-bottom: var(--space-3);
}

.comment-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
}

.comment-actions a {
    color: #999;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}

.comment-actions a:hover {
    color: var(--color-primary);
}

.reply-icon {
    margin-right: 3px;
}

.no-comments {
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--space-8);
    padding: var(--space-4);
    text-align: center;
}

/* Comment Form */
.comment-form-wrapper {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.comment-form-wrapper h4 {
    margin-bottom: var(--space-4);
}

.comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .comment-form .form-row {
        grid-template-columns: 1fr;
    }
}

.comment-form .form-group {
    margin-bottom: var(--space-4);
}

.comment-form label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    font-size: 0.875rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: var(--color-bg);
    transition: border-color 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.comment-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* ==========================================================================
   23. Single Post - Additional Styles
   ========================================================================== */

/* Post Meta Full */
.post-meta-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.post-author-full {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.post-author-full .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author-full .author-info {
    display: flex;
    flex-direction: column;
}

.post-author-full .author-name {
    font-weight: 600;
    color: var(--color-text);
}

.post-author-full .post-date {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.reading-time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.reading-time svg {
    opacity: 0.6;
}

/* Main content flex */
.main-content {
    flex: 1 0 auto;
}

/* Post Body Container */
.post-body {
    padding: var(--space-8) 0;
}

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

/* Fix breadcrumb display */
.breadcrumbs {
    justify-content: flex-start;
    margin-bottom: var(--space-6);
}

/* Post header adjustments */
.single-post .post-header {
    text-align: left;
    padding-top: var(--space-4);
}

.single-post .post-categories {
    justify-content: flex-start;
}

.single-post .post-title {
    text-align: left;
    font-size: 2.25rem;
    line-height: 1.3;
}

.single-post .post-meta-full {
    justify-content: flex-start;
}

/* Related posts section title */
.related-posts .section-title,
.related-posts > h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.related-posts .section-title svg {
    fill: var(--color-primary);
}

/* ==========================================================================
   24. Single Post Page - Layout Fixes
   ========================================================================== */

/* Post Categories - Badge Styling */
.post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.category-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-badge:hover {
    background: var(--color-primary-hover);
    color: white;
}

/* Category colors */
.category-badge.cat-dogs { background: #3B82F6; }
.category-badge.cat-cats { background: #EC4899; }
.category-badge.cat-birds { background: #10B981; }
.category-badge.cat-fish { background: #06B6D4; }
.category-badge.cat-exotic { background: #8B5CF6; }
.category-badge.cat-health { background: #EF4444; }
.category-badge.cat-nutrition { background: #F59E0B; }
.category-badge.cat-training { background: #6366F1; }

/* Post Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.tag-label {
    font-weight: 600;
    color: var(--color-text);
    margin-right: var(--space-2);
}

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

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

/* Share Buttons */
.share-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.share-buttons span {
    font-weight: 600;
    color: var(--color-text);
}

.share-buttons a,
.share-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: all 0.2s ease;
    cursor: pointer;
}

.share-buttons a:hover,
.share-buttons button:hover {
    color: white;
    border-color: transparent;
}

.share-buttons a.share-twitter:hover { background: #1DA1F2; }
.share-buttons a.share-facebook:hover { background: #4267B2; }
.share-buttons a.share-linkedin:hover { background: #0A66C2; }
.share-buttons a.share-pinterest:hover { background: #E60023; }
.share-buttons a.share-email:hover { background: #34A853; }
.share-buttons button.share-copy:hover { background: var(--color-primary); }

/* Author Box - Clean Card Design */
.author-box-wrapper {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.author-box {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.author-box:hover {
    box-shadow: var(--shadow-md);
}

.author-box-avatar-wrapper {
    flex-shrink: 0;
    position: relative;
}

.author-box-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--color-primary);
    transition: border-color 0.2s ease;
}

.author-box:hover .author-box-avatar {
    border-color: var(--color-secondary);
}

.author-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-box-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    margin-bottom: var(--space-1);
}

.author-box-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.author-box-name a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.author-box-name a:hover {
    color: var(--color-primary);
}

.author-box-bio {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 var(--space-3) 0;
}

.author-box-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.author-box-link:hover {
    color: var(--color-primary-hover);
    gap: var(--space-3);
}

.author-box-link svg {
    transition: transform 0.2s ease;
}

.author-box-link:hover svg {
    transform: translateX(3px);
}

/* Mobile responsive author box */
@media (max-width: 640px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-6);
        gap: var(--space-4);
    }

    .author-box-avatar {
        width: 80px;
        height: 80px;
    }

    .author-box-name {
        font-size: 1.125rem;
    }

    .author-box-bio {
        font-size: 0.875rem;
    }

    .author-box-link {
        justify-content: center;
    }
}

/* Dark mode adjustments for author box */
[data-theme="dark"] .author-box {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .author-box-avatar {
    border-color: var(--color-primary);
}

/* Related Posts - Full styling */
.related-posts {
    background: var(--color-surface);
    padding: var(--space-12) 0;
    margin-top: 0;
    border-top: none;
}

.related-posts .section-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-8);
}

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

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

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

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

@media (max-width: 1200px) {
    .related-posts .posts-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .related-posts .posts-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Comments Section - Full styling */
.comments-section {
    padding: var(--space-12) 0;
    background: var(--color-bg);
}

/* Remove extra spacing after content */
.main-content > *:last-child {
    margin-bottom: 0;
}

/* Mobile responsive fixes for single post */
@media (max-width: 768px) {
    .single-post {
        padding: var(--space-6) 0;
    }

    .single-post .post-title {
        font-size: 1.75rem;
    }

    .post-meta-full {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .author-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .share-buttons {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   25. Related Post Card - Simplified (Title Only)
   ========================================================================== */

.related-post-card {
    background: var(--color-surface);
    overflow: hidden;
    transition: all 0.3s ease;
    border-top: 3px solid var(--card-border, var(--color-primary));
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.related-post-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.related-post-card-image {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}

.related-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-post-card:hover .related-post-card-image img {
    transform: scale(1.05);
}

.related-post-card-emoji {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
}

.related-post-card-content {
    padding: var(--space-4);
}

.related-post-card-content .post-category {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(26, 95, 122, 0.1);
    margin-bottom: var(--space-2);
    transition: all 0.2s ease;
}

.related-post-card-content .post-category:hover {
    background: var(--color-primary);
    color: white;
}

.related-post-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.related-post-card-title a {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-card-title a:hover {
    color: var(--color-primary);
}

/* Placeholder for posts without images */
.related-post-card-image .post-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text-muted);
}

/* ==========================================================================
   26. Cute Post Card - New Design
   ========================================================================== */

.post-card-cute {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.post-card-cute:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    border-color: var(--card-accent);
}

.post-card-cute .post-card-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

.post-card-cute .post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card-cute:hover .post-card-image img {
    transform: scale(1.08);
}

/* Category Badge on Image */
.post-card-cute .post-card-category {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255,255,255,0.95);
    color: #333;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.post-card-cute:hover .post-card-category {
    background: var(--card-accent);
    color: #333;
    transform: scale(1.05);
}

/* Card Body */
.post-card-cute .post-card-body {
    padding: 20px;
}

.post-card-cute .post-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.post-card-cute .post-card-title a {
    color: #2d3748;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.post-card-cute .post-card-title a:hover {
    color: var(--color-primary);
}

.post-card-cute .post-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-card-cute .post-card-date {
    font-size: 0.8rem;
    color: #718096;
}

/* Image Placeholder */
.post-card-cute .post-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #adb5bd;
}

/* Grid adjustments for cute cards */
.posts-grid.two-columns .post-card-cute {
    height: 100%;
}

/* Related Posts Section - 4 columns */
.related-posts .posts-grid-4 .post-card-cute {
    border-radius: 16px;
}

.related-posts .posts-grid-4 .post-card-cute .post-card-body {
    padding: 15px;
}

.related-posts .posts-grid-4 .post-card-cute .post-card-title {
    font-size: 0.9rem;
}

.related-posts .posts-grid-4 .post-card-cute .post-card-category {
    font-size: 0.65rem;
    padding: 4px 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .post-card-cute {
        border-radius: 16px;
    }

    .post-card-cute .post-card-body {
        padding: 15px;
    }

    .post-card-cute .post-card-title {
        font-size: 0.95rem;
    }

    .post-card-cute .post-card-category {
        font-size: 0.65rem;
        padding: 5px 10px;
    }
}

/* ==========================================================================
   26. Advertisement Containers
   ========================================================================== */

/* Base Ad Container */
.ad-container {
    display: block;
    width: 100%;
    margin: var(--space-6) auto;
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Ad Label */
.ad-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    opacity: 0.7;
}

/* Ad Content */
.ad-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.ad-content img,
.ad-content iframe {
    max-width: 100%;
    height: auto;
}

.ad-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.ad-link {
    display: block;
    text-decoration: none;
}

.ad-link:hover .ad-image {
    opacity: 0.9;
}

/* Ad Alignments */
.ad-align-left {
    margin-left: 0;
    margin-right: auto;
}

.ad-align-center {
    margin-left: auto;
    margin-right: auto;
}

.ad-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* Slot-specific Styles */

/* Header After Navigation */
.ad-header-after-nav {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
    border-left: none;
    border-right: none;
    border-top: none;
}

/* Post Top */
.ad-post-top {
    margin-top: 0;
    margin-bottom: var(--space-8);
    background: var(--color-surface);
}

/* Post Middle (In-Article) */
.ad-post-middle {
    margin: var(--space-8) auto;
    max-width: 100%;
    background: var(--color-surface);
}

/* Post Bottom */
.ad-post-bottom {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
}

/* Before Footer */
.ad-before-footer {
    margin: 0;
    padding: var(--space-8) var(--space-6);
    background: var(--color-bg);
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Between Posts (Grid Integration) */
.ad-between-posts {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    margin: 0;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* Sidebar Ads */
.ad-sidebar-top,
.ad-sidebar-middle,
.ad-sidebar-bottom {
    margin-bottom: var(--space-6);
    background: var(--color-surface);
}

/* Size Variations */
.ad-size-leaderboard {
    max-width: 728px;
}

.ad-size-large-leaderboard {
    max-width: 970px;
}

.ad-size-rectangle {
    max-width: 300px;
}

.ad-size-large-rectangle {
    max-width: 336px;
}

.ad-size-skyscraper {
    max-width: 160px;
}

.ad-size-wide-skyscraper {
    max-width: 300px;
}

.ad-size-responsive {
    max-width: 100%;
}

/* Responsive Ad Styles */
@media (max-width: 767px) {
    .ad-container {
        padding: var(--space-3);
        margin: var(--space-4) auto;
    }

    .ad-header-after-nav {
        padding: var(--space-3) var(--space-4);
    }

    .ad-before-footer {
        padding: var(--space-6) var(--space-4);
    }

    /* Stack between-posts ads full width on mobile */
    .ad-between-posts {
        grid-column: 1 / -1;
        min-height: 200px;
    }

    /* Limit sizes on mobile */
    .ad-size-leaderboard,
    .ad-size-large-leaderboard {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* On tablets, between-posts spans 2 columns */
    .ad-between-posts {
        grid-column: span 2;
    }
}

/* Device-specific visibility (handled via JS/PHP but CSS fallback) */
.ad-hide-mobile {
    display: block;
}

.ad-hide-desktop {
    display: block;
}

@media (max-width: 767px) {
    .ad-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .ad-hide-desktop {
        display: none !important;
    }
}

/* Dark Mode Adjustments for Ads */
[data-theme="dark"] .ad-container {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .ad-header-after-nav {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

[data-theme="dark"] .ad-label {
    color: var(--color-text-muted);
}

/* Placeholder style for empty/loading ads */
.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

/* Ad loading animation */
.ad-loading {
    animation: adPulse 1.5s ease-in-out infinite;
}

@keyframes adPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ==========================================================================
   27. Single Post Sidebar Widgets
   ========================================================================== */

/* Sidebar Container */
.single-post-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    align-self: start;
}

.single-post-sidebar::-webkit-scrollbar {
    width: 4px;
}

.single-post-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.single-post-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

/* Widget Base Styles */
.sidebar-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: box-shadow 0.2s ease;
}

.sidebar-widget:hover {
    box-shadow: var(--shadow-sm);
}

/* Widget Title */
.widget-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    position: relative;
}

.widget-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--color-primary);
}

.widget-title svg {
    width: 18px;
    height: 18px;
    fill: var(--color-primary);
}

.widget-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(26, 95, 122, 0.1);
    color: var(--color-primary);
}

.widget-title-icon svg {
    width: 16px;
    height: 16px;
}

/* Widget List Base */
.widget-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   27.1 Trending Now Widget
   ========================================================================== */

.widget-trending .widget-title::before {
    background: linear-gradient(90deg, #EF4444 0%, #F97316 100%);
}

.widget-trending .widget-title-icon {
    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
    color: white;
}

.trending-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    margin: 0 calc(var(--space-3) * -1);
    transition: background 0.2s ease;
}

.trending-item:hover {
    background: var(--color-bg);
}

/* Trending Number Badge */
.trending-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
    background: var(--color-primary);
    position: relative;
}

/* Top 3 special styling */
.trending-item:nth-child(1) .trending-number {
    background: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%);
}

.trending-item:nth-child(2) .trending-number {
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
}

.trending-item:nth-child(3) .trending-number {
    background: linear-gradient(135deg, #CD7F32 0%, #D4A853 100%);
}

/* Trending Content */
.trending-content {
    flex: 1;
    min-width: 0;
}

.trending-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.trending-title a {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.2s ease;
}

.trending-title a:hover {
    color: var(--color-primary);
}

/* Trending Meta */
.trending-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.trending-meta svg {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

.trending-views {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Trending Image */
.trending-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: var(--color-bg);
}

.trending-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.trending-item:hover .trending-image img {
    transform: scale(1.05);
}

.trending-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%);
}

.trending-image-placeholder svg {
    width: 24px;
    height: 24px;
    fill: var(--color-text-muted);
    opacity: 0.4;
}

/* ==========================================================================
   27.2 Editors' Picks Widget
   ========================================================================== */

.widget-editors-picks .widget-title::before {
    background: var(--color-secondary);
}

.widget-editors-picks .widget-title-icon {
    background: var(--color-secondary);
    color: white;
}

.editors-pick-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    margin: 0 calc(var(--space-3) * -1);
    transition: background 0.2s ease;
}

.editors-pick-item:hover {
    background: var(--color-bg);
}

/* Staff Pick Badge */
.staff-pick-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-secondary);
    color: white;
}

.staff-pick-badge svg {
    width: 14px;
    height: 14px;
}

/* Editors Pick Content */
.editors-pick-content {
    flex: 1;
    min-width: 0;
}

.editors-pick-category {
    display: inline-block;
    padding: 2px var(--space-2);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    background: rgba(201, 162, 39, 0.15);
    margin-bottom: var(--space-1);
}

.editors-pick-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.editors-pick-title a {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.2s ease;
}

.editors-pick-title a:hover {
    color: var(--color-secondary);
}

/* Editors Pick Image */
.editors-pick-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: var(--color-bg);
    position: relative;
}

.editors-pick-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.editors-pick-item:hover .editors-pick-image img {
    transform: scale(1.05);
}

/* Featured ribbon on image */
.editors-pick-image::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent var(--color-secondary) transparent transparent;
}

.editors-pick-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
}

.editors-pick-image-placeholder svg {
    width: 24px;
    height: 24px;
    fill: var(--color-secondary);
    opacity: 0.5;
}

/* ==========================================================================
   27.3 Generic Widget Styles (Reusable)
   ========================================================================== */

/* Popular Posts Widget (alternative style) */
.widget-popular .widget-title::before {
    background: var(--color-primary);
}

/* Recent Posts Widget */
.widget-recent .widget-title::before {
    background: #10B981;
}

.widget-recent .widget-title-icon {
    background: #10B981;
    color: white;
}

/* Categories Widget */
.widget-categories .widget-title::before {
    background: #8B5CF6;
}

.widget-categories .widget-title-icon {
    background: #8B5CF6;
    color: white;
}

.category-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.category-list-item:last-child {
    border-bottom: none;
}

.category-list-item:hover {
    padding-left: var(--space-2);
}

.category-list-item a {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.category-list-item a:hover {
    color: var(--color-primary);
}

.category-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px 8px;
}

/* Tags Cloud Widget */
.widget-tags .widget-title::before {
    background: #EC4899;
}

.widget-tags .widget-title-icon {
    background: #EC4899;
    color: white;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tags-cloud a {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tags-cloud a:hover {
    color: white;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Newsletter Widget */
.widget-newsletter {
    background: linear-gradient(135deg, var(--color-primary) 0%, #164e65 100%);
    border: none;
    color: white;
}

.widget-newsletter .widget-title {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.widget-newsletter .widget-title::before {
    background: white;
}

.widget-newsletter .widget-title-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.widget-newsletter-text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

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

.widget-newsletter-form input {
    padding: var(--space-3);
    font-size: 0.875rem;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.widget-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.widget-newsletter-form input:focus {
    background: rgba(255, 255, 255, 0.25);
    outline: none;
}

.widget-newsletter-form button {
    padding: var(--space-3);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.widget-newsletter-form button:hover {
    background: var(--color-secondary);
    color: white;
}

/* ==========================================================================
   27.4 Single Post Layout with Sidebar
   ========================================================================== */

.single-post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    align-items: start;
}

@media (min-width: 992px) {
    .single-post-layout {
        grid-template-columns: 1fr 280px;
    }

    /* 3-column layout when TOC is present */
    .single-post-layout.has-toc {
        grid-template-columns: 200px 1fr 200px;
    }
}

@media (min-width: 1200px) {
    .single-post-layout {
        grid-template-columns: 1fr 300px;
    }

    /* 3-column layout when TOC is present */
    .single-post-layout.has-toc {
        grid-template-columns: 220px 1fr 220px;
    }
}

@media (min-width: 1400px) {
    .single-post-layout.has-toc {
        grid-template-columns: 240px 1fr 240px;
    }
}

.single-post-main {
    min-width: 0;
}

/* ==========================================================================
   27.4.1 Table of Contents (TOC) Sidebar
   ========================================================================== */

.toc-wrapper {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start;
}

.toc-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--space-8));
    overflow-y: auto;
    padding-right: var(--space-4);
}

/* Scrollbar styling for TOC */
.toc-sticky::-webkit-scrollbar {
    width: 4px;
}

.toc-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.toc-sticky::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

.toc-nav {
    background: transparent;
}

.toc-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--color-border);
}

.toc-item {
    margin: 0;
}

.toc-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: none;
    line-height: 1.5;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

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

.toc-link.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: transparent;
}

/* Sub-level items (h3) */
.toc-sub .toc-link {
    font-size: 0.8125rem;
    padding-left: var(--space-6);
    color: var(--color-text-muted);
}

.toc-sub .toc-link:hover,
.toc-sub .toc-link.active {
    color: var(--color-primary);
}

/* TOC Mobile - Hidden by default on mobile */
@media (max-width: 991px) {
    .toc-wrapper {
        display: none;
    }

    .single-post-layout.has-toc {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .toc-link {
        font-size: 0.8125rem;
    }

    .toc-sub .toc-link {
        font-size: 0.75rem;
    }
}

/* Dark mode TOC */
[data-theme="dark"] .toc-list {
    border-left-color: var(--color-border);
}

[data-theme="dark"] .toc-link.active {
    border-left-color: var(--color-primary);
}

/* ==========================================================================
   27.4.2 Right Sidebar Nav (Editors' Picks)
   ========================================================================== */

.sidebar-nav {
    background: transparent;
}

.sidebar-nav-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--color-border);
}

.sidebar-nav-item {
    margin: 0;
}

.sidebar-nav-item a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: none;
    line-height: 1.5;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.sidebar-nav-item a:hover {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-nav-item a {
        font-size: 0.8125rem;
    }
}

/* Dark mode right sidebar */
[data-theme="dark"] .sidebar-nav-list {
    border-left-color: var(--color-border);
}

/* ==========================================================================
   27.5 Responsive Styles for Sidebar
   ========================================================================== */

@media (max-width: 991px) {
    .single-post-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-top: var(--space-8);
        border-top: 1px solid var(--color-border);
    }

    .single-post-layout {
        grid-template-columns: 1fr;
    }

    /* Two-column widget grid on tablet */
    .sidebar-widgets-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .sidebar-widgets-grid .widget-newsletter {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .sidebar-widgets-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-widgets-grid .widget-newsletter {
        grid-column: span 1;
    }

    .sidebar-widget {
        padding: var(--space-4);
    }

    .trending-item,
    .editors-pick-item {
        margin: 0 calc(var(--space-2) * -1);
        padding: var(--space-2);
    }

    .trending-image,
    .editors-pick-image {
        width: 50px;
        height: 50px;
    }

    .trending-number,
    .staff-pick-badge {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   27.6 Dark Mode Adjustments for Widgets
   ========================================================================== */

[data-theme="dark"] .sidebar-widget {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .widget-title {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .trending-item:hover,
[data-theme="dark"] .editors-pick-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .trending-image,
[data-theme="dark"] .editors-pick-image {
    background: var(--color-bg);
}

[data-theme="dark"] .trending-image-placeholder,
[data-theme="dark"] .editors-pick-image-placeholder {
    background: var(--color-bg);
}

[data-theme="dark"] .category-count {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tags-cloud a {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border);
}

[data-theme="dark"] .widget-newsletter {
    background: linear-gradient(135deg, var(--color-primary) 0%, #0f3d4d 100%);
}

/* ==========================================================================
   27.7 Trending Now & Editors' Picks - Template-specific Styles
   ========================================================================== */

/* Sidebar Sticky Wrapper */
.sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Trending Posts List */
.trending-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.trending-post-item:first-child {
    padding-top: 0;
}

.trending-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Trending Post Content with Image */
.trending-post-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Trending Post Image */
.trending-post-image {
    flex-shrink: 0;
    width: 60px;
    height: 45px;
    overflow: hidden;
    display: block;
}

.trending-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.trending-post-item:hover .trending-post-image img {
    transform: scale(1.05);
}

/* Trending Post Title */
a.trending-post-title {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* Editors' Picks List */
.editors-picks-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Editors' Pick Image */
a.editors-pick-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: block;
}

a.editors-pick-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.editors-pick-item:hover .editors-pick-image img {
    transform: scale(1.05);
}

/* Editors' Pick Title */
a.editors-pick-title {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.2s ease;
}

a.editors-pick-title:hover {
    color: var(--color-secondary);
}

/* Responsive: Mobile Sidebar */
@media (max-width: 991px) {
    .sidebar-sticky {
        position: static;
    }
}

/* Two column layout for widgets on tablet */
@media (min-width: 640px) and (max-width: 991px) {
    .sidebar-sticky {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   15. Static Pages - Legal & Contact
   ========================================================================== */

/* Page Header */
.page-header {
    padding: var(--space-12) 0 var(--space-8);
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a4a 100%);
    color: white;
    text-align: center;
}

.page-header .breadcrumbs {
    margin-bottom: var(--space-4);
}

.page-header .breadcrumb-list a,
.page-header .breadcrumb-item span {
    color: rgba(255, 255, 255, 0.8);
}

.page-header .breadcrumb-item.active span {
    color: white;
}

.page-header .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.page-header .page-title .paw-icon {
    color: var(--color-secondary);
}

.page-header .page-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--space-4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.page-header .page-last-updated {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--space-3);
}

/* Page Content */
.page-content {
    padding: var(--space-16) 0;
    background: var(--color-surface);
}

.page-content .content-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Page Featured Image */
.page-featured-image {
    margin-bottom: var(--space-8);
    overflow: hidden;
}

.page-featured-image img {
    width: 100%;
    object-fit: cover;
}

/* Page Body */
.page-body {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
}

.page-body h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--space-8) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

.page-body h2:first-child {
    margin-top: 0;
}

.page-body h3 {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: var(--space-6) 0 var(--space-3);
}

.page-body p {
    margin-bottom: var(--space-4);
}

.page-body ul,
.page-body ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.page-body li {
    margin-bottom: var(--space-2);
}

.page-body ul li {
    list-style-type: disc;
}

.page-body ol li {
    list-style-type: decimal;
}

.page-body strong {
    color: var(--color-text);
    font-weight: 600;
}

.page-body a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.page-body a:hover {
    color: var(--color-secondary);
}

/* Legal Page Styles */
.page-header-legal {
    background: linear-gradient(135deg, #2c5f4a 0%, #1a3a4a 100%);
}

.legal-body {
    background: var(--color-bg);
    padding: var(--space-8);
}

.legal-body h2 {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-4);
    border-bottom: none;
}

/* ==========================================================================
   16. Contact Page Styles
   ========================================================================== */

.contact-section {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.contact-wrapper {
    display: grid;
    gap: var(--space-8);
}

/* Contact Info Cards */
.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.contact-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: white;
    flex-shrink: 0;
}

.contact-details h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.contact-details p {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--color-bg);
    padding: var(--space-8);
}

.contact-form-wrapper .form-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.contact-form-wrapper .form-title .paw-icon {
    color: var(--color-primary);
}

.contact-form-wrapper .form-description {
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
}

/* Form Elements */
.contact-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.contact-form .form-group {
    margin-bottom: var(--space-4);
}

.contact-form .form-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.contact-form .form-label .required {
    color: #dc3545;
}

.contact-form .form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    transition: all 0.2s ease;
}

.contact-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 95, 122, 0.1);
}

.contact-form .form-control.error {
    border-color: #dc3545;
}

.contact-form .form-control::placeholder {
    color: var(--color-text-muted);
}

.contact-form .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a6a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 20px;
    padding-right: var(--space-12);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

.contact-form .form-error {
    display: block;
    font-size: 0.8125rem;
    color: #dc3545;
    margin-top: var(--space-1);
    min-height: 1.25rem;
}

/* Form Actions */
.contact-form .form-actions {
    margin-top: var(--space-6);
}

.contact-form .btn-paw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form .btn-paw:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-form .btn-paw:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-form .btn-paw .paw-icon {
    width: 20px;
    height: 20px;
}

.contact-form .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.contact-form .btn-loading .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Form Message */
.contact-form .form-message {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-top: var(--space-4);
    font-weight: 500;
}

.contact-form .form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-form .form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header .page-title {
        font-size: 1.75rem;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: var(--space-6);
    }

    .legal-body {
        padding: var(--space-4);
    }
}

/* ==========================================================================
   30. Archive & Category Pages
   ========================================================================== */

.archive-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7a9c 100%);
    padding: var(--space-12) 0 var(--space-8);
    color: white;
}

.archive-header .breadcrumbs {
    margin-bottom: var(--space-6);
}

.archive-header .breadcrumb-list {
    color: rgba(255, 255, 255, 0.8);
}

.archive-header .breadcrumb-list a {
    color: rgba(255, 255, 255, 0.8);
}

.archive-header .breadcrumb-list a:hover {
    color: white;
}

.archive-header .breadcrumb-list .active {
    color: white;
}

.archive-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.archive-icon {
    font-size: 2.5rem;
}

.archive-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.archive-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-bottom: var(--space-4);
}

.archive-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.15);
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
    color: white;
}

.archive-count svg {
    width: 16px;
    height: 16px;
}

.archive-content {
    padding: var(--space-12) 0;
    background: var(--color-bg);
}

/* ==========================================================================
   31. Content Layout with Sidebar
   ========================================================================== */

.content-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 992px) {
    .content-layout {
        grid-template-columns: 1fr 320px;
    }

    .content-layout.left-sidebar {
        grid-template-columns: 320px 1fr;
    }

    .content-layout.left-sidebar .sidebar {
        order: -1;
    }
}

@media (min-width: 1200px) {
    .content-layout {
        grid-template-columns: 1fr 360px;
    }

    .content-layout.left-sidebar {
        grid-template-columns: 360px 1fr;
    }
}

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

/* ==========================================================================
   32. Sidebar Styles
   ========================================================================== */

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

/* Widget Header */
.widget-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    position: relative;
}

.widget-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--color-primary);
}

.widget-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.widget-header svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.widget-emoji {
    font-size: 1.25rem;
}

/* About Widget */
.about-widget .about-content {
    text-align: center;
}

.about-widget .about-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}

.about-widget p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

/* Newsletter Widget */
.newsletter-widget p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

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

.newsletter-widget input[type="email"] {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    background: var(--color-bg);
}

.newsletter-widget input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.newsletter-widget button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-primary);
    color: white;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.newsletter-widget button:hover {
    background: var(--color-primary-hover);
}

/* Popular Posts List */
.popular-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.popular-post-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    margin: 0 calc(var(--space-3) * -1);
    transition: background 0.2s ease;
}

.popular-post-item:hover {
    background: var(--color-bg);
}

.post-rank {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
    background: var(--color-primary);
}

.popular-post-item:nth-child(1) .post-rank {
    background: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%);
}

.popular-post-item:nth-child(2) .post-rank {
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
}

.popular-post-item:nth-child(3) .post-rank {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
}

.post-info {
    flex: 1;
    min-width: 0;
}

.post-info .post-title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    margin-bottom: var(--space-1);
}

.post-info .post-title:hover {
    color: var(--color-primary);
}

.post-emoji {
    flex-shrink: 0;
    font-size: 1rem;
}

.post-views {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Category List */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.category-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    color: var(--color-text);
    transition: all 0.2s ease;
    margin: 0 calc(var(--space-3) * -1);
}

.category-link:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.cat-emoji {
    font-size: 1.1rem;
}

.cat-name {
    flex: 1;
}

.cat-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: var(--space-1) var(--space-2);
}

/* Tip Widget */
.tip-widget .tip-content {
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(26, 95, 122, 0.05) 0%, rgba(26, 95, 122, 0.1) 100%);
    border-left: 3px solid var(--color-primary);
}

.tip-widget .tip-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.tip-widget .tip-text {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Tags Cloud */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag-item {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.8rem;
    color: var(--color-text-light);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.tag-item:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Adoption Widget */
.adoption-widget {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-color: #FECACA;
}

.adoption-widget .adoption-content {
    text-align: center;
}

.adoption-widget .adoption-emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--space-3);
}

.adoption-widget h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #DC2626;
    margin-bottom: var(--space-2);
}

.adoption-widget p {
    font-size: 0.9rem;
    color: #7F1D1D;
    margin-bottom: var(--space-4);
}

.btn-adoption {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: #DC2626;
    color: white;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-adoption:hover {
    background: #B91C1C;
    color: white;
}

/* ==========================================================================
   33. Responsive Sidebar
   ========================================================================== */

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

    .sidebar {
        padding-top: var(--space-8);
        border-top: 1px solid var(--color-border);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .sidebar .newsletter-widget,
    .sidebar .adoption-widget {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .archive-title {
        font-size: 1.75rem;
    }

    .archive-icon {
        font-size: 2rem;
    }

    .sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar .newsletter-widget,
    .sidebar .adoption-widget {
        grid-column: span 1;
    }
}

/* Dark Mode Sidebar */
[data-theme="dark"] .archive-header {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 100%);
}

[data-theme="dark"] .adoption-widget {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #7f1d1d;
}

[data-theme="dark"] .adoption-widget h4,
[data-theme="dark"] .adoption-widget p {
    color: #FCA5A5;
}

[data-theme="dark"] .tip-widget .tip-content {
    background: rgba(26, 95, 122, 0.2);
}

/* ==========================================================================
   34. Search Page Styles
   ========================================================================== */

.search-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7a9c 100%);
    padding: var(--space-12) 0;
    color: white;
    text-align: center;
}

.search-header-content {
    max-width: 700px;
    margin: 0 auto;
}

.search-icon {
    margin-bottom: var(--space-4);
}

.search-icon svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.search-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-6);
    color: white;
}

.search-form-large {
    margin-bottom: var(--space-4);
}

.search-input-wrap {
    display: flex;
    gap: 0;
    background: white;
    overflow: hidden;
}

.search-input-wrap input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border: none;
    font-size: 1rem;
    color: var(--color-text);
}

.search-input-wrap input:focus {
    outline: none;
}

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

.search-input-wrap button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--color-secondary);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-input-wrap button:hover {
    background: #b8931f;
}

.search-results-info {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.search-results-info strong {
    color: white;
}

.search-content {
    padding: var(--space-12) 0;
    background: var(--color-bg);
}

/* Search Suggestions */
.search-suggestions {
    text-align: center;
    padding: var(--space-8) 0;
}

.search-suggestions h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.25rem;
    margin-bottom: var(--space-6);
    color: var(--color-text);
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-12);
}

.suggestion-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.suggestion-tag:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Pet Type Grid */
.pet-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 600px;
    margin: 0 auto;
}

.pet-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.pet-type-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.pet-emoji {
    font-size: 2.5rem;
}

.pet-name {
    font-weight: 600;
    color: var(--color-text);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--color-surface);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.empty-state p {
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Search */
@media (max-width: 640px) {
    .search-title {
        font-size: 1.5rem;
    }

    .search-input-wrap {
        flex-direction: column;
    }

    .search-input-wrap button {
        justify-content: center;
    }

    .pet-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark Mode Search */
[data-theme="dark"] .search-header {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 100%);
}

[data-theme="dark"] .search-input-wrap {
    background: var(--color-surface);
}

[data-theme="dark"] .search-input-wrap input {
    background: var(--color-surface);
    color: var(--color-text);
}

/* ========================================
   Blog Layout with Sidebar (Right)
   ======================================== */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

.blog-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: var(--color-surface);
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--color-primary);
    color: var(--color-heading);
}

.widget-icon {
    font-size: 20px;
}

/* Category List - Colorful */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 6px;
}

.category-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: var(--color-bg);
    transition: all 0.25s ease;
}

.category-list a:hover {
    transform: translateX(5px);
    background: var(--cat-color, var(--color-primary));
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.category-list a.active {
    background: var(--cat-color, var(--color-primary));
    color: #fff;
}

.cat-icon {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.cat-name {
    flex: 1;
}

.cat-count {
    background: rgba(0,0,0,0.1);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.category-list a:hover .cat-count,
.category-list a.active .cat-count {
    background: rgba(255,255,255,0.25);
}

/* Tag Cloud - Colorful */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-link {
    display: inline-block;
    padding: 8px 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.tag-link:nth-child(2n) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.tag-link:nth-child(3n) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.tag-link:nth-child(4n) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.tag-link:nth-child(5n) {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.tag-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
}

.social-btn.facebook { background: linear-gradient(135deg, #667eea 0%, #3b5998 100%); }
.social-btn.instagram { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.social-btn.twitter { background: linear-gradient(135deg, #4facfe 0%, #1da1f2 100%); }
.social-btn.youtube { background: linear-gradient(135deg, #ff416c 0%, #ff0000 100%); }

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* Blog Main - Three Columns */
.blog-main {
    min-width: 0;
}

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

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

@media (max-width: 1024px) {
    .blog-layout {
        grid-template-columns: 1fr 260px;
        gap: 30px;
    }
}

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

    .blog-sidebar {
        position: static;
        order: 1; /* Show after content on mobile */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .sidebar-widget {
        margin-bottom: 0;
    }

    .sidebar-widget.social-widget {
        grid-column: span 2;
    }

    .social-links {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .social-btn {
        flex: 1;
        min-width: calc(50% - 5px);
    }

    .posts-grid.two-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .blog-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar-widget.social-widget {
        grid-column: span 1;
    }

    .posts-grid.two-columns {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Sidebar */
[data-theme="dark"] .sidebar-widget {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .category-list a {
    background: var(--color-bg);
}

[data-theme="dark"] .cat-count {
    background: rgba(255,255,255,0.1);
}

/* Powered by JekCMS */
.powered-by {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.2);
}
.powered-by a {
    color: inherit;
    opacity: 0.8;
}
.powered-by a:hover {
    opacity: 1;
}