/* ===== Iryam — Full Theme Override (Light + Dark) =====
   Purpose: single-file theme that forces itself over existing template CSS.
   Usage: host on GitHub and include AFTER other CSS files to ensure overrides.
   Notes: minimal necessary !important usage; RTL-ready; optimized readability + responsiveness.
*/

/* -------------------------
   Variables: Identity Palette
   (based on user's palette, refined for contrast & harmony)
   ------------------------- */
:root{
  --primary-color: #1fae66;      /* brand primary (green) */
  --primary-600: #178a52;
  --accent-color: #25c57b;
  --muted-accent: #e8f9f0;
  --bg-color: #fbfbfb;
  --surface: #ffffff;
  --card-bg: #ffffff;
  --text-color: #1a1a1a;
  --muted-text: #525252;
  --muted-2: #737373;
  --header-bg: #1fae66;
  --link-color: #138b54;
  --link-hover: #0d5e38;
  --shadow-light: rgba(0,0,0,0.06);
  --shadow-strong: rgba(0,0,0,0.12);
  --border: #e9e9e9;
  --radius: 12px;
  --icon-color: #138b54;
  --max-width: 1108px;
  --content-padding: 22px;
  --read-size: 18px;            /* main body font-size for readability */
  --heading-scale: 1.15;
  --date-badge-bg: rgba(31,174,102,0.08);
  --date-badge-color: var(--primary-color);
  --ui-transition: 220ms ease;
  --focus-ring: 3px rgba(31,174,102,0.12);
  --monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  /* accessibility tokens */
  --min-contrast-text: #0f0f0f;
}

/* Dark mode */
body.dark, html.dark-mode {
  --primary-color: #36da8e;
  --primary-600: #136844;
  --accent-color: #36da8e;
  --muted-accent: #10261a;
  --bg-color: #0f1113;
  --surface: rgba(20,20,20,0.96);
  --card-bg: rgba(24,24,24,0.9);
  --text-color: #e6e6e6;
  --muted-text: #b8b8b8;
  --muted-2: #9ea7a0;
  --header-bg: #136844;
  --link-color: #36da8e;
  --link-hover: #8affc3;
  --shadow-light: rgba(0,0,0,0.6);
  --shadow-strong: rgba(0,0,0,0.7);
  --border: rgba(255,255,255,0.04);
  --icon-color: #36da8e;
  --date-badge-bg: rgba(54,218,142,0.08);
  --date-badge-color: var(--link-color);
  --focus-ring: 3px rgba(54,218,142,0.08);
}

/* -------------------------
   Global reset + performance-friendly
   ------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  direction:rtl;
  margin:0;
  padding:0;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg-color) fixed;
  color:var(--text-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8;
  font-size:var(--read-size);
  transition:background var(--ui-transition), color var(--ui-transition);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Force link style across theme (override older CSS) */
a, a:link, a:visited{
  color:var(--link-color);
  text-decoration:none;
  font-weight:700;
  transition:color var(--ui-transition), opacity var(--ui-transition);
}
a:hover, a:focus{ color:var(--link-hover); text-decoration:underline; }

/* Utilities (RTL-friendly) */
.container{
  max-width:var(--max-width);
  margin:28px auto;
  padding:var(--content-padding);
  background:var(--card-bg);
  border-radius:calc(var(--radius) - 2px);
  box-shadow:0 6px 18px var(--shadow-light);
  border:1px solid var(--border);
  transition:background var(--ui-transition), box-shadow var(--ui-transition);
}

/* Headings */
h1,h2,h3,h4,h5{ color:var(--primary-600); margin:0 0 12px; line-height:1.2; font-weight:800 }
h1{font-size:calc(1.6rem * var(--heading-scale))}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
p{ color:var(--muted-text); margin:0 0 16px; font-weight:600; letter-spacing:0.2px; }

/* Images & media */
img, svg, picture, video, iframe{ max-width:100%; height:auto; display:block; border-radius:8px; }
.lazyload{opacity:0;transition:opacity .35s ease}
.lazyload.loaded{opacity:1}

/* Cards / posts */
.post-outer, .card, .widget {
  background:var(--card-bg);
  border-radius:12px;
  padding:16px;
  border:1px solid var(--border);
  box-shadow:0 6px 18px var(--shadow-light);
  transition:transform .25s ease, box-shadow .25s ease;
}
.post-outer:hover, .card:hover { transform:translateY(-6px); box-shadow:0 12px 32px var(--shadow-strong); }

/* Article title + excerpt */
.entry-title, .item-title {
  color:var(--primary-600);
  font-size:1.05rem;
  font-weight:800;
  line-height:1.35;
  display:block;
  word-break:break-word;
}
.entry-excerpt, .item-snippet { color:var(--muted-text); font-size:0.98rem; }

/* Date badge / meta */
.post-meta, .meta, .date-badge {
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--muted-2);
  font-size:.85rem;
}
.date-badge{
  background:var(--date-badge-bg);
  color:var(--date-badge-color);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(0,0,0,0.03);
}

/* Header */
header, #header, .header-animate {
  background:linear-gradient(90deg, var(--header-bg), color-mix(in srgb, var(--header-bg) 80%, #fff 20%));
  color:#fff;
  padding:16px 20px;
  box-shadow:0 8px 24px var(--shadow-light);
  border-bottom:3px solid rgba(255,255,255,0.08);
  position:relative;
  z-index:999;
  transition:background var(--ui-transition);
}
.header-logo, .logo-wrap img{max-height:56px; width:auto}

/* Nav */
#navbar, .navbar, .menu, .nav-link {
  background:transparent;
  color:var(--surface);
}
#navbar .nav-link{ color:var(--surface); font-weight:700 }
#navbar .nav-link:hover{ color:var(--link-hover) }

/* Footer / socket - force consistent color (fix green leftovers) */
#footer, footer, #socket, .footer {
  background:linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 80%, var(--bg-color) 20%), var(--card-bg));
  color:var(--muted-text);
  border-top:1px solid var(--border);
  padding:28px var(--content-padding);
  transition:background var(--ui-transition), color var(--ui-transition);
}
#footer a, .footer a, #socket a {
  color:var(--link-color) !important;    /* enforce link color */
  font-weight:700;
}
#footer a:hover, #socket a:hover { color:var(--link-hover) !important; }

/* Force footer text color override if older CSS used !important */
#footer, #footer * , #socket, #socket * {
  color:inherit !important;
  background:transparent !important;
  border-color:transparent !important;
}

/* Buttons */
.btn, button, input[type="button"], input[type="submit"], .jt-btn-primary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--primary-color);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background var(--ui-transition);
  box-shadow:0 6px 18px rgba(31,174,102,0.12);
}
.btn:hover { transform:translateY(-2px) }
.btn.secondary, .btn-outline { background:transparent; color:var(--primary-600); border:1px solid var(--border) }
.btn:focus { outline: none; box-shadow: 0 0 0 var(--focus-ring) }

/* Forms & inputs */
input, textarea, select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-color);
  transition:border-color var(--ui-transition), box-shadow var(--ui-transition);
}
input:focus, textarea:focus { border-color:var(--primary-600); box-shadow:0 6px 18px rgba(31,174,102,0.06) }

/* Lists & tags */
.tags, .tag-list { display:flex; gap:8px; flex-wrap:wrap; }
.tag, .badge, .label {
  background:var(--muted-accent);
  color:var(--link-color);
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
}
.tag:hover { background:var(--accent-color); color:#fff }

/* Sidebar */
#sidebar, .sidebar {
  background:transparent;
  border-left:1px solid var(--border);
  padding-left:18px;
}
.widget-title { font-weight:800; color:var(--primary-600); margin-bottom:12px }

/* Pagination */
.pagination { display:flex; gap:8px; align-items:center; justify-content:center; margin:18px 0 }
.pagination a, .pagination .page-item { padding:10px 12px; border-radius:8px; background:var(--card-bg); border:1px solid var(--border) }
.pagination a.active { background:var(--primary-600); color:#fff; border-color:transparent }

/* Comments */
.comment, .comment-replies .comment {
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:14px;
  border-radius:12px;
  margin:10px 0;
}

/* Code blocks and pre */
pre, code {
  font-family: var(--monospace);
  background: color-mix(in srgb, var(--card-bg) 85%, #f4f4f4 15%);
  padding:12px;
  border-radius:8px;
  overflow:auto;
  font-size:.94rem;
  color:var(--muted-2);
}
pre{ line-height:1.5 }

/* Responsive images in thumbnails */
.post-thumbnail { height:220px; overflow:hidden; border-radius:12px; }
.post-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.post-thumbnail:hover img { transform:scale(1.05) }

/* Make sure icons use theme icon color */
.icon, .fa, .fab, .svg-icon { color:var(--icon-color) !important; }

/* Accessibility helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:6px}

/* Small screens adjustments */
@media (max-width:991.98px){
  .container{ margin:14px 16px; padding:16px }
  .post-outer{ padding:12px }
  .post-thumbnail{ height:180px }
  #navbar{ padding:12px }
}

/* Very small screens */
@media (max-width:575.98px){
  :root{ --read-size:16px }
  .container{ padding:12px; border-radius:10px }
  header{ padding:12px }
  .toggle-dark{ left:10px; top:10px; padding:8px 12px }
}

/* -------------------------
   Final hard overrides: target JetTheme / Iryam specific classes & inline styles
   These selectors are at end to ensure high specificity and final enforcement.
   ------------------------- */

/* Common Jet/Iryam variables mapping override */
:root{
  --jt-primary: var(--primary-color);
  --jt-btn-primary: var(--primary-color);
  --jt-btn-primary-hover: var(--primary-600);
  --jt-bg-light: color-mix(in srgb, var(--card-bg) 80%, var(--bg-color) 20%);
  --jt-heading-color: var(--primary-600);
  --jt-link-color: var(--link-color);
  --jt-link-hover: var(--link-hover);
  --jt-header-bg: var(--header-bg);
  --jt-footer-bg: var(--card-bg);
  --jt-footer-color: var(--muted-text);
  --jt-footer-link: var(--link-color);
  --jt-border-light: var(--border);
}

/* Ensure strong specificity */
#header, .header-animate, header { background:var(--jt-header-bg) !important; color:#fff !important }
#footer, footer, .footer, #socket { background:var(--jt-footer-bg) !important; color:var(--jt-footer-color) !important; border-top:1px solid var(--jt-border-light) !important }

/* force link classes used in theme */
.item-title a, .entry-title a, .post-outer a { color:var(--jt-link-color) !important }
.item-title a:hover, .entry-title a:hover { color:var(--jt-link-hover) !important }

/* guard against inline color styles applied by previous scripts */
[style*="color: #1fae66"], [style*="color:#1fae66"], [style*="color:#138b54"] {
  color: inherit !important;
}

/* fix any green backgrounds leftover */
[style*="background:#1fae66"], [style*="background:#138b54"], [style*="background:#25c57b"],
[style*="background-color:#1fae66"], [style*="background-color:#138b54"] {
  background: transparent !important;
}

/* tiny perf hint: avoid heavy shadows on mobile */
@media (max-width:575.98px){
  .post-outer, .container, .card { box-shadow:none !important }
}

/* End of theme file */