/* ========================================
   TATTOOAFSPRAAK.NL - GLOBAL STYLES
   Theme System: Dark/Light Mode
   ======================================== */

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {
  /* Primary Colors */
  --color-primary: #f97316;
  --color-primary-light: #fb923c;
  --color-primary-dark: #ea580c;

  /* Dark Theme */
  --bg-primary-dark: #111827;
  --bg-secondary-dark: #1f2937;
  --bg-tertiary-dark: #374151;
  --text-primary-dark: #ffffff;
  --text-secondary-dark: #d1d5db;
  --text-tertiary-dark: #9ca3af;
  --border-dark: #4b5563;

  /* Light Theme */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f3f4f6;
  --bg-tertiary-light: #e5e7eb;
  --text-primary-light: #111827;
  --text-secondary-light: #374151;
  --text-tertiary-light: #6b7280;
  --border-light: #d1d5db;
}

/* ===== GLOBAL STYLES ===== */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Dark theme (default) */
body {
  background-color: var(--bg-primary-dark);
  color: var(--text-primary-dark);
}

/* Light theme */
body.light-theme {
  background-color: var(--bg-primary-light);
  color: var(--text-primary-light);
}

/* ===== HEADER & NAVIGATION ===== */
header {
  background: #000;
  z-index: 50;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
}

header.light-theme {
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
}

/* Logo subtitle visibility in light theme - only change subtitle, keep main text white */
body.light-theme header .text-gray-400 {
  color: var(--text-tertiary-light) !important;
}

header.light-theme a {
  color: var(--text-primary-light);
}

header.light-theme a:hover {
  color: var(--color-primary);
}

header a {
  color: var(--text-primary-dark);
  transition: color 0.3s ease;
}

header a:hover {
  color: var(--color-primary);
}

/* Mobile menu */
#mobileMenu {
  background: #000;
  color: var(--text-primary-dark);
}

body.light-theme #mobileMenu {
  background: #ffffff;
  color: var(--text-primary-light);
}

/* ===== FOOTER ===== */
footer {
  background: #000;
  color: #9ca3af;
  border-top: 1px solid var(--border-dark);
}

body.light-theme footer {
  background: #ffffff;
  color: var(--text-tertiary-light);
  border-top: 1px solid var(--border-light);
}

footer a {
  color: inherit;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--color-primary);
}

/* ===== BUTTONS ===== */
.btn-accent {
  background-color: var(--color-primary);
  color: white;
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

.btn-accent:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.02);
}

.btn-accent:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--color-primary);
}

/* Gray buttons (like "Voor Tattooshops") */
.bg-gray-700 {
  background-color: var(--bg-tertiary-dark);
  color: var(--text-primary-dark);
}

.bg-gray-700:hover {
  background-color: var(--border-dark);
}

body.light-theme .bg-gray-700 {
  background-color: var(--bg-tertiary-light);
  color: var(--text-primary-light) !important;
  border: 1px solid var(--border-light);
}

body.light-theme .bg-gray-700:hover {
  background-color: var(--border-light);
}

/* ===== HERO BACKGROUND ===== */
.hero-bg {
  background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.85)), url('../assets/img/background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light-theme .hero-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('../assets/img/background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light-theme .hero-bg h1,
body.light-theme .hero-bg p {
  color: var(--text-primary-light);
}

/* ===== PRICING BACKGROUND ===== */
.pricing-bg {
  background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.85)), url('../assets/img/background2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light-theme .pricing-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('../assets/img/background2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== FAQ BACKGROUND ===== */
.faq-bg {
  background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.85)), url('../assets/img/screenshot.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light-theme .faq-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('../assets/img/screenshot.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== CARDS & BLOCKS ===== */
.card,
.section-block,
.feature-block {
  background: var(--bg-secondary-dark);
  border-radius: 0.5rem;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.light-theme .card,
body.light-theme .section-block,
body.light-theme .feature-block {
  background: var(--bg-secondary-light);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card:hover,
.section-block:hover,
.feature-block:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

body.light-theme .card:hover,
body.light-theme .section-block:hover,
body.light-theme .feature-block:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== FORMS ===== */
input,
textarea,
select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: var(--bg-tertiary-dark);
  color: var(--text-primary-dark);
  border: 1px solid var(--border-dark);
  border-radius: 0.375rem;
  padding: 0.75rem;
  width: 100%;
  font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="number"],
body.light-theme input[type="tel"],
body.light-theme textarea,
body.light-theme select {
  background-color: var(--bg-secondary-light);
  color: var(--text-primary-light);
  border: 1px solid var(--border-light);
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: var(--text-tertiary-light);
}

/* ===== SECTIONS ===== */
section {
  transition: background-color 0.2s ease;
}

/* Alternating background sections */
.bg-gray-800 {
  background-color: var(--bg-secondary-dark);
}

body.light-theme .bg-gray-800 {
  background-color: var(--bg-secondary-light);
}

.bg-gray-900 {
  background-color: var(--bg-tertiary-dark);
}

body.light-theme .bg-gray-900 {
  background-color: var(--bg-secondary-light);
}

/* ===== FAQ ACCORDION ===== */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* FAQ button hover - speciale styling voor light mode */
body.light-theme .bg-gray-900 button.hover\:bg-gray-800:hover,
body.light-theme button.hover\:bg-gray-800:hover {
  background-color: #e5e7eb !important;
}

/* Border colors for light theme */
body.light-theme .border-gray-700 {
  border-color: var(--border-light);
}

/* ===== TEXT COLORS ===== */
.text-gray-300 {
  color: var(--text-secondary-dark);
}

body.light-theme .text-gray-300 {
  color: var(--text-secondary-light);
}

.text-gray-400 {
  color: var(--text-tertiary-dark);
}

body.light-theme .text-gray-400 {
  color: var(--text-tertiary-light);
}

.text-white {
  color: var(--text-primary-dark);
}

body.light-theme .text-white {
  color: var(--text-primary-light);
}

/* ===== BORDERS ===== */
.border-gray-700 {
  border-color: var(--border-dark);
}

body.light-theme .border-gray-700 {
  border-color: var(--border-light);
}

/* ===== ACCENT COLOR ===== */
.text-orange-500,
.text-orange-400,
.text-orange-600 {
  color: var(--color-primary) !important;
}

.bg-orange-500 {
  background-color: var(--color-primary);
}

.bg-orange-500:hover {
  background-color: var(--color-primary-dark);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--bg-secondary-dark);
  color: var(--text-primary-dark);
}

body.light-theme .theme-toggle-btn {
  background-color: var(--bg-secondary-light);
  color: var(--text-primary-light);
  border: 1px solid var(--border-light);
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
}

.theme-toggle-btn:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--color-primary);
}

/* ===== UTILITIES ===== */
.no-transition {
  transition: none !important;
}

/* ===== FILTER COMPONENT ===== */
.filter {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter input,
.filter select {
  width: 100%;
}

/* ===== MAP ===== */
#map {
  height: 450px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.light-theme #map {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Leaflet popup styling */
.leaflet-popup-content-wrapper {
  background-color: var(--bg-secondary-dark) !important;
  color: var(--text-primary-dark) !important;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-tip {
  background: var(--bg-secondary-dark) !important;
}

body.light-theme .leaflet-popup-content-wrapper {
  background-color: var(--bg-primary-light) !important;
  color: var(--text-primary-light) !important;
  border: 1px solid var(--border-light) !important;
}

body.light-theme .leaflet-popup-tip {
  background: var(--bg-primary-light) !important;
  border: 1px solid var(--border-light) !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .filter {
    grid-template-columns: 1fr;
  }

  #map {
    height: 300px;
  }

  header {
    padding: 0.5rem;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: light) {
  body:not(.light-theme):not(.dark-theme) {
    background-color: var(--bg-primary-light);
    color: var(--text-primary-light);
  }
}