/*
Theme Name: Khalid Blog
Theme URI: https://khalidiary.com
Author: Khalid
Author URI: https://khalidiary.com
Description: مدونة عربية مستوحاة من صفحات الدفاتر الورقية، مُحسّنة للقراءة الطويلة باللغة العربية واتجاه RTL الطبيعي. Arabic blog inspired by physical notebook pages, optimized for long-form Arabic reading with native RTL flow.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khalid-blog
Tags: rtl-language-support, blog, arabic, custom-colors, dark-mode, featured-images, translation-ready, threaded-comments

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* Import Google Fonts - IBM Plex Sans Arabic */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');

/* ========================================
   CSS VARIABLES - COLOR SYSTEM
   ======================================== */

:root {
  /* Light Mode - Primary Colors */
  --notebook-paper: #f9f7f3;
  --notebook-bg: #ffffff;
  --notebook-ink: #2c2a28;
  --notebook-ink-light: #6b6762;
  --notebook-line: rgba(180, 170, 150, 0.15);
  
  /* Light Mode - Highlight Colors */
  --highlight-yellow: #fef3c7;
  --highlight-green: #d1fae5;
  --highlight-blue: #dbeafe;
  --highlight-pink: #fce7f3;
  
  /* Typography */
  --font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-small: 13px;
  --font-size-base: 16px;
  --font-size-heading: 28px;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Animation Durations */
  --duration-instant: 100ms;
  --duration-quick: 200ms;
  --duration-normal: 300ms;
  --duration-medium: 400ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-slowest: 1000ms;

  /* Easing Functions */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Dark Mode Colors */
body.dark-mode {
  --notebook-paper: #1a1a1a;
  --notebook-bg: #2a2a2a;
  --notebook-ink: #e8e8e8;
  --notebook-ink-light: #a0a0a0;
  --notebook-line: rgba(100, 100, 100, 0.2);
  
  --highlight-yellow: #3d3419;
  --highlight-green: #1a3a2a;
  --highlight-blue: #1e3a5f;
  --highlight-pink: #3a1e2f;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  direction: rtl;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.8;
  color: var(--notebook-ink);
  background-color: var(--notebook-paper);
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--notebook-ink);
  margin-bottom: var(--spacing-lg);
}

h1, .entry-title {
  font-size: var(--font-size-heading);
}

p {
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

a {
  color: var(--notebook-ink);
  text-decoration: none;
  transition: all 200ms ease;
}

a:hover {
  opacity: 0.7;
}

/* Small text - metadata, dates, notes */
.post-date,
.post-meta,
.category-pill,
small {
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--notebook-ink-light);
}

/* ========================================
   LAYOUT STRUCTURE
   ======================================== */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

/* Container widths */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-medium {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-lg);
}

/* ========================================
   HEADER / NAVIGATION
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--notebook-bg);
  border-bottom: 1px solid var(--notebook-line);
  padding: var(--spacing-lg) 0;
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse; /* RTL: swap logo and actions */
}

.site-logo {
  display: flex;
  align-items: center;
  height: 36px;
  order: 2; /* RTL: logo on right */
}

.site-logo .logo-img {
  height: 36px;
  width: auto;
  max-width: 200px;
  transition: opacity var(--duration-quick) var(--ease),
              filter var(--duration-normal) var(--ease-in-out);
}

.site-logo .logo-img:hover {
  opacity: 0.7;
}

/* Dark mode: invert logo color to white */
body.dark-mode .site-logo .logo-img {
  filter: invert(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  order: 1; /* RTL: actions on left */
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--notebook-ink);
  transition: opacity 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle:hover {
  opacity: 0.7;
}

.dark-mode-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* About Link */
.about-link {
  font-size: var(--font-size-small);
  color: var(--notebook-ink);
  transition: opacity var(--duration-quick) var(--ease);
}

.about-link:hover {
  opacity: 0.7;
}

/* Add padding to main content to account for fixed header */
.site-content {
  padding-top: 85px;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

.main-content {
  padding: var(--spacing-3xl) 0;
  background-color: var(--notebook-bg);
  min-height: calc(100vh - 85px);
  transition: background-color 300ms ease-in-out;
}

/* ========================================
   HOMEPAGE - YEAR GROUPED INDEX
   ======================================== */

/* Index Header */
.index-header {
  text-align: center;
  padding-bottom: var(--spacing-2xl);
  margin-bottom: var(--spacing-3xl);
  border-bottom: 2px solid var(--notebook-line);
}

.index-title {
  font-size: var(--font-size-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--notebook-ink);
  margin-bottom: 12px;
}

.index-subtitle {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--notebook-ink-light);
  line-height: 1.6;
}

/* Index List */
.index-list {
  margin-bottom: var(--spacing-2xl);
}

.article-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--spacing-2xl);
  align-items: baseline;
  padding: var(--spacing-lg) 0;
  cursor: pointer;
  transition: all var(--duration-medium) var(--ease-out),
              opacity var(--duration-medium) var(--ease-out),
              filter var(--duration-medium) var(--ease-out);
  text-decoration: none;
  color: inherit;
}

.article-row:hover {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  background-color: rgba(0, 0, 0, 0.03);
}

body.dark-mode .article-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Year Column */
.year-column {
  text-align: right;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: monospace;
  color: var(--notebook-ink);
  width: 100px;
}

/* Title Column */
.title-column {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--notebook-ink);
  border-bottom: 1px solid var(--notebook-line);
  padding-bottom: 8px;
}

/* Date Column */
.date-column {
  white-space: nowrap;
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--notebook-ink-light);
  padding-bottom: 8px;
}

/* Index Footer */
.index-footer {
  margin-top: var(--spacing-2xl);
  text-align: center;
}

.index-footer p {
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--notebook-ink-light);
  margin-bottom: 0;
}

/* Category Filter Badge */
.category-filter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-lg);
  border: 2px solid var(--notebook-line);
  border-radius: 8px;
}

.filter-label {
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--notebook-ink-light);
}

.filter-category {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--notebook-ink);
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: transparent;
  border: 1px solid var(--notebook-line);
  border-radius: 20px;
}

.filter-clear {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--notebook-ink-light);
  text-decoration: none;
  transition: color 200ms ease;
  cursor: pointer;
}

.filter-clear:hover {
  color: var(--notebook-ink);
}

/* ========================================
   SINGLE POST PAGE
   ======================================== */

.single-post-article {
  background-color: var(--notebook-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--notebook-line);
  margin-bottom: var(--spacing-3xl);
}

.post-featured-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.post-content-wrapper {
  padding: var(--spacing-3xl) var(--spacing-2xl);
}

/* Category Pills */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.category-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: transparent;
  border: 1px solid var(--notebook-line);
  border-radius: 20px;
  font-size: var(--font-size-small);
  color: var(--notebook-ink-light);
  transition: all 200ms ease;
  cursor: pointer;
}

.category-pill:hover {
  background-color: var(--notebook-line);
  color: var(--notebook-ink);
}

.category-pill::before {
  content: '#';
  margin-left: 2px;
}

/* Post Header */
.post-header {
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--notebook-line);
}

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

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Post Content with Notebook Lines */
.entry-content {
  position: relative;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--notebook-line) 31px,
    var(--notebook-line) 32px
  );
  background-size: 100% 32px;
  background-position: 0 3px; /* Fine-tune to align text baseline with lines */
  padding: 3px 0 var(--spacing-md) 0; /* Match background offset */
  line-height: 32px;
}

.entry-content p {
  margin-bottom: 32px;
  line-height: 32px; /* Ensure consistent line height */
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 64px;
  margin-bottom: 32px;
  line-height: 32px; /* Keep headings on grid */
}

/* Blockquotes */
.entry-content blockquote {
  padding: var(--spacing-lg);
  margin: 32px 0;
  background-color: var(--highlight-yellow);
  border-right: 4px solid var(--notebook-ink-light);
  font-style: italic;
  line-height: 32px; /* Stay on grid */
}

.dark-mode .entry-content blockquote {
  background-color: var(--highlight-yellow);
}

/* Lists */
.entry-content ul,
.entry-content ol {
  margin-bottom: 32px;
  padding-right: var(--spacing-xl);
  line-height: 32px; /* Keep on grid */
}

.entry-content li {
  margin-bottom: 0; /* Remove extra spacing to stay on grid */
  line-height: 32px;
}

/* Images in content */
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 32px 0;
}

/* ========================================
   ARCHIVE PAGE
   ======================================== */

.archive-header {
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--notebook-line);
}

.archive-title {
  font-size: var(--font-size-heading);
  margin-bottom: var(--spacing-md);
}

.archive-description {
  font-size: var(--font-size-base);
  color: var(--notebook-ink-light);
}

.posts-grid {
  display: grid;
  gap: var(--spacing-xl);
}

.post-card {
  background-color: var(--notebook-bg);
  border: 1px solid var(--notebook-line);
  border-radius: 8px;
  overflow: hidden;
  transition: all 200ms ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.post-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

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

.post-card-title {
  font-size: var(--font-size-heading);
  margin-bottom: var(--spacing-md);
}

.post-card-excerpt {
  font-size: var(--font-size-base);
  color: var(--notebook-ink-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

/* ========================================
   CUSTOM PAGE (ABOUT)
   ======================================== */

.page-content {
  position: relative;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--notebook-line) 31px,
    var(--notebook-line) 32px
  );
  background-size: 100% 32px;
  background-position: 0 3px; /* Align text baseline with lines */
  padding: 3px 0 var(--spacing-md) 0; /* Match background offset */
  line-height: 32px;
}

.page-content p {
  margin-bottom: 32px;
  line-height: 32px;
}

.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: 64px;
  margin-bottom: 32px;
  line-height: 32px;
}

.page-content ul,
.page-content ol {
  margin-bottom: 32px;
  padding-right: var(--spacing-xl);
  line-height: 32px;
}

.page-content li {
  margin-bottom: 0;
  line-height: 32px;
}

.page-content blockquote {
  padding: var(--spacing-lg);
  margin: 32px 0;
  background-color: var(--highlight-yellow);
  border-right: 4px solid var(--notebook-ink-light);
  font-style: italic;
  line-height: 32px;
}

/* ========================================
   404 PAGE
   ======================================== */

.error-404 {
  text-align: center;
  padding: var(--spacing-3xl) 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error-404 .page-title {
  font-size: 72px;
  margin-bottom: var(--spacing-xl);
  color: var(--notebook-ink);
}

.error-404 .page-content p {
  font-size: var(--font-size-heading);
  margin-bottom: var(--spacing-2xl);
  color: var(--notebook-ink-light);
  background-image: none;
}

.error-404 .search-form {
  max-width: 500px;
  margin: 0 auto;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  background-color: var(--notebook-bg);
  border-top: 1px solid var(--notebook-line);
  padding: var(--spacing-2xl) 0;
  text-align: center;
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
}

.footer-signature-img {
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
  transition: filter var(--duration-normal) var(--ease-in-out);
}

/* Dark mode: invert signature to white */
body.dark-mode .footer-signature-img {
  filter: invert(1);
}

/* ========================================
   UTILITIES
   ======================================== */

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

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media screen and (max-width: 768px) {
  .container,
  .container-narrow,
  .container-medium {
    padding: 0 var(--spacing-md);
  }
  
  .post-featured-image {
    height: 250px;
  }
  
  .post-content-wrapper {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  
  .entry-title,
  .year-heading {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-2xl);
  }
}

/* ========================================
   COMMENTS
   ======================================== */

.comments-area {
  max-width: 800px;
  margin: var(--spacing-3xl) auto 0;
  padding: 0 var(--spacing-lg);
}

.comments-title {
  font-size: var(--font-size-heading);
  font-weight: 600;
  color: var(--notebook-ink);
  margin-bottom: var(--spacing-2xl);
  text-align: right;
}

/* Comment List */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-3xl) 0;
}

.comment-list .comment {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-lg);
  border: 1px solid var(--notebook-line);
  border-radius: 8px;
  background-color: var(--notebook-bg);
}

/* Threaded Comments (Replies) */
.comment-list .children {
  list-style: none;
  margin-right: var(--spacing-2xl);
  margin-top: var(--spacing-lg);
  padding-right: var(--spacing-xl);
  border-right: 3px solid var(--notebook-line);
  position: relative;
}

.comment-list .children .comment {
  position: relative;
  background-color: rgba(0, 0, 0, 0.02);
}

body.dark-mode .comment-list .children .comment {
  background-color: rgba(255, 255, 255, 0.02);
}

.comment-list .children .comment::before {
  content: '←';
  position: absolute;
  right: calc(-1 * var(--spacing-xl) - 12px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--notebook-ink-light);
  font-size: 18px;
  font-weight: bold;
  background-color: var(--notebook-bg);
  padding: 4px;
  border-radius: 50%;
}

/* Comment Meta */
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--notebook-line);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.comment-author .avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.comment-author .fn {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--notebook-ink);
  font-style: normal;
}

.comment-metadata {
  text-align: left;
}

.comment-metadata a {
  font-size: var(--font-size-small);
  color: var(--notebook-ink-light);
  text-decoration: none;
}

.comment-metadata a:hover {
  color: var(--notebook-ink);
}

/* Comment Body */
.comment-content {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--notebook-ink);
  text-align: right;
  margin-bottom: var(--spacing-md);
}

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

/* Reply Button */
.reply {
  text-align: left;
}

.comment-reply-link {
  font-size: var(--font-size-small);
  color: var(--notebook-ink-light);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  transition: all var(--duration-quick) var(--ease);
  display: inline-block;
}

.comment-reply-link:hover {
  color: var(--notebook-ink);
  border-color: var(--notebook-ink);
}

/* Comment Form */
.comment-form-notebook {
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  border: 2px solid var(--notebook-line);
  border-radius: 8px;
  background-color: var(--notebook-bg);
}

.comment-reply-title {
  font-size: var(--font-size-heading);
  font-weight: 600;
  color: var(--notebook-ink);
  margin-bottom: var(--spacing-lg);
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-reply-title small {
  font-size: var(--font-size-small);
  font-weight: 400;
}

.comment-reply-title small a {
  color: var(--notebook-ink-light);
  text-decoration: none;
  transition: color 200ms ease;
}

.comment-reply-title small a:hover {
  color: var(--notebook-ink);
}

/* Form Fields */
.comment-form-notebook p {
  margin-bottom: var(--spacing-lg);
}

.comment-form-notebook label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--notebook-ink);
  margin-bottom: var(--spacing-xs);
  text-align: right;
}

.comment-form-notebook .required {
  color: #c41e3a;
}

.comment-form-notebook input[type="text"],
.comment-form-notebook input[type="email"],
.comment-form-notebook input[type="url"] {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--notebook-ink);
  background-color: var(--notebook-bg);
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  direction: rtl;
  text-align: right;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.comment-form-notebook input:focus {
  outline: none;
  border-color: var(--notebook-ink);
  box-shadow: 0 0 0 3px rgba(44, 42, 40, 0.1);
}

/* Notebook Textarea */
.notebook-textarea {
  width: 100%;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  line-height: 32px;
  color: var(--notebook-ink);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--notebook-line) 31px,
    var(--notebook-line) 32px
  );
  background-color: var(--notebook-bg);
  background-position: 0 24px; /* Adjust to align text baseline with lines */
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  direction: rtl;
  text-align: right;
  resize: vertical;
  min-height: 256px;
  transition: border-color var(--duration-quick) var(--ease),
              box-shadow var(--duration-quick) var(--ease);
}

.notebook-textarea:focus {
  outline: none;
  border-color: var(--notebook-ink);
  box-shadow: 0 0 0 3px rgba(44, 42, 40, 0.1);
}

/* Submit Button */
.submit-comment {
  font-size: var(--font-size-base);
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--notebook-bg);
  background-color: var(--notebook-ink);
  border: none;
  border-radius: 4px;
  padding: var(--spacing-sm) var(--spacing-2xl);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease);
  float: left;
}

.submit-comment:hover {
  background-color: var(--notebook-ink-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submit-comment:active {
  transform: translateY(0);
}

/* Form Footer */
.form-submit {
  clear: both;
  padding-top: var(--spacing-md);
}

/* No Comments */
.no-comments {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--notebook-ink-light);
  padding: var(--spacing-2xl);
  font-style: italic;
}

/* Comments Navigation */
.comment-navigation {
  margin: var(--spacing-2xl) 0;
  display: flex;
  justify-content: space-between;
}

.comment-navigation a {
  font-size: var(--font-size-small);
  color: var(--notebook-ink-light);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  transition: all 200ms ease;
}

.comment-navigation a:hover {
  color: var(--notebook-ink);
  border-color: var(--notebook-ink);
}

/* Mobile Responsive */
@media screen and (max-width: 640px) {
  .comments-area {
    padding: 0 var(--spacing-md);
  }

  .comment-list .children {
    margin-right: var(--spacing-md);
    padding-right: var(--spacing-sm);
  }

  .comment-form-notebook {
    padding: var(--spacing-lg);
  }

  .submit-comment {
    width: 100%;
    float: none;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep only essential feedback */
  button:active {
    transform: scale(0.98);
  }
}

/* ========================================
   MOBILE ANIMATION ADJUSTMENTS  
   ======================================== */

@media screen and (max-width: 640px) {
  .article-row {
    transition: all calc(var(--duration-medium) * 0.8) var(--ease-out);
  }

  .comment-form-notebook input,
  .comment-form-notebook textarea {
    transition: border-color calc(var(--duration-quick) * 0.8) var(--ease),
                box-shadow calc(var(--duration-quick) * 0.8) var(--ease);
  }
}

/* ========================================
   ARTICLE CONTENT BLUR EFFECT
   ======================================== */

.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote,
.entry-content > ul,
.entry-content > ol,
.entry-content > pre,
.entry-content > .wp-block-image {
  transition: opacity var(--duration-medium) var(--ease-out),
              filter var(--duration-medium) var(--ease-out);
  cursor: pointer;
}

/* ========================================
   CONTENT BLOCK TYPES - COMPREHENSIVE STYLING
   ======================================== */

/* BLOCKQUOTES - Standard Quote */
.entry-content blockquote,
.page-content blockquote {
  display: block;
  margin: 48px 0;
  padding: 24px;
  padding-right: 32px;
  background: rgba(180, 170, 150, 0.05);
  border-right: 3px solid #6B6762;
  border-radius: 0;
  font-style: italic;
  line-height: 32px;
}

body.dark-mode .entry-content blockquote,
body.dark-mode .page-content blockquote {
  background: rgba(100, 100, 100, 0.1);
  border-right-color: #A0A0A0;
}

.entry-content blockquote cite,
.page-content blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  color: #6B6762;
  font-style: normal;
}

.entry-content blockquote cite::before,
.page-content blockquote cite::before {
  content: "— ";
}

body.dark-mode .entry-content blockquote cite,
body.dark-mode .page-content blockquote cite {
  color: #A0A0A0;
}

/* BLOCKQUOTES - Pull Quote (Centered) */
.entry-content .pullquote,
.page-content .pullquote {
  margin: 64px 0;
  padding: 32px 48px;
  text-align: center;
  background: transparent;
  border-top: 1px solid rgba(180, 170, 150, 0.15);
  border-bottom: 1px solid rgba(180, 170, 150, 0.15);
  border-right: none;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 32px;
}

/* TEXT HIGHLIGHTS */
.entry-content mark,
.page-content mark {
  background: #FEF3C7;
  padding: 2px 4px;
  border-radius: 2px;
  color: inherit;
}

body.dark-mode .entry-content mark,
body.dark-mode .page-content mark {
  background: #3D3419;
}

/* Highlight color variants */
.entry-content .highlight-yellow { background: #FEF3C7; }
.entry-content .highlight-green { background: #D1FAE5; }
.entry-content .highlight-blue { background: #DBEAFE; }
.entry-content .highlight-pink { background: #FCE7F3; }

body.dark-mode .entry-content .highlight-yellow { background: #3D3419; }
body.dark-mode .entry-content .highlight-green { background: #1A3A2A; }
body.dark-mode .entry-content .highlight-blue { background: #1E3A5F; }
body.dark-mode .entry-content .highlight-pink { background: #3A1E2F; }

/* INLINE CODE */
.entry-content code,
.page-content code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: rgba(180, 170, 150, 0.15);
  color: #C53030;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  direction: ltr;
}

body.dark-mode .entry-content code,
body.dark-mode .page-content code {
  background: rgba(100, 100, 100, 0.2);
  color: #FCA5A5;
}

/* CODE BLOCKS */
.entry-content pre,
.page-content pre {
  margin: 32px 0;
  background: #F9F7F3;
  border: 1px solid rgba(180, 170, 150, 0.15);
  border-radius: 4px;
  overflow: auto;
}

body.dark-mode .entry-content pre,
body.dark-mode .page-content pre {
  background: #1A1A1A;
}

.entry-content pre code,
.page-content pre code {
  display: block;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 24px;
  color: #2C2A28;
  background: transparent;
  white-space: pre;
  direction: ltr;
  border-radius: 0;
}

body.dark-mode .entry-content pre code,
body.dark-mode .page-content pre code {
  color: #E8E8E8;
}

/* CALL-OUT BOXES */
.entry-content .callout,
.page-content .callout {
  margin: 32px 0;
  padding: 20px 24px;
  border-right: 4px solid;
  border-radius: 4px;
}

/* Info Box */
.entry-content .callout-info,
.page-content .callout-info {
  background: rgba(219, 234, 254, 0.3);
  border-right-color: #3B82F6;
}

body.dark-mode .entry-content .callout-info,
body.dark-mode .page-content .callout-info {
  background: rgba(30, 58, 95, 0.2);
}

/* Warning Box */
.entry-content .callout-warning,
.page-content .callout-warning {
  background: rgba(254, 243, 199, 0.3);
  border-right-color: #F59E0B;
}

body.dark-mode .entry-content .callout-warning,
body.dark-mode .page-content .callout-warning {
  background: rgba(61, 52, 25, 0.3);
}

/* Success Box */
.entry-content .callout-success,
.page-content .callout-success {
  background: rgba(209, 250, 229, 0.3);
  border-right-color: #10B981;
}

body.dark-mode .entry-content .callout-success,
body.dark-mode .page-content .callout-success {
  background: rgba(26, 58, 42, 0.3);
}

/* Error Box */
.entry-content .callout-error,
.page-content .callout-error {
  background: rgba(254, 226, 226, 0.3);
  border-right-color: #EF4444;
}

body.dark-mode .entry-content .callout-error,
body.dark-mode .page-content .callout-error {
  background: rgba(127, 29, 29, 0.2);
}

/* HORIZONTAL RULES */
.entry-content hr,
.page-content hr {
  width: 100%;
  height: 1px;
  background: rgba(180, 170, 150, 0.15);
  border: none;
  margin: 48px 0;
}

/* AUTHOR'S NOTE */
.entry-content .authors-note,
.page-content .authors-note {
  margin: 48px 0;
  padding: 24px;
  background: rgba(180, 170, 150, 0.08);
  border: 1px dashed rgba(180, 170, 150, 0.3);
  border-radius: 4px;
}

.entry-content .authors-note::before,
.page-content .authors-note::before {
  content: "✍️ ملاحظة الكاتب";
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #6B6762;
  font-style: italic;
}

/* POETRY/VERSE */
.entry-content .verse,
.page-content .verse {
  margin: 48px 0;
  padding: 32px;
  text-align: center;
  line-height: 36px;
}

.entry-content .verse p,
.page-content .verse p {
  font-size: 18px;
  margin-bottom: 8px;
}

/* FOOTNOTES */
.entry-content .footnotes,
.page-content .footnotes {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid rgba(180, 170, 150, 0.15);
}

.entry-content .footnotes h2,
.page-content .footnotes h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
}

.entry-content .footnotes ol,
.page-content .footnotes ol {
  font-size: 14px;
  line-height: 24px;
  color: #6B6762;
}

body.dark-mode .entry-content .footnotes ol,
body.dark-mode .page-content .footnotes ol {
  color: #A0A0A0;
}

/* TABLES */
.entry-content table,
.page-content table {
  width: 100%;
  margin: 32px 0;
  border: 1px solid rgba(180, 170, 150, 0.15);
  border-radius: 4px;
  border-collapse: collapse;
  direction: rtl;
  overflow: hidden;
}

.entry-content thead,
.page-content thead {
  background: rgba(180, 170, 150, 0.1);
}

.entry-content th,
.page-content th {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  border-bottom: 2px solid rgba(180, 170, 150, 0.3);
}

.entry-content td,
.page-content td {
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid rgba(180, 170, 150, 0.1);
  vertical-align: top;
}

.entry-content tr:hover,
.page-content tr:hover {
  background: rgba(180, 170, 150, 0.05);
}

/* IMAGES */
.entry-content img,
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 48px 0;
}

.entry-content figcaption,
.page-content figcaption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  color: #6B6762;
  text-align: center;
  font-style: italic;
}

body.dark-mode .entry-content figcaption,
body.dark-mode .page-content figcaption {
  color: #A0A0A0;
}

/* ========================================
   CONTENT BLOCK TYPES - COMPREHENSIVE STYLING
   ======================================== */

/* --- BLOCKQUOTES --- */
.entry-content blockquote,
.page-content blockquote {
  position: relative;
  padding: 24px 32px 24px 24px; /* Extra right padding for RTL border */
  margin: 48px 0;
  background-color: rgba(180, 170, 150, 0.05);
  border-right: 3px solid var(--notebook-ink-light);
  border-radius: 0;
  font-style: italic;
  line-height: 32px;
}

.entry-content blockquote p,
.page-content blockquote p {
  margin-bottom: 16px;
}

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

/* Blockquote attribution */
.entry-content blockquote cite,
.page-content blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  color: var(--notebook-ink-light);
  font-style: normal;
}

.entry-content blockquote cite::before,
.page-content blockquote cite::before {
  content: '— ';
}

/* Pull Quote */
.entry-content .pullquote,
.page-content .pullquote {
  margin: 64px 0;
  padding: 32px 48px;
  text-align: center;
  background: transparent;
  border-top: 1px solid var(--notebook-line);
  border-bottom: 1px solid var(--notebook-line);
  border-right: none;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 32px;
}

/* --- LISTS --- */
.entry-content ul,
.page-content ul {
  list-style: none;
  margin: 24px 0;
  padding-right: 0;
}

.entry-content ul li,
.page-content ul li {
  position: relative;
  padding-right: 24px;
  margin-bottom: 12px;
  line-height: 32px;
}

.entry-content ul li::before,
.page-content ul li::before {
  content: '•';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  color: var(--notebook-ink-light);
}

/* Nested lists */
.entry-content ul ul,
.page-content ul ul {
  margin-top: 12px;
  padding-right: 24px;
}

.entry-content ul ul li::before,
.page-content ul ul li::before {
  content: '◦';
}

/* Ordered lists */
.entry-content ol,
.page-content ol {
  list-style: none;
  counter-reset: item;
  margin: 24px 0;
  padding-right: 0;
}

.entry-content ol li,
.page-content ol li {
  position: relative;
  padding-right: 32px;
  margin-bottom: 12px;
  counter-increment: item;
  line-height: 32px;
}

.entry-content ol li::before,
.page-content ol li::before {
  content: counter(item) '. ';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--notebook-ink-light);
}

/* --- TEXT HIGHLIGHTS --- */
.entry-content mark,
.page-content mark {
  display: inline;
  background-color: var(--highlight-yellow);
  padding: 2px 4px;
  border-radius: 2px;
  color: inherit;
}

/* --- INLINE CODE --- */
.entry-content code,
.page-content code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background-color: rgba(180, 170, 150, 0.15);
  color: #C53030;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  direction: ltr;
}

body.dark-mode .entry-content code,
body.dark-mode .page-content code {
  background-color: rgba(100, 100, 100, 0.2);
  color: #FCA5A5;
}

/* --- CODE BLOCKS --- */
.entry-content pre,
.page-content pre {
  margin: 32px 0;
  background-color: var(--notebook-paper);
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  overflow: auto;
}

.entry-content pre code,
.page-content pre code {
  display: block;
  padding: 16px;
  font-size: 14px;
  line-height: 24px;
  background: transparent;
  color: var(--notebook-ink);
  white-space: pre;
  border-radius: 0;
}

/* --- HORIZONTAL RULE --- */
.entry-content hr,
.page-content hr {
  width: 100%;
  height: 1px;
  background-color: var(--notebook-line);
  border: none;
  margin: 48px 0;
}

/* --- CALL-OUT BOXES --- */
.entry-content .info-box,
.page-content .info-box {
  display: block;
  margin: 32px 0;
  padding: 20px 24px;
  background-color: rgba(219, 234, 254, 0.3);
  border-right: 4px solid #3B82F6;
  border-radius: 4px;
  line-height: 32px;
}

body.dark-mode .entry-content .info-box,
body.dark-mode .page-content .info-box {
  background-color: rgba(30, 58, 95, 0.2);
}

.entry-content .warning-box,
.page-content .warning-box {
  background-color: rgba(254, 243, 199, 0.3);
  border-right-color: #F59E0B;
}

body.dark-mode .entry-content .warning-box,
body.dark-mode .page-content .warning-box {
  background-color: rgba(61, 52, 25, 0.3);
}

.entry-content .success-box,
.page-content .success-box {
  background-color: rgba(209, 250, 229, 0.3);
  border-right-color: #10B981;
}

body.dark-mode .entry-content .success-box,
body.dark-mode .page-content .success-box {
  background-color: rgba(26, 58, 42, 0.3);
}

.entry-content .error-box,
.page-content .error-box {
  background-color: rgba(254, 226, 226, 0.3);
  border-right-color: #EF4444;
}

body.dark-mode .entry-content .error-box,
body.dark-mode .page-content .error-box {
  background-color: rgba(127, 29, 29, 0.2);
}

/* --- IMAGES --- */
.entry-content img,
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 32px 0;
  border: 1px solid var(--notebook-line);
}

.entry-content figure,
.page-content figure {
  margin: 48px 0;
}

.entry-content figcaption,
.page-content figcaption {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--notebook-ink-light);
  text-align: center;
  font-style: italic;
}

/* --- LINKS --- */
.entry-content a,
.page-content a {
  color: var(--notebook-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--notebook-ink-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all 200ms ease;
}

.entry-content a:hover,
.page-content a:hover {
  color: var(--notebook-ink-light);
  text-decoration-color: var(--notebook-ink);
  text-decoration-thickness: 2px;
}

/* --- TABLES --- */
.entry-content table,
.page-content table {
  width: 100%;
  margin: 32px 0;
  border: 1px solid var(--notebook-line);
  border-radius: 4px;
  border-collapse: collapse;
  direction: rtl;
  overflow: hidden;
}

.entry-content thead,
.page-content thead {
  background-color: rgba(180, 170, 150, 0.1);
}

.entry-content th,
.page-content th {
  padding: 12px 16px;
  border-bottom: 2px solid var(--notebook-line);
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: var(--notebook-ink);
}

.entry-content td,
.page-content td {
  padding: 12px 16px;
  font-size: 16px;
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid rgba(180, 170, 150, 0.1);
  line-height: 32px;
}

.entry-content tr:hover,
.page-content tr:hover {
  background-color: rgba(180, 170, 150, 0.05);
}

/* --- EMPHASIS --- */
.entry-content strong,
.page-content strong {
  font-weight: 600;
}

.entry-content em,
.page-content em {
  font-style: italic;
}

/* --- SUBSCRIPT & SUPERSCRIPT --- */
.entry-content sub,
.entry-content sup,
.page-content sub,
.page-content sup {
  font-size: 11px;
}

/* --- AUTHOR'S NOTE --- */
.entry-content .authors-note,
.page-content .authors-note {
  margin: 48px 0;
  padding: 24px;
  background-color: rgba(180, 170, 150, 0.08);
  border: 1px dashed var(--notebook-line);
  border-radius: 4px;
  font-size: 15px;
  line-height: 27px;
  font-style: italic;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media screen and (max-width: 640px) {
  .entry-content blockquote,
  .page-content blockquote {
    padding: 16px 24px 16px 16px;
    margin: 32px 0;
  }

  .entry-content .pullquote,
  .page-content .pullquote {
    padding: 24px 16px;
    margin: 48px 0;
  }

  .entry-content table,
  .page-content table {
    display: block;
    overflow-x: auto;
  }
}