/* Bangers on all headings */
h1 {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
  line-height: 1.1;
  font-weight: 400; /* Bangers has no weight variation */
}

/* Safe area support for iOS PWA */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }

/* Smooth transitions for HTMX */
.htmx-swapping { opacity: 0.5; transition: opacity 150ms ease-in; }
.htmx-settling { transition: opacity 150ms ease-in; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* Checkbox styling override */
input[type="checkbox"].sop-check {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
input[type="checkbox"].sop-check:checked {
  background-color: #22c55e;
  border-color: #22c55e;
}
input[type="checkbox"].sop-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Animate progress bar */
@keyframes progress-fill {
  from { width: 0; }
}
.progress-bar { animation: progress-fill 0.6s ease-out; }

/* Card hover lift */
.card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-hover:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(79, 70, 229, 0.08); }

/* Focus ring override */
*:focus-visible {
  outline: 2px solid #3a7a63;
  outline-offset: 2px;
}

/* Brand colour variables */
:root {
  --brand-dark:   #2D4A3E;
  --brand-mid:    #3a7a63;
  --brand-light:  #7eb39e;
  --terra:        #c96b4e;
}

/* ── Mobile / touch optimisations ─────────────────────────────────────── */

/* Eliminate 300ms tap delay on iOS for all tappable elements */
a, button, [role="button"], input[type="submit"], input[type="button"],
label, select { touch-action: manipulation; }

/* Remove default tap highlight flash on Android WebView */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Input fields: 16px font prevents iOS Safari zoom-on-focus */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
textarea, select { font-size: 16px; }

/* Prevent horizontal overflow on small screens */
body { overflow-x: hidden; }