/*
Theme Name: SalemAlanzi.sa Minimal
Theme URI: https://SalemAlanzi.sa
Author: ChatGPT (for Salem Alanzi)
Author URI: https://SalemAlanzi.sa
Description: RTL-first, ultra-fast minimalist theme tailored for SalemAlanzi.sa. Clean list layout with date column, responsive header, and lightweight footer.
Version: 1.0.0
License: GPLv2 or later
Text Domain: salemalanzi-sa
Tags: rtl-language-support, minimal, blog, accessibility-ready
*/

:root{
  --bg:#dfeacf;           /* page background (greenish) */
  --card:#ffffff;         /* content background */
  --text:#1b1b1b;         /* primary text */
  --muted:#6b7280;        /* secondary text */
  --accent:#1e3a8a;       /* links (dark blue) */
  --border:#e5e7eb;
  --maxw:900px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  font-synthesis-weight: none;
  font-synthesis-style: none;
  margin:0;
  font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic", "Noto Sans Arabic", "Almarai", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.8;
  direction: rtl;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Shell */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 16px;
}

/* Header */
.site-header{
  background: var(--card);
  border-bottom:none;
}

.header-inner{ padding: 32px 16px; min-height: 100px; 
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand .logo{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--text);
  border-radius:10px;
  font-weight:700;
  font-size:20px;
}

.site-title{
  margin:0;
  font-size:20px;
  font-weight:700;
}

.site-title a{color:var(--text); text-decoration:none}
.site-description{margin:0; color:var(--muted); font-size:13px}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.nav a{ color: var(--text); }
.nav a:hover{ color: var(--accent); }

/* Post list */
.main{ margin-top: 0; }

.post-list{
  list-style:none;
  margin:0;
  padding:8px 0;
}

.post-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:6px 12px;
  border-bottom:none;
}

.post-item:last-child{border-bottom:none}

.post-title{
  flex:1 1 auto;
  font-size:18px;
  line-height:1.6;
}

.post-title a{ color: var(--text); }
.post-title a:hover{ color: var(--accent); }

.post-date{
  flex:0 0 auto;
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
  padding-inline-start:10px;
}

/* Single */
.single-header{
  padding:20px 22px;
  border-bottom:none;
}

.single-title{
  margin:0 0 6px 0;
  font-size:28px;
  line-height:1.4;
}

.meta{ color:var(--muted); font-size:14px }

.entry-content{
  padding: 22px;
}

.entry-content img, .entry-content figure{ max-width:100%; height:auto }
.entry-content pre, .entry-content code{
  background:#f6f7f9;
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 6px;
  direction:ltr;
}
.entry-content pre{ padding:12px; overflow:auto }

/* Footer */
.site-footer{
  margin:24px 0;
  text-align:center;
  color: var(--muted);
}

.footer-cards{
  background: transparent;
  border:0;
  border-radius:0;
  padding:18px;
}

.socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}

.icon{
  width:22px;
  height:22px;
  display:inline-block;
}

.rss{fill:currentColor}
.x, .in{fill:currentColor}

/* Responsive */
@media (max-width: 640px){
  .post-item{ flex-direction:column; align-items:flex-start }
  .post-date{ order:-1; padding:0; margin-bottom:4px }
  .header-inner{ padding: 32px 16px; min-height: 100px;  flex-direction:column; align-items:flex-start }
  .brand{ order: -1 }
}


/* Unified white card that wraps header + main + footer */
.site-shell{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  max-width: var(--maxw);
  margin: 18px auto;
  overflow:hidden; /* keep rounded corners for inner sections */
}

/* Reset header/footer to sit flush inside the shell */
.site-header{ background: transparent; border-bottom:none; }
.site-footer{ background: transparent; margin:0; }

/* Inner padding for main content inside the shell */
.main-inner{ padding: 8px 16px 18px; }

/* Narrower post list */
.post-list{ width:80%; margin-inline:auto; }
@media (max-width: 640px){
  .post-list{ width:100%; }
}

/* Pre-footer navigation */
.pre-footer{ padding: 8px 16px 6px; }
.prefooter-nav{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.prefooter-nav a{ color: var(--text); }
.prefooter-nav a:hover{ color: var(--accent); }


/* Header Primary Menu — visual style per sample */
.nav .menu{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav .menu > li{ margin:0; padding:0; }
.nav .menu > li > a{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
  color: var(--text);
  text-decoration:none;
  font-weight:500;
}
/* Active (current page) underline */
.nav .menu > li.current-menu-item > a::after,
.nav .menu > li.current_page_item > a::after,
.nav .menu > li.current-menu-ancestor > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: rgba(0,0,0,.45);
  border-radius:2px;
}
/* Optional subtle hover (no underline change) */
.nav .menu > li > a:hover{ color: var(--text); opacity:.85; }


/* Center pagination */
.nav-links{
  display:flex;
  justify-content:center;
  margin:18px 0;
}
.nav-links .page-numbers{
  margin:0 6px;
  padding:6px 10px;
  border-radius:4px;
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
}
.nav-links .page-numbers.current{
  background:var(--accent);
  color:#fff;
}
.nav-links .page-numbers:hover{
  background:var(--accent);
  color:#fff;
}