/* --- Local Font Definitions --- */
@font-face {
  font-family: 'Alexandria';
  src: url('./assets/fonts/Alexandria-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('./assets/fonts/Alexandria-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('./assets/fonts/Alexandria-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('./assets/fonts/Alexandria-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* --- End Local Font Definitions --- */

:root{
  /* Color scheme hint for UAs */
  color-scheme: light;

  /* Colors */
  --color-bg:        #ffffff;
  --color-surface:   #E6E8E6;
  --color-text:      #191919;
  --color-muted:     #cccccc;
  --color-accent:    #F15025;
  --color-border:    #191919;

  /* Typography */
  --ff-base: 'Alexandria', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

  --fs-xxl: 2.25rem;  /* 36px */
  --fs-xl:  2rem;     /* 32px */
  --fs-lg:  1.5rem;   /* 24px */
  --fs-md:  1rem;     /* 16px */
  --fs-sm:  0.875rem; /* 14px */
  --fs-xs:  0.75rem;  /* 12px */

  /* Spacing */
  --space-xxl: 48px;
  --space-xl:  32px;
  --space-lg:  24px;
  --space-md:  16px;
  --space-sm:  8px;
  --space-xs:  4px;

  /* Effects */
  --radius-md: 12px;
  --shadow-md: 0 8px 24px rgba(0,0,0,.15);

  /* Borders */
  --border-width: 2px;
  --border-style: dashed;
  --main-border: var(--border-width) var(--border-style) var(--color-border);

  /* Legacy aliases */
  --font-bg: var(--fs-xl);
  --font-md: var(--fs-lg);
  --font-sm: var(--fs-xs);
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  font-family: var(--ff-base);
  box-sizing: border-box;
}

:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body {
  direction: rtl;
  margin: 0;
  padding: 2% 5%;
  display: grid;
  grid-template-columns: 20% 80%;
  font-size: var(--fs-md);
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-accent); }
a:hover{ filter: brightness(.92); }

#site-header {
  display: grid;
  grid-column: 1/2;
  border: var(--main-border);
  background-color: var(--color-surface);
}

/* Fixed, aligned to 20% column with 5% page padding */
#header-contenar{
  position: fixed;
  top: 2%;
  right: 5%;
  width: calc((100vw - 10%) * 0.2);
  text-align: center;
  z-index: 1000;
  transition: top .25s ease, right .25s ease, padding .25s ease;
}

#header-contenar.at-top {}
#header-contenar.is-stuck { top: 0; }

#header-contenar h2 {
  font-size: var(--fs-sm);
  margin: 20px 2px;
  padding: 10px 0;
  border: var(--main-border);
  border-left: 0;
  border-right: 0;
}

.logo img {
  width: 30%;
  height: auto;
  margin: 60px 0;
}

.social ul { display: flex; justify-content: center; }
.social li { padding: 0 0.2vh; }
.social svg { width: 4vh; height: auto; }

.links ul {
  text-align: right;
  padding: 0 20px;
  margin: 10px;
}

.links li {
  list-style-type: square;
  color: var(--color-text);
}

.search {}
.search-form {}

.search-field {
  padding: .6rem .8rem;
  border: 1px solid var(--color-muted);
}
.search-field:focus { color: var(--color-accent); outline: none; }
.search-field:active { border: 0; }

.search-submit {
  padding: .6rem 1rem;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
}
.search-submit:hover { opacity: .9; }

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

/* Main */
main {
  display: grid;
  grid-column: 2/3;
  min-height: 92vh;
  border: var(--main-border);
  border-right: 0;
  padding: 5% 5% 2.5% 5%;
}

/* --- Entry Content Styling --- */
.entry-content {
    padding: 20px;
    display: grid;
    grid-column: 1/3;
}
.entry-content h2 {
    font-size: var(--fs-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-surface);
    padding-bottom: var(--space-sm);
}
.entry-content h3 {
    font-size: var(--fs-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-surface);

}
.entry-content p {
    line-height: 1.8;
    margin-bottom: var(--space-md);
}
.entry-content ul,
.entry-content ol {
    margin-right: var(--space-md);
    margin-bottom: var(--space-md);
    padding-right: var(--space-md);
}
.entry-content ul {
    list-style-type: disc;
}
.entry-content ol {
    list-style-type: decimal;
}
.entry-content li {
    margin-bottom: var(--space-sm);
    line-height: 1.7;
    list-style-type: square;
}
.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}
.entry-content a:hover {
    text-decoration-thickness: 2px;
    filter: none;
}
.entry-content blockquote {
    border-right: 4px solid var(--color-accent);
    padding-right: var(--space-md);
    margin: var(--space-lg) 0;
    font-style: italic;
    color: #555;
}
/* --- End Entry Content Styling --- */

/* Optional rendering boost for long lists */
.posts-index{ content-visibility: auto; contain-intrinsic-size: 1px 800px; }

/* Post card */
.post-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 5fr 1fr;
  margin-bottom: var(--space-lg);
  border: var(--main-border);
}

.post-thumb {
  display: grid;
  grid-column: 1/2;
  grid-row: 1/3;
  border-left: var(--main-border);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 16 / 9;
}

.post-title {
  display: grid;
  grid-column: 2/4;
  grid-row: 1/2;
  border-bottom: var(--main-border);
  align-content: center;
  padding-right: var(--space-sm);
  font-size: clamp(1.1rem, 1.3vw, var(--fs-lg));
}

.post-date {
  display: grid;
  grid-column: 2/3;
  grid-row: 2/3;
  border-left: var(--main-border);
  justify-content: center;
  align-content: center;
  font-size: var(--fs-sm);
}

.post-share {
  display: flex;
  grid-column: 3/4;
  grid-row: 2/3;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}
.post-share svg {
  width: 32px;
  height: 32px;
  display: block;
}

#load-more {
  padding: .6rem 1rem;
  width: 100%;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  font-size: var(--fs-lg);
}
#load-more:hover { opacity: 0.9; }
#load-more-status { margin-top: 0; }

#cat-title { margin: 10px 0; }
.archive-count { margin: 10px 5px; }

/* Single */
.single-posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
}

.entry-single-title {
  display: grid;
  grid-column: 1/3;
  height: auto;
  border-bottom: var(--main-border);
  padding: 10px;
  font-size: clamp(1.25rem, 2vw, var(--fs-lg));
}

.post-single-date {
  display: grid;
  grid-column: 1/2;
  align-content: center;
  justify-content: center;
  font-size: var(--fs-xl);
  border-bottom: var(--main-border);
  border-left: var(--main-border);
  padding: 5px;
}

/* --- Single Post Content Width Fix --- */
.single-posts .entry-content {
    grid-column: 1 / -1; /* Makes the content span all columns of the grid */
}

/* Tags */
.post-tags {
  grid-column: 1 / 3;
  margin: 15px 0;
  padding: 10px;
}
.post-tags .label { margin-inline-end: 8px; }
.post-tags .tags-wrap { display: inline; }
.post-tags .tag-item { display: inline; text-decoration: none; }
.post-tags .tag-item::before { content: "- "; }

/* Prev/Next cards */
.post-nav.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block: 24px;
}
.post-nav-card {
  display: block;
  padding: 14px 16px;
  border: var(--main-border);
  text-decoration: none;
}
.post-nav-card .label { font-size: var(--fs-xs); opacity: .7; display: inline-block; margin-bottom: 6px; }
.post-nav-card .title { font-size: var(--fs-md); margin: 0 0 6px; line-height: 1.4; }
.post-nav-card .date  { font-size: var(--fs-sm); opacity: .8; }

/* Search / Tags cloud */
#search-title { margin-bottom: 20px; }
.search-count  { margin-bottom: 10px; }
.no-results    { margin-top: 10px; }
.result-meta   { margin-top: 10px; }
.tags-cloud    { text-align: center; padding: 20px; }

/* Desktop/Mobile headers */
#site-header { display: grid; }
#site-header-mobile { display: none; }
.hamburger { display: none; }

/* Mobile / Tablet */
@media (max-width: 992px) {
  #site-header { display: none; }

  .hamburger{
    display: inline-flex;
    position: fixed;
    flex-direction: column;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    z-index: 10001;
    background-color: var(--color-text);
    align-items: center;
    justify-content: center;
    font-weight: 100;
    border: 0;
  }
  .hamburger span{ width: 32px; height: 2px; background: #fff; margin: 3px 0; display: block; }

  #site-header-mobile{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;
    max-width: 360px;
    background: var(--color-bg);
    z-index: 10002;
    overflow: auto;
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform .25s ease;
    text-align: center; /* --- يوسّط كل شيء داخل الهيدر --- */
  }
  body.menu-open #site-header-mobile{ transform: translateX(0); }
  body.menu-open { overflow: hidden; }

  #site-header-mobile .header-close{
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background-color: var(--color-text);
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    cursor: pointer;
  }

  body.menu-open::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9999;
  }
  
  /* --- تعديلات هيدر الموبايل --- */
  #site-header-mobile .logo {
    margin-top: 10px; /* المسافة العلوية للشعار */
  }

  #site-header-mobile .logo img {
    width: 40%; /* حجم الشعار */
    margin-bottom: var(--space-md);
  }

  #site-header-mobile .links ul {
    text-align: center; /* توسيط نصوص الروابط */
  }

  #site-header-mobile .links li {
    list-style-type: none; /* إزالة المربعات من القائمة */
    margin-bottom: var(--space-sm);
  }
  
  #site-header-mobile .search {
     /* مسافات حول مربع البحث */
  }
  /* --- نهاية تعديلات هيدر الموبايل --- */
  
  main{
    display: grid;
    grid-column: 1/3;
    border: 0;
    margin-top: 60px;
    padding: 0;
  }

  main h1 { font-size: var(--fs-xl); padding: var(--space-md); }

  .post-item{ display: grid; grid-template-rows: auto auto auto; }
  .post-thumb{ grid-column: 1/4; grid-row: 1/2; border-left: 0; }
  .post-title{ grid-column: 1/4; grid-row: 2/3; justify-content: center; padding: 10px; border-top: var(--main-border); }
  .post-date { grid-column: 1/2; grid-row: 3/4; padding: 0 15px; }
  .post-share{ grid-column: 2/4; grid-row: 3/4; }
  .post-share svg { width: 24px; height: 24px; margin: 5px 0;}

  .entry-single-title {}
  .post-single-date { font-size: var(--fs-lg); }
  .post-single-share {padding: 5px; border-bottom: var(--main-border);}
  .post-single-share svg { width: 20px; height: 20px;}

  .search-form-wrap { text-align: center; margin-top: 15px; }
  .post-nav.boxes { grid-template-columns: 1fr; }

  .post-tags .tags-wrap{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
  }
  .post-tags .tag-item{ display: block; }

  #header-contenar{
    position: static;
    width: 100%;
    top: auto;
    right: auto;
  }
}

/* Mobile-only small tweaks */
@media (max-width: 640px){}

#site-header-mobile h2 {
  font-size: 2vh;
  margin: 20px 2px;
  padding: 10px 0;
  border: var(--main-border);
  border-left: 0;
  border-right: 0;
  text-align: center;
}

.website-mobile { text-align: center; }

/* إزالة القواعد القديمة غير المستخدمة */
.logo-mobile,
.search-mobile {
  /* هذه القواعد لم تعد ضرورية بعد التعديلات الجديدة */
}


/* --- (UPDATED) Styling for ALL Share Icons --- */
.page-share,
.post-single-share {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  border-bottom: var(--main-border);
}

.post-share a,
.page-share a,
.post-single-share a {
  color: var(--color-text);
  display: inline-flex;
  cursor: pointer; /* <-- هذا هو التعديل المطلوب */
  
}

.post-share a:hover,
.page-share a:hover,
.post-single-share a:hover {
  color: var(--color-accent);
  filter: none;
}
/* --- End of Update --- */


.page-share svg,
.post-single-share svg {
  width: 32px;
  height: 32px;
}

.entry-header .entry-meta {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-align: center;
  margin-bottom: var(--space-md);
}

/* --- Social Icons Color Control --- */
.social a {
  /* اللون الأساسي للآيقونات */
  color: #191919;
  transition: color 0.2s ease; /* تأثير انتقال ناعم */
}

.social a:hover {
  /* لون الآيقونات عند مرور الماوس */
  color: #f15025;
  filter: none; /* إزالة أي تأثيرات أخرى عند الهوفر */
}

/* --- Footer Styling --- */
.site-footer {
  grid-column: 1 / 3; /* اجعل الفوتر يمتد على عرض الصفحة بالكامل */
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  border: var(--main-border);
  text-align: center;
  font-size: var(--fs-sm);
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.footer-nav a {
  text-decoration: none;
  color: var(--color-text);
}

.footer-nav a:hover {
  color: var(--color-accent);
  filter: none;
}

.copyright p {
  margin: 0;
  color: var(--color-muted);
}

/* تعديل بسيط للهواتف */
@media (max-width: 992px) {
    .site-footer {
        margin-top: var(--space-lg);
        border: 0;
        border-top: var(--main-border);
        
    }
    .footer-nav ul {
        flex-direction: column;
        gap: var(--space-sm);
        
    }
}

/* --- Code and Terminal Block Styling --- */
.entry-content pre {
    background-color: #2d2d2d;
    color: #f1f1f1;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md, 8px);
    border: 1px solid #444;
    white-space: pre;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fs-sm);
    direction: ltr;
    text-align: left;
}
.entry-content pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-family: inherit;
}
.entry-content pre.terminal {
    background-color: #1e1e1e;
    color: #00ff41;
    border-color: #333;
}
.entry-content pre.terminal::before {
    content: '$ ';
    color: #888;
}

/* --- Contact Page Styling --- */
.contact-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl); /* مسافة كبيرة بين الأيقونات */
    margin: var(--space-xl) 0;
}

.contact-social-links a {
    color: var(--color-text);
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-social-links a:hover {
    color: var(--color-accent);
    transform: scale(1.1); /* تكبير بسيط عند الهوفر */
    filter: none;
}

.contact-social-links svg {
    width: 48px;  /* حجم كبير وواضح */
    height: 48px;
}