/*
Theme Name: 3refe
Theme URI: https://example.com/3refe
Author: 3refe Theme Studio
Author URI: https://example.com
Description: قالب مدونة شخصية عربي خفيف وسريع مع سايدبار يمين ويسار. تصميم أزرق بتدرجاته بدون ظلال.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3refe
Tags: blog, right-sidebar, left-sidebar, rtl-language-support, custom-logo, custom-menu, threaded-comments, translation-ready
*/

:root{
  --bg:#f7fbff;
  --surface:#ffffff;
  --text:#0b1b2b;
  --muted:#4b657a;

  --blue-900:#073b6a;
  --blue-800:#0a4f90;
  --blue-700:#0d64b4;
  --blue-600:#1b78d1;
  --blue-500:#2f8be5;

  --accent: var(--blue-700);
  --accent-2: var(--blue-500);

  --border: rgba(7,59,106,.12);
  --radius: 10px;
  --radius-sm: 8px;
  --container: 1180px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  --line: 1.7;
  --focus: rgba(13,100,180,.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: var(--line);
}
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; }
input,button,select,textarea{ font:inherit; }
button{ cursor:pointer; }
:focus{ outline: none; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset:2px; border-radius: 8px; }

.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;
}
.skip-link{
  position:absolute; top:-100px; right: var(--space-4);
  background: var(--surface); color: var(--text);
  padding: var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 9999;
}
.skip-link:focus{ top: var(--space-4); }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Header */
.site-header{
  background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.brand{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  min-width: 200px;
}
.custom-logo{ width: 44px; height: 44px; border-radius: 12px; }
.site-title{
  margin:0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}
.site-title a{ color:#fff; text-decoration:none; }
.site-description{
  margin:0;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}

/* Nav */
.primary-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.primary-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: var(--space-2);
  flex-wrap: wrap;
}
.primary-nav a{
  display:inline-block;
  padding: 10px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  text-decoration:none;
}
.primary-nav a:hover{ text-decoration:none; background: rgba(255,255,255,.08); }
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
}

/* Top bar utilities */
.header-tools{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}
.header-search{
  position: relative;
  max-width: 320px;
  width: 320px;
}
.header-search input[type="search"]{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;
}
.header-search input::placeholder{ color: rgba(255,255,255,.75); }

/* Main layout */
.site-main{
  padding-block: var(--space-6);
}
.layout{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: var(--space-5);
  align-items:start;
}
.sidebar{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.sidebar .widget{
  margin-bottom: var(--space-5);
}
.sidebar .widget:last-child{ margin-bottom:0; }
.sidebar .widget-title{
  margin:0 0 var(--space-3);
  font-size: 14px;
  font-weight: 800;
  color: var(--blue-900);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.sidebar ul{ margin:0; padding:0; list-style:none; }
.sidebar li{ margin: 8px 0; }
.sidebar a{ color: var(--text); }
.sidebar a:hover{ color: var(--accent); }

.content{
  min-width:0;
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.card + .card{ margin-top: var(--space-5); }

.post-title{
  margin:0 0 var(--space-3);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 900;
}
.post-title a{ color: var(--text); text-decoration:none; }
.post-title a:hover{ color: var(--accent); }

.meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.meta a{ color: var(--muted); }
.meta a:hover{ color: var(--accent); }

.readmore{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(13,100,180,.08), rgba(47,139,229,.10));
  color: var(--blue-900);
  text-decoration:none;
}
.readmore:hover{ text-decoration:none; border-color: rgba(13,100,180,.28); }

.entry-content{ color: var(--text); }
.entry-content h2, .entry-content h3, .entry-content h4{
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--blue-900);
}
.entry-content p{ margin: 0 0 14px; }
.entry-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(13,100,180,.06), rgba(47,139,229,.06));
}
.entry-content code{
  background: rgba(7,59,106,.06);
  border: 1px solid rgba(7,59,106,.10);
  padding: 2px 6px;
  border-radius: 8px;
}
pre{
  overflow:auto;
  padding: 14px 16px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: #ffffff;
}

/* Pagination */
.pagination{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: var(--space-5);
}
.pagination .page-numbers{
  display:inline-block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
}
.pagination .current{
  background: linear-gradient(90deg, rgba(7,59,106,.10), rgba(13,100,180,.10));
  border-color: rgba(13,100,180,.30);
}

/* Comments */
.comments-area{ margin-top: var(--space-5); }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--surface);
}
.comment-meta{
  font-size: 13px;
  color: var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap: 8px 12px;
  margin-bottom: var(--space-2);
}
.comment .reply a{
  display:inline-block;
  margin-top: var(--space-2);
  padding: 8px 10px;
  border-radius: 10px;
  border:1px solid var(--border);
  text-decoration:none;
}
.comment .reply a:hover{ border-color: rgba(13,100,180,.28); }
.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"]{
  width:100%;
  padding: 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: #fff;
}
.comment-respond input[type="submit"]{
  margin-top: var(--space-3);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
  color:#fff;
}

/* Footer */
.site-footer{
  margin-top: var(--space-6);
  background: linear-gradient(90deg, var(--blue-900), var(--blue-800));
  color:#fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-inner{
  padding-block: var(--space-6);
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
}
.footer-title{
  margin:0 0 var(--space-3);
  font-size: 14px;
  font-weight: 900;
}
.footer-inner a{ color: rgba(255,255,255,.92); }
.footer-inner a:hover{ color:#fff; }
.footer-bottom{
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.footer-links a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-size: 13px;
}
.footer-links a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 1100px){
  .layout{ grid-template-columns: 240px minmax(0, 1fr) 240px; }
  .header-search{ width: 260px; }
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ order: 2; }
  .sidebar.sidebar-left{ order: 2; }
  .sidebar.sidebar-right{ order: 3; }
  .content{ order: 1; }
  .footer-inner{ grid-template-columns: 1fr; }
  .header-inner{ flex-wrap:wrap; }
  .header-search{ width: 100%; max-width: none; }
  .nav-toggle{ display:inline-flex; }
  .primary-nav ul{ display:none; width:100%; }
  .primary-nav ul.is-open{ display:flex; }
}


/* --- 3refe logo: keep original image dimensions (no scaling) --- */
.brand-logo img.custom-logo,
.custom-logo{
  width: auto;
  height: auto;
  max-height: none;
  max-width: none;
}

.brand-fallback{display:none;}


/* --- Final mobile nav: stack links vertically --- */
@media (max-width: 980px){
  .primary-nav ul.is-open{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .primary-nav ul.is-open li{ width: 100% !important; }
  .primary-nav ul.is-open a{ width: 100% !important; text-align: center; }
}


/* --- Mobile header: menu drops under header row --- */
@media (max-width: 980px){
  .header-inner{ flex-wrap: wrap; }
  .brand{ flex: 0 0 auto; }
  .nav-toggle{ flex: 0 0 auto; }
  .primary-nav{
    flex: 0 0 100%;
    width: 100%;
    margin-top: 10px;
  }
  .primary-nav ul{ width:100%; }
  .primary-nav ul.is-open{ width:100%; }
}


/* --- Final logo rule: no forced sizing for the custom logo image --- */
.brand-logo img.custom-logo,
img.custom-logo{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}


/* --- 3refe widgets: thumb right + title --- */
.three-refe-postlist{ list-style:none; margin:0; padding:0; }
.three-refe-postitem{ margin: 10px 0; }
.three-refe-postlink{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
}
.three-refe-thumb{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  background: linear-gradient(90deg, rgba(13,100,180,.06), rgba(47,139,229,.06));
}
.three-refe-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.three-refe-thumb-placeholder{ display:block; width:100%; height:100%; }
.three-refe-title{ font-size: 13px; font-weight: 700; line-height: 1.4; }


/* --- Post cards: featured image + category badge --- */
.card.card--post{ padding: 0; overflow: hidden; }
.card.card--post::before{
  content:"";
  display:block;
  height: 6px;
  background: linear-gradient(90deg, var(--blue-900), var(--accent), var(--accent-2));
}
.card.card--post .card-body{ padding: var(--space-5); }

.post-media{
  display:block;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(13,100,180,.06), rgba(47,139,229,.06));
}
.post-media img{
  display:block;
  width: 100%;
  height: auto;
}

.cat-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration:none;
}
.cat-badge:hover{ text-decoration:none; opacity: .95; }

.post-head{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}


/* --- Post grid: 2 columns on large screens, 1 on small --- */
.posts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 980px){
  .posts-grid{ grid-template-columns: 1fr 1fr; }
}


/* Compatibility: treat old list containers as grid */
.posts-list{ display:grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 980px){
  .posts-list{ grid-template-columns: 1fr 1fr; }
}


/* --- Rubik everywhere --- */
body, button, input, select, textarea { font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }


/* --- Widgets thumbs 80x80 --- */
.three-refe-thumb{
  width: 80px !important;
  height: 80px !important;
  border-radius: 14px;
}


/* --- Grid alignment fix: make cards equal height and normalize media area --- */
.posts-grid{ align-items: stretch; }
.card.card--post{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post-media{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.post-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card.card--post .card-body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* --- Hero section --- */
.hero{ padding: 18px 0 10px; }
.hero-head{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.hero-title{ margin:0; font-size: 18px; font-weight: 800; color: var(--blue-900); }
.hero-grid{ margin-bottom: 8px; }


/* --- Footer (4 columns) --- */
.site-footer{
  margin-top: 22px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px 0;
}
@media (min-width: 980px){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}
.footer-title{ margin:0 0 10px; font-size: 14px; font-weight: 800; color: var(--blue-900); }
.footer-about-text{ font-size: 13px; line-height: 1.9; color: var(--text); }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding: 14px 0;
  text-align: center;
}
.footer-copy{ margin:0; font-size: 12px; color: var(--muted); }


/* --- Hero grid: 5 cards (20%) on large screens, 1 on small --- */
.hero .hero-grid{ grid-template-columns: 1fr; }
@media (min-width: 980px){
  .hero .hero-grid{ grid-template-columns: repeat(5, 1fr); }
}


/* --- Hero grid overflow fix (RTL + min-content sizing) --- */
.hero .hero-grid{ width: 100%; }
.hero .hero-grid > *{ min-width: 0; }
@media (min-width: 980px){
  .hero .hero-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* --- Cards alignment + title spacing + lighter font weight --- */
.posts-grid,
.hero .hero-grid{
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.post-head{ margin-bottom: 10px; }
.post-title{
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}
.post-title a{ font-weight: 600; }

.card.card--post .card-body{
  gap: 10px;
}

.entry-summary{ display:none; } /* defensive */


/* --- Fix: first card appears higher in grids (remove stacked margin inside grid) --- */
.posts-grid .card,
.hero .hero-grid .card{
  margin-top: 0 !important;
}
.posts-grid .card + .card,
.hero .hero-grid .card + .card{
  margin-top: 0 !important;
}

/* --- Ensure consistent grid alignment --- */
.posts-grid,
.hero .hero-grid{
  align-items: stretch;
}
.posts-grid > *,
.hero .hero-grid > *{
  min-width: 0;
}

/* --- Hero cards: reduce padding --- */
.hero .card.card--post .card-body{
  padding: 12px !important;
}
@media (min-width: 980px){
  .hero .card.card--post .card-body{
    padding: 10px !important;
  }
}


/* --- Hero title weight: 400 --- */
.hero .post-title,
.hero .post-title a{
  font-weight: 400 !important;
}


/* --- Footer titles: darker --- */
.site-footer .footer-title,
.site-footer .widget-title{
  color: var(--blue-900) !important;
  font-weight: 800;
}


/* --- Single: category under content --- */
.single-cats{ margin-top: 14px; }


/* --- Category description under title --- */
.archive-description{ margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--muted); }


/* --- Footer: unify title sizes across all columns --- */
.site-footer .footer-title,
.site-footer .widget-title{
  font-size: 14px !important;
}


/* --- Cards titles: match hero and reduce size --- */
.card.card--post .post-title,
.card.card--post .post-title a{
  font-size: 19px !important;
}
@media (min-width: 980px){
  .hero .card.card--post .post-title,
  .hero .card.card--post .post-title a{
    font-size: 19px !important;
  }
}


/* --- Content cards: title weight 400 --- */
.posts-grid .card.card--post .post-title,
.posts-grid .card.card--post .post-title a{
  font-weight: 400 !important;
}

/* --- Widgets: title 16px / weight 400 --- */
.three-refe-title{
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5;
}

/* --- Footer: unify all section titles (same size/weight/margins) --- */
.site-footer .footer-title,
.site-footer .widget-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
  line-height: 1.4;
  color: var(--blue-900) !important;
}