/* ==========================================================
   Home Page v3 — Standalone (NO blog.css dependency)
   File: public/css/home-v3.css
   ========================================================== */

/* Fallback variables (لو عندك متغيرات عامة بالموقع ستتغلب عليها) */
:root{
  --hp3-bg: #f8fafc;
  --hp3-text: #0f172a;
  --hp3-muted: #64748b;
  --hp3-border: rgba(15,23,42,.10);
  --hp3-card: rgba(255,255,255,.78);
  --hp3-shadow: 0 14px 40px rgba(15,23,42,.08);
  --hp3-radius: 18px;
  --hp3-accent: rgba(56,189,248,.22);

  /* Surfaces (default/light-like) */
  --hp3-surface: rgba(255,255,255,.55);
  --hp3-surface-2: rgba(255,255,255,.60);

  /* Accent tokens (default/light-like) */
  --hp3-accent-bg: rgba(56,189,248,.16);
  --hp3-accent-border: rgba(56,189,248,.35);
}

/* ==========================================================
   Theme Bridge — Make home-v3 follow site dark/light mode
   (depends on body.mawaqeeti-body.theme-dark / theme-light)
   ========================================================== */

/* Light (explicit) */
body.mawaqeeti-body.theme-light{
  --hp3-bg: #f8fafc;
  --hp3-text: #0f172a;
  --hp3-muted: #64748b;
  --hp3-border: rgba(15,23,42,.10);
  --hp3-card: rgba(255,255,255,.78);
  --hp3-shadow: 0 14px 40px rgba(15,23,42,.08);
  --hp3-accent: rgba(56,189,248,.22);

  --hp3-surface: rgba(255,255,255,.55);
  --hp3-surface-2: rgba(255,255,255,.60);

  --hp3-accent-bg: rgba(56,189,248,.16);
  --hp3-accent-border: rgba(56,189,248,.35);
}

/* Dark (Polished: no weird gray buttons) */
body.mawaqeeti-body.theme-dark{
  --hp3-bg: transparent; /* الخلفية الأساسية تأتي من body */
  --hp3-text: rgba(248,250,252,.92);
  --hp3-muted: rgba(203,213,225,.78);
  --hp3-border: rgba(148,163,184,.18);
  --hp3-card: rgba(2,6,23,.55);
  --hp3-shadow: 0 14px 40px rgba(0,0,0,.35);
  --hp3-accent: rgba(56,189,248,.16);

  /* FIX: اجعل السطح داكن زجاجي بدل رمادي فاتح */
  --hp3-surface: rgba(15,23,42,.55);
  --hp3-surface-2: rgba(15,23,42,.68);

  /* Accent tuned for dark (premium) */
  --hp3-accent-bg: rgba(56,189,248,.18);
  --hp3-accent-border: rgba(56,189,248,.40);
}

/* Base card */
.card-soft{
  background: var(--card, var(--hp3-card));
  border: 1px solid var(--card-border, var(--hp3-border));
  border-radius: var(--radius, var(--hp3-radius));
  box-shadow: var(--shadow, var(--hp3-shadow));
}

.hp3{
  background: transparent;
  padding: 18px 0 50px;
}
.hp3__container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 14px;
}

/* HERO */
.hp3-hero{ margin-bottom: 18px; }
.hp3-hero__inner{
  padding: 16px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  overflow: hidden;
  position: relative;
}
.hp3-hero__inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, var(--hp3-accent), transparent 52%),
    radial-gradient(circle at 85% 80%, rgba(15,23,42,.06), transparent 55%);
  opacity: .9;
}
.hp3-hero__content,
.hp3-hero__panel{ position: relative; z-index: 1; }

@media (max-width: 980px){
  .hp3-hero__inner{ grid-template-columns: 1fr; }
}

.hp3-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border, var(--hp3-border));
  background: var(--hp3-surface);
  font-weight: 900;
  color: var(--text, var(--hp3-text));
}
.hp3-kicker__dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(56,189,248,.95);
  box-shadow: 0 0 0 6px rgba(56,189,248,.18);
}

.hp3-h1{
  margin: 12px 0 0;
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--text, var(--hp3-text));
  font-size: 1.55rem;
  line-height: 1.25;
}
@media (min-width: 980px){
  .hp3-h1{ font-size: 1.9rem; }
}

.hp3-lead{
  margin: 10px 0 0;
  color: var(--muted, var(--hp3-muted));
  line-height: 1.9;
  font-size: 1.02rem;
}

.hp3-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hp3-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 950;
  border: 1px solid var(--card-border, var(--hp3-border));
  color: var(--text, var(--hp3-text));
  background: var(--hp3-surface);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp3-btn--primary{
  border-color: var(--hp3-accent-border);
  background: var(--hp3-accent-bg);
}
.hp3-btn--ghost:hover,
.hp3-btn--primary:hover{
  transform: translateY(-1px);
}

.hp3-stats{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .hp3-stats{ grid-template-columns: 1fr; }
  .hp3-btn{ width: 100%; }
}
.hp3-stat{ padding: 12px; }
.hp3-stat__label{
  color: var(--muted, var(--hp3-muted));
  font-weight: 900;
  font-size: .9rem;
}
.hp3-stat__value{
  margin-top: 6px;
  color: var(--text, var(--hp3-text));
  font-weight: 950;
  font-size: 1.15rem;
}

/* Panel */
.hp3-hero__panel{
  padding: 14px;
}
.hp3-panel__title{
  font-weight: 950;
  color: var(--text, var(--hp3-text));
  margin-bottom: 10px;
}
.hp3-steps{ display: grid; gap: 8px; }
.hp3-step{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid var(--card-border, var(--hp3-border));
  background: var(--hp3-surface);
  border-radius: 14px;
  padding: 10px 12px;
}
.hp3-step__n{
  width: 28px; height: 28px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  background: var(--hp3-accent-bg);
  border: 1px solid var(--hp3-accent-border);
}
.hp3-step__t{ font-weight: 900; color: var(--text, var(--hp3-text)); }
.hp3-panel__link{
  margin-top: 12px;
  display: inline-flex;
  font-weight: 950;
  text-decoration: none;
  color: var(--text, var(--hp3-text));
  border-bottom: 1px dashed rgba(56,189,248,.65);
  padding-bottom: 4px;
}

/* Sections */
.hp3-sec{ margin-top: 18px; }
.hp3-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
@media (max-width: 640px){
  .hp3-head{ flex-direction: column; align-items: flex-start; }
}
.hp3-h2{
  margin:0;
  font-size: 1.15rem;
  font-weight: 950;
  color: var(--text, var(--hp3-text));
}
.hp3-sub{
  margin: 6px 0 0;
  color: var(--muted, var(--hp3-muted));
  line-height: 1.8;
}
.hp3-link{
  text-decoration:none;
  font-weight: 950;
  color: var(--text, var(--hp3-text));
  border: 1px solid var(--card-border, var(--hp3-border));
  background: var(--hp3-surface);
  padding: 9px 12px;
  border-radius: 14px;
}
@media (max-width: 640px){
  .hp3-link{ width: 100%; text-align:center; }
}

/* Grid */
.hp3-grid{
  display:grid;
  gap: 12px;
}
.hp3-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.hp3-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.hp3-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px){
  .hp3-grid--4{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hp3-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 740px){
  .hp3-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hp3-grid--2{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .hp3-grid--4,
  .hp3-grid--3{ grid-template-columns: 1fr; }
}

/* Tools cards */
.hp3-card{
  display:flex;
  gap: 12px;
  padding: 14px;
  text-decoration:none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp3-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(56,189,248,.12);
}
.hp3-card__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--hp3-accent-bg);
  border: 1px solid var(--hp3-accent-border);
  font-size: 1.2rem;
}
.hp3-card__title{ font-weight: 950; color: var(--text, var(--hp3-text)); margin-bottom: 4px; }
.hp3-card__desc{ color: var(--muted, var(--hp3-muted)); line-height: 1.75; }

/* Countries */
.hp3-country{
  padding: 14px;
  text-decoration:none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp3-country:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(56,189,248,.10);
}
.hp3-country__top{ display:flex; align-items:center; gap: 10px; }
.hp3-country__flag{
  width: 28px; height: 20px;
  border-radius: 6px;
  display:block;
  border: 1px solid var(--card-border, var(--hp3-border));
}
.hp3-country__name{ font-weight: 950; color: var(--text, var(--hp3-text)); }
.hp3-country__code{
  margin-top: 10px;
  display:inline-flex;
  font-weight: 950;
  font-size: .9rem;
  color: var(--muted, var(--hp3-muted));
  border: 1px solid var(--card-border, var(--hp3-border));
  background: var(--hp3-surface);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Categories chips */
.hp3-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hp3-chip{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border, var(--hp3-border));
  background: var(--hp3-surface-2);
  text-decoration:none;
  font-weight: 950;
  color: var(--text, var(--hp3-text));
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp3-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(56,189,248,.12);
}

/* Blog posts cards (no images) */
.hp3-post{
  padding: 14px;
  text-decoration:none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp3-post:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(56,189,248,.10);
}
.hp3-post__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.hp3-post__tag{
  display:inline-flex;
  font-weight: 950;
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hp3-accent-border);
  background: var(--hp3-accent-bg);
}
.hp3-post__more{
  font-weight: 950;
  color: var(--muted, var(--hp3-muted));
}
.hp3-post__title{
  margin-top: 10px;
  font-weight: 950;
  color: var(--text, var(--hp3-text));
  line-height: 1.5;
  font-size: 1.05rem;
}
.hp3-post__excerpt{
  margin-top: 8px;
  color: var(--muted, var(--hp3-muted));
  line-height: 1.9;
}

/* ==========================================================
   HP3 Controls Polish (Dark/Light-safe)
   ========================================================== */

.hp3-btn,
.hp3-link,
.hp3-kicker,
.hp3-step,
.hp3-chip,
.hp3-country__code{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* More premium borders/shadows on dark */
body.mawaqeeti-body.theme-dark .hp3-btn,
body.mawaqeeti-body.theme-dark .hp3-link,
body.mawaqeeti-body.theme-dark .hp3-kicker,
body.mawaqeeti-body.theme-dark .hp3-step,
body.mawaqeeti-body.theme-dark .hp3-chip,
body.mawaqeeti-body.theme-dark .hp3-country__code{
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Hover */
.hp3-btn:hover,
.hp3-link:hover,
.hp3-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(56,189,248,.10);
}