/*
Theme Name: MENA Nav
Theme URI: https://menanav.com
Description: A curated directory of useful websites in the Middle East — Saudi Arabia, UAE, Qatar, and more.
Version: 1.0
Author: MENA Nav
License: GPL-2.0-or-later
Text Domain: mena-nav
*/

/* ── Reset ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }
#sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ── Sidebar nav items ──────────────────────────────────── */
.nav-item { color: #8a94a6; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #ffffff; }
.nav-item .nav-badge { background: rgba(255,255,255,.08); color: #6b7280; }
.nav-item.nav-active { background: rgba(0,132,61,.22); color: #4ade80; }
.nav-item.nav-active .nav-badge { background: rgba(74,222,128,.18); color: #4ade80; }

/* ── Language buttons (sidebar) ─────────────────────────── */
.lang-btn {
  color: #6b7280;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: all .15s;
}
.lang-btn:hover {
  color: #e5e7eb;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.lang-btn.lang-btn-active {
  color: #4ade80;
  background: rgba(0,132,61,.28);
  border-color: rgba(74,222,128,.3);
}

/* Language buttons (mobile header) */
.lang-btn.lang-btn-header {
  border-color: #e5e7eb;
  color: #9ca3af;
  background: transparent;
}
.lang-btn.lang-btn-header:hover {
  color: #374151;
  background: #f3f4f6;
  border-color: #d1d5db;
}
.lang-btn.lang-btn-header.lang-btn-active {
  color: #15803d;
  background: #f0fdf4;
  border-color: #86efac;
}

/* ── Mobile category tabs ────────────────────────────────── */
.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  background: #f3f4f6;
  color: #6b7280;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .15s;
}
.cat-tab:hover {
  background: #f0fdf4;
  color: #16a34a;
}
.cat-tab.cat-tab-active {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #4ade80;
}

/* ── Country selector ────────────────────────────────────── */
.country-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .country-btn { padding: 8px 14px; }
}
.country-btn:hover {
  border-color: #86efac;
  color: #15803d;
  background: #f0fdf4;
}
.country-btn.country-active {
  border-color: #16a34a;
  color: #15803d;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

/* ── Cards ───────────────────────────────────────────────── */
.site-card { min-height: 88px; }

/* Contain logo images that exceed the icon box (e.g. Clearbit returns 200x200) */
.site-card img { max-width: 100%; max-height: 100%; }

/* hide description on very small screens */
@media (max-width: 360px) {
  .site-card-desc { display: none; }
}

/* ── Section scroll margin ───────────────────────────────── */
.site-section { scroll-margin-top: 16px; }

@media (max-width: 1023px) {
  /* account for sticky mobile header (~84px) */
  .site-section { scroll-margin-top: 92px; }
}

/* ── Text clamp ──────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Hero dots ───────────────────────────────────────────── */
.hero-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Hide scrollbar ──────────────────────────────────────── */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Font smoothing ─────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Cookie consent banner ───────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 12px 16px;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#cookie-banner.ck-visible { transform: translateY(0); }

.ck-inner {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 16px 18px 14px;
  position: relative;
}
.ck-body { margin-bottom: 12px; }
.ck-title { font-size: .875rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.ck-text  { font-size: .78rem; color: #6b7280; line-height: 1.6; margin-bottom: 6px; }
.ck-links { font-size: .75rem; }
.ck-links a { color: #16a34a; text-decoration: underline; }
.ck-btns  { display: flex; gap: 8px; flex-wrap: wrap; }
#ck-nec {
  flex: 1; min-width: 120px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #d1d5db;
  background: #f9fafb; color: #374151;
  transition: all .15s;
}
#ck-nec:hover { background: #f3f4f6; border-color: #9ca3af; }
#ck-all {
  flex: 1; min-width: 120px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  border: none;
  background: #16a34a; color: #fff;
  transition: background .15s;
}
#ck-all:hover { background: #15803d; }
#ck-x {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  font-size: .75rem; color: #9ca3af;
  cursor: pointer; line-height: 1;
  padding: 4px;
}
#ck-x:hover { color: #6b7280; }

/* ── Page templates ──────────────────────────────────────── */
.prose h2 { font-size: 1rem; font-weight: 700; color: #111827; margin: 1.5rem 0 .5rem; }
.prose h3 { font-size: .9rem; font-weight: 600; color: #374151; margin: 1.2rem 0 .35rem; }
.prose p  { font-size: .875rem; color: #4b5563; line-height: 1.7; margin-bottom: .75rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: .75rem; }
.prose ul li { font-size: .875rem; color: #4b5563; line-height: 1.7; margin-bottom: .2rem; }
.prose a  { color: #16a34a; text-decoration: underline; }
.tab-btn  { cursor: pointer; padding: 6px 18px; border-radius: 99px; font-size: .8rem; font-weight: 600; border: 1.5px solid transparent; transition: all .15s; color: #6b7280; background: #f3f4f6; }
.tab-btn.active { background: #f0fdf4; color: #15803d; border-color: #4ade80; }
[lang-content] { display: none; }
[lang-content].active { display: block; }