/*
Theme Name: تدوينة
Template: astra
Description: قالب تدوينة - ستايل X
Version: 4.0
Author: سعيد
Text Domain: tadweena
*/


:root {
  --x-bg: #ffffff;
  --x-bg-alt: #f7f9f9;
  --x-bg-hover: #f7f7f7;
  --x-text: #0f141a;
  --x-text-secondary: #536471;
  --x-blue: #1d9bf0;
  --x-blue-hover: #1a8cd8;
  --x-border: #eff3f4;
  --x-border-dark: #cfd9de;
  --x-radius: 16px;
  --x-font: 'IBM Plex Sans Arabic', TwitterChirp, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body, button, input, select, textarea {
  font-family: var(--x-font) !important;
}

body {
  background: var(--x-bg) !important;
  color: var(--x-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--x-blue); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--x-blue-hover); }

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--x-font) !important;
  font-weight: 700;
  color: var(--x-text);
  line-height: 1.3;
}

/* === Header === */
.ast-primary-header-bar, .site-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--x-border) !important;
  box-shadow: none !important;
}

.ast-site-identity .site-title a {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--x-text) !important;
}

.ast-builder-menu-1 .menu-item > .menu-link {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  color: var(--x-text-secondary) !important;
  padding: 0 16px !important;
  transition: color 0.15s;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link {
  color: var(--x-text) !important;
}
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
  color: var(--x-text) !important;
  font-weight: 700 !important;
}

/* Mobile */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content { background: var(--x-bg) !important; }
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu { background-color: var(--x-bg) !important; }

/* === Container === */
.ast-separate-container, #page { background: var(--x-bg) !important; }

.ast-separate-container .ast-article-inner {
  background: var(--x-bg) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--x-border) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background 0.15s;
}
.ast-separate-container .ast-article-inner:hover {
  background: var(--x-bg-hover) !important;
  transform: none;
  box-shadow: none !important;
}

/* Remove grid card spacing */
.ast-separate-container .ast-blog-layout-4-grid .ast-article-post {
  padding: 0 !important;
}
.ast-blog-layout-4-grid .ast-article-inner {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* === Thumbnail === */
.ast-article-post .post-thumb-img-content img {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--x-radius) !important;
  transition: opacity 0.2s;
}
.ast-article-post:hover .post-thumb-img-content img {
  opacity: 0.92;
}
.ast-article-post .post-thumb-img-content { overflow: hidden; }
.ast-article-post.remove-featured-img-padding .blog-layout-4 .post-content .ast-blog-featured-section .post-thumb-img-content {
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: 0 1em;
}

/* === Title === */
.entry-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.3em !important;
}
.entry-title a { color: var(--x-text) !important; }
.entry-title a:hover { color: var(--x-blue) !important; }

/* === Category Badges === */
.cat-links a {
  background: none !important;
  color: var(--x-blue) !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}
.cat-links a:hover { text-decoration: underline; }

/* === Meta === */
.entry-meta, .entry-meta * {
  color: var(--x-text-secondary) !important;
  font-size: 0.8rem !important;
}
.entry-meta a:not(.ast-button) { color: var(--x-text-secondary) !important; }
.entry-meta a:hover { color: var(--x-blue) !important; }

/* === Excerpt === */
.ast-excerpt-container p {
  color: var(--x-text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Article Padding === */
.ast-article-inner { padding: 12px 16px !important; }

/* === Single Post === */
.ast-separate-container .ast-article-single {
  background: var(--x-bg) !important;
  border-radius: 0 !important;
  box-shadow: none;
  border-bottom: 1px solid var(--x-border);
}
.ast-article-single .entry-title {
  font-size: 1.8rem !important;
  color: var(--x-text) !important;
}
.ast-article-single .entry-content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--x-text);
}
.ast-article-single .entry-content p { margin-bottom: 1.3em; }
.ast-article-single .entry-content img { border-radius: var(--x-radius); }
.ast-article-single .entry-content a { color: var(--x-blue) !important; }

/* === Footer === */
.site-below-footer-wrap {
  background: var(--x-bg) !important;
  border-top: 1px solid var(--x-border) !important;
}
.ast-footer-copyright, .ast-footer-copyright p {
  color: var(--x-text-secondary) !important;
  font-size: 0.82rem !important;
}

/* === Pagination === */
.ast-pagination .page-numbers {
  border-radius: 9999px !important;
  font-weight: 600;
  color: var(--x-text-secondary) !important;
  border: none !important;
  min-width: 36px;
  height: 36px;
  line-height: 36px !important;
}
.ast-pagination .page-numbers.current {
  background: var(--x-blue) !important;
  color: #fff !important;
}
.ast-pagination .page-numbers:hover:not(.current) {
  background: var(--x-bg-alt) !important;
}

/* === Scroll Top === */
#ast-scroll-top {
  background: var(--x-blue) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* === Widgets === */
.widget-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--x-text) !important;
  border-bottom: none;
  margin-bottom: 0.8em;
}

/* === Archive === */
.ast-archive-description { background: var(--x-bg) !important; }
.ast-archive-description .ast-archive-title { color: var(--x-text) !important; }

/* === Comments === */
.comments-area, .ast-separate-container .comments-count-wrapper { background: var(--x-bg) !important; }

/* === No Sidebar === */
.ast-right-sidebar #primary, .ast-left-sidebar #primary { width: 100%; border: none; }

/* === Selection === */
::selection { background: var(--x-blue) !important; color: #fff !important; }

/* === Hide Site Title === */
.site-title, .ast-site-identity .site-title,
.ast-site-identity .site-description {
  display: none !important;
}
.custom-logo-link img { max-width: 120px !important; height: auto !important; }

/* === Buttons (X style) === */
.wp-block-button .wp-block-button__link,
button, .ast-button, input[type='submit'] {
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

/* === Inputs === */
input[type='text'], input[type='email'], input[type='url'],
input[type='password'], input[type='search'], textarea, select {
  border: 1px solid var(--x-border-dark) !important;
  border-radius: 4px !important;
  background: var(--x-bg) !important;
}
input:focus, textarea:focus {
  border-color: var(--x-blue) !important;
  box-shadow: 0 0 0 1px var(--x-blue) !important;
}

/* === Responsive === */
@media (max-width: 921px) {
  .ast-article-single .entry-title { font-size: 1.4rem !important; }
  .entry-title { font-size: 0.92rem !important; }
}

/* === Exact X Typography === */
body {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: #0f141a !important;
}
.entry-content, .ast-excerpt-container p, p {
  font-size: 15px;
  line-height: 22.5px;
}

/* === Author Avatar in Post Meta === */
.td-author-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-author-avatar img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover;
  vertical-align: middle;
}
.ast-article-single .td-author-avatar img {
  width: 32px !important;
  height: 32px !important;
}

/* === Hide 'بواسطة' text before author === */
.entry-meta .posted-by > span:not(.td-author-avatar) {
  display: none !important;
}
.entry-meta .posted-by .author-label,
.entry-meta .ast-author-label {
  display: none !important;
}
/* Hide any text node before avatar via clip */
.posted-by {
  font-size: 0 !important;
}
.posted-by .td-author-avatar,
.posted-by .td-author-avatar * {
  font-size: 0.8rem !important;
}

/* === Lazy Load Fade-in === */
img {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
img.loaded, img[complete] {
  opacity: 1;
}
/* Images that are already loaded (cached) */
img:not([loading='lazy']),
.custom-logo-link img,
.td-avatar {
  opacity: 1 !important;
}

/* === Categories Bar === */
.td-cat-bar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 99;
}
.td-cat-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 16px;
  justify-content: center;
}
.td-cat-inner::-webkit-scrollbar { display: none; }
.td-cat-link {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #536471;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}
.td-cat-link:hover {
  color: #0f141a;
  background: #f7f9f9;
}
.td-cat-link.active {
  color: #0f141a;
  font-weight: 700;
  border-bottom-color: #1a56db;
}
@media (max-width: 768px) {
  .td-cat-inner { justify-content: flex-start; }
  .td-cat-link { padding: 10px 14px; font-size: 13px; }
}

/* === Blog Thumbnails === */
.td-blog-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 768px) {
  .td-blog-thumb { height: 160px; }
}