/* ======================================
   EnglishArab.com • Unified style1.css
   Dark theme, mobile-friendly, optimized
   Fixed all color/contrast issues
   Added Google AdSense container styles
   ====================================== */

:root {
  --bg:#0b1220;
  --card:#121a2b;
  --ink:#e9eef9;
  --muted:#b9c8dd;
  --accent:#2b6dff;
  --ok:#42e6a0;
  --warn:#ffd166;
  --bad:#ff8fa3;
  --border:#243655;
  --shadow:0 10px 24px rgba(0,0,0,.28);
  --radius:16px;
  --maxw:1100px;

  --fs-body: clamp(15px, 2.7vw, 17px);
  --fs-h1: clamp(22px, 5.2vw, 34px);
  --fs-h2: clamp(18px, 4.4vw, 26px);
}

*{box-sizing:border-box}

/* Smooth scrolling + mobile text stability */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

html,body {height:100%}
body {
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.75; font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video {max-width:100%; height:auto; display:block}
a {color:var(--accent); text-decoration:none}
a:hover {text-decoration:underline}
a,button,.btn {touch-action:manipulation}
:focus-visible {outline:2px solid var(--accent); outline-offset:2px}
*{ -webkit-tap-highlight-color: rgba(43,109,255,.2) }

/* Containers */
.container {max-width:var(--maxw); margin:0 auto; padding:16px}
@media (min-width:640px){ .container{padding:20px} }
@media (min-width:1024px){ .container{padding:24px} }

/* Grids */
.grid {display:grid; gap:16px}
@media (min-width:640px){ .grid{gap:20px} }

.main-grid {grid-template-columns:280px 1fr}
@media (max-width:900px){ .main-grid{grid-template-columns:1fr} }

/* Cards */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
@media (min-width:640px){ .card{padding:20px} }
@media (min-width:1024px){ .card{padding:24px} }

/* ===== Header ===== */
header.site {
  background:linear-gradient(180deg,#0e1930,transparent);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(6px);
}
.site-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px; flex-wrap:wrap;
}
@media (min-width:640px){ .site-top{padding:14px 20px} }
@media (min-width:900px){ .site-top{padding:16px 24px} }

.logo {font-weight:800; font-size:clamp(18px,4.2vw,22px); letter-spacing:.3px}
.logo span {color:var(--accent)}

/* Horizontal-scroll nav for crowded menus on mobile */
nav {
  display:flex; gap:12px; overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:0 2px;
}
nav::-webkit-scrollbar{display:none}
nav a {
  white-space:nowrap; padding:8px 10px;
  border-radius:10px; border:1px solid transparent;
}
nav a[aria-current="page"],
nav a.badge {
  border-color:var(--border);
  background:rgba(255,255,255,.04);
}

/* Burger (mobile) */
.burger {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--border); border-radius:10px;
  background:transparent; color:var(--ink);
  cursor:pointer;
}
@media (min-width:981px){ .burger{display:none} }

/* ===== Carousel (Fixed Dark Theme) ===== */
header.site .vf-carousel-wrap {
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--card);
  position:relative;
}
header.site .vf-carousel {
  display:flex; gap:20px; padding:10px 12px;
  will-change:transform;
  animation:vf-scroll 45s linear infinite;
}
header.site .vf-item {flex:0 0 auto; white-space:nowrap}
header.site .vf-item a {
  text-decoration:none; 
  color:var(--accent); 
  font-weight:600;
  padding:4px 8px;
  border-radius:8px;
  transition:background .2s;
}
header.site .vf-item a:hover {
  background:rgba(43,109,255,.15);
  text-decoration:none;
}
header.site .vf-carousel:hover {animation-play-state:paused}

@keyframes vf-scroll {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Motion & accessibility */
@media (prefers-reduced-motion: reduce){
  header.site .vf-carousel{animation:none; overflow:auto}
}

/* ===== Footer ===== */
.footer {
  padding:24px 16px;
  border-top:1px solid var(--border);
  text-align:center; color:var(--muted)
}
@media (min-width:640px){ .footer{padding:28px 24px} }

/* ===== Sidebar ===== */
.sidebar {padding:16px}
.sidebar h3{margin:8px 0 12px 0}
.sidebar .cat{margin-bottom:18px}
.sidebar a{display:block; margin:6px 0; color:var(--muted); overflow-wrap:anywhere}

/* Desktop: normal sidebar */
@media (min-width:981px){
  .sidebar{position:sticky; top:80px; display:block; transform:none; box-shadow:none; width:auto; max-width:none}
  .sidebar-toggle, .sidebar-backdrop{display:none}
}

/* Mobile: off-canvas sidebar */
@media (max-width:980px){
  .sidebar {
    position:fixed; top:0; right:0; bottom:0;
    width:min(84vw,340px);
    background:var(--card);
    border-left:1px solid var(--border);
    box-shadow:0 0 12px rgba(0,0,0,.4);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:1001; padding:18px;
  }
  .sidebar-backdrop {
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    z-index:1000; display:none;
  }
  .sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-open .sidebar-backdrop{display:block}
}

/* Page wrap */
.page-wrap {
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:20px; align-items:start; margin-top:16px
}
.page-wrap main.card{width:100%}
@media (max-width:1024px){ .page-wrap{grid-template-columns:1fr} }

/* ===== Article ===== */
.article header h1 {
  margin:0 0 8px 0;
  font-size:var(--fs-h1); line-height:1.25
}
.article h2 {
  font-size:var(--fs-h2); line-height:1.4;
  margin:20px 0 10px
}
.article h3 {
  font-size:clamp(16px, 3.8vw, 22px);
  line-height:1.4;
  margin:16px 0 8px;
}
.meta{color:var(--muted); font-size:.92em}
.note{background:#10213a; border-left:4px solid var(--accent); padding:12px 14px; border-radius:12px; margin:16px 0}
.en{direction:ltr}
.ar{direction:rtl; text-align:right; font-family:"Noto Naskh Arabic","Amiri","Scheherazade New",Tahoma,Arial,serif}
.toc{border:1px dashed var(--border); padding:12px; border-radius:12px; margin:16px 0}
.toc strong{display:block; margin-bottom:8px}
.toc ol{margin:0; padding-left:1.2em}
.toc li{margin:4px 0}
blockquote{border-inline-start:4px solid var(--border); padding:8px 12px; margin:12px 0; color:var(--muted)}
pre{overflow:auto; background:#0f1a2d; padding:12px; border-radius:12px; border:1px solid var(--border)}
code{background:rgba(43,109,255,.15); padding:2px 6px; border-radius:4px; font-size:.92em}
pre code{background:transparent; padding:0}
.badge{font-size:12px; color:#9fb2d0; border:1px solid var(--border); padding:4px 8px; border-radius:999px; display:inline-block}

/* Breadcrumb */
.breadcrumb{font-size:.9em; color:var(--muted); margin-bottom:12px}
.breadcrumb a{color:var(--accent)}

/* ==== Buttons ==== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px;
  border-radius:12px; font-weight:600;
  transition:background .2s, color .2s;
  cursor:pointer;
  border:1px solid var(--border);
}
.btn-primary {
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
}
.btn-primary:hover {background:#1e4fcc; text-decoration:none}
.btn-secondary {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn-secondary:hover {
  background:rgba(43,109,255,.1); 
  color:var(--accent);
  text-decoration:none;
}

/* Responsive grids */
.list-2 {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px
}
@media (min-width:480px){ .list-2{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:768px){ .list-2{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Tables */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:16px 0;
}
.table, table {
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
}
.table th, table th {
  background:rgba(43,109,255,.15);
  color:var(--ink);
  font-weight:600;
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.table td, table td {
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--ink);
}
.table tr:last-child td, table tr:last-child td {
  border-bottom:0;
}
.table tbody tr:hover, table tbody tr:hover {
  background:rgba(43,109,255,.08);
}

/* Details/Summary */
details {
  margin:16px 0;
}
details summary {
  cursor:pointer;
  font-weight:600;
  padding:8px 0;
  user-select:none;
}
details[open] summary {
  margin-bottom:12px;
}

/* ===== GOOGLE ADSENSE CONTAINERS ===== */

/* Ad Container Base Styles */
.ad-container {
  margin:24px 0;
  padding:8px;
  text-align:center;
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(43,109,255,.02);
  border:1px solid rgba(43,109,255,.1);
}

/* In-Feed Ad (appears in article content) */
.ad-infeed {
  margin:32px auto;
  max-width:100%;
  clear:both;
}

/* Sidebar Sticky Ad */
.ad-sidebar-sticky {
  position:sticky;
  top:90px;
  margin:0 auto 20px;
  max-width:300px;
}

/* Mobile optimizations */
@media (max-width:768px){
  .ad-container{
    margin:20px 0;
    padding:4px;
  }
  .ad-infeed{
    margin:24px auto;
  }
  .ad-sidebar-sticky{
    position:relative;
    top:0;
    margin:16px auto;
  }
}

/* Ensure ads don't break layout */
.adsbygoogle {
  display:block;
  margin:0 auto;
}

/* Small polish */
hr{border:0; border-top:1px solid var(--border); margin:16px 0}
ul,ol{padding-inline-start:1.1em; margin:12px 0}
li{margin:6px 0}
p{margin:0 0 12px 0}
figure{margin:20px 0}
figcaption{color:var(--muted); font-size:.9em; margin-top:8px; text-align:center}

/* Images */
.about-img, .slide-img {
  max-width:400px; 
  height:auto; 
  display:block; 
  margin:16px auto;
  border-radius:12px;
}

/* =========================
   📱 Mobile polish
   ========================= */
@media (max-width:900px){
  .container{ padding:14px }
  .card{ border-radius:14px; padding:14px }
  .site-top{ gap:8px }
  h1{ font-size:1.35rem; line-height:1.35 }
  h2{ font-size:1.15rem }
  .list-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
}

/* iOS input zoom fix + dark fields */
input, textarea, select{
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:#0f1a2d;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem .9rem;
  width:100%;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder{ color:#9bb0d1; opacity:.9 }
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(43,109,255,.25);
  background:#112138;
}

/* Keep sticky header stable with dynamic mobile toolbars */
@supports (height: 100dvh){
  header.site{ top:0 }
}

/* Make nav feel snappy on touch */
nav{ -webkit-overflow-scrolling:touch }

/* Padding utility */
.pad{padding:16px 0}