/* ── LOKALE FONTS ── */
@font-face { font-family: 'Aref Ruqaa'; font-weight: 400; src: url(/poc/assets/fonts/WwkbxPW1E165rajQKDulEIA.ttf) format('truetype'); }
@font-face { font-family: 'Aref Ruqaa'; font-weight: 700; src: url(/poc/assets/fonts/WwkYxPW1E165rajQKDulKDwNcNI.ttf) format('truetype'); }
@font-face { font-family: 'Amiri'; font-weight: 400; src: url(/poc/assets/fonts/J7aRnpd8CGxBHqUp.ttf) format('truetype'); }
@font-face { font-family: 'Amiri'; font-weight: 700; src: url(/poc/assets/fonts/J7acnpd8CGxBHp2VkZY4.ttf) format('truetype'); }
@font-face { font-family: 'Cabin'; font-weight: 300; src: url(/poc/assets/fonts/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EL7E.ttf) format('truetype'); }
@font-face { font-family: 'Cabin'; font-weight: 400; src: url(/poc/assets/fonts/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkW-EL7E.ttf) format('truetype'); }
@font-face { font-family: 'Cabin'; font-weight: 500; src: url(/poc/assets/fonts/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkYODL7E.ttf) format('truetype'); }
@font-face { font-family: 'Cabin'; font-weight: 600; src: url(/poc/assets/fonts/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EL7E.ttf) format('truetype'); }
/* ========================================
   Gold Theme Override — dhikr.ai POC
   Consistent met POC landing page stijl
   ======================================== */

/* Font override: Aref Ruqaa i.p.v. Amiri voor Arabisch */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cabin:wght@300;400;500;600&display=swap');

/* Reset body to POC gold theme palette */
body {
  background: #0a0a0f !important;
  color: #d0d0d8 !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Override root variables */
:root {
  --bg: #0a0a0f !important;
  --bg2: #0a0a14 !important;
  --text: #d0d0d8 !important;
  --muted: #8888a0 !important;
  --goud: #d4a853 !important;
  --goud-dim: #a08030 !important;
  --border: #1a1a2a !important;
  --font-heading: 'Aref Ruqaa', serif !important;
  --font-body: 'Cabin', sans-serif !important;
  --radius: 6px !important;
}

/* Hide old navbar completely */
header.navbar,
.navbar {
  display: none !important;
}

/* POC-style nav bar */
.nav-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.8rem 1.5rem !important;
  z-index: 100 !important;
  background: linear-gradient(180deg, rgba(10,10,15,0.95) 60%, transparent) !important;
}

.nav-home a {
  font-size: 0.7rem !important;
  color: #555570 !important;
  text-decoration: none !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: color 0.3s !important;
}

.nav-home a:hover {
  color: #d4a85388 !important;
}

.nav-langs {
  display: flex !important;
  gap: 2px !important;
}

.nav-lang {
  font-family: 'Cabin', sans-serif !important;
  font-size: 0.65rem !important;
  color: #555570 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.6rem !important;
  border: 1px solid #1a1a2a !important;
  background: none !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.nav-lang:first-child {
  border-radius: 2px 0 0 2px !important;
}

.nav-lang:last-child {
  border-radius: 0 2px 2px 0 !important;
}

.nav-lang:hover {
  color: #9999a8 !important;
  border-color: #2a2a3a !important;
}

.nav-lang.active {
  color: #d4a853 !important;
  border-color: #d4a85355 !important;
  background: rgba(212,168,83,0.06) !important;
}

/* Main content offset for new nav */
main {
  padding-top: 80px !important;
}

/* Headings — override to Aref Ruqaa */
h1, h2, h3, h4, .section-title, .ring-card h3 {
  font-family: 'Aref Ruqaa', serif !important;
}

h1 {
  color: #d4a853 !important;
}

/* Override link colors */
a {
  color: #d4a853 !important;
}
a:hover {
  color: #e8c86a !important;
}

/* Ring cards — gold accent */
.ring-card {
  background: linear-gradient(135deg, #0a0a14 0%, #0d0d18 100%) !important;
  border-color: #1a1a2a !important;
}
.ring-card:hover {
  border-color: #d4a85344 !important;
}
.ring-card h3 {
  color: #d4a853 !important;
}
.ring-card .link {
  color: #d4a853 !important;
}

/* Gold-accented section title area */
.section-title {
  color: #d4a853 !important;
}

/* Footer */
footer {
  border-top-color: #1a1a2a !important;
}
footer a {
  color: #555570 !important;
}
footer a:hover {
  color: #d4a853 !important;
}

/* Hero area */
.hero h1 {
  color: #d4a853 !important;
}

/* Status badges */
.status-werkend {
  background: #0a1a0a !important;
  border-color: #2e7d32 !important;
}
.status-informatief {
  background: #0a0a1a !important;
  border-color: #1565c0 !important;
}

/* Lang override */
.lang-btn.active {
  background: #d4a853 !important;
  color: #0a0a0f !important;
  border-color: #d4a853 !important;
}

/* Make sure footer text is muted */
footer p {
  color: #555570 !important;
}

/* Tool cards */
.tool-card {
  background: linear-gradient(135deg, #0a0a14 0%, #0d0d18 100%) !important;
  border-color: #1a1a2a !important;
}
.tool-card:hover {
  border-color: #d4a85344 !important;
}

/* Responsive */
@media (max-width: 600px) {
  .nav-bar {
    padding: 0.6rem 1rem !important;
  }
  main {
    padding-top: 70px !important;
  }
}