/*
Theme Name: Be Faithful Believer (v20 Final Refined)
Author: Charles
Description: Pastel gradients, glass header, pink hero background, tilted floating badges, tight spacing, and teal verse banner.
Version: 20.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --primary-green: #2d936c;
    --primary-black: #1a1a1a;
    --soft-purple: #f3e5f5;
    --accent-orange: #e67e22;
    --radius: 24px;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --- 1. GLOBAL BACKGROUND & TYPOGRAPHY --- */
body {
    font-family: var(--font-body);
    color: var(--primary-black);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* Pastel Gradient Background */
    background: linear-gradient(120deg, #e8f5e9 0%, #fff 40%, #f3e5f5 100%);
    background-attachment: fixed;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 400; margin-top: 0; color: #000; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- 2. HEADER (Glassmorphism) --- */
header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
}
.logo { font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); }
.logo span { background: #000; color: #fff; padding: 3px 8px; border-radius: 4px; font-family: sans-serif; font-size: 0.9rem; }
nav ul { display: flex; gap: 30px; list-style: none; margin:0; padding:0; }
nav a { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.btn-header { background: #000; color: #fff; padding: 8px 20px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }

/* --- 3. HERO SECTION (Pink Background & Tilted Badges) --- */
/* Reduced bottom padding to tighten gap with scroll indicator */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; padding: 80px 0 10px; }

.hero-title { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; }
.pill-badge { background: #fff; border: 1px solid #eee; padding: 6px 14px; border-radius: 20px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: #666; display: inline-block; font-weight: 700; margin-bottom: 20px; }
.btn-black { background: #000; color: #fff; padding: 12px 28px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: none; cursor: pointer; display: inline-block; letter-spacing: 1px; }
.btn-black:hover { transform: translateY(-2px); opacity: 0.9; }

/* Hero Image Container */
.hero-blob-container {
    position: relative;
    width: 100%;
    max-width: 380px; /* Slightly smaller to let background show */
    margin: 0 auto;
    z-index: 1;
}

/* THE PINK SQUARE BACKGROUND */
.hero-blob-container::before {
    content: '';
    position: absolute;
    top: 8%;      /* Offset to show behind image */
    left: 8%;
    width: 92%;   /* Size relative to container */
    height: 92%;
    background-color: #f8bbd0; /* Pink color */
    border-radius: 35px;       /* Soft square corners */
    z-index: -1;               /* Place behind image */
    transform: rotate(3deg);   /* Slight stylistic tilt */
    box-shadow: 10px 10px 30px rgba(248, 187, 208, 0.4);
}

/* Main Hero Image (Rounded Rectangle) */
.hero-main-img {
    width: 100%;
    height: auto;
    border-radius: 30px; /* Uniform rounded rectangle */
    /* Removed the white border frame */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: transform 0.5s ease-out;
    display: block;
    background: #fff; /* Ensure it's opaque */
    position: relative;
    z-index: 2; /* Sit on top of pink background */
}
.hero-main-img:hover {
    transform: scale(1.02); /* Subtle zoom */
}

/* NEW TILTED FLOATING ANIMATION */
@keyframes floatBadgeTilted {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-8deg) translateY(-12px); }
}

.float-badge {
    position: absolute;
    background: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    /* Apply tilted animation */
    animation: floatBadgeTilted 3.5s ease-in-out infinite;
    transform: rotate(-8deg); /* Initial tilt state */
    z-index: 10;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
}

/* Badge 1: Faith (Top Left) */
.badge-faith {
    top: 20px;
    left: -20px;
    background: #2d936c; /* Green */
    color: #fff;
    animation-delay: 0s;
}

/* Badge 2: Daily Grace (Bottom Right) */
.badge-grace {
    bottom: 20px;
    right: -30px;
    text-align: left;
    padding: 10px 25px;
    animation-delay: 1.5s; /* Offset animation timing */
}
.badge-grace small { display: block; font-size: 0.6rem; color: #999; font-weight: 600; margin-bottom: 2px; }
.badge-icon { width: 25px; height: 25px; background: #ffe0b2; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }

/* --- HERO TEXT STYLES --- */

/* --- HERO TEXT STYLES (Updated Colors) --- */

/* 1. "Substance": Green Background, Black Text */
.hero-word-green-bg {
    background-color: #c9f2c9; /* Light Pastel Green */
    color: #000000;            /* Black Text */
    padding: 0 15px;           /* Space around text */
    border-radius: 8px;        /* Rounded corners */
    font-style: italic;
    display: inline-block;
    line-height: 1.1;
    margin: 0 5px;
    transform: rotate(-2deg);  /* Marker tilt */
}

/* 2. "Evidence": Purple to Red Gradient */
.hero-word-gradient {
    /* Gradient: Purple (#8e24aa) -> Red (#d32f2f) */
    background: linear-gradient(90deg, #8e24aa 0%, #d32f2f 100%);
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
    
    font-style: italic;
    font-weight: 600; 
    display: inline-block;
}

/* 3. The "&" Symbol (Grey/Neutral) */
.hero-ampersand {
    font-family: var(--font-heading);
    font-style: italic;
    color: #9e9e9e; /* Grey */
    font-weight: 300;
    font-size: 3.5rem; 
    vertical-align: middle;
    margin: 0 5px;
}

/* --- 4. SCROLL INDICATOR (Tight Spacing) --- */
.scroll-indicator {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #b0bec5;
    margin-top: 0px;    /* Removed negative margin */
    margin-bottom: 20px; /* Reduced margin to tighten gap above verse */
    opacity: 0.8;
    cursor: pointer;
}
.scroll-indicator:hover { color: var(--primary-green); opacity: 1; }

/* --- 5. VERSE BANNER (Teal, Tight Spacing, White Text) --- */
.verse-container {
    width: 100%;
    max-width: 900px; /* Smaller width as requested */
    margin: 0 auto;
    padding: 0 20px;
}

.verse-banner {
    /* Emerald-Teal Gradient */
    background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
    color: #ffffff; /* Force White Text */
    border-radius: 24px;
    /* SIGNIFICANTLY REDUCED PADDING for tighter look */
    padding: 50px 30px; 
    margin-bottom: 100px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 137, 123, 0.2);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
}
.verse-banner:hover { transform: scale(1.02); box-shadow: 0 30px 60px rgba(0, 137, 123, 0.3); }

/* Reduced margin below pill */
.verse-badge-wrap { margin-bottom: 15px; } 

.verse-pill {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    color: #ffffff;
    backdrop-filter: blur(5px);
}

/* Reduced margin below main text */
.verse-content-wrap { position: relative; max-width: 700px; margin: 0 auto 20px; }

.verse-text {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1.3;
    font-weight: 400;
    margin: 0;
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.big-quote { font-family: serif; font-size: 6rem; position: absolute; opacity: 0.1; color: #ffffff; line-height: 0; }
.big-quote.left { top: 10px; left: -40px; }
.big-quote.right { bottom: 0px; right: -40px; }

.verse-footer { position: relative; z-index: 2; }
.verse-ref {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 4px;
    margin-bottom: 12px;
    color: #ffffff;
}
.verse-subtext {
    font-size: 0.9rem;
    opacity: 0.9;
    max-width: 550px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    /* Ensure no extra margin at the bottom */
    margin-bottom: 0; 
}

/* --- 6. JOURNEY HEADER --- */
.journey-header-wrap { margin-bottom: 40px; margin-top: 80px; position: relative; }
.journey-sub { font-size: 0.75rem; font-weight: 700; color: #e67e22; text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 10px; }
.journey-title { font-size: 3.5rem; line-height: 1.1; color: #1a1a1a; font-family: var(--font-heading); margin: 0; }
.journey-italic { font-family: var(--font-heading); font-style: italic; font-weight: 400; color: #2d936c; }
.view-all-btn { border: 1px solid #ddd; padding: 10px 24px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #333; float: right; margin-top: -50px; background: #fff; }
.view-all-btn:hover { background: #000; color: #fff; border-color: #000; }

/* --- 7. BENTO GRID --- */
.bento-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 25px; margin-bottom: 80px; }
.bento-item-0 { grid-column: 1 / 2; grid-row: 1 / 3; }
.bento-item-1 { grid-column: 2 / 4; grid-row: 1 / 2; }
.bento-item-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
.bento-item-more { grid-column: 3 / 4; grid-row: 2 / 3; }
.bento-card { position: relative; border-radius: 30px; overflow: hidden; display: block; text-decoration: none; height: 100%; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.bento-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.bento-card:hover img { transform: scale(1.1); }
.bento-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 35px; background: linear-gradient(to top, rgba(0,0,0,0.7) 10%, transparent 100%); color: #fff; z-index: 2; }
.bento-overlay h3 { margin: 0; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.track-pill { background: #2d936c; color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 12px; }
.more-series-card { background: #e8f5e9; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.more-count { background: #fff; width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; color: #2d936c; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* --- 8. ENCOURAGEMENT SECTION --- */
.filter-tabs { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.filter-btn { background: #fff; border: 1px solid #eee; padding: 10px 24px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
.filter-btn.active { background: #000; color: #fff; border-color: #000; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid #f0f0f0; transition: transform 0.3s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.blog-header { position: relative; height: 220px; overflow: hidden; }
.blog-header img { width: 100%; height: 100%; object-fit: cover; }
.card-badge { position: absolute; top: 15px; left: 15px; background: #fff; padding: 6px 12px; border-radius: 20px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.blog-body { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.post-date { color: var(--accent-orange); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.post-title { font-size: 1.35rem; line-height: 1.3; margin-bottom: 15px; font-family: var(--font-heading); }
.read-more-btn { margin-top: auto; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; }

/* --- 9. SINGLE PAGE GRID --- */
.single-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; margin-top: 60px; }
.entry-content p:first-of-type::first-letter { font-size: 3.5rem; float: left; margin-right: 10px; line-height: 0.8; font-weight: 700; }
.sidebar-widget { background: #fff; padding: 30px; border-radius: 20px; border: 1px solid #f7f7f7; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.02); text-align: center; }
.author-card img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; margin: 0 auto; display: block; }
.author-link { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: 2px; display: inline-block; margin-top: 15px; }
.related-post-item { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; text-align: left; }
.related-post-item img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.related-post-item h6 { margin: 0; font-size: 0.95rem; line-height: 1.3; color: #333; }
.tags-widget { background: #fff9fc; border: 1px solid #ffeef5; text-align: left; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { background: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.7rem; color: #555; border: 1px solid #eee; font-weight: 600; }

/* --- 10. FOOTER & MOBILE --- */
footer { padding: 80px 0 40px; margin-top: 100px; background: rgba(255,255,255,0.6); border-top: 1px solid rgba(0,0,0,0.05); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; font-size: 0.85rem; color: #666; }

@media (max-width: 900px) {
    .hero-split, .bento-grid, .single-layout, .footer-grid { grid-template-columns: 1fr; }
    .bento-grid { grid-template-rows: auto; }
    .bento-item-0, .bento-item-1, .bento-item-2, .bento-item-more { grid-column: auto; grid-row: auto; height: 300px; }
    .bento-item-more { height: 200px; }
    .view-all-btn { float: none; display: inline-block; margin-top: 20px; }
    .hero-blob-container { order: -1; margin-bottom: 60px; }
    .hero-title { font-size: 3rem; }
    .verse-banner { padding: 40px 25px; }
    .verse-text { font-size: 1.8rem; }
    .big-quote { font-size: 4rem; }
}

/* --- JOURNEY PAGE STYLES --- */

/* Header Text */
.journey-page-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    margin-bottom: 10px;
}
.text-gradient {
    /* Purple to Orange Gradient */
    background: linear-gradient(90deg, #8e24aa 0%, #ff7043 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}

/* Layout Grid */
.journey-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left wider than right */
    gap: 40px;
    align-items: start;
}

/* --- LEFT COLUMN: TRACK CARDS --- */
.track-section-card {
    background: #fff;
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border: 1px solid #f9f9f9;
}

/* Track Header (Number + Title) */
.track-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}
.track-number {
    background: #f3e5f5; /* Light purple bg */
    color: #8e24aa;      /* Purple text */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.track-title {
    font-size: 1.5rem;
    margin: 0 0 5px;
}
.track-desc {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

/* Track Posts (Horizontal Grid) */
.track-posts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.track-post-item {
    display: block;
    background: #fafafa;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
}
.track-post-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.t-post-img {
    height: 140px;
    overflow: hidden;
}
.t-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.t-post-content {
    padding: 15px;
}
.t-post-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: var(--font-heading);
}
.t-read-btn {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #aaa;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- RIGHT COLUMN: SIDEBAR WIDGETS --- */

.journey-widget {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border: 1px solid #f5f5f5;
}
.journey-widget-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    color: #999;
}

/* 1. Green Focus Card Widget Style */
/* Add class "green-card" to your custom HTML widget */
.green-card {
    background: linear-gradient(135deg, #2d936c 0%, #00695c 100%);
    color: #fff;
}
.green-card h3 {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
}
.green-card h6 {
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* 2. Weekly Challenge Widget Style */
/* Add class "orange-card" to your custom HTML widget */
.orange-card {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
}
.challenge-btn {
    display: block;
    background: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #e65100;
    margin-top: 15px;
    text-transform: uppercase;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .journey-layout { grid-template-columns: 1fr; }
    .track-posts-row { grid-template-columns: 1fr; }
}
/* --- JOURNEY PAGE UPDATES --- */

/* 1. Top Compass Icon */
.journey-top-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #fff3e0; /* Pale Orange Background */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 1px solid #ffe0b2;
}

/* 2. Blog Card Styling & Interactions */
.track-posts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.track-post-item {
    display: block;
    background: #ffffff; /* White card */
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0; /* Subtle border */
}

/* HOVER: Card lifts up */
.track-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Image Container & Zoom Effect */
.t-post-img {
    height: 180px; /* Taller image as per screenshot */
    overflow: hidden;
    border-radius: 20px; /* Rounded corners on image itself */
    margin: 10px 10px 0; /* Spacing inside card */
}

.t-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px; /* Inner radius matching screenshot */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* HOVER: Image Zooms */
.track-post-item:hover .t-post-img img {
    transform: scale(1.1);
}

/* Content Styling */
.t-post-content { padding: 20px 15px; }

/* HOVER: Title turns Green */
.t-post-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 15px;
    font-family: var(--font-heading);
    color: #1a1a1a;
    transition: color 0.3s ease;
    line-height: 1.3;
}
.track-post-item:hover .t-post-title {
    color: #2d936c; /* Green on hover */
}

/* Read Now Button */
.t-read-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f5f5f5;
    padding-top: 15px;
}
.t-read-text {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9e9e9e; /* Grey text */
}
.t-read-arrow {
    font-size: 1rem;
    color: #e0e0e0; /* Light grey arrow */
    transition: 0.3s;
}
.track-post-item:hover .t-read-arrow {
    color: #2d936c; /* Green arrow on hover */
    transform: translateX(5px);
}

/* --- SIDEBAR WIDGETS --- */
/* Weekly Challenge Card */
.orange-card {
    background: #fff8f0; /* Very light orange/cream */
    border: 1px solid #ffecb3;
}
.widget-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.widget-header-row svg {
    stroke: #ef6c00;
    width: 16px;
    height: 16px;
}
.widget-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ef6c00;
}

/* Avatars & Count */
.challenge-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.avatar-group { display: flex; }
.avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    border: 2px solid #fff;
    margin-right: -10px; /* Overlap */
}
.count-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ef6c00;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    z-index: 2;
    transition: transform 0.2s;
}

/* Challenge Button */
.challenge-btn {
    display: block;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ef6c00;
    text-transform: uppercase;
    border: 1px solid #ffe0b2;
    cursor: pointer;
    transition: all 0.3s ease;
}
.challenge-btn:hover {
    background: #ef6c00;
    color: #fff;
}

/* "You're In" State */
.challenge-btn.btn-joined {
    background: #ef6c00; /* Solid Orange */
    color: #fff;
    border-color: #ef6c00;
    cursor: default;
}
/* --- PRAYER WALL STYLES --- */

/* Header Elements */
.prayer-icon-circle {
    width: 50px; height: 50px;
    background: #f3e5f5; /* Light Purple */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 20px;
}
.prayer-page-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin-bottom: 15px;
}
.prayer-sub {
    color: #666; max-width: 600px; margin: 0 auto 30px;
    font-size: 1rem; line-height: 1.6;
}
.btn-toggle-form {
    background: #eee;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-toggle-form:hover { background: #ddd; }

/* Form Container (Purple Top Border) */
.prayer-form-wrapper {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    max-width: 600px;
    margin: 0 auto 60px;
    overflow: hidden;
    border-top: 6px solid #ab47bc; /* Purple accent */
    animation: fadeIn 0.5s ease;
}
.prayer-form-card { padding: 40px; }
.form-title { font-family: var(--font-heading); text-align: center; margin-bottom: 30px; font-size: 1.8rem; }
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; color: #aaa; margin-bottom: 8px; letter-spacing: 1px;
}
.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fafafa;
}
.form-input:focus { outline: none; border-color: #ab47bc; background: #fff; }

.btn-purple-submit {
    width: 100%;
    background: #ab47bc; /* Purple */
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
}
.btn-purple-submit:hover { background: #9c27b0; }

/* Grid Layout */
.prayer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.prayer-card {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border: 1px solid #f9f9f9;
    display: flex; flex-direction: column;
}

/* Card Header */
.pc-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.pc-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 700; font-family: var(--font-heading);
}
.pc-name { margin: 0; font-size: 0.95rem; font-weight: 700; }
.pc-time { font-size: 0.65rem; text-transform: uppercase; color: #bbb; font-weight: 700; }

/* Card Body */
.pc-body { flex-grow: 1; margin-bottom: 20px; }
.pc-body p { font-size: 0.95rem; line-height: 1.6; color: #555; font-family: var(--font-heading); font-style: italic; }

/* Card Footer (Avatars + Heart) */
.pc-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #f5f5f5; padding-top: 15px;
}
.praying-count-group { display: flex; align-items: center; gap: 8px; }
.p-circles { display: flex; }
.p-circles span {
    width: 20px; height: 20px; background: #e0e0e0;
    border-radius: 50%; border: 2px solid #fff;
    margin-right: -8px; /* Overlap */
}
.p-text { font-size: 0.7rem; color: #999; margin-left: 10px; }

.btn-heart {
    background: transparent; border: none; cursor: pointer; padding: 5px;
    color: #ccc; transition: 0.2s;
}
.btn-heart svg { width: 20px; height: 20px; }
.btn-heart:hover { color: #ef5350; }
.btn-heart.hearted { color: #ef5350; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 1. PRAYER WALL BUTTON (Black Pill) --- */
.btn-black-pill {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-black-pill:hover {
    transform: translateY(-2px);
    background: #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- 2. UNIVERSAL FOOTER STYLES --- */
.site-footer {
    background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%); /* Subtle fade */
    padding: 80px 0 30px;
    margin-top: 100px;
    border-top: 1px solid rgba(0,0,0,0.03);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* Brand Column */
.footer-sub {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
    margin-top: -15px;
    margin-bottom: 15px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}
.footer-socials a {
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #eee;
    border-radius: 50%;
    transition: 0.3s;
}
.footer-socials a svg { width: 16px; height: 16px; }
.footer-socials a:hover { background: #000; color: #fff; border-color: #000; }

/* Links Columns */
.footer-heading {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1a1a1a;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    font-size: 0.85rem;
    color: #666;
    transition: 0.2s;
    font-weight: 500;
}
.footer-links a:hover { color: #000; transform: translateX(3px); display: inline-block; }

/* Icons in Headings */
.icon-scout, .icon-down { font-size: 1rem; opacity: 0.8; }

/* Bottom Bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    padding-top: 30px;
    font-size: 0.7rem;
    color: #999;
    font-weight: 600;
}
.legal-links a { margin-left: 20px; color: #999; }
.legal-links a:hover { color: #666; }

/* Mobile Responsive */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 15px; }
    .legal-links a { margin: 0 10px; }
}

/* --- PRAYER PAGE ICON (White Soft Box) --- */
/* --- PRAYER ICON BOX (Matches Screenshot) --- */
.prayer-icon-box {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border-radius: 20px; /* Squircle */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px;
    /* Soft Purple Shadow */
    box-shadow: 0 10px 30px rgba(171, 71, 188, 0.15);
}
.prayer-icon-box svg {
    stroke: #9c27b0; /* Vivid Purple */
    stroke-width: 1.8;
}

/* --- FOOTER STYLES (Glassy & Coloured) --- */

.site-footer {
    position: relative;
    /* Transparent background to let Page Gradient show through */
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(15px); /* Strong blur for frosted glass effect */
    padding: 80px 0 30px;
    margin-top: 100px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

/* THE RAINBOW LINE (Thicker & Brighter) */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Thicker line */
    /* Vibrant Gradient: Green -> Purple -> Orange */
    background: linear-gradient(90deg, #c8e6c9 0%, #ce93d8 50%, #ffe0b2 100%);
    display: block;
    opacity: 1;
}

/* Footer Content */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr; 
    gap: 60px;
    margin-bottom: 60px;
}

/* Brand Section */
.logo-box {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.logo-b {
    background: #1a1a1a; color: #fff; font-family: serif;
    padding: 2px 8px; border-radius: 4px; font-size: 1rem;
}
.footer-tagline {
    font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #666; font-weight: 800; margin-bottom: 20px; margin-left: 42px; 
}
.footer-desc {
    font-size: 0.9rem;
    color: #444; /* Darker for readability on glass */
    line-height: 1.6; margin-bottom: 25px; max-width: 300px;
}

/* Social Icons */
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    color: #444; width: 36px; height: 36px;
    display: flex; justify-content: center; align-items: center;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;
    transition: 0.2s; background: rgba(255,255,255,0.6);
}
.footer-socials a:hover { border-color: #000; color: #000; background: #fff; }

/* Links */
.footer-heading {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.5px; color: #1a1a1a; margin-bottom: 25px;
    display: flex; align-items: center; gap: 8px;
}
.footer-links a {
    font-size: 0.9rem; color: #555; font-weight: 600; transition: color 0.2s;
}
.footer-links a:hover { color: #000; }
.footer-links li { margin-bottom: 12px; }

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 30px;
    display: flex; justify-content: space-between;
    font-size: 0.75rem; color: #666; font-weight: 600;
}
.legal-links a { margin-left: 20px; color: #666; }
.legal-links a:hover { color: #000; }

/* --- ABOUT PAGE STYLES --- */

/* Layout Grid */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* LEFT: Visual Styling */
.about-visual {
    position: relative;
    padding-left: 20px; /* Space for blob offset */
    padding-bottom: 20px;
}

/* The Purple Blob Background */
.about-blob-bg {
    position: absolute;
    top: 20px;
    left: -20px;
    width: 90%;
    height: 100%;
    background: #e1bee7; /* Soft Purple */
    border-radius: 40px;
    z-index: -1;
}

/* The Portrait Image */
.about-portrait {
    width: 100%;
    height: auto;
    border-radius: 30px;
    object-fit: cover;
    aspect-ratio: 3 / 4; /* Portrait ratio */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    background: #fff;
}

/* The Floating Quote */
.about-quote-badge {
    position: absolute;
    bottom: 40px;
    right: -20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #f9f9f9;
}

/* RIGHT: Content Styling */
.about-content {
    padding-right: 20px;
}

.about-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.icon-sparkle { color: #2d936c; font-size: 1rem; }

/* --- ABOUT PAGE TYPOGRAPHY (Exact Match) --- */

/* --- ABOUT PAGE TYPOGRAPHY (Smaller & Thinner) --- */

.about-heading {
    font-family: 'Playfair Display', serif; 
    font-size: 3.5rem;  /* Reduced from 5rem to 3.5rem */
    font-weight: 300;   /* Thinner weight (Light) */
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 25px;
    letter-spacing: 0px;
}

/* The Name (e.g., "Sarah.") */
.about-name-gradient {
    font-weight: 600; /* Semi-bold (less heavy than before) */
    
    /* Vibrant Gradient: Coral Orange -> Deep Purple */
    background: linear-gradient(90deg, #ff7043 0%, #ab47bc 100%);
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    
    display: inline-block;
}
.about-body p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 25px;
}

/* Footer Link */
.about-footer-link {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.link-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a1a;
    cursor: pointer;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    transition: 0.3s;
}
.link-label:hover { border-color: #000; }

/* Mobile Responsive */
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 50px; }
    .about-blob-bg { left: 10px; width: 95%; }
    .about-quote-badge { right: 0; }
    .about-heading { font-size: 3rem; }
}

/* LEFT: Visual Styling */
.about-visual {
    position: relative;
    padding-left: 20px; 
    padding-bottom: 20px;
}

/* 1. The Wrapper (Masks the zoom) */
.about-img-wrapper {
    border-radius: 30px; /* Round corners on the container */
    overflow: hidden;    /* Clips the image when it zooms */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    background: #fff;
    aspect-ratio: 3 / 4; /* Maintains portrait shape */
    position: relative;
    z-index: 1;
}

/* 2. The Image (Animates) */
.about-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Smooth Zoom Transition */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* 3. The Hover Effect */
.about-img-wrapper:hover .about-portrait {
    transform: scale(1.1); /* Zooms in 10% */
}

/* The Purple Blob Background */
.about-blob-bg {
    position: absolute;
    top: 20px;
    left: -20px;
    width: 90%;
    height: 100%;
    background: #e1bee7; 
    border-radius: 40px;
    z-index: -1;
}

/* --- CONTACT PAGE STYLES --- */

/* Header */
.contact-icon-box {
    width: 50px; height: 50px;
    background: #fff3e0; /* Pale Orange */
    border-radius: 15px;
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 25px;
}
.contact-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 20px;
    color: #1a1a1a;
}
.contact-sub {
    color: #555;
    max-width: 500px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Sidebar is smaller */
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Left Sidebar (Connect Card) */
.connect-card {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    height: 100%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
.connect-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Info Items */
.info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    align-items: flex-start;
}
.info-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    flex-shrink: 0;
}
.green-icon { background: #e8f5e9; } /* Light Green */

.info-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #aaa;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.info-link {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    word-break: break-all;
}

/* Black Prayer Card (Inside Left Sidebar) */
.black-prayer-card {
    background: #1a1a1a;
    color: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-top: 60px; /* Push to bottom */
    position: relative;
}
.bpc-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #fff;
}
.bpc-text {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 25px;
    line-height: 1.5;
}
.bpc-link {
    font-size: 0.7rem;
    color: #ffb74d; /* Orange Accent */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
}
.bpc-link:hover { color: #fff; }

/* Right Column (Form Card) */
.form-card {
    background: #fff;
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.form-row { display: flex; gap: 20px; }
.form-group { margin-bottom: 25px; width: 100%; }
.form-group label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #aaa;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Inputs matching screenshot style */
.form-group input, 
.form-group textarea {
    width: 100%;
    background: #fafafa; /* Very light grey */
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 15px 20px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #333;
    transition: 0.3s;
}
.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.form-group textarea { resize: vertical; }

/* Submit Button */
.btn-black-submit {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 8px; /* Slightly rounded */
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-black-submit:hover { background: #000; transform: translateY(-2px); }

/* Mobile */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
    .connect-card { padding: 30px; }
    .form-card { padding: 30px; }
}
/* --- SINGLE BLOG PAGE LAYOUT --- */
.single-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Content 2/3, Sidebar 1/3 */
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* LEFT COLUMN STYLES */
.post-cat-badge {
    display: inline-block;
    background: #e8f5e9; /* Light Green */
    color: #2e7d32;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.post-title-large {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 25px;
}

.post-meta-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}
.meta-avatar {
    border-radius: 50%;
    width: 45px; height: 45px;
}
.meta-text {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}
.meta-author { font-weight: 700; color: #000; }
.meta-date { color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }

.post-featured-img img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Rounded corners like screenshot */
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- CUSTOM AUDIO PLAYER (Pill Style) --- */
.devotional-player {
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 50px; /* Pill Shape */
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    transition: 0.3s;
}
.devotional-player.playing {
    border-color: #2d936c;
    background: #e8f5e9;
}

.play-btn {
    width: 45px; height: 45px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    border: none;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s;
}
.play-btn:hover { transform: scale(1.05); }

.player-info { display: flex; flex-direction: column; flex-grow: 1; }
.player-label {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #1a1a1a;
}
.player-time { font-size: 0.75rem; color: #888; margin-top: 2px; }

/* Fake Wave Animation */
.player-wave { display: flex; gap: 3px; align-items: center; height: 20px; }
.player-wave span {
    width: 3px; background: #ddd; height: 10px; border-radius: 2px;
}
.playing .player-wave span {
    background: #2d936c;
    animation: wave 1s infinite ease-in-out;
}
.playing .player-wave span:nth-child(2) { animation-delay: 0.1s; }
.playing .player-wave span:nth-child(3) { animation-delay: 0.2s; }
.playing .player-wave span:nth-child(4) { animation-delay: 0.3s; }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 20px; } }

/* Content Typography */
.entry-content p {
    font-family: 'Merriweather', serif; /* or your body font */
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 25px;
}
/* Drop Cap */
.entry-content p:first-of-type::first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: 0.85;
    font-weight: 700;
    margin-right: 10px;
    color: #1a1a1a;
}
/* Blockquote */
.entry-content blockquote {
    border-left: 3px solid #2d936c;
    padding-left: 20px;
    font-style: italic;
    color: #555;
    margin: 30px 0;
    font-size: 1.2rem;
}

/* Footer Tags */
.post-footer-tags { margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; }
.tag-chip {
    display: inline-block;
    background: #f5f5f5;
    color: #666;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 10px;
    letter-spacing: 0.5px;
}
.tag-chip:hover { background: #e0e0e0; color: #000; }


/* --- SIDEBAR STYLES --- */

/* 1. Author Widget */
.sidebar-widget {
    background: #fff;
    border: 1px solid #f9f9f9;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.author-widget { text-align: center; }
.author-widget-img img {
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.aw-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: 10px; }
.aw-bio { font-size: 0.85rem; color: #666; line-height: 1.6; margin-bottom: 20px; }
.aw-btn {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 8px 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.2s;
}
.aw-btn:hover { border-color: #000; background: #000; color: #fff; }

/* 2. More Like This */
.widget-heading {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; color: #aaa;
}
.related-item {
    display: flex; gap: 15px; margin-bottom: 20px; text-decoration: none;
}
.ri-thumb img {
    width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
}
.ri-info h6 {
    margin: 0 0 5px; font-size: 0.9rem; color: #333; line-height: 1.4;
}
.ri-info span { font-size: 0.7rem; color: #999; text-transform: uppercase; }
.related-item:hover h6 { color: #2d936c; }

/* 3. Trending Topics */
.topics-widget { background: #fdf2ff; /* Light purple bg from screenshot */ border: none; }
.topics-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-pill {
    background: #fff; color: #333; padding: 6px 14px; border-radius: 8px;
    font-size: 0.75rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: 0.2s;
}
.topic-pill:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.05); }

/* --- COMMENTS --- */
.comments-section-styled { margin-top: 60px; }
.comment-form textarea, .comment-form input {
    width: 100%; padding: 15px; border: 1px solid #eee; background: #fbfbfb; border-radius: 8px; margin-bottom: 15px;
}
.form-submit .submit {
    background: #1a1a1a; color: #fff; border: none; padding: 10px 25px; text-transform: uppercase; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; cursor: pointer;
}

/* MOBILE */
@media (max-width: 900px) {
    .single-post-grid { grid-template-columns: 1fr; }
    .post-title-large { font-size: 2rem; }
}
/* --- GLOBAL RESET FOR LAYOUT FIXES --- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* --- SINGLE BLOG LAYOUT (Fixes sidebar dropping) --- */
.single-blog-container {
    max-width: 1150px; /* Limits overall width to prevent screen overflow */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.single-post-grid {
    display: grid;
    /* 70% content, 30% sidebar, with a minimum width for sidebar */
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); 
    gap: 80px; /* Spacious gap */
    align-items: start; /* Prevents sidebar from stretching vertically */
}

/* --- LEFT COLUMN STYLES --- */

/* Category Badge */
.post-cat-badge {
    display: inline-block;
    background: #e8f5e9; /* Light green */
    color: #2e7d32;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 25px;
}

/* Title */
.post-title-large {
    font-family: 'Playfair Display', serif; /* Ensure you have this font loaded */
    font-size: 3.2rem;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 30px;
}

/* Meta */
.post-meta-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.meta-avatar { border-radius: 50%; }
.meta-text { display: flex; flex-direction: column; }
.meta-author { font-weight: 700; color: #000; font-size: 1rem; }
.meta-date { color: #888; font-size: 0.85rem; margin-top: 4px; }

/* Featured Image */
.post-featured-img-wrapper img {
    border-radius: 24px; /* Soft corners */
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    margin-bottom: 50px;
}

/* --- AUDIO PLAYER (Pill Style) --- */
.devotional-player {
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 60px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}
.devotional-player.playing {
    border-color: #2d936c;
    background: #f1f8f3;
}
.play-btn {
    width: 55px; height: 55px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    border: none;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s;
}
.play-btn:hover { transform: scale(1.05); background: #000; }
.player-info { flex-grow: 1; }
.player-label {
    display: block; font-size: 0.7rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #1a1a1a;
}
.player-time { font-size: 0.8rem; color: #666; }

/* Wave Animation */
.player-wave { display: flex; gap: 4px; align-items: center; height: 24px; }
.player-wave span { width: 4px; background: #ddd; height: 10px; border-radius: 4px; transition: 0.3s; }
.playing .player-wave span { background: #2d936c; animation: wave 1.2s infinite ease-in-out; }
.playing .player-wave span:nth-child(2) { animation-delay: 0.1s; }
.playing .player-wave span:nth-child(3) { animation-delay: 0.2s; }
.playing .player-wave span:nth-child(4) { animation-delay: 0.3s; }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 24px; } }

/* --- BODY CONTENT TYPOGRAPHY --- */
.entry-content p {
    font-family: 'Merriweather', Georgia, serif; /* Ensure a good body serif is loaded */
    font-size: 1.15rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 30px;
}
/* Dropcap style */
.entry-content > p:first-of-type::first-letter {
    float: left;
    font-size: 3.8rem;
    line-height: 0.8;
    font-weight: 700;
    margin-right: 12px;
    margin-top: 6px;
    color: #1a1a1a;
}
.entry-content h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-top: 50px; margin-bottom: 25px; }
.entry-content blockquote {
    border-left: 4px solid #2d936c;
    padding: 10px 0 10px 30px;
    margin: 40px 0;
    font-size: 1.3rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #444;
}

/* Footer Tags */
.post-footer-tags { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; }
.post-footer-tags a {
    display: inline-block; background: #f5f5f5; color: #666; padding: 6px 15px; border-radius: 30px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; text-decoration: none; margin-right: 10px; margin-bottom: 10px; letter-spacing: 1px; transition: 0.2s;
}
.post-footer-tags a:hover { background: #1a1a1a; color: #fff; }

/* --- SIDEBAR STYLES (Fixed & Elegant) --- */
.post-sidebar { position: sticky; top: 100px; } /* Optional: Makes sidebar stick on scroll */

.sidebar-widget {
    background: #fff;
    border: 1px solid #f5f5f5;
    border-radius: 24px;
    padding: 35px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.widget-heading {
    font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; color: #999;
}

/* 1. Author Widget */
.author-widget { text-align: center; }
.author-widget-img img {
    border-radius: 50%; margin-bottom: 20px; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.aw-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 15px; color: #000; }
.aw-bio { font-size: 0.9rem; color: #666; line-height: 1.7; margin-bottom: 25px; }
.aw-btn {
    display: inline-block; border: 2px solid #eee; padding: 10px 24px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; color: #1a1a1a; text-decoration: none; border-radius: 30px; transition: 0.3s;
}
.aw-btn:hover { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }

/* 2. More Like This */
.related-item { display: flex; gap: 18px; margin-bottom: 25px; text-decoration: none; align-items: center; }
.ri-thumb img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; }
.ri-info h6 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
.ri-info span { font-size: 0.7rem; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.related-item:hover h6 { color: #2d936c; }

/* 3. Trending Topics (Purple Background) */
.topics-widget {
    background: #fdf2ff; /* Light Purple background from screenshot */
    border: none;
    box-shadow: none;
}
.topics-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-pill {
    background: #fff; color: #1a1a1a; padding: 8px 16px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 10px rgba(171, 71, 188, 0.1); transition: 0.2s;
}
.topic-pill:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(171, 71, 188, 0.2); color: #ab47bc; }

/* --- RESPONSIVE BREAKPOINT --- */
@media (max-width: 1024px) {
    .single-post-grid {
        grid-template-columns: 1fr; /* Stack them on smaller screens */
        gap: 50px;
    }
    .post-sidebar { position: static; /* Don't stick on mobile */ }
    .post-title-large { font-size: 2.5rem; }
}

/* --- HEADER STYLES --- */
.site-header {
    padding: 15px 40px;
    background: #fff;
    border-bottom: 1px solid #fafafa;
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
}

/* Brand Area (Logo + Text) */
.brand-area {
    display: flex;
    align-items: center;
    gap: 15px;
}
.custom-logo {
    height: 40px; width: auto; /* Restrict logo height */
}
.logo-placeholder {
    width: 40px; height: 40px; background: #000; color: #fff;
    display: flex; justify-content: center; align-items: center;
    font-family: serif; font-weight: 700; border-radius: 4px;
}
.site-title-link {
    display: flex; flex-direction: column; text-decoration: none;
}
.site-title-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}
.site-tagline {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #999;
    margin-top: 4px;
}

/* Nav */
.main-nav ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.main-nav a {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    transition: 0.2s;
}
.main-nav a:hover { color: #000; }

/* Actions */
.header-actions { display: flex; align-items: center; gap: 20px; }
.search-toggle {
    background: none; border: none; cursor: pointer; color: #333;
}
.btn-pray-header {
    background: #1a1a1a; color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.btn-pray-header:hover { background: #000; }


/* --- SINGLE POST TOP BAR (Back & Share) --- */
.post-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
}
.back-link {
    text-decoration: none; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #999; border: 1px solid #eee; padding: 8px 15px; border-radius: 20px; transition: 0.2s;
}
.back-link:hover { border-color: #333; color: #333; }

.post-actions { display: flex; gap: 10px; }
.action-btn {
    width: 35px; height: 35px; border-radius: 50%; border: 1px solid #eee; background: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; color: #666; transition: 0.2s;
}
.action-btn:hover { border-color: #ccc; color: #000; }
.action-btn.saved { color: #2d936c; border-color: #2d936c; }

/* --- CONTENT CENTER STYLES --- */
.post-cat-center, .post-title-center, .post-meta-center { text-align: center; }
.cat-pill {
    background: #e8f5e9; color: #2e7d32; padding: 5px 12px; border-radius: 4px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
}
.post-title-center {
    font-family: 'Playfair Display', serif; font-size: 3rem; margin: 20px 0; color: #1a1a1a;
}
.post-meta-center {
    display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 40px; font-size: 0.75rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.meta-avatar-small { width: 30px; height: 30px; border-radius: 50%; }
.meta-auth-name { color: #000; }


/* --- SIDEBAR REFINEMENTS --- */
/* Author Widget */
.sidebar-widget.author-widget {
    text-align: center; padding: 40px 30px; border-radius: 20px;
}
.author-widget-img img {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 15px;
    border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.aw-link {
    font-size: 0.65rem; font-weight: 800; color: #2d936c; text-transform: uppercase; letter-spacing: 1px; text-decoration: none;
}
.aw-link:hover { text-decoration: underline; }

/* Related Items (Small) */
.related-item-small {
    display: flex; gap: 12px; margin-bottom: 20px; text-decoration: none; align-items: center;
}
.ris-thumb img {
    width: 50px; height: 50px; border-radius: 8px; object-fit: cover;
}
.ris-info h6 {
    margin: 0; font-size: 0.8rem; /* Smaller font */ font-weight: 700; color: #333; line-height: 1.3;
}
.ris-info span {
    font-size: 0.6rem; color: #aaa; text-transform: uppercase;
}
.related-item-small:hover h6 { color: #2d936c; }

/* Mobile */
@media (max-width: 900px) {
    .header-container { flex-direction: column; gap: 20px; }
    .main-nav ul { gap: 15px; flex-wrap: wrap; justify-content: center; }
}
/* --- HEADER STYLES (Aligned to Grid) --- */
.site-header {
    background: #fff;
    padding: 20px 0; /* Vertical padding */
    border-bottom: 1px solid #f9f9f9;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    /* EXACT MATCH to Blog Container to ensure alignment */
    max-width: 1150px; 
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* BRANDING */
.brand-area { display: flex; align-items: center; gap: 12px; }

.custom-logo { height: 45px; width: auto; }

.logo-placeholder {
    width: 40px; height: 40px; background: #1a1a1a; color: #fff;
    display: flex; justify-content: center; align-items: center;
    font-family: serif; font-weight: 700; border-radius: 8px; text-decoration: none;
}
.site-title-link { display: flex; flex-direction: column; text-decoration: none; }
.site-title-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}
.site-tagline {
    font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #999; margin-top: 5px; font-weight: 600;
}

/* NAVIGATION */
.nav-links { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; }
.nav-links a {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
    transition: 0.2s;
}
.nav-links a:hover { color: #000; }

/* HEADER ACTIONS */
.header-actions { display: flex; align-items: center; gap: 15px; }

/* Search Icon Button */
.search-toggle-btn {
    background: none; border: none; cursor: pointer; color: #333;
    padding: 8px; display: flex; align-items: center;
    transition: 0.2s;
}
.search-toggle-btn:hover { color: #000; transform: scale(1.1); }

/* Pray Button */
.btn-pray-header {
    background: #1a1a1a; color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.btn-pray-header:hover { background: #000; transform: translateY(-2px); }
.heart-icon { font-size: 0.8rem; }


/* --- SEARCH OVERLAY (Full Screen) --- */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: 0.3s;
}
.search-overlay.active { opacity: 1; visibility: visible; }

.close-search {
    position: absolute; top: 30px; right: 40px;
    font-size: 3rem; background: none; border: none; cursor: pointer; color: #333; line-height: 1;
}
.search-wrap { width: 100%; max-width: 800px; text-align: center; }

.search-form-large {
    display: flex; border-bottom: 2px solid #eee; padding-bottom: 10px;
}
.search-input-large {
    width: 100%; border: none; background: none;
    font-family: 'Playfair Display', serif;
    font-size: 3rem; color: #1a1a1a; outline: none;
}
.search-input-large::placeholder { color: #ddd; }
.search-submit-btn {
    background: none; border: none; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; cursor: pointer;
}
.search-tip { margin-top: 20px; color: #999; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

/* Responsive */
@media (max-width: 900px) {
    .header-container { flex-direction: column; gap: 20px; padding: 20px; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
}
/* --- 1. GLOBAL CONTAINER ALIGNMENT --- */
/* This ensures Header Logo and Blog Content start at the same line */
.header-container, 
.single-blog-container {
    max-width: 1200px; 
    margin: 0 auto;
    padding-left: 40px;  /* Critical for left alignment */
    padding-right: 40px;
    box-sizing: border-box;
}

/* --- 2. TRANSPARENT HEADER --- */
.site-header {
    background: transparent; /* Transparent as requested */
    padding: 25px 0;
    border-bottom: none; /* Removed line */
    position: relative; /* Sit naturally on top of page background */
    z-index: 100;
}

.header-container {
    display: flex;
    align-items: center;
    /* "margin-right: auto" on brand-area will handle spacing now */
}

/* --- 3. LOGO & BRANDING --- */
.brand-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto; /* Pushes Menu away to the right */
    padding-right: 50px; /* Extra breathing room */
}

.custom-logo { height: 50px; width: auto; }
.logo-placeholder {
    width: 45px; height: 45px; background: #1a1a1a; color: #fff;
    display: flex; justify-content: center; align-items: center;
    font-family: serif; font-weight: 700; border-radius: 8px; text-decoration: none;
}
.site-title-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem; font-weight: 700; color: #1a1a1a; line-height: 1;
}
.site-tagline {
    font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #666; margin-top: 5px; font-weight: 600;
}

/* --- 4. NAVIGATION --- */
.nav-links { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.nav-links a {
    text-decoration: none; font-size: 0.75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; color: #333;
}
.nav-links a:hover { color: #000; }

/* Actions */
.header-actions { margin-left: 40px; display: flex; align-items: center; gap: 15px; }
.btn-pray-header {
    background: #1a1a1a; color: #fff; padding: 10px 24px; border-radius: 30px;
    text-decoration: none; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px;
}

/* --- 5. BLOG PAGE LAYOUT & SIDEBAR --- */
.single-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Content vs Sidebar */
    gap: 60px;
    margin-top: 40px;
}

/* Sidebar Widgets */
.sidebar-widget {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

/* Fix for Trending Widget */
.topics-widget { 
    display: block !important; /* Force show */
    background: #fff; 
}
.topics-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-pill {
    background: #fdf2ff; /* Light Purple Background */
    color: #ab47bc; /* Purple Text */
    padding: 8px 16px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 700; text-decoration: none;
}
.topic-pill:hover { background: #ab47bc; color: #fff; }

/* Responsive */
@media (max-width: 900px) {
    .header-container { flex-direction: column; gap: 20px; padding: 20px; }
    .brand-area { margin-right: 0; }
    .single-post-grid { grid-template-columns: 1fr; }
}
/* --- 1. STRICT GLOBAL ALIGNMENT --- */
/* This aligns Header, Footer, and Content perfectly vertically */
.header-container, 
.footer-container, 
.container, 
.single-blog-container {
    max-width: 1250px; /* Standard wide width */
    margin: 0 auto;
    
    /* CRITICAL ALIGNMENT: This padding defines the vertical line */
    padding-left: 50px; 
    padding-right: 50px;
    
    box-sizing: border-box;
}

/* --- 2. HEADER LOGO SIZING --- */
.brand-area .custom-logo-link img {
    height: 45px; /* Adjust header logo size */
    width: auto;
    display: block;
}

/* --- 3. FOOTER LOGO SIZING --- */
/* Makes sure footer logo looks good (often slightly larger than header) */
.footer-logo-wrap .custom-logo-link img {
    height: 55px; 
    width: auto;
    margin-bottom: 15px;
    display: block;
}

/* --- 4. FOOTER STYLES CLEANUP --- */
.site-footer {
    position: relative;
    background: transparent;
    padding: 60px 0 30px;
    margin-top: 100px;
}
.footer-rainbow-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, #c8e6c9 0%, #ce93d8 50%, #ffe0b2 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-tagline {
    font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #999; font-weight: 700; margin-bottom: 20px;
    /* Removed margin-left to align with logo */
    margin-left: 0; 
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .header-container, .footer-container, .container {
        padding-left: 20px; /* Smaller padding on mobile */
        padding-right: 20px;
    }
    .footer-grid { grid-template-columns: 1fr; }
}
/* --- 1. HEADER (Static & Transparent) --- */
.site-header {
    position: absolute; /* Sits on top, but scrolls away (Static behavior) */
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    z-index: 100;
    padding: 30px 0; /* Standard header vertical padding */
}

/* --- 2. CONTENT SPACING (Reduced Gap) --- */
/* This pushes the text down JUST enough so the logo doesn't cover it */
.home-hero-section, 
.page-template-default .container,
.single-post-grid {
    padding-top: 140px; /* Reduced from 200px to fix the gap */
}

/* --- 3. STRICT ALIGNMENT --- */
/* Ensures Header Logo and Content start at the exact same vertical line */
.header-container, 
.container, 
.single-blog-container,
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    
    padding-left: 6vw;  /* Keeps logo and "Faith" text aligned */
    padding-right: 6vw;
    
    box-sizing: border-box;
}

/* --- 4. LOGO ALIGNMENT FIX --- */
.brand-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto;
}
.custom-logo-link img, .custom-logo {
    margin: 0; 
    display: block;
    max-height: 65px; 
    width: auto;
}

/* --- 1. GLOBAL LAYOUT FIX (Prevents Header Overlap) --- */
body {
    /* Pushes ALL content down so it's not hidden behind the header */
    padding-top: 140px; 
    position: relative;
}

/* --- 2. HEADER STYLES (Static & Transparent) --- */
.site-header {
    position: absolute; /* Sits on top of the background */
    top: 0;
    left: 0;
    width: 100%;
    height: 140px; /* Matches the body padding */
    background: transparent !important;
    z-index: 999;
    display: flex;
    align-items: center; /* Vertically centers logo in the header space */
}

/* --- 3. STRICT ALIGNMENT CLASS --- */
/* We use this shared logic for Header, Content, and Footer */
.header-container, 
.container, 
.single-blog-container, 
.footer-container {
    max-width: 1400px; /* Maximum width of the site */
    width: 100%;       /* Ensure it fills smaller screens */
    margin: 0 auto;    /* Centers the container */
    
    /* THE ALIGNMENT LOCK: */
    padding-left: 6vw;  
    padding-right: 6vw;
    
    box-sizing: border-box;
}

/* --- 4. LOGO & NAV --- */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto;
    /* Remove any default margins that might shift alignment */
    padding: 0; 
}

.custom-logo-link img, .custom-logo {
    margin: 0;
    display: block;
    max-height: 60px; /* Controls logo size */
    width: auto;
}

/* Remove the specific padding we added earlier since Body handles it now */
.home-hero-section, 
.page-template-default .container, 
.single-post-grid {
    padding-top: 0 !important; 
}
/* --- 1. MAIN CARD CONTAINER --- */
/* This wraps the entire blog post in a white box */
.single-blog-container {
    max-width: 1200px; /* Stops it from stretching to full screen */
    width: 92%;        /* Responsive width for smaller screens */
    margin: 0 auto;    /* Centers the card in the middle of the page */
    
    background: #ffffff;
    border-radius: 40px; /* Adds the modern rounded corners */
    padding: 60px 80px;  /* Adds internal spacing so text isn't touching edges */
    box-shadow: 0 20px 60px rgba(0,0,0,0.04); /* Subtle shadow for depth */
    
    position: relative;
    z-index: 5; /* Ensures it sits on top of any background graphics */
}

/* --- 2. LAYOUT GRID FIX --- */
/* Ensures the internal grid fits perfectly inside the new card */
.single-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Content 66% | Sidebar 33% */
    gap: 60px;
    width: 100%;
}

/* --- 3. ALIGNMENT TWEAK --- */
/* Since we boxed the content, we need to ensure the Header Logo aligns with this box */
.header-container {
    max-width: 1200px; /* Match the blog card width */
    width: 92%;
    margin: 0 auto;
    padding-left: 0;   /* Remove extra padding since we align by max-width now */
    padding-right: 0;
}

/* --- 4. MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .single-blog-container {
        padding: 40px 30px; /* Reduce padding on tablets/mobile */
        width: 96%;
    }
    .single-post-grid {
        grid-template-columns: 1fr; /* Stack sidebar below content */
        gap: 40px;
    }
}
/* --- 1. RESPONSIVE IMAGES (Prevents Layout Blowout) --- */
/* This forces large images (like your infographic) to shrink to fit the container */
.entry-content img,
.post-content-area img,
.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes weird gaps below images */
}

/* --- 2. GRID LAYOUT FIX (Prevents Sidebar Squashing) --- */
.single-post-grid {
    display: grid;
    /* FIX: The 'minmax' values prevent the sidebar from disappearing */
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); 
    gap: 60px;
    width: 100%;
    align-items: start; /* Keeps sidebar at the top */
}

/* --- 3. MAIN CARD CONTAINER --- */
.single-blog-container {
    max-width: 1200px;
    width: 92%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 40px;
    padding: 60px 80px; /* Internal spacing */
    box-shadow: 0 20px 60px rgba(0,0,0,0.04);
    position: relative;
    z-index: 5;
}

/* --- 4. MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .single-blog-container {
        padding: 40px 30px; 
    }
    /* Stack them vertically on tablets/mobile */
    .single-post-grid {
        grid-template-columns: 1fr; 
        gap: 50px;
    }
}
/* --- 1. LAYOUT CONTAINER (Transparent) --- */
.single-post-layout {
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 6vw;
    padding-right: 6vw;
    /* No background color here - lets page gradient show through */
}

/* --- 2. TOP BAR (Split Ends) --- */
.post-top-bar {
    display: flex;
    justify-content: space-between; /* Pushes content to extreme ends */
    align-items: center;
    margin-bottom: 30px;
}
.post-actions {
    display: flex;
    gap: 12px;
}

/* --- 3. THE GAP --- */
.single-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 Content, 1/3 Sidebar */
    gap: 40px; /* This creates the visible background gap */
    align-items: start;
}

/* --- 4. CONTENT CARD (White Box) --- */
.post-content-card {
    background: #ffffff;
    border-radius: 40px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

/* --- 5. SIDEBAR WIDGETS (Separate Cards) --- */
.sidebar-widget {
    background: #ffffff;
    border-radius: 30px;
    padding: 35px;
    margin-bottom: 30px; /* Space between sidebar widgets */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Special Styling for Trending Widget (Matches Wireframe) */
.trending-card {
    background: #fdf2ff; /* Light Purple Background */
    border: 1px solid #f3e5f5;
}
.widget-heading-purple {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; 
    color: #ab47bc; margin-bottom: 20px; text-transform: uppercase;
}
.purple-pill {
    display: inline-block;
    background: #ffffff;
    color: #ab47bc; /* Purple text */
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.75rem; font-weight: 700;
    text-decoration: none;
    margin: 0 6px 10px 0;
    box-shadow: 0 2px 5px rgba(171, 71, 188, 0.1);
}
.purple-pill:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(171, 71, 188, 0.2); }


/* --- 6. COMMENTS CLEANUP --- */
.comment-form-comment label, 
.comment-form-author label {
    display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: #999; margin-bottom: 8px; letter-spacing: 1px;
}
.comment-form textarea, 
.comment-form input[type="text"] {
    width: 100%;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    font-size: 0.95rem;
    margin-bottom: 20px;
}
/* Hide the "required fields marked" text if present */
.comment-notes { display: none; }

/* --- 7. TAGS BELOW POST --- */
.post-footer-tags {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f5f5f5;
}
.post-footer-tags a {
    background: #f5f5f5; color: #555; padding: 6px 14px; border-radius: 20px; text-decoration: none; font-size: 0.75rem; font-weight: 700; margin-right: 10px;
}

/* Mobile */
@media (max-width: 900px) {
    .single-post-grid { grid-template-columns: 1fr; }
    .post-content-card { padding: 30px; }
}
/* --- 1. MAIN CONTENT TYPOGRAPHY (Matches Left Wireframe) --- */
.entry-content p {
    font-family: 'Merriweather', Georgia, serif; /* Elegant Serif */
    font-size: 1.15rem;       /* Slightly larger text */
    line-height: 2;           /* Generous spacing */
    color: #2c2c2c;           /* Dark Grey, not black */
    margin-bottom: 35px;
    font-weight: 300;
}

/* DROP CAP (The large 'T' in the screenshot) */
.entry-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.85;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    margin-right: 12px;
    margin-top: 6px;
    color: #1a1a1a;
}

/* --- 2. SIDEBAR WIDGETS (Sizing Fixes) --- */
.sidebar-widget {
    background: #fff;
    border-radius: 20px; /* Slightly tighter radius like wireframe */
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

/* "More Like This" - Compact Style */
.mini-post-item {
    display: flex;
    align-items: center; /* Vertically center */
    gap: 15px;
    margin-bottom: 20px;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9; /* Subtle divider */
    padding-bottom: 15px;
}
.mini-post-item:last-child { border-bottom: none; }
.mp-thumb img {
    width: 55px; height: 55px; /* Smaller square */
    border-radius: 8px;
    object-fit: cover;
}
.mp-info h6 {
    margin: 0 0 5px;
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    color: #1a1a1a;
    line-height: 1.3;
}
.mp-info span {
    font-size: 0.65rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* "Trending Topics" - Black Text */
.trending-card {
    background: #fdf2ff; /* Keep purple background box */
    border: none;
}
.purple-pill {
    background: #ffffff;
    color: #000000; /* BLACK TEXT as requested */
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: 0.2s;
}
.purple-pill:hover {
    background: #000;
    color: #fff;
}


/* --- 3. COMMENT FORM (Style & Order Match) --- */
.comments-section-styled {
    margin-top: 60px;
}
.comment-reply-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/* Labels (NAME, COMMENT) */
.comment-form label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 10px;
}

/* Inputs (Name & Textarea) */
.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    background: #ffffff; /* White background */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 4px; /* Slight rounding, not pill */
    padding: 16px;
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* Placeholder Styling */
::placeholder { color: #ccc; opacity: 1; }

/* Submit Button (Black Block) */
.form-submit .submit {
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    padding: 14px 30px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 4px;
}

/* Hiding unnecessary elements */
.comment-notes, .logged-in-as { display: none; }


/* --- 4. TOP BAR ACTIONS (Extreme Right) --- */
.post-top-bar {
    display: flex;
    justify-content: space-between; /* This forces the gap */
    align-items: center;
    margin-bottom: 40px;
    padding: 0 10px;
}
.post-actions {
    display: flex;
    gap: 10px;
    margin-left: auto; /* Double insurance to push right */
}
/* --- 1. COMMENT SECTION (Grey Box Style) --- */
.comments-area-styled {
    background: #fafafa; /* Light Grey Background */
    border-radius: 20px;
    padding: 40px;
    margin-top: 50px;
    border: 1px solid #f0f0f0;
}

.comments-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #1a1a1a;
    display: flex; align-items: center; gap: 10px;
}
.icon-chat { font-size: 1rem; }

.no-comments-text {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    margin-bottom: 30px;
}

/* Form Styling inside the Grey Box */
.comment-reply-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #1a1a1a;
}

/* Labels */
.comment-form label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

/* Inputs */
.comment-form input[type="text"],
.comment-form textarea {
    background: #fff; /* White input on Grey box */
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
    color: #333;
    width: 100%;
    margin-bottom: 20px;
}

/* SMALL "POST COMMENT" BUTTON */
.btn-small-black {
    background: #1a1a1a;
    color: #fff;
    border: none;
    /* Smaller padding and font size as requested */
    padding: 10px 20px !important; 
    font-size: 0.65rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    width: auto !important; /* Prevents full width */
    display: inline-block;
}
.btn-small-black:hover { background: #000; }


/* --- 2. BACK TO BLOG (Grey Pill Background) --- */
.back-link {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5; /* Grey Background */
    color: #666;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 30px; /* Pill Shape */
    transition: 0.2s;
}
.back-link:hover {
    background: #e0e0e0;
    color: #000;
}


/* --- 3. SIDEBAR: AUTHOR WIDGET (Green Link) --- */
.author-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.read-story-link {
    color: #2d936c; /* GREEN Color */
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}
.read-story-link:hover { text-decoration: underline; }


/* --- 4. SIDEBAR: TRENDING & MORE LIKE THIS (Softer Dark Colors) --- */
/* "More Like This" Headings */
.mp-info h6 {
    color: #333; /* Softer Dark Grey, not pitch black */
    font-weight: 600;
}

/* Trending Tags Text */
.purple-pill {
    color: #444; /* Dark Grey (Softer than #000) */
    background: #fff;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.purple-pill:hover {
    color: #fff;
    background: #1a1a1a;
}
/* --- COMMENT SECTION STYLES --- */
.comments-area-styled {
    background: #fafafa; /* Light Grey Box */
    border-radius: 20px;
    padding: 50px;
    margin-top: 60px;
}

.comments-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: #1a1a1a;
    display: flex; align-items: center; gap: 8px;
}
.icon-chat { font-size: 0.9rem; }

/* --- COMMENT LIST --- */
.comment-list {
    list-style: none;
    margin: 0 0 40px 0;
    padding: 0;
}
.comment-list li.comment {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.comment-body {
    display: flex;
    gap: 15px;
}
.comment-author .avatar {
    border-radius: 50%;
}
.comment-meta {
    font-size: 0.65rem;
    color: #999;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.fn { /* Author Name */
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    margin-right: 10px;
    font-style: normal;
}
.comment-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    margin: 5px 0 0;
}
/* Hide Reply link for cleaner look */
.reply { display: none; }


/* --- FORM INPUTS (Placeholders Style) --- */
.comment-form-author, 
.comment-form-comment {
    margin-bottom: 20px;
}

/* Remove old Labels if any remain */
.comment-form label { display: none; } 

.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Merriweather', serif; /* Serif font inside input */
    font-size: 0.9rem;
    color: #333;
    outline: none;
    box-sizing: border-box; /* Fixes padding width issues */
}

/* Style the Placeholder Text */
::placeholder {
    color: #aaa;
    font-style: italic;
    opacity: 1;
}

/* BUTTON */
.btn-small-black {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 12px 24px !important;
    font-size: 0.65rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-small-black:hover { background: #333; }
/* --- COMMENT LIST STYLING --- */
.comment-list {
    list-style: none;
    margin: 0 0 40px 0;
    padding: 0;
}

.comment-list li {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee; /* Divider line */
}
.comment-list li:last-child { border-bottom: none; }

.comment-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Avatar Circle */
.comment-avatar img {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    object-fit: cover;
}

/* Text Area */
.comment-data { flex-grow: 1; }

.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-author {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.comment-date {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comment-text p {
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

/* Moderation Text */
.comment-awaiting-moderation {
    display: block;
    font-size: 0.75rem;
    color: #d32f2f; /* Red warning color */
    margin-bottom: 5px;
}
/* --- 1. BLOG IMAGE CONTROL (Fix "Too Long Vertically") --- */
/* This forces the main image to be a landscape rectangle, cropping if needed */
.post-img-wrap img,
.post-featured-img img,
.wp-block-image img {
    width: 100%;
    height: 400px; /* Fixed height to match wireframe landscape look */
    object-fit: cover; /* Ensures image covers area without squashing */
    border-radius: 20px;
    margin-bottom: 30px;
}

/* --- 2. COMPACT COMMENTS SECTION (Matches Left Window) --- */
.comments-area-styled {
    padding: 30px; /* Reduced from 50px */
    margin-top: 40px;
    background: #fafafa;
    border-radius: 15px; /* Slightly tighter corners */
}

/* Headings & Text */
.comments-title { font-size: 1rem; margin-bottom: 20px; }
.comment-reply-title { font-size: 1rem; margin-top: 10px; margin-bottom: 15px; }

/* The List Items (Tighter Spacing) */
.comment-list li {
    margin-bottom: 15px; /* Less gap between comments */
    padding-bottom: 15px;
}
.comment-avatar img {
    width: 35px; height: 35px; /* Smaller Avatar */
}
.comment-author { font-size: 0.85rem; }
.comment-date { font-size: 0.65rem; }
.comment-text p {
    font-size: 0.85rem; /* Smaller body text */
    line-height: 1.5;
    margin-top: 5px;
}

/* Inputs (Compact) */
.comment-form input[type="text"],
.comment-form textarea {
    padding: 12px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    border-radius: 6px;
}
.btn-small-black {
    padding: 10px 20px !important;
    font-size: 0.6rem !important;
    letter-spacing: 1px;
}

/* --- 3. SIDEBAR WIDGETS (Rectangular/Compact Look) --- */
.sidebar-widget {
    padding: 25px; /* Reduced padding makes the box shorter/rectangular */
    margin-bottom: 20px;
}

/* Author Widget Compact */
.author-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.author-card p {
    font-size: 0.8rem; /* Smaller text matches wireframe */
    line-height: 1.5;
    margin-bottom: 15px;
    color: #555;
}
.author-img img {
    width: 70px; height: 70px; /* Smaller author image */
    margin-bottom: 10px;
}

/* More Like This Compact */
.mini-post-item {
    padding-bottom: 12px;
    margin-bottom: 12px;
    gap: 12px;
}
.mp-thumb img {
    width: 50px; height: 50px; /* Compact thumbnail */
}
.mp-info h6 {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 3px;
}

/* --- 4. PAGE TYPOGRAPHY (Exact Match) --- */
.entry-content p {
    font-family: 'Merriweather', serif;
    font-size: 1rem; /* Standard readable size */
    line-height: 1.8; /* Elegant spacing */
    color: #333; /* Soft Black */
    margin-bottom: 25px;
}
/* --- 1. FEATURED IMAGE (Top of Post Only) --- */
/* Forces ONLY the main top image to be a neat landscape rectangle */
.post-img-wrap img,
.post-featured-img img {
    width: 100%;
    height: 400px; /* Fixed height for uniformity */
    object-fit: cover; /* Cropping nicely */
    border-radius: 20px;
    margin-bottom: 40px;
    display: block;
}

/* --- 2. CONTENT IMAGES (Infographics/Body Images) --- */
/* Allows images INSIDE the text to be full height (No Cropping) */
.entry-content img,
.wp-block-image img {
    width: 100%;       /* Full width of the container */
    height: auto;      /* Natural height (shows full infographic) */
    object-fit: contain; /* No cropping */
    border-radius: 12px;
    margin: 30px 0;    /* Spacing above/below */
    display: block;
}

/* --- 3. FIX FOR BROKEN IMAGE ICONS --- */
/* Hides broken image icons if an image fails to load */
img[src=""],
img:not([src]) {
    display: none;
}
/* --- ZOOM EFFECT FOR BLOG IMAGES --- */

/* 1. Main Featured Image Zoom */
.post-img-wrap {
    overflow: hidden;       /* CRITICAL: Keeps the zooming image inside the rounded box */
    border-radius: 20px;    /* Matches your rounded design */
    display: block;         /* Ensures container behaves correctly */
    margin-bottom: 40px;    /* Keeps spacing intact */
}

.post-img-wrap img {
    /* Existing styles */
    width: 100%;
    height: 400px;
    object-fit: cover;
    
    /* Animation definition */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth, slow easing */
    transform-origin: center center; /* Zooms from the middle */
}

/* The Hover Trigger */
.post-img-wrap:hover img {
    transform: scale(1.08); /* Zooms in by 8% */
}


/* 2. Sidebar "More Like This" Thumbnails Zoom */
.mp-thumb {
    overflow: hidden;       /* Clips the zoom */
    border-radius: 8px;
    width: 50px;            /* Fixed width for container */
    height: 50px;           /* Fixed height for container */
    display: block;
    flex-shrink: 0;         /* Prevents shrinking in flexbox */
}

.mp-thumb img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Trigger zoom when hovering the whole sidebar link */
.mini-post-item:hover .mp-thumb img {
    transform: scale(1.15); /* Slightly stronger zoom for small images */
}

/* --- BLOG TAGS (Matches Left Window: Light & Subtle) --- */
.post-footer-tags a,
.tag-cloud-link { 
    display: inline-block;
    
    /* The "Left Window" Look */
    background: #fcfcfc !important; /* Very light, almost white */
    color: #999999 !important;      /* Light Grey Text */
    border: 1px solid #eeeeee;      /* Very faint border */
    
    font-size: 0.6rem;              /* Tiny, elegant text */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 14px;              /* Comfortable padding */
    border-radius: 6px;             /* Soft corners */
    margin: 0 8px 10px 0;           /* Spacing between tags */
    letter-spacing: 1.5px;          /* Wider letter spacing */
    transition: all 0.2s ease;
}

/* Hover Effect for Blog Tags (Subtle Darkening) */
.post-footer-tags a:hover,
.tag-cloud-link:hover {
    background: #f0f0f0 !important;
    color: #555 !important;
    border-color: #ddd;
}

/* --- KEEP TRENDING TOPICS (SIDEBAR) AS IS --- */
/* This ensures the sidebar tags keep their special styling */
.purple-pill {
    /* Base style similar to blog tags but slightly different if needed */
    display: inline-block;
    background: #fcfcfc !important;
    color: #999 !important;
    border: 1px solid #eee;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    margin: 0 6px 10px 0;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

/* YOUR REQUESTED HOVER FOR TRENDING (Pink & Black) */
/* This MUST stay here to protect the pink hover you liked */
.purple-pill:hover {
    background-color: #fdf2ff !important; /* Pink Background */
    color: #000000 !important;            /* Black Text */
    border: 1px solid #e1bee7 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(171, 71, 188, 0.15) !important;
}
/* --- ENTIRE COMMENT SECTION (Grey Box) --- */
.comments-area-styled {
    background: #fafafa; /* The Grey Background */
    border-radius: 20px;
    padding: 40px;       /* Spacious padding inside the box */
    margin-top: 50px;
    border: 1px solid #f0f0f0;
}

/* --- COMMENT LIST INSIDE BOX --- */
.comment-list {
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0;
}
.comment-list li {
    border-bottom: 1px solid #e0e0e0; /* Separator between comments */
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.comment-list li:last-child {
    border-bottom: none;
}

/* --- FORM FIELDS (Horizontally Long) --- */
.comment-form-author, 
.comment-form-comment {
    margin-bottom: 20px;
    width: 100%; /* Ensures container uses full width */
}

/* The "Name" Field */
.comment-form input[type="text"] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    color: #333;
    box-sizing: border-box; /* Prevents padding from breaking width */
}

/* The "Share Your Thoughts" Field (Long & Tall) */
.comment-form textarea {
    width: 100%;
    min-height: 150px; /* Makes it tall */
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    color: #333;
    resize: vertical; /* Allows user to drag it bigger */
    box-sizing: border-box;
}

/* Placeholder Text */
::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Submit Button */
.btn-small-black {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 12px 25px !important;
    font-size: 0.7rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
/* --- 1. COMMENTS LIST (On White Background) --- */
.comments-list-section {
    margin-top: 60px;
    margin-bottom: 40px;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual Comment Styling */
.comment-list li {
    border-bottom: 1px solid #eee; /* Light divider */
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.comment-list li:last-child {
    border-bottom: none;
}

/* --- 2. THE GREY FORM BOX (Separate Card) --- */
.comments-area-styled {
    background: #fafafa; /* Grey Background */
    border-radius: 20px;
    padding: 50px;       /* Big internal spacing */
    border: 1px solid #f0f0f0;
}

.comment-reply-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 25px;
    color: #1a1a1a;
}

/* --- 3. INPUTS (Wide & Long) --- */
.comment-form input[type="text"] {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fff;
    box-sizing: border-box;
}

/* TEXTAREA (Horizontally Long & Tall) */
.comment-form textarea {
    width: 100%;
    min-height: 150px; /* Forces height */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
    font-family: 'Merriweather', serif;
}
/* --- SIGHT GLASS / FROSTED HEADER --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 20px 0;
    
    /* 1. The Blur Effect (The Magic) */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); /* Essential for Safari/iPhone */
    
    /* 2. The Tint (Semi-Transparent White) */
    /* This creates the "surface" of the glass. */
    background: rgba(255, 255, 255, 0.9) !important; 
    
    /* 3. The Edge (Subtle Glass Border) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    
    /* Optional: Soft shadow to lift the glass off the page */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}