/* =========================
   Algeroise • style1.css
   Dark theme + fixed carousel
   ========================= */

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

  /* Carousel */
  --vf-height: 44px;
  --vf-gap: 22px;
  --vf-speed: 40s;     /* total loop time */
  --vf-edge-fade: 48px;/* fade width at edges */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{height:100%}
html,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,"Noto Sans","Liberation Sans",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
*{ -webkit-tap-highlight-color: rgba(124,197,255,.25) }
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:24px}
.grid{display:grid; gap:20px}
.main-grid{grid-template-columns:280px 1fr}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
header.site{
  background:linear-gradient(180deg,#0e1930,transparent);
  border-bottom:1px solid var(--border);

  /* 📱 Mobile polish: make header sticky & stable */
  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; padding:16px 24px}
.logo{font-weight:800; font-size:22px; letter-spacing:.3px}
.logo span{color:var(--accent)}
nav a{margin:0 10px}

/* Mobile-friendly horizontal scrolling if nav is crowded */
nav{
  display:flex; gap:12px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}

.footer{padding:28px 24px; border-top:1px solid var(--border); text-align:center; color:var(--muted)}

.sidebar{padding:16px; position:sticky; top:10px; height:max-content}
.sidebar h3{margin:8px 0 12px 0}
.sidebar .cat{margin-bottom:18px}
.sidebar a{display:block; margin:6px 0; color:var(--muted)}

.article{padding:24px}
.article header h1{margin-top:0}
.meta{color:var(--muted); font-size:14px}
.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}
.btn{display:inline-block; border:1px solid var(--border); padding:10px 14px; border-radius:12px}
.list-2{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.badge{font-size:12px; color:#9fb2d0; border:1px solid var(--border); padding:4px 8px; border-radius:999px}
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)}

/* Images quick helpers */
.about-img{max-width:300px; height:auto; display:block; margin:0 auto}
.slide-img{max-width:400px; height:auto; display:block; margin:0 auto}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .main-grid{grid-template-columns:1fr}
  .site-top{flex-direction:column; gap:8px}  /* nicer stack */
  .sidebar{position:static}
  .container{padding:16px}                   /* snug container */
  .card{border-radius:14px}                  /* softer corners on phone */
}

/* =========================
   Carousel (fixed + smooth)
   Structure expected:
   <div class="vf-carousel-wrap">
     <div class="vf-carousel">
       <div class="vf-item"><a>…</a></div>
       ...
       <!-- (Optional but recommended) repeat items again for seamless loop -->
     </div>
   </div>
   ========================= */

/* Wrapper: edge fade + dark theme borders */
header.site .vf-carousel-wrap{
  position:relative;
  overflow:hidden;
  height:var(--vf-height);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(20,30,50,.55), rgba(18,26,43,.55));
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--vf-edge-fade), #000 calc(100% - var(--vf-edge-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--vf-edge-fade), #000 calc(100% - var(--vf-edge-fade)), transparent);
}

/* Track: force LTR for stable marquee even on RTL pages */
header.site .vf-carousel{
  direction:ltr;               /* important for RTL sites */
  display:flex;
  align-items:center;
  gap:var(--vf-gap);
  height:var(--vf-height);
  padding-inline:16px;
  will-change: transform;
  animation: vf-marquee var(--vf-speed) linear infinite;
}

/* Each item renders RTL content correctly */
header.site .vf-item{
  direction:rtl;               /* show Arabic correctly inside */
  flex:0 0 auto;
  white-space:nowrap;
  line-height:1;
}

/* Links inside items */
header.site .vf-item a{
  display:inline-block;
  text-decoration:none;
  color:var(--accent);
  font-weight:700;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
header.site .vf-item a:hover{
  text-decoration:none;
  border-color:var(--border);
  background:rgba(124,197,255,.08);
}

/* Smooth, steady leftward scroll */
@keyframes vf-marquee{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) } /* If items are duplicated, -50% gives perfect loop */
}

/* Pause on hover/focus within */
header.site .vf-carousel-wrap:hover .vf-carousel,
header.site .vf-carousel-wrap:focus-within .vf-carousel{
  animation-play-state: paused;
}

/* If you didn't duplicate items, make the loop full width to reduce jump */
header.site .vf-carousel:not(.vf-duplicated){
  animation-name: vf-marquee-full;
}
@keyframes vf-marquee-full{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-100%) }
}

/* Reduced motion: disable animation, allow manual horizontal scroll */
@media (prefers-reduced-motion: reduce){
  header.site .vf-carousel{ animation: none }
  header.site .vf-carousel-wrap{ -webkit-mask-image: none; mask-image: none }
  header.site .vf-carousel{ overflow:auto; scroll-behavior:auto }
}

/* Mobile: slightly slower for readability */
@media (max-width:800px){
  :root{ --vf-speed: 55s }
}

/* ---------- Optional off-canvas sidebar CSS (kept) ---------- */
/* Desktop: show normally */
@media (min-width:981px){
  .sidebar{ position:static; display:block; }
  .sidebar-toggle, .sidebar-backdrop{ display:none; }
}

/* Mobile: off-canvas */
@media (max-width:980px){
  .sidebar{
    position:fixed;
    top:0; right:0; bottom:0;
    width:80vw; max-width:320px;
    background:var(--card,#fff);
    border-left:1px solid var(--border,#ccc);
    box-shadow:0 0 12px rgba(0,0,0,.4);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:1001;
  }
  .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; }
}

/* ===== Pretty tables (RTL-aware) ===== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  margin:16px 0 24px;
  padding-bottom:2px; /* makes bottom shadow visible on scroll */
}

/* soft edge shadows to hint horizontal scroll on mobile */
.table-wrap::before,
.table-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:24px; pointer-events:none;
}
.table-wrap::before{ inset-inline-start:0; box-shadow: inset 12px 0 12px -12px rgba(0,0,0,.15); }
.table-wrap::after { inset-inline-end:0;  box-shadow: inset -12px 0 12px -12px rgba(0,0,0,.15); }

/* base table */
.vf-table{
  width:100%;
  min-width:520px; /* keep columns readable */
  border-collapse:separate !important;
  border-spacing:0;
  background:var(--bg, #fff);
  box-shadow:0 2px 14px rgba(0,0,0,.06);
  border-radius:14px;
  overflow:hidden; /* works when table is block-level (below) */
  direction:rtl; /* keep Arabic context */
  display:table; /* fallback if something sets block */
}

/* cells */
.vf-table td, .vf-table th{
  padding:12px 14px;
  font-size:15px;
  line-height:1.6;
  border-bottom:1px solid var(--stroke, #e5e9f2);
  vertical-align:top;
  background:transparent;
}

/* zebra striping */
.vf-table tbody tr:nth-child(odd) td{
  background:rgba(43,109,255,.04); /* uses brand tint */
}

/* row hover */
.vf-table tbody tr:hover td{
  background:rgba(43,109,255,.07);
}

/* header look (works even if first row uses <td>) */
.vf-table thead th,
.vf-table tbody tr:first-child td.header-like{
  font-weight:700;
  background:var(--card, #f5f7fb);
  border-bottom:1px solid var(--stroke, #e5e9f2);
}

/* nice “brand bar” on the start edge (RTL-safe) */
.vf-table tbody tr td:first-child{
  border-inline-start:4px solid transparent;
}
.vf-table tbody tr:hover td:first-child{
  border-inline-start-color:var(--brand, #2b6dff);
}

/* last row no border */
.vf-table tr:last-child td{ border-bottom:0; }

/* fix LTR content cells (e.g., Dutch examples) */
.vf-table td[dir="ltr"], .vf-table th[dir="ltr"]{
  direction:ltr;
  text-align:left;
  font-family:Segoe UI, Roboto, Arial, sans-serif;
}

/* compact & relaxed options (optional utility classes) */
.vf-table.compact td{ padding:8px 10px; font-size:14px; }
.vf-table.relaxed td{ padding:14px 18px; }

/* ============== */
/* 📱 Form polish */
/* ============== */
input, textarea, select{
  font:inherit;
  font-size:16px; /* stop iOS zoom on focus */
  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:#b9c8dd; opacity:.9 }
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,197,255,.25);
  background:#112138;
}

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