/* 
Theme Name: Optimized Arabic Blog 2025
Description: A cutting-edge, fully responsive WordPress theme for Arabic blogs
Version: 4.2
Author: a-plan.agency
*/

/* Table of Contents
1. CSS Variables
2. Global Styles
3. Typography
4. Layout & Containers
5. Header
6. Navigation
7. Main Content
... */

/* 1. CSS Variables */
:root {
    /* Colors */
    --color-primary: #00F5D4;
    --color-secondary: #7B2CBF;
    --color-tertiary: #FF6B6B;
    --color-quaternary: #FFD93D;
    --color-quinary: #4CC9F0;
    --color-background: #0A0E17;
    --color-text: #E0E0E0;
    --color-text-light: #FFFFFF;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-card-bg: #1A1E2E;

    /* Typography */
    --font-primary: 'Cairo', sans-serif;
    --font-secondary: 'Tajawal', sans-serif;
    --font-size-base: clamp(16px, 1vw + 0.5rem, 18px);
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-unit: clamp(0.5rem, 1vw, 1rem);
    --spacing-xxs: calc(var(--spacing-unit) * 0.25);
    --spacing-xs: calc(var(--spacing-unit) * 0.5);
    --spacing-sm: var(--spacing-unit);
    --spacing-md: calc(var(--spacing-unit) * 1.5);
    --spacing-lg: calc(var(--spacing-unit) * 2);
    --spacing-xl: calc(var(--spacing-unit) * 3);
    --spacing-2xl: calc(var(--spacing-unit) * 4);

    /* Border Radius */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);

    /* Container Width */
    --container-width: min(100% - 2rem, 1200px);

    /* Header Height */
    --header-height: 80px;
}

/* 2. Global Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, a:focus {
    color: var(--color-secondary);
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.3rem); }
h5 { font-size: clamp(1rem, 2vw, 1.1rem); }
h6 { font-size: clamp(0.9rem, 1.5vw, 1rem); }

p {
    margin-bottom: var(--spacing-md);
}

/* 4. Layout & Containers */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.site-content {
    padding-top: var(--spacing-xl);
}

/* 5. Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-background);
    box-shadow: var(--shadow-sm);
}

.header-main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
}

.site-branding {
    flex: 1;
    text-align: center;
}

.site-title {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin: 0;
}

.site-title a {
    color: var(--color-text-light);
    text-decoration: none;
}

.menu-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 1rem;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.menu-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-light);
    position: relative;
    transition: background-color var(--transition-fast);
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-light);
    position: absolute;
    transition: transform var(--transition-fast);
}

.menu-icon::before {
    top: -6px;
}

.menu-icon::after {
    bottom: -6px;
}

.menu-toggle.active .menu-icon {
    background-color: transparent;
}

.menu-toggle.active .menu-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .menu-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* 6. Navigation */
.main-navigation {
    display: none;
    width: 100%;
    background-color: var(--color-background);
}

.main-navigation.toggled {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-background);
    z-index: 1000;
}

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

.nav-menu li {
    position: relative;
}

.nav-menu a {
    display: block;
    padding: var(--spacing-sm);
    color: var(--color-text-light);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a:focus {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.sub-menu.visible {
    display: block;
}

.sub-menu {
    display: none;
    background-color: var(--color-card-bg);
}

.nav-menu .menu-item-has-children > a::after {
    content: '▼';
    margin-left: var(--spacing-xs);
    font-size: 0.8em;
}

.nav-menu .menu-item-has-children.sub-menu-open > a::after {
    content: '▲';
}

.nav-menu .menu-item-has-children.sub-menu-open > .sub-menu {
    display: block;
}

/* 7. Main Content */
.site-main {
    padding: var(--spacing-md) 0;
}

/* Responsive adjustments */
@media screen and (min-width: 768px) {
    .header-content {
        justify-content: flex-start;
    }

    .menu-toggle {
        order: -1;
        margin-right: var(--spacing-md);
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 250px;
        box-shadow: var(--shadow-md);
    }

    .nav-menu > li {
        border-bottom: 1px solid var(--color-border);
    }

    .sub-menu {
        position: absolute;
        top: 0;
        left: 100%;
        width: 200px;
    }

    .nav-menu .menu-item-has-children > a::after {
        content: '▶';
    }
}
/* 8. Posts */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.post-card {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.post-card-content {
    padding: var(--spacing-md);
}

.post-card-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-sm);
}

.post-card-meta {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: var(--spacing-md);
}

.post-card-excerpt {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.read-more {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-quaternary);
    color: var(--color-background);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: background-color var(--transition-fast);
}

.read-more:hover, .read-more:focus {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}

/* 9. Single Post */
.single-post-content {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

.single-post-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.single-post-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-md);
}

.single-post-meta {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--color-text);
    opacity: 0.7;
}

.post-thumbnail {
    margin-bottom: var(--spacing-xl);
}

.post-thumbnail img {
    border-radius: var(--border-radius-md);
    width: 100%;
    height: auto;
}

.entry-content {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.8;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
    margin-bottom: var(--spacing-lg);
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
}

.entry-content blockquote {
    border-left: 6px solid var(--color-primary);
    padding-left: var(--spacing-lg);
    margin-left: 0;
    font-style: italic;
    color: var(--color-text-light);
    font-size: clamp(1.1rem, 2vw, 1.2rem);
}

/* Author Bio */
.author-bio {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xl);
    display: flex;
    align-items: center;
}

.author-avatar {
    margin-right: var(--spacing-md);
}

.author-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.author-description h3 {
    margin-top: 0;
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--color-text-light);
}

.author-description p {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    margin-bottom: 0;
}


/* Related Posts */
.related-posts {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-lg);
}



.related-post-thumbnail {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.related-post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-posts h2 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    color: var(--color-text-light);
}

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

.related-post {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.related-post:hover {
    transform: translateY(-3px);
}

.related-post-content {
    padding: var(--spacing-sm);
}

.related-post-title {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    margin-bottom: var(--spacing-xs);
}
/* Featured Section Styles */
.aab-featured-section {
    padding: var(--spacing-2xl) 0;
    background: linear-gradient(135deg, var(--color-background), var(--color-card-bg));
}

.aab-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

@media screen and (max-width: 992px) {
    .aab-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .aab-featured-grid {
        grid-template-columns: 1fr;
    }
}

.aab-featured-box {
    perspective: 1000px;
    height: 300px;
}

.aab-featured-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.aab-featured-box:hover .aab-featured-box-inner {
    transform: rotateY(180deg);
}

.aab-featured-box-front, .aab-featured-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.aab-featured-box-front {
    background-color: var(--color-card-bg);
    color: var(--color-text-light);
}

.aab-featured-box-back {
    background-color: var(--color-primary);
    color: var(--color-background);
    transform: rotateY(180deg);
}

.aab-featured-box i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.aab-featured-box h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-sm);
}

.aab-featured-box p {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    margin-bottom: var(--spacing-md);
}

.aab-cta-button {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-quaternary);
    color: var(--color-background);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.aab-cta-button:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

/* Geometric Shapes */
.aab-featured-box-hexagon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0, 100 25, 100 75, 50 100, 0 75, 0 25' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") no-repeat center center / cover;
    z-index: -1;
}

.aab-featured-box-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.aab-featured-box-triangle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0, 100 100, 0 100' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") no-repeat center center / cover;
    z-index: -1;
}

/* Parallax Effect */
.aab-featured-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Animations */
@keyframes aabFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aab-featured-box {
    animation: aabFadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.aab-featured-box:nth-child(1) { animation-delay: 0.2s; }
.aab-featured-box:nth-child(2) { animation-delay: 0.4s; }
.aab-featured-box:nth-child(3) { animation-delay: 0.6s; }

@media screen and (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .nav-links {
        flex-direction: column;
    }
    
    .nav-previous,
    .nav-next {
        flex: 0 0 100%;
        margin-bottom: var(--spacing-md);
    }

}

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

/* 10. Comments */
.comments-area {
    margin-top: var(--spacing-2xl);
    background-color: var(--color-card-bg);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.comments-title {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

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

.comment-body {
    background-color: var(--color-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.comment-author img {
    border-radius: 50%;
    margin-right: var(--spacing-sm);
}

.comment-metadata {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    opacity: 0.7;
}

.comment-content {
    margin-top: var(--spacing-sm);
}

.reply {
    margin-top: var(--spacing-sm);
}

/* 11. Sidebar */
.widget-area {
    background-color: var(--color-card-bg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.widget {
    margin-bottom: var(--spacing-xl);
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

/* 12. Footer */
.site-footer {
    background-color: var(--color-card-bg);
    color: var(--color-text-light);
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-2xl);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer-widget {
    padding: var(--spacing-md);
}

.footer-widget h4 {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-bottom: var(--spacing-md);
}

.site-info {
    text-align: center;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    opacity: 0.8;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* 13. Forms & Buttons */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-background);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    font-weight: 600;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--color-secondary);
}

/* 14. Pagination */
.pagination,
.posts-navigation,
.post-navigation {
    margin-top: var(--spacing-xl);
}

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

.page-numbers,
.nav-previous a,
.nav-next a {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.page-numbers.current,
.page-numbers:hover,
.nav-previous a:hover,
.nav-next a:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
}

/* 15. Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-background);
    clip: auto !important;
    clip-path: none;
    color: var(--color-text);
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* 16. RTL Support */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .nav-menu li {
    margin-right: var(--spacing-md);
    margin-left: 0;
}

[dir="rtl"] .sub-menu {
    left: auto;
    right: 0;
}

[dir="rtl"] .author-bio img {
    margin-right: 0;
    margin-left: var(--spacing-md);
}

/* 17. Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.fade-in {
    animation: fadeIn var(--transition-slow) forwards;
}

.slide-in-up {
    animation: slideInUp var(--transition-slow) forwards;
}

/* 18. Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

/* 19. Media Queries */
@media screen and (max-width: 1200px) {
    :root {
        --container-width: min(100% - 2rem, 960px);
        
    }
}

@media screen and (min-width: 1600px) {
    .content-area,
    .site-content,
    .container {
        max-width: 1500px; /* Increased max-width for very large screens */
    }
}

@media screen and (min-width: 1200px) {
    .content-area,
    .site-content {
        max-width: 1300px; /* Set a maximum width for very large screens */
        width: 90%; /* Reduce width to 90% of the screen */
        margin: 0 auto;

    }

   .container {
        max-width: 1300px; /* Match the max-width of content area */
        width: 90%; /* Reduce width to 90% of the screen */
        margin: 0 auto;
    }

    .site-main {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Slightly smaller minimum width */
        gap: var(--spacing-lg);
    }
}

@media screen and (max-width: 992px) {
    :root {
        --container-width: min(100% - 2rem, 720px);
    }
    
    .site-content {
        grid-template-columns: 1fr;
    }
    
    .single-post-title {
        font-size: clamp(1.75rem, 3vw, 2rem);
    }
}

@media screen and (max-width: 768px) {
    :root {
        --container-width: min(100% - 2rem, 540px);
    }
    
  .site-header {
        position: sticky;
        top: 0;
    }
    
    .single-post-title {
        font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    }
    
    .author-bio {
        flex-direction: column;
        text-align: center;
    }
    
    .author-bio img {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
}

@media screen and (max-width: 576px) {
    :root {
        --container-width: 100%;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .site-title {
        font-size: clamp(1rem, 2vw, 1.25rem);
    }
    
    .site-description {
        font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    }
    
    .single-post-title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }
    
    .entry-content {
        font-size: clamp(0.875rem, 1.5vw, 1rem);
    }
    
    .comments-title,
    .comment-reply-title {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    }
}

/* Additional styles for specific components */

/* Search form in header */
.header-search {
    position: relative;
}

.search-toggle {
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.search-form-container {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    padding: var(--spacing-sm);
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-sm);
}

.search-form-container.active {
    display: block;
}

/* Featured Posts Section */
.featured-posts {
    margin-bottom: var(--spacing-2xl);
}

.featured-post {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-medium);
}

.featured-post:hover {
    transform: translateY(-5px);
}

.featured-post-content {
    padding: var(--spacing-lg);
}

.featured-post-title {
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    margin-bottom: var(--spacing-sm);
}

/* Newsletter Sign-up Form */
.newsletter-signup {
    background-color: var(--color-card-bg);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    margin: var(--spacing-2xl) 0;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.newsletter-form input[type="email"] {
    width: 60%;
    max-width: 300px;
    margin-right: var(--spacing-xs);
}

@media screen and (max-width: 480px) {
    .newsletter-form {
        flex-direction: column;
        align-items: center;
    }
    
    .newsletter-form input[type="email"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--spacing-sm);
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background-color: var(--color-primary);
    color: var(--color-background);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 99;
}

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

@media screen and (max-width: 480px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        bottom: var(--spacing-md);
        right: var(--spacing-md);
    }
}

/* 404 Page */
.error-404 {
    text-align: center;
    padding: var(--spacing-2xl) 0;
}

.error-404 .page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
}

.error-404 .page-content {
    max-width: 600px;
    margin: 0 auto;
}

/* WordPress Core Classes */
.alignnone {
    margin: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg) 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: var(--spacing-sm) auto;
}

.alignright {
    float: right;
    margin: var(--spacing-sm) 0 var(--spacing-lg) var(--spacing-lg);
}

.alignleft {
    float: left;
    margin: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg) 0;
}

.wp-caption {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    max-width: 96%;
    padding: var(--spacing-xs);
    text-align: center;
}

.wp-caption.alignnone {
    margin: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg) 0;
}

.wp-caption.alignleft {
    margin: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg) 0;
}

.wp-caption.alignright {
    margin: var(--spacing-sm) 0 var(--spacing-lg) var(--spacing-lg);
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    line-height: 17px;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Gutenberg Blocks */
.wp-block-image figcaption {
    color: var(--color-text);
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    text-align: center;
    margin-top: var(--spacing-xs);
}

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.blocks-gallery-item {
    margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Table Styles */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

th, td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm);
}

th {
    background-color: var(--color-card-bg);
    font-weight: bold;
}

/* Code and Pre Styles */
code, pre {
    font-family: monospace;
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-sm);
}

code {
    padding: 2px 4px;
    font-size: 0.9em;
}

pre {
    padding: var(--spacing-md);
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Blockquote Styles */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-md);
    font-style: italic;
    margin: var(--spacing-lg) 0;
    color: var(--color-text-light);
}

blockquote cite {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.9em;
    color: var(--color-text);
}

/* Form Styles Enhancement */
label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-light);
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: var(--spacing-xs);
}

textarea {
    min-height: 150px;
}

/* Button Styles Enhancement */
.button-secondary {
    background-color: var(--color-secondary);
}

.button-tertiary {
    background-color: var(--color-tertiary);
}

/* Accessibility Enhancements */
.skip-link {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-weight: 700;
    left: 50%;
    padding: var(--spacing-sm);
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.skip-link:focus {
    transform: translateY(0%);
}

/* Social Sharing Buttons */
.social-sharing {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.social-sharing a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 var(--spacing-xs);
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.social-sharing a:hover {
    background-color: var(--color-primary);
}

/* Author Page Styles */
.author-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.author-avatar img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
}

.author-description {
    max-width: 800px;
    margin: 0 auto;
}

/* Category and Tag Pages */
.archive-description {
    margin-bottom: var(--spacing-xl);
    font-style: italic;
    color: var(--color-text-light);
}

/* Search Results Page */
.search-results .page-title {
    margin-bottom: var(--spacing-xl);
}

/* No Results Page */
.no-results .page-content {
    text-align: center;
}

/* Sticky Post */
.sticky {
    border: 2px solid var(--color-primary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
}

/* Post Password Form */
.post-password-form input[type="password"] {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

/* Widget Styles Enhancement */
.widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.widget li {
    margin-bottom: var(--spacing-xs);
}

.widget_search .search-field {
    width: 100%;
}

/* Calendar Widget */
.widget_calendar table {
    width: 100%;
}

.widget_calendar caption {
    margin-bottom: var(--spacing-sm);
    font-weight: bold;
}

.widget_calendar td, 
.widget_calendar th {
    text-align: center;
    padding: var(--spacing-xs);
}

/* Tag Cloud Widget */
.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
}

.widget_tag_cloud .tag-cloud-link {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
    background-color: var(--color-card-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.widget_tag_cloud .tag-cloud-link:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
}

/* Print Styles */
@media print {
    body {
        background: none !important;
        color: #000;
        font-size: 11pt;
    }
    .site-header,
    .site-footer,
    .widget-area,
    .comments-area,
    .post-navigation,
    .wp-block-button__link {
        display: none !important;
    }
    .entry-content a,
    .entry-content a:visited {
        text-decoration: underline;
    }
    .entry-content .wp-block-image figcaption {
        font-size: 9pt;
        color: #666;
    }
    .container {
        max-width: none;
        padding: 0;
    }
}

/* Focus Styles for Accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Custom scrollbar for WebKit browsers */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 6px;
    border: 3px solid var(--color-background);
}

/* Responsive Video Embeds */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Loading Animation */
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s infinite;
    text-align: center;
    padding: var(--spacing-xl);
}

/* Responsive Images */
img {
    height: auto;
    max-width: 100%;
}

/* Infinite Scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

.infinity-end.neverending .site-footer {
    display: block;
}

/* CSS Grid Layout for archives and search results */
.archive .site-main,
.search .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

@media screen and (max-width: 600px) {
    .archive .site-main,
    .search .site-main {
        grid-template-columns: 1fr;
    }
}

/* Main index page styles */
.content-area {
     width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.site-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.page-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--color-text-light);
}

/* Post card styles */
.post {
    
       width: 100%;
    max-width: 100%;
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.entry-header {
    padding: var(--spacing-md) var(--spacing-md) 0;
}

.entry-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-sm);
}

.entry-title a {
    color: var(--color-text-light);
    text-decoration: none;
}

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

.entry-meta {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: var(--spacing-sm);
}

.entry-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.entry-footer {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
}

.cat-links,
.tags-links,
.comments-link,
.edit-link {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.cat-links:last-child,
.tags-links:last-child,
.comments-link:last-child,
.edit-link:last-child {
    margin-bottom: 0;
}

/* Pagination */
.posts-navigation {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
}

/* Single post styles */
.single .site-main {
    display: block;
    max-width: 100%;
}

.single .entry-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.single .entry-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
}

.single .entry-meta {
    margin-bottom: var(--spacing-md);
}

.single .entry-content {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.8;
}
/* Post navigation */
.post-navigation {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-md);
}

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

.nav-previous,
.nav-next {
    flex: 0 0 48%;
}

.nav-subtitle {
    display: block;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: var(--spacing-xs);
}

.nav-title {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--color-primary);
}

/* Related posts */
.related-posts {
    margin-top: var(--spacing-2xl);
}

.related-posts h2 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-size: clamp(1.5rem, 3vw, 1.75rem);
}

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

/* Page links */
.page-links {
    clear: both;
    margin: var(--spacing-md) 0;
    text-align: center;
}

.page-links .post-page-numbers {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-xxs);
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
}

.page-links .post-page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-background);
}

/* Category and Tag Links */
.cat-links,
.tags-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.cat-links a,
.tags-links a {
    display: inline-block;
    padding: var(--spacing-xxs) var(--spacing-xs);
    background-color: var(--color-primary);
    color: var(--color-background);
    border-radius: var(--border-radius-sm);
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0 var(--spacing-xxs) var(--spacing-xxs) 0;
}

.cat-links a:hover,
.tags-links a:hover,
.cat-links a:focus,
.tags-links a:focus {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .site-main {
        grid-template-columns: 1fr;
    }

    .single .entry-title {
        font-size: clamp(1.75rem, 3vw, 2rem);
    }

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

    .author-avatar {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .single .entry-title {
        font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    }

    .nav-links {
        flex-direction: column;
    }

    .nav-previous,
    .nav-next {
        flex: 0 0 100%;
        margin-bottom: var(--spacing-md);
    }

     .cat-links,
    .tags-links {
        gap: var(--spacing-xxs);
    }

    .cat-links a,
    .tags-links a {
        font-size: 0.7rem;
        padding: var(--spacing-xxs) var(--spacing-xs);
        margin: 0 var(--spacing-xxs) var(--spacing-xxs) 0;
    }
}

/* Optional: Add a subtle animation for link appearance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cat-links a,
.tags-links a {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* Enhance accessibility */
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    display: block;
    height: auto;
    left: 5px;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Improve form styles */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
    width: 100%;
}

input[type="submit"],
button {
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

input[type="submit"]:hover,
button:hover {
    background-color: var(--color-secondary);
}

/* Improve table styles */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

th, td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    text-align: left;
}

th {
    background-color: var(--color-card-bg);
    font-weight: bold;
}

/* Add styles for code blocks */
pre {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.4;
}

code {
    background-color: var(--color-card-bg);
    padding: 2px 4px;
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-size: 0.9em;
}

/* Improve blockquote styles */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-md);
    font-style: italic;
    margin: var(--spacing-lg) 0;
    color: var(--color-text-light);
}

blockquote cite {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.9em;
    color: var(--color-text);
}

/* Add styles for definition lists */
dl {
    margin-bottom: var(--spacing-md);
}

dt {
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

dd {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* Improve list styles */
ul, ol {
    margin: 0 0 var(--spacing-md) var(--spacing-lg);
    padding: 0;
}

li {
    margin-bottom: var(--spacing-sm);
}

/* Specific styles for ordered lists */
ol {
    list-style-type: none;
    counter-reset: item;
}

ol > li {
    counter-increment: item;
    position: relative;
    padding-left: var(--spacing-lg);
}

ol > li::before {
    content: counter(item) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: var(--color-primary);
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    ul, ol {
        margin-left: var(--spacing-md);
    }

    ol > li {
        padding-left: var(--spacing-md);
    }
}

@media screen and (max-width: 480px) {
    ul, ol {
        margin-left: var(--spacing-sm);
    }

    ol > li {
        padding-left: var(--spacing-sm);
    }

    ol > li::before {
        font-size: 0.9em;
    }
}

/* RTL support for lists */
[dir="rtl"] ul, 
[dir="rtl"] ol {
    margin: 0 var(--spacing-lg) var(--spacing-md) 0;
}

[dir="rtl"] ol > li {
    padding-left: 0;
    padding-right: var(--spacing-lg);
}

[dir="rtl"] ol > li::before {
    left: auto;
    right: 0;
}

@media screen and (max-width: 768px) {
    [dir="rtl"] ul, 
    [dir="rtl"] ol {
        margin-right: var(--spacing-md);
    }

    [dir="rtl"] ol > li {
        padding-right: var(--spacing-md);
    }
}

@media screen and (max-width: 480px) {
    [dir="rtl"] ul, 
    [dir="rtl"] ol {
        margin-right: var(--spacing-sm);
    }

    [dir="rtl"] ol > li {
        padding-right: var(--spacing-sm);
    }
}
/* Add styles for address */
address {
    font-style: italic;
    margin-bottom: var(--spacing-md);
}

/* Improve figure and figcaption styles */
figure {
    margin: 0 0 var(--spacing-md);
}

figcaption {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* Add styles for abbreviations */
abbr[title] {
    border-bottom: 1px dotted var(--color-text);
    cursor: help;
}

/* Improve horizontal rule styles */
hr {
    border: 0;
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* Add styles for mark */
mark {
    background-color: var(--color-quaternary);
    color: var(--color-background);
    padding: 2px 4px;
    border-radius: var(--border-radius-sm);
}

/* Improve small text styles */
small {
    font-size: 80%;
}

/* Add styles for subscript and superscript */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Add focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Improve form label styles */
label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-light);
}

/* Add styles for fieldset and legend */
fieldset {
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
}

legend {
    font-weight: bold;
    padding: 0 var(--spacing-xs);
}

/* Improve select styles */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: var(--spacing-xl);
}

/* Add styles for placeholder text */
::placeholder {
    color: var(--color-text);
    opacity: 0.5;
}

/* Improve button hover and focus states */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.button:focus {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}

/* Add styles for disabled buttons */
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Improve responsive image handling */
img {
    height: auto;
    max-width: 100%;
}

/* Add styles for image captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: var(--spacing-md);
}

.wp-caption img {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    text-align: center;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    margin-top: var(--spacing-xs);
}

/* Add styles for gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.gallery-item {
    text-align: center;
}

.gallery-caption {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--color-text);
    margin-top: var(--spacing-xs);
}

/* Add print styles */
@media print {
    body {
        font-size: 12pt;
        background: none;
        color: #000;
    }

    .site-header,
    .site-footer,
    .comments-area,
    .post-navigation,
    .widget-area {
        display: none;
    }

    .entry-content a {
        word-wrap: break-word;
    }

    .entry-content a::after {
        content: " (" attr(href) ")";
        font-size: 80%;
    }

    .entry-content img {
        page-break-inside: avoid;
    }
}