/* Crowd.Shots public theme overrides
   - Bootstrap 5 base; keep overrides minimal & WCAG 2.2 AA
   - Use CSS variables to enable theming via one place
*/
:root {
  --cs-primary: #0d6efd;       /* Bootstrap primary */
  --cs-primary-contrast: #fff; /* Text on primary */
  --cs-dark: #0b1220;
  --cs-accent: #6610f2;
  --cs-body: #212529;
  --cs-muted: #6c757d;

  /* Koppel Bootstrap-variabelen aan onze themekleur. */
  --bs-primary: var(--cs-primary);
  --bs-link-color: var(--cs-primary);
  --bs-link-hover-color: var(--cs-primary);

  /* Spacing scale */
  --cs-space-1: .25rem;
  --cs-space-2: .5rem;
  --cs-space-3: 1rem;
  --cs-space-4: 1.5rem;

  /* Focus outline (AA) */
  --cs-focus: 2px dotted var(--cs-accent);
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Body & type */
body {
  color: var(--cs-body);
  text-rendering: optimizeLegibility;
}

/* Accessible focus for interactive elements */
a, button, [role="button"], input, select, textarea {
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--cs-focus);
}

/* Navbar tweaks */
.navbar-brand { letter-spacing: .2px; }
.nav-link { font-weight: 500; }
.nav-link:focus-visible { outline: var(--cs-focus); }

/* Footer links: ensure contrast & visible focus */
footer a { opacity: .9; }
footer a:hover { opacity: 1; text-decoration: underline; }
footer a:focus-visible { outline: var(--cs-focus); }

/* Powered-by badge – enforce presence & subtle pin */
.powered-by-badge {
  border-radius: 999px;
  padding: .5rem .75rem;
}

/* Optional floating badge (if you decide to use it in pages)
   <span class="powered-by-floating">Powered by Crowd.Shots</span> */
.powered-by-floating {
  position: fixed;
  right: var(--cs-space-3);
  bottom: var(--cs-space-3);
  z-index: 1030;
  background: var(--cs-dark);
  color: #fff;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,.15);
}

/* Helpers */
.hero {
  padding: clamp(2rem, 6vw, 6rem) 0;
}
.lead-strong {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 600;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Buttons: ensure contrast on primary */
.btn-primary {
  --bs-btn-color: var(--cs-primary-contrast);
  --bs-btn-bg: var(--cs-primary);
  --bs-btn-border-color: var(--cs-primary);

  /* Hover/active ook op de themakleur houden */
  --bs-btn-hover-bg: var(--cs-primary);
  --bs-btn-hover-border-color: var(--cs-primary);
  --bs-btn-active-bg: var(--cs-primary);
  --bs-btn-active-border-color: var(--cs-primary);
}

/* Cards: soft shadow */
.card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.05);
}

/* Forms: larger hit area */
.form-control, .form-select { padding: .65rem .9rem; }

/* Utilities for spacing */
.section { padding: 3rem 0; }
.section-sm { padding: 1.5rem 0; }
.section-lg { padding: 5rem 0; }

/* Dark footer readability */
footer { background: #121826; }

/* Event detail styling */
.gradient-card{
  background: linear-gradient(120deg, var(--bs-primary) 0%, #6ea8fe 100%);
}
.icon-circle{
  width: 3rem;height: 3rem;border-radius: 999px;
  display: inline-flex;align-items: center;justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
}

/* Stat rows */
.stat-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem 0;border-bottom: 1px dashed rgba(0,0,0,.06);
}
.stat-row:last-child{ border-bottom: 0; }
.stat-icon{
  width:2.25rem;height:2.25rem;border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.stat-text{ line-height:1.2; }

/* Permission tiles */
.perm-tile{
  display:flex;gap:.75rem;align-items:center;border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem;padding:.75rem;background: var(--bs-body-bg);
}
.perm-icon{
  width:2.25rem;height:2.25rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background: var(--bs-secondary-bg); color: var(--bs-secondary);
}
.perm-icon.ok{ background: rgba(25,135,84,.15); color: #198754; }
.perm-icon.no{ background: rgba(220,53,69,.15); color: #dc3545; }


/* Subtiele hulp-lijntjes en tick labels onder sliders */
datalist option {
  display: inline-block;
  color: var(--bs-secondary-color);
}
input[type="range"][list]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: calc(100% / 10) 100%;
}

.btn-outline-primary {
  --bs-btn-color: var(--cs-primary);
  --bs-btn-border-color: var(--cs-primary);
  --bs-btn-hover-bg: var(--cs-primary);
  --bs-btn-hover-border-color: var(--cs-primary);
  --bs-btn-active-bg: var(--cs-primary);
  --bs-btn-active-border-color: var(--cs-primary);
  --bs-btn-hover-color: var(--cs-primary-contrast);
}

.badge.bg-primary,
.bg-primary {
  background-color: var(--cs-primary) !important;
}