/*
Theme Name: Theme 6 - Sidebar Blog
Description: A custom WordPress theme featuring a unique layout with content on the left and a blog grid on the right side. Inspired by brianmoran.com with clean, modern, minimal design.
Version: 1.0
Author: Pau Inocencio
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #faf9f7; /* Cream background */
}

a {
    color: #4a90e2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Main Container */
.site-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Main Layout Grid */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Left Content Area */
.left-content {
    max-width: none;
}

/* Hero Section */
.hero-section {
    margin-bottom: 40px;
}

.profile-avatar-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.profile-avatar-link:hover {
    transform: scale(1.05);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
    object-fit: cover;
    cursor: pointer;
}

.site-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}

.site-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-title-link:hover {
    color: #4a90e2;
    text-decoration: none;
}

.site-description {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 24px;
}

.hero-quote {
    font-size: 1.1rem;
    margin-bottom: 32px;
    line-height: 1.5;
}

.work-with-me-section {
    margin-bottom: 24px;
}

.work-with-me-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.work-with-me-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cta-button:hover {
    opacity: 0.9;
    text-decoration: none;
}

.cta-button.blue {
    background-color: #4a90e2;
}

.cta-button.pink {
    background-color: #e91e63;
}

/* Main Content Area */
.main-content {
    margin-bottom: 40px;
    line-height: 1.7;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
    margin-bottom: 1.2rem;
    margin-top: 2rem;
    line-height: 1.4;
    color: #333;
}

.main-content h1:first-child,
.main-content h2:first-child,
.main-content h3:first-child,
.main-content h4:first-child,
.main-content h5:first-child,
.main-content h6:first-child {
    margin-top: 0;
}

.main-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Improve spacing for better readability */
.main-content p + p {
    margin-top: 0.5rem;
}

.main-content p:last-child {
    margin-bottom: 0;
}

.main-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* Social Media Links */
.social-media-links {
    margin-top: 40px;
}

.social-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.social-link {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-link:hover {
    color: #4a90e2;
    text-decoration: none;
}

/* Social Media Icons */
.social-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #666;
    transition: background-color 0.2s ease;
    position: relative;
}

.social-link:hover .social-icon {
    background-color: #4a90e2;
}

/* Twitter Icon */
.social-icon-twitter {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/%3E%3C/svg%3E") center/contain;
}

/* LinkedIn Icon */
.social-icon-linkedin {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center/contain;
}

/* GitHub Icon */
.social-icon-github {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") center/contain;
}

/* Instagram Icon */
.social-icon-instagram {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center/contain;
}

/* Facebook Icon */
.social-icon-facebook {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") center/contain;
}

/* YouTube Icon */
.social-icon-youtube {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E") center/contain;
}

/* TikTok Icon */
.social-icon-tiktok {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center/contain;
}

/* Email Icon */
.social-icon-email {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain;
}

/* Right Sidebar - Blog Grid */
.right-sidebar {
    width: 100%;
}

.sidebar-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #333;
}

.blog-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-post-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

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

.blog-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.blog-post-title a {
    color: #333;
    text-decoration: none;
}

.blog-post-title a:hover {
    color: #4a90e2;
}

.blog-post-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 8px;
}

.blog-post-meta {
    font-size: 0.8rem;
    color: #999;
}

/* Sidebar Navigation */
.sidebar-navigation {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #eee;
    text-align: center;
}

.sidebar-nav-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.sidebar-nav-button:hover {
    background-color: #4a90e2;
    color: white;
    text-decoration: none;
    border-color: #4a90e2;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
}

/* Sidebar Pagination */
.sidebar-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sidebar-nav-number,
.sidebar-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f8f9fa;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.sidebar-nav-number:hover,
.sidebar-nav-arrow:hover {
    background-color: #4a90e2;
    color: white;
    text-decoration: none;
    border-color: #4a90e2;
    transform: translateY(-1px);
}

.sidebar-nav-number.active {
    background-color: #4a90e2;
    color: white;
    border-color: #4a90e2;
}

.sidebar-nav-dots {
    color: #999;
    font-weight: 600;
    padding: 0 4px;
}

.sidebar-nav-arrow {
    font-size: 0.9rem;
}

/* Mobile responsive pagination */
@media (max-width: 480px) {
    .sidebar-pagination {
        gap: 6px;
    }
    
    .sidebar-nav-number,
    .sidebar-nav-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Single Post Content in Sidebar */
.single-post-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.single-post-content .entry-title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 12px;
    color: #333;
}

.single-post-content .entry-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.single-post-content .entry-meta span {
    margin-right: 15px;
}

.single-post-content .post-thumbnail {
    margin-bottom: 20px;
}

.single-post-content .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.single-post-content .entry-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
    max-width: 100%;
}

.single-post-content .entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Improve spacing for better readability */
.single-post-content .entry-content p + p {
    margin-top: 0.5rem;
}

.single-post-content .entry-content p:last-child {
    margin-bottom: 0;
}

.single-post-content .entry-content h1,
.single-post-content .entry-content h2,
.single-post-content .entry-content h3,
.single-post-content .entry-content h4,
.single-post-content .entry-content h5,
.single-post-content .entry-content h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: #333;
}

.single-post-content .entry-content h2 {
    font-size: 1.3rem;
}

.single-post-content .entry-content h3 {
    font-size: 1.2rem;
}

.single-post-content .entry-content ul,
.single-post-content .entry-content ol {
    margin-bottom: 16px;
    padding-left: 20px;
}

.single-post-content .entry-content li {
    margin-bottom: 8px;
}

.single-post-content .entry-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.single-post-content .tags-links {
    font-size: 0.85rem;
    color: #666;
}

.single-post-content .tags-links a {
    color: #4a90e2;
    text-decoration: none;
    margin-right: 8px;
}

.single-post-content .tags-links a:hover {
    text-decoration: underline;
}

/* Post Navigation in Sidebar */
.post-navigation {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e9ecef;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 48%;
}

.post-navigation a {
    display: block;
    padding: 16px 20px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-navigation a:hover {
    background-color: #4a90e2;
    color: white;
    border-color: #4a90e2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    text-decoration: none;
}

.post-navigation .nav-next {
    text-align: right;
}

/* Allow text to wrap properly */
.post-navigation a {
    white-space: normal;
    word-wrap: break-word;
}

/* Add subtle labels */
.post-navigation .nav-previous a::before {
    content: "← ";
    opacity: 0.7;
}

.post-navigation .nav-next a::after {
    content: " →";
    opacity: 0.7;
}

/* Code Styling */
code {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    color: #d73a49;
    font-weight: 600;
}

/* Code blocks and preformatted text */
pre {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    line-height: 1.45;
    margin: 16px 0;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
    color: #24292e;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
}

/* Syntax highlighting-like colors for different elements */
pre .comment {
    color: #6a737d;
    font-style: italic;
}

pre .keyword {
    color: #d73a49;
    font-weight: 600;
}

pre .string {
    color: #032f62;
}

pre .number {
    color: #005cc5;
}

/* Code styling within single post content */
.single-post-content code {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    color: #d73a49;
}

.single-post-content pre {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    margin: 20px 0;
}

.single-post-content pre code {
    color: #24292e;
}

/* Code styling within blog post items */
.blog-post-item code {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    color: #d73a49;
    font-size: 0.8em;
}

.blog-post-item pre {
    display: none; /* Hide code blocks in excerpts */
}

/* Scrollable code blocks on mobile */
@media (max-width: 768px) {
    pre {
        font-size: 0.8rem;
        padding: 12px;
        margin: 12px 0;
    }
    
    code {
        font-size: 0.8em;
        padding: 1px 4px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .right-sidebar {
        width: 100%;
        order: 2;
    }
    
    .left-content {
        order: 1;
    }
    
    .site-title {
        font-size: 2rem;
    }
    
    .cta-buttons {
        gap: 12px;
    }
    
    .site-container {
        padding: 20px 16px;
    }
}

/* On mobile, show post/page or blog grid before homepage on all non-front pages */
@media (max-width: 768px) {
    body:not(.front-page) .main-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "right"
            "left";
    }
    body:not(.front-page) .left-content {
        grid-area: left;
    }
    body:not(.front-page) .right-sidebar {
        grid-area: right;
    }
}

/* On mobile, when returning to homepage with posts-first flag, show blog grid before homepage */
@media (max-width: 768px) {
    body.front-page.posts-first .main-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "right"
            "left";
    }
    body.front-page.posts-first .left-content {
        grid-area: left;
    }
    body.front-page.posts-first .right-sidebar {
        grid-area: right;
    }
}

/* Tablet responsive - adjust for 50/50 layout */
@media (max-width: 1024px) and (min-width: 769px) {
    .site-container {
        padding: 30px 16px;
    }
    
    .main-layout {
        gap: 30px;
    }
    
    .site-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.8rem;
    }
    
    .hero-quote {
        font-size: 1rem;
    }
    
    .profile-avatar {
        width: 60px;
        height: 60px;
    }
}

/* WordPress Editor Styles */
.wp-block-image {
    margin: 20px 0;
}

.wp-block-image :where(figcaption) {
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.wp-block-quote {
    border-left: 4px solid #4a90e2;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
}

.wp-block-separator {
    margin: 30px 0;
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.wp-block-button__link {
    background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%);
    color: #fff !important;
    margin-bottom: 10px;
    padding: 12px 22px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    line-height: 1.2;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    opacity: 1 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Slightly smaller button text inside button groups */
.wp-block-buttons .wp-block-button__link {
    font-size: 0.95rem;
}

.wp-block-button__link:hover {
    background: linear-gradient(180deg, #3f82cc 0%, #2f67a3 100%);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link:focus {
    outline: none;
}

.wp-block-button__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(74, 144, 226, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link {
        transition: none;
    }
}

/* Outline and squared variations */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent;
    color: #357abd !important;
    border: 2px solid currentColor;
    box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background: currentColor;
    color: #fff;
}

.wp-block-button.is-style-squared > .wp-block-button__link {
    border-radius: 6px;
}

/* Post Meta and Navigation Styles */
.entry-meta {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #666;
}

.entry-meta .posted-on,
.entry-meta .cat-links {
    margin-right: 16px;
}

.entry-meta a {
    color: #666;
    text-decoration: none;
}

.entry-meta a:hover {
    color: #4a90e2;
}

.post-thumbnail {
    margin-bottom: 24px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.entry-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.tags-links {
    font-size: 0.9rem;
    color: #666;
}

.tags-links a {
    color: #4a90e2;
    text-decoration: none;
    margin-right: 8px;
}

.tags-links a:hover {
    text-decoration: underline;
}

/* Post Navigation */
.post-navigation {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid #eee;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.nav-previous,
.nav-next {
    flex: 1;
    max-width: 50%;
}

.nav-next {
    text-align: right;
}

.nav-links a {
    display: block;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
    line-height: 1.4;
}

.nav-links a:hover {
    background-color: #e9ecef;
    text-decoration: none;
}

/* Additional responsive styles for post navigation */
@media (max-width: 600px) {
    .post-navigation .nav-links {
        flex-direction: column;
        gap: 12px;
    }
    
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
        text-align: left;
    }
    
    .post-navigation a {
        padding: 14px 16px;
        font-size: 0.85rem;
    }
}

/* Archive Page Styles */
.page-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.page-title {
    font-size: 2rem;
    margin-bottom: 16px;
    color: #333;
}

.archive-description {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.5;
}

.posts-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
}

.archive-post-item {
    padding-bottom: 32px;
    border-bottom: 1px solid #eee;
}

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

.archive-post-item .entry-title {
    font-size: 1.4rem;
    margin-bottom: 12px;
    line-height: 1.3;
}

.archive-post-item .entry-title a {
    color: #333;
    text-decoration: none;
}

.archive-post-item .entry-title a:hover {
    color: #4a90e2;
}

.entry-excerpt {
    margin-bottom: 16px;
    color: #666;
    line-height: 1.6;
}

.read-more {
    display: inline-block;
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.read-more:hover {
    text-decoration: underline;
}

/* Pagination Styles */
.pagination {
    margin-top: 40px;
    text-align: center;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: #4a90e2;
    color: white;
    text-decoration: none;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    font-weight: 600;
}

/* 404 Page Styles */
.error-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

.error-content ul {
    margin: 16px 0;
    padding-left: 20px;
}

.error-content li {
    margin-bottom: 8px;
}

.search-form-container {
    margin-top: 32px;
    padding: 24px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.search-form-container h4 {
    margin-bottom: 16px;
    color: #333;
}

/* Search Form Styles */
.search-form {
    display: flex;
    gap: 8px;
    max-width: 400px;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.search-form input[type="submit"] {
    padding: 10px 20px;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.search-form input[type="submit"]:hover {
    background-color: #357abd;
}

/* Mobile search form */
@media (max-width: 480px) {
    .search-form {
        flex-direction: column;
        max-width: 100%;
    }
}

/* Utility Classes */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Enhanced Page Content Typography */
.page-content {
    background: white;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.7;
}

.page-content .entry-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.page-content .entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.page-content .entry-content p + p {
    margin-top: 0.5rem;
}

.page-content .entry-content p:last-child {
    margin-bottom: 0;
}

.page-content .entry-content h1,
.page-content .entry-content h2,
.page-content .entry-content h3,
.page-content .entry-content h4,
.page-content .entry-content h5,
.page-content .entry-content h6 {
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    color: #333;
}

.page-content .entry-content h1:first-child,
.page-content .entry-content h2:first-child,
.page-content .entry-content h3:first-child,
.page-content .entry-content h4:first-child,
.page-content .entry-content h5:first-child,
.page-content .entry-content h6:first-child {
    margin-top: 0;
}

/* Enhanced Homepage Content Typography */
.homepage-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.homepage-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.homepage-content p + p {
    margin-top: 0.5rem;
}

.homepage-content p:last-child {
    margin-bottom: 0;
}

.homepage-content h1,
.homepage-content h2,
.homepage-content h3,
.homepage-content h4,
.homepage-content h5,
.homepage-content h6 {
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    color: #333;
}

.homepage-content h1:first-child,
.homepage-content h2:first-child,
.homepage-content h3:first-child,
.homepage-content h4:first-child,
.homepage-content h5:first-child,
.homepage-content h6:first-child {
    margin-top: 0;
}

/* Improved list spacing */
.entry-content ul,
.entry-content ol,
.page-content .entry-content ul,
.page-content .entry-content ol,
.homepage-content ul,
.homepage-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.entry-content li,
.page-content .entry-content li,
.homepage-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Better blockquote styling */
.entry-content blockquote,
.page-content .entry-content blockquote,
.homepage-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem;
    border-left: 4px solid #4a90e2;
    background-color: #f8f9fa;
    font-style: italic;
    line-height: 1.6;
}

/* Improved link styling for better readability */
.entry-content a,
.page-content .entry-content a,
.homepage-content a {
    color: #4a90e2;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.entry-content a:hover,
.page-content .entry-content a:hover,
.homepage-content a:hover {
    border-bottom-color: #4a90e2;
    text-decoration: none;
}

/* Caption Styling - Left Aligned and Italicized */
.wp-caption,
.wp-caption-text,
figcaption,
.caption,
.entry-caption,
.gallery-caption,
.embed-caption,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption,
.wp-block-file figcaption,
.wp-block-media-text figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* WordPress Block Editor Captions */
.wp-block-image .wp-element-caption,
.wp-block-gallery .wp-element-caption,
.wp-block-embed .wp-element-caption,
.wp-block-video .wp-element-caption,
.wp-block-audio .wp-element-caption,
.wp-block-file .wp-element-caption,
.wp-block-media-text .wp-element-caption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Classic Editor Captions */
.wp-caption-text {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Gallery Captions */
.gallery-caption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Embed Captions */
.wp-block-embed figcaption,
.embed-caption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Video and Audio Captions */
.wp-block-video figcaption,
.wp-block-audio figcaption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* File Block Captions */
.wp-block-file figcaption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Media Text Block Captions */
.wp-block-media-text figcaption {
    text-align: left !important;
    font-style: italic !important;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}