/* -----------------------------------------
   THEMA KLEUREN
----------------------------------------- */

:root {
  --accent: #cc9944;
  --radius: 16px;

  --font-main: "Barlow", sans-serif;
  --font-title: "Montserrat", sans-serif;
}

/* DARK MODE */
html[data-theme="dark"] {
  --bg: #0f1724;
  --card: rgba(255,255,255,0.03);
  --text: #eef6ff;
  --muted: #9aa9bf;
  --link-bg: rgba(255,255,255,0.05);
  --icon-bg: rgba(255,255,255,0.06);
}

/* LIGHT MODE */
html[data-theme="light"] {
  --bg: #f5f1eb;
  --card: #ffffff;
  --text: #262626;
  --muted: #666;
  --link-bg: #f1e6d8;
  --icon-bg: #e5d5c0;
}

/* -----------------------------------------
   BASIS
----------------------------------------- */

body {
  margin: 0;
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
  display: flex;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-main);
}

h1 {
  font-family: var(--font-title);
}

.container {
  width: 100%;
  max-width: 480px;
}

/* -----------------------------------------
   TOP BAR (Taal + Theme Toggle)
----------------------------------------- */

.top-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.language-switcher button,
#themeToggle {
  padding: 6px 12px;
  background: var(--link-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
}

/* Toon een klein icoontje auto dark & light mode */
#themeToggle[title*="Automatisch"],
#themeToggle[title*="systeem"] {
  position: relative;
}

#themeToggle[title*="Automatisch"]::after {
  content: "↻";
  font-size: 10px;
  position: absolute;
  bottom: -2px;
  right: -2px;
  opacity: 0.7;
}

.language-switcher button.active {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}



/* -----------------------------------------
   KAART / CONTAINER
----------------------------------------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

/* BRANDING */

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand .logo {
  width: 80px;          
  height: 80px;
  border-radius: 50%;   
  overflow: hidden;     
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;     
  padding: 10px;        
  box-sizing: border-box;
}

.brand .logo img {
  width: 120%;
  height: 120%;
  object-fit: contain;  /* belangrijk! zorgt dat het logo niet vervormd wordt */
  display: block;
}

.name p {
  color: var(--muted);
  font-size: 13px;
}

.bio {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

/* -----------------------------------------
   LINKS
----------------------------------------- */

.links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--link-bg);
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: transform .12s ease;
}

.link:hover {
  transform: translateY(-4px);
}

.icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--icon-bg);
  display: grid;
  place-items: center;
}

.donate {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}

/* Social media sectie */
.links.social {
  margin-top: 26px;
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

.footer {
  margin-top: 20px;
  text-align: center;
}

.small {
  font-size: 12px;
  color: var(--muted);
}

/* RTL for Pashto */
html[lang="ps"] body {
  direction: rtl;
  text-align: right;
}

/* Social Grid */
.social-title {
  margin-top: 26px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.social-item {
  background: var(--link-bg);
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease;
  text-align: center;
}

.social-item:hover {
  transform: translateY(-4px);
}

.social-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--icon-bg);
  display: grid;
  place-items: center;
}

/* Social Media Hover met merkkleuren */
.social-item.instagram:hover .icon {
  background: #E1306C; /* Instagram roze/purple */
  color: white;
}

.social-item.tiktok:hover .icon {
  background: #69C9D0; /* TikTok aqua */
  color: white;
}

.social-item.facebook:hover .icon {
  background: #1877F2; /* Facebook blauw */
  color: white;
}

.social-item.youtube:hover .icon {
  background: #FF0000; /* YouTube rood */
  color: white;
}

/* Optioneel: ook de text sterk accentueren */
.social-item.instagram:hover strong,
.social-item.tiktok:hover strong,
.social-item.facebook:hover strong,
.social-item.youtube:hover strong {
  color: white;
}