/* =======================================================================
   Ferienspass theme -- overrides Bootstrap 5's own CSS custom properties,
   the same technique the "organic" reference template uses for its own
   palette (style.css overriding --bs-primary/--bs-secondary/etc.), rather
   than a parallel hand-built component system. Component styling itself
   (buttons, cards, tables, badges, alerts, nav) comes from Bootstrap's own
   classes in the markup -- this file is theming only.
   ======================================================================= */

/* --bs-primary/--bs-secondary/--bs-*-rgb (the two admin-editable brand
   colors) are injected by theming/base.html's inline <style> block --
   static files aren't template-processed, so their actual hex/rgb values
   can't live here. Everything below is static. */
:root {
  --bs-body-font-family: "Open Sans", sans-serif;
  --bs-body-color: #3a3a3a;
  --bs-body-bg: #FBFAF7;
  --heading-font: "Nunito", sans-serif;
}

body[data-density="compact"] .card-body { padding: 0.75rem; }

/* {{ form.as_p }} renders a plain <label>, not Bootstrap's .form-label --
   BootstrapFormMixin (apps/theming/forms.py) handles the input/select/
   checkbox side; this is its label-side counterpart. */
form p > label:first-child { font-weight: 500; margin-bottom: 0.25rem; display: inline-block; }

h1, h2, h3, h4, h5, h6, .navbar-brand, .fp-heading {
  font-family: var(--heading-font);
  font-weight: 700;
}

.navbar-brand { font-size: 1.35rem; }
.navbar-brand img { height: 32px; width: auto; border-radius: 6px; margin-right: 0.5rem; }

.btn { border-radius: 50rem; font-weight: 700; }
.btn-sm { border-radius: 50rem; }

.card { border: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.table { background: #fff; }
.table thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: #6b7280; border-bottom-width: 2px; }

/* Group-header row (one child's booking history) -- a section break, not
   another data row: no striping, heading font, tinted background. */
tr.table-group-header th {
  background: var(--bs-tertiary-bg, #f3f3f3);
  font-family: var(--heading-font);
  font-size: 1.05rem;
}

.activity-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--bs-card-inner-border-radius, 0.5rem) var(--bs-card-inner-border-radius, 0.5rem) 0 0;
  background: linear-gradient(155deg, var(--bs-secondary) 0%, var(--bs-primary) 100%);
  position: relative;
}
.activity-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-card-monogram {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--heading-font); font-weight: 700; font-size: 3.5rem; color: rgba(255, 255, 255, 0.55);
}

.hero-banner {
  border-radius: 1rem; overflow: hidden; position: relative;
  background: linear-gradient(155deg, var(--bs-secondary) 0%, var(--bs-primary) 100%);
}
.hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The booking-confirmed "stamp" -- a small illustrative SVG touch, kept
   from the previous design since it's decorative flourish, not a layout
   system Bootstrap needs to replace. */
.stamp { width: 128px; height: 128px; display: block; margin: 0 auto; transform: rotate(-7deg); }
.stamp .ring { fill: none; stroke: var(--bs-primary); }
.stamp text { font-family: var(--heading-font); font-weight: 700; fill: var(--bs-primary); }