/* VisitSaudiArab — pure PHP site stylesheet.
   Design tokens inherited from the WordPress theme (theme/style.css). */

:root{
  --vsa-sand: #f6f1e9;
  --vsa-ink: #16211c;
  --vsa-green: #0f5132;
  --vsa-gold: #c9a15a;
  --vsa-radius: 14px;
  --vsa-max-width: 1200px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--vsa-ink);
  background:#fff;
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--vsa-green); }

.vsa-container{ max-width:var(--vsa-max-width); margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.vsa-header{ border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:50; }
.vsa-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.vsa-logo{ font-weight:800; font-size:1.3rem; text-decoration:none; color:var(--vsa-green); white-space:nowrap; }
.vsa-logo-footer{ color:#fff; }
.vsa-nav ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0; align-items:center; }
.vsa-nav a{ text-decoration:none; color:var(--vsa-ink); font-weight:500; }
.vsa-nav a.active{ color:var(--vsa-green); border-bottom:2px solid var(--vsa-gold); padding-bottom:2px; }
.vsa-nav-search{ font-size:1.05rem; }
.vsa-nav-toggle{ display:none; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:1.2rem; padding:6px 12px; cursor:pointer; }

/* ---------- Hero ---------- */
.vsa-hero{ background:linear-gradient(180deg,var(--vsa-sand),#fff); padding:72px 0 48px; text-align:center; }
.vsa-hero h1{ font-size:2.5rem; margin:0 0 12px; }
.vsa-hero p{ font-size:1.1rem; color:#4b564f; max-width:640px; margin:0 auto 26px; }
.vsa-search{ display:flex; max-width:520px; margin:0 auto; box-shadow:0 6px 24px rgba(0,0,0,.10); border-radius:999px; overflow:hidden; background:#fff; }
.vsa-search input{ flex:1; border:none; padding:14px 20px; font-size:1rem; outline:none; }
.vsa-search button{ border:none; background:var(--vsa-green); color:#fff; padding:0 26px; font-weight:600; cursor:pointer; font-size:1rem; }
.vsa-search button:hover{ background:#0c3f27; }

/* ---------- Sections ---------- */
.vsa-section{ padding:38px 0; }
.vsa-section h2{ font-size:1.55rem; margin:0 0 6px; }
.vsa-section > .vsa-sub{ color:#6b756e; margin:0 0 8px; }
.vsa-section-alt{ background:var(--vsa-sand); }

/* ---------- Cards ---------- */
.vsa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin:24px 0 8px; }
.vsa-card{ border-radius:var(--vsa-radius); overflow:hidden; border:1px solid #eee; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; background:#fff; display:flex; flex-direction:column; }
.vsa-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.10); }
.vsa-card-img{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.vsa-card-img span{ font-size:3.4rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.vsa-card-body{ padding:14px 16px 16px; }
.vsa-card-body h3{ margin:0 0 4px; font-size:1.05rem; }
.vsa-card-body span{ font-size:.87rem; color:#6b756e; }

/* Placeholder "image" gradients */
.g1{ background:linear-gradient(135deg,#0f5132,#1c7a4d); }
.g2{ background:linear-gradient(135deg,#c9803a,#e8b36b); }
.g3{ background:linear-gradient(135deg,#14648a,#3f9ec7); }
.g4{ background:linear-gradient(135deg,#8a5a2b,#c9a15a); }
.g5{ background:linear-gradient(135deg,#0e7a8a,#4cc3cf); }
.g6{ background:linear-gradient(135deg,#2e6b34,#7fb069); }
.g7{ background:linear-gradient(135deg,#6b4a8a,#a584c9); }
.g8{ background:linear-gradient(135deg,#8a2b4a,#d0698a); }

/* ---------- Hero banner on detail pages ---------- */
.vsa-banner{ padding:56px 0 40px; text-align:center; color:#fff; }
.vsa-banner span{ font-size:3.6rem; display:block; margin-bottom:10px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.vsa-banner h1{ margin:0 0 8px; font-size:2.1rem; }
.vsa-banner p{ margin:0 auto; max-width:620px; opacity:.92; }

/* ---------- Breadcrumbs ---------- */
.vsa-breadcrumbs{ font-size:.85rem; color:#6b756e; margin:18px 0 0; }
.vsa-breadcrumbs a{ color:#6b756e; text-decoration:none; }
.vsa-breadcrumbs a:hover{ color:var(--vsa-green); }

/* ---------- Meta / info boxes ---------- */
.vsa-kbyg{ background:var(--vsa-sand); border-radius:var(--vsa-radius); padding:20px 24px; margin:26px 0; }
.vsa-kbyg h2{ margin-top:0; font-size:1.15rem; }
.vsa-kbyg dl{ display:grid; grid-template-columns:170px 1fr; gap:8px 16px; margin:0; }
.vsa-kbyg dt{ font-weight:600; color:#4b564f; }
.vsa-kbyg dd{ margin:0; }

.vsa-highlights{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px 24px; padding-left:0; list-style:none; }
.vsa-highlights li{ padding-left:26px; position:relative; }
.vsa-highlights li::before{ content:"✓"; position:absolute; left:0; color:var(--vsa-green); font-weight:700; }

.vsa-content{ max-width:760px; }
.vsa-content p{ margin:0 0 16px; }

/* ---------- Article ---------- */
.vsa-article-meta{ color:#6b756e; font-size:.9rem; margin:6px 0 20px; }
.vsa-badge{ display:inline-block; background:var(--vsa-sand); color:var(--vsa-green); border-radius:999px; padding:3px 12px; font-size:.8rem; font-weight:600; margin-right:6px; }
.vsa-tags a{ display:inline-block; border:1px solid #ddd; border-radius:999px; padding:2px 12px; font-size:.82rem; margin:0 6px 6px 0; text-decoration:none; color:#4b564f; }
.vsa-tags a:hover{ border-color:var(--vsa-green); color:var(--vsa-green); }

/* ---------- Forms ---------- */
.vsa-form{ max-width:560px; }
.vsa-form label{ display:block; font-weight:600; margin:16px 0 6px; }
.vsa-form input,.vsa-form textarea{
  width:100%; border:1px solid #ddd; border-radius:10px; padding:12px 14px; font-size:1rem; font-family:inherit;
}
.vsa-form input:focus,.vsa-form textarea:focus{ outline:2px solid var(--vsa-gold); border-color:var(--vsa-gold); }
.vsa-btn{ display:inline-block; margin-top:18px; background:var(--vsa-green); color:#fff; border:none; border-radius:999px; padding:12px 32px; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; }
.vsa-btn:hover{ background:#0c3f27; }
.vsa-alert{ background:#e6f4ec; border:1px solid #bfe3cf; color:var(--vsa-green); border-radius:10px; padding:14px 18px; margin:18px 0; }
.vsa-alert-error{ background:#fdecea; border-color:#f5c6c0; color:#a33; }

/* ---------- Newsletter ---------- */
.vsa-newsletter{ background:var(--vsa-sand); border-radius:var(--vsa-radius); padding:34px; text-align:center; margin:40px 0; }
.vsa-newsletter h2{ margin-top:0; }

/* ---------- Footer ---------- */
.vsa-footer{ background:#0f1a14; color:#cfd8d2; padding:44px 0 26px; margin-top:60px; }
.vsa-footer a{ color:#cfd8d2; text-decoration:none; }
.vsa-footer a:hover{ color:#fff; }
.vsa-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
.vsa-footer h4{ color:#fff; margin:0 0 10px; }
.vsa-footer ul{ list-style:none; margin:0; padding:0; }
.vsa-footer li{ margin-bottom:6px; font-size:.92rem; }
.vsa-footer-disclaimer{ font-size:.8rem; color:#8b958f; margin-top:26px; border-top:1px solid #23302a; padding-top:16px; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .vsa-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .vsa-nav-toggle{ display:block; }
  .vsa-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid #eee; box-shadow:0 12px 24px rgba(0,0,0,.08); }
  .vsa-nav.open{ display:block; }
  .vsa-nav ul{ flex-direction:column; align-items:flex-start; padding:14px 20px 18px; gap:12px; }
  .vsa-hero h1{ font-size:1.85rem; }
  .vsa-banner h1{ font-size:1.6rem; }
  .vsa-kbyg dl{ grid-template-columns:1fr; }
}