/*
Theme Name: Wala Coffeee Child
Theme URI: https://example.com/
Description: Child theme for Wala Coffeee
Author: Your Name
Author URI: https://example.com/
Template: Wala Coffee
Version: 1.0.0
Text Domain: wala-coffeee-child
*/

/* ============================================================
   WALA COFFEE — CHILD THEME CSS
   Single Post Page | With Sidebar | Professional
   Coffee Color Palette | Atlantis Resortst Font
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

/* Atlantis Resorts — Local Font from child theme fonts folder */
@font-face {
    font-family: 'Atlantis Resortst';
    src: url('fonts/AtlantisResorts/ATLANTISRESORTS-HEADLINE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------
   CSS Variables
---------------------------------------------------------- */
:root {
    --sp-espresso:   #1A0F0A;
    --sp-dark:       #2C1810;
    --sp-roast:      #3D2314;
    --sp-brown:      #7B4A26;
    --sp-caramel:    #A0693A;
    --sp-foam:       #F5EDDF;
    --sp-white:      #FBF7F2;
    --sp-gold:       #C8973A;
    --sp-gold-warm:  #E8B86D;
    --sp-border:     #DEC9AA;
    --sp-text:       #2C1810;
    --sp-muted:      #8B7355;
    --sp-shadow:     0 4px 24px rgba(44,24,16,0.10);
    --sp-shadow-md:  0 8px 40px rgba(44,24,16,0.16);
    --sp-radius:     14px;
    --sp-font-h:     'Atlantis Resortst', Georgia, serif;
    --sp-font-body:  'Jost', sans-serif;
    --sp-ease:       0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ----------------------------------------------------------
   Existing overrides preserved
---------------------------------------------------------- */
.home header .logo-bx a img { width: 140px; filter: brightness(0) invert(1); }
.footer-bx.img-bx.--small img { width: 135px; filter: brightness(0) invert(1); }
header .logo-bx a img { width: 135px; }

/* ==========================================================
   HERO BANNER — Full fix
========================================================== */
.sp-hero {
    position: relative !important;
    height: 580px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    padding: 0 !important;
}
@media (max-width: 768px) { .sp-hero { height: 460px !important; } }
@media (max-width: 480px) { .sp-hero { height: 380px !important; } }

.sp-hero-img-wrap {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

.sp-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    animation: spZoom 10s ease-out forwards;
}
@keyframes spZoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.00); }
}

.sp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12, 5, 2, 0.95) 0%,
        rgba(20, 10, 4, 0.72) 38%,
        rgba(20, 10, 4, 0.28) 65%,
        rgba(20, 10, 4, 0.04) 100%
    );
    z-index: 1;
}

.sp-hero-no-img {
    background: linear-gradient(145deg, var(--sp-espresso), var(--sp-roast));
}

.sp-hero-content {
    position: relative;
    font-family: 'Atlantis Resortst';
    z-index: 2;
    width: 100%;
    padding-bottom: 48px;
    animation: spFadeUp 0.75s ease-out both;
}
@keyframes spFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb */
.sp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    font-family: var(--sp-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.sp-breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; transition: color var(--sp-ease); }
.sp-breadcrumb a:hover { color: var(--sp-gold-warm); }
.sp-breadcrumb span:last-child { color: var(--sp-gold-warm); }
.sp-bc-sep { color: rgba(255,255,255,0.26); }

/* Category Tags */
.sp-category-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-tag {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(200,151,58,0.20);
    border: 1px solid rgba(200,151,58,0.48);
    color: var(--sp-gold-warm);
    font-family: var(--sp-font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 30px;
    backdrop-filter: blur(4px);
    transition: all var(--sp-ease);
}
.sp-tag:hover { background: rgba(200,151,58,0.40); color: #fff; }

/* Hero Title */
.sp-hero .sp-title {
    font-family: var(--sp-font-h) !important;
    font-size: clamp(30px, 5.2vw, 60px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.50);
    margin: 0 0 16px !important;
    max-width: 820px;
}

/* Meta bar */
.sp-meta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 6px; }
.sp-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.68);
    font-family: var(--sp-font-body);
    font-size: 13px;
}
.sp-meta-item svg { color: var(--sp-gold-warm); flex-shrink: 0; }
.sp-meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    display: inline-block;
}

/* ==========================================================
   CONTENT SECTION LAYOUT
========================================================== */
.sp-content-section {
    background: var(--sp-white) !important;
    padding: 52px 0 68px !important;
}

/* Two-column layout: content + sidebar */
#post-content-sec .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

/* Main content column */
#post-content-sec .sp-main-col {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
    padding-right: 48px;
}

/* Sidebar column */
#post-content-sec .sp-sidebar-col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

@media (max-width: 991px) {
    #post-content-sec .sp-main-col,
    #post-content-sec .sp-sidebar-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
}

/* Post Intro */
.sp-intro-block {
    border-left: 4px solid var(--sp-gold);
    background: linear-gradient(to right, rgba(200,151,58,0.07), transparent);
    padding: 16px 22px;
    margin-bottom: 24px;
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    font-family: var(--sp-font-h);
    font-size: 18px;
    font-style: italic;
    line-height: 1.65;
    color: var(--sp-brown);
}
.sp-intro-block p { margin: 0; }

/* Coffee Divider */
.sp-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.sp-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--sp-border), transparent);
}
.sp-divider-icon { color: var(--sp-caramel); opacity: 0.60; display: flex; align-items: center; }

/* ==========================================================
   POST BODY TYPOGRAPHY — Spacing fixed
========================================================== */
.sp-post-body {
    font-family: 'Atlantis Resortst';
    font-size: 15.5px !important;
    line-height: 1.75 !important;   /* was too loose, now tighter */
    color: var(--sp-text) !important;
}

/* Fix paragraph spacing — remove double gaps */
.sp-post-body p {
    margin: 0 0 1.1em !important;
    font-family: 'Atlantis Resortst';
    font-size: 16px;
    font-weight: 400;
}

/* Remove extra empty paragraph gaps from WP editor */
.sp-post-body p:empty { display: none !important; }

.sp-post-body h2,
.sp-post-body h3,
.sp-post-body h4 {
    font-family: var(--sp-font-h) !important;
    color: var(--sp-dark);
    line-height: 1.25;
    margin: 1.6em 0 0.5em !important;
}
.sp-post-body h2 { font-size: clamp(22px, 2.8vw, 30px) !important; font-weight: 600; }
.sp-post-body h3 { font-size: clamp(18px, 2.2vw, 24px) !important; font-weight: 500; }
.sp-post-body h4 { font-size: clamp(15px, 1.8vw, 19px) !important; font-weight: 600; color: var(--sp-brown); }

.sp-post-body a { color: var(--sp-brown); text-decoration: underline; text-underline-offset: 3px; transition: color var(--sp-ease); }
.sp-post-body a:hover { color: var(--sp-gold); }

.sp-post-body blockquote {
    margin: 1.6em 0;
    padding: 20px 24px 20px 30px;
    background: linear-gradient(135deg, var(--sp-foam), #FFF5EA);
    border-left: 5px solid var(--sp-gold);
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    font-family: var(--sp-font-h) !important;
    font-size: clamp(16px, 1.9vw, 20px) !important;
    font-style: italic;
    color: var(--sp-roast);
    line-height: 1.6;
    box-shadow: var(--sp-shadow);
    position: relative;
}
.sp-post-body blockquote::before {
    content: '\201C';
    position: absolute;
    top: -4px; left: 12px;
    font-size: 60px;
    color: var(--sp-gold);
    opacity: 0.28;
    font-family: Georgia, serif;
    line-height: 1;
}

.sp-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-md);
    margin: 1.2em 0;
    display: block;
}

.sp-post-body ul,
.sp-post-body ol {
    padding-left: 22px;
    margin: 0 0 1.1em;
}
.sp-post-body ul li,
.sp-post-body ol li { margin-bottom: 0.4em; line-height: 1.7; }
.sp-post-body ul li::marker,
.sp-post-body ol li::marker { color: var(--sp-gold); }

/* ==========================================================
   POST NAVIGATION
========================================================== */
.sp-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 40px 0 36px;
}
@media (max-width: 560px) { .sp-post-nav { grid-template-columns: 1fr; } }

.sp-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    text-decoration: none;
    color: inherit;
    transition: all var(--sp-ease);
    box-shadow: var(--sp-shadow);
}
.sp-nav-btn:hover {
    background: var(--sp-dark);
    border-color: var(--sp-dark);
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.sp-nav-btn:hover .sp-nav-info small { color: var(--sp-gold-warm); }
.sp-nav-btn:hover .sp-nav-info strong { color: rgba(255,255,255,0.88); }
.sp-nav-btn:hover .sp-nav-arrow { color: var(--sp-gold-warm); }

.sp-nav-next { justify-content: flex-end; text-align: right; }

.sp-nav-arrow {
    color: var(--sp-caramel);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color var(--sp-ease);
}
.sp-nav-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-nav-info-right { align-items: flex-end; }
.sp-nav-info small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sp-caramel);
    transition: color var(--sp-ease);
}
.sp-nav-info strong {
    font-family: var(--sp-font-h);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sp-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: block;
    transition: color var(--sp-ease);
}

/* ==========================================================
   AUTHOR BOX
========================================================== */
.sp-author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    background: linear-gradient(135deg, var(--sp-foam), #FFF8EF);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}
@media (max-width: 500px) {
    .sp-author-box { flex-direction: column; align-items: center; text-align: center; padding: 20px 14px; }
}
.sp-author-avatar img {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid var(--sp-gold) !important;
    box-shadow: 0 4px 12px rgba(200,151,58,0.26);
    display: block;
}
.sp-author-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-caramel);
    margin-bottom: 3px;
}
.sp-author-name {
    font-family: var(--sp-font-h);
    font-size: 19px;
    font-weight: 600;
    color: var(--sp-dark);
    margin: 0 0 6px;
}
.sp-author-bio {
    font-size: 13px;
    line-height: 1.65;
    color: var(--sp-muted);
    margin: 0;
}

/* ==========================================================
   SIDEBAR — Professional Styling
   Targets parent theme's sidebar widget area
========================================================== */

/* Sidebar wrapper */
.widget-area,
#secondary,
aside.widget-area,
.sp-sidebar-col aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 96px;
}

/* Every widget = a card */
.widget-area .widget,
#secondary .widget,
aside.widget-area .widget {
    background: #ffffff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 24px 22px;
    box-shadow: var(--sp-shadow);
    margin: 0 !important;
}

/* Widget Titles */
.widget-area .widget-title,
.widget-area .widgettitle,
#secondary .widget-title,
#secondary .widgettitle,
aside.widget-area .widget-title {
    font-family: var(--sp-font-h) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--sp-dark) !important;
    margin: 0 0 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--sp-border) !important;
    position: relative;
    letter-spacing: 0;
    text-transform: none !important;
}
.widget-area .widget-title::after,
#secondary .widget-title::after,
aside.widget-area .widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 36px; height: 2px;
    background: var(--sp-gold);
}

/* Widget text */
.widget-area .widget p,
#secondary .widget p {
    font-family: var(--sp-font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--sp-muted);
    margin: 0 0 14px;
}

/* Widget links */
.widget-area .widget a,
#secondary .widget a {
    color: var(--sp-brown);
    text-decoration: none;
    transition: color var(--sp-ease);
    font-family: var(--sp-font-body);
}
.widget-area .widget a:hover,
#secondary .widget a:hover { color: var(--sp-gold); }

/* Category / Archive list */
.widget-area .widget ul,
#secondary .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget-area .widget ul li,
#secondary .widget ul li {
    border-bottom: 1px solid var(--sp-border);
    margin: 0 !important;
}
.widget-area .widget ul li:last-child,
#secondary .widget ul li:last-child { border-bottom: none; }

.widget-area .widget ul li a,
#secondary .widget ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-brown) !important;
    border-radius: 8px;
    transition: all var(--sp-ease);
}
.widget-area .widget ul li a:hover,
#secondary .widget ul li a:hover {
    background: var(--sp-foam);
    color: var(--sp-dark) !important;
    padding-left: 16px;
}

/* Category count badge */
.widget-area .widget ul li .post-count,
#secondary .widget ul li .post-count {
    background: var(--sp-foam);
    color: var(--sp-caramel);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--sp-border);
}

/* Recent posts widget */
.widget_recent_entries ul li,
.widget-area .widget_recent_entries ul li {
    display: flex;
    flex-direction: column;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--sp-border) !important;
    border-radius: 0 !important;
    background: none !important;
}
.widget_recent_entries ul li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.widget_recent_entries ul li:first-child { padding-top: 0 !important; }

.widget_recent_entries ul li a {
    font-family: var(--sp-font-h) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
    color: var(--sp-dark) !important;
    display: block !important;
    padding: 0 !important;
    white-space: normal !important;
    background: none !important;
}
.widget_recent_entries ul li a:hover { color: var(--sp-gold) !important; background: none !important; }

.widget_recent_entries ul li .post-date {
    font-size: 10.5px !important;
    color: var(--sp-muted) !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Search widget */
.widget_search .search-form {
    display: flex;
    gap: 0;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    overflow: hidden;
}
.widget_search .search-field {
    flex: 1;
    border: none !important;
    padding: 10px 14px !important;
    font-family: var(--sp-font-body);
    font-size: 14px;
    background: #fff;
    color: var(--sp-text);
    outline: none;
}
.widget_search .search-submit {
    background: var(--sp-gold);
    color: var(--sp-espresso);
    border: none;
    padding: 10px 16px;
    font-family: var(--sp-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--sp-ease);
}
.widget_search .search-submit:hover { background: var(--sp-gold-warm); }

/* Text widget */
.widget_text .textwidget {
    font-family: var(--sp-font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--sp-muted);
}

/* About / Custom HTML widget with button */
.widget-area .widget .sp-sidebar-btn,
#secondary .widget .sp-sidebar-btn {
    display: inline-block;
    padding: 9px 22px;
    background: var(--sp-gold);
    color: var(--sp-espresso) !important;
    font-family: var(--sp-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 30px;
    transition: all var(--sp-ease);
    box-shadow: 0 4px 14px rgba(200,151,58,0.28);
    margin-top: 6px;
}
.widget-area .widget .sp-sidebar-btn:hover,
#secondary .widget .sp-sidebar-btn:hover {
    background: var(--sp-gold-warm);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200,151,58,0.38);
    color: var(--sp-espresso) !important;
}

/* Tags widget */
.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.widget_tag_cloud .tagcloud a {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: var(--sp-foam) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sp-brown) !important;
    transition: all var(--sp-ease) !important;
    white-space: nowrap;
}
.widget_tag_cloud .tagcloud a:hover {
    background: var(--sp-gold) !important;
    color: var(--sp-espresso) !important;
    border-color: var(--sp-gold) !important;
}

/* ==========================================================
   SP SIDEBAR (our own PHP sidebar in single-post.php)
========================================================== */
.sp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 96px;
}
@media (max-width: 991px) {
    .sp-sidebar { position: static; margin-top: 40px; }
}

.sp-sidebar-card {
    background: #ffffff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 24px 22px;
    box-shadow: var(--sp-shadow);
}

/* About dark card */
.sp-about-card {
    background: linear-gradient(145deg, var(--sp-dark) 0%, var(--sp-espresso) 100%);
    border-color: rgba(200,151,58,0.28);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sp-about-card::before {
    content: '';
    position: absolute;
    top: -36px; right: -36px;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(200,151,58,0.14) 0%, transparent 70%);
    pointer-events: none;
}
.sp-card-icon, .sp-intro-icon {
    color: var(--sp-gold);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sp-about-card .sp-card-icon {
    width: 52px; height: 52px;
    background: rgba(200,151,58,0.16);
    border: 1px solid rgba(200,151,58,0.32);
    border-radius: 12px;
    margin: 0 auto 14px;
    justify-content: center;
}
.sp-about-card h3 {
    font-family: var(--sp-font-h);
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px;
}
.sp-about-card > p {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255,255,255,0.58);
    margin: 0 0 18px;
}

.sp-sidebar-btn {
    display: inline-block;
    padding: 9px 22px;
    background: var(--sp-gold);
    color: var(--sp-espresso);
    font-family: var(--sp-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 30px;
    transition: all var(--sp-ease);
    box-shadow: 0 4px 14px rgba(200,151,58,0.28);
}
.sp-sidebar-btn:hover {
    background: var(--sp-gold-warm);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200,151,58,0.38);
    color: var(--sp-espresso);
}

/* Widget title inside our sidebar cards */
.sp-widget-title {
    font-family: var(--sp-font-h);
    font-size: 19px;
    font-weight: 600;
    color: var(--sp-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sp-border);
    position: relative;
}
.sp-widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 34px; height: 2px;
    background: var(--sp-gold);
}

/* Category list */
.sp-cat-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sp-cat-list li { border-bottom: 1px solid var(--sp-border); margin: 0 !important; }
.sp-cat-list li:last-child { border-bottom: none; }
.sp-cat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 12px;
    color: var(--sp-brown);
    text-decoration: none;
    font-family: var(--sp-font-body);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all var(--sp-ease);
}
.sp-cat-list li a:hover {
    background: var(--sp-foam);
    color: var(--sp-dark);
    padding-left: 16px;
}
.sp-cat-count {
    background: var(--sp-foam);
    color: var(--sp-caramel);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--sp-border);
}

/* Recent posts */
.sp-recent-post {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--sp-border);
}
.sp-recent-post:last-child { border-bottom: none; padding-bottom: 0; }
.sp-recent-post:first-child { padding-top: 0; }

.sp-recent-thumb {
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: 8px;
    overflow: hidden;
}
.sp-recent-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--sp-ease);
    display: block;
}
.sp-recent-post:hover .sp-recent-thumb img { transform: scale(1.08); }

.sp-recent-info {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.sp-recent-title {
    font-family: var(--sp-font-h);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.36;
    color: var(--sp-dark);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--sp-ease);
}
.sp-recent-title:hover { color: var(--sp-gold); }
.sp-recent-date {
    font-size: 10px;
    color: var(--sp-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 767px) {
    .sp-content-section { padding: 40px 0 52px !important; }
    .sp-hero-content { padding-bottom: 34px; }
    .widget-area,
    #secondary,
    aside.widget-area { position: static; margin-top: 36px; }
}
@media (max-width: 576px) {
    .sp-meta-bar { font-size: 12px; }
    .sp-intro-block { font-size: 16px; padding: 14px 16px; }
    .widget-area .widget,
    #secondary .widget { padding: 18px 16px; }
}