/*
 * Herfstmarkt Dordrecht — "Wild Wild Herfst" poster look.
 * Colours sampled from the 2026 poster (oil-pastel sunset on cream paper).
 * Mobile first: base rules are for phones, min-width queries add the rest.
 */

:root {
  /* Poster palette */
  --hm-cream: #f9edd7; /* paper border */
  --hm-paper: #fdf6e9; /* lighter paper for cards */
  --hm-sand: #eed18b; /* desert ground */
  --hm-yellow: #f4c542; /* low sky / bushes */
  --hm-orange: #e59607; /* mid sky */
  --hm-orange-deep: #ca5615; /* top of the sky */
  --hm-rust: #a2401c; /* darkest orange, readable on cream */
  --hm-brown: #3b2416; /* hand lettering */
  --hm-brown-soft: #6b5240;
  --hm-blue: #8fc3d1; /* cowboy's shirt / water */

  /* Generic tokens consumed by the django-timetable templates */
  --tt-accent: var(--hm-rust);
  --tt-surface: var(--hm-paper);
  --tt-border: #e6d3b3;
  --tt-muted: var(--hm-brown-soft);
  --tt-text: var(--hm-brown);

  --hm-font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --hm-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap 5.2 variables */
  --bs-body-bg: var(--hm-cream);
  --bs-body-color: var(--hm-brown);
  --bs-body-font-family: var(--hm-font-body);
  --bs-link-color: var(--hm-rust);
  --bs-link-hover-color: var(--hm-brown);
  --bs-border-color: var(--tt-border);
  --bs-secondary-color: var(--hm-brown-soft);
  color-scheme: light;
}

body {
  background-color: var(--hm-cream);
  color: var(--hm-brown);
  font-family: var(--hm-font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-6,
.hm-hand {
  font-family: var(--hm-font-hand);
  font-weight: 400;
  color: var(--hm-brown);
  letter-spacing: 0.02em;
}

a {
  color: var(--hm-rust);
}

a:hover {
  color: var(--hm-brown);
}

.text-muted {
  color: var(--hm-brown-soft) !important;
}

.text-dark {
  color: var(--hm-brown) !important;
}

/* ---- Header ------------------------------------------------------------ */

.hm-header {
  background: var(--hm-orange) url("../images/sky.7a6620c6149f.jpg") center / cover;
  background-image:
    linear-gradient(180deg, rgb(202 86 21 / 35%), rgb(229 150 7 / 0%)),
    url("../images/sky.7a6620c6149f.jpg");
  border-bottom: 3px solid var(--hm-brown);
}

.hm-header .navbar {
  padding-block: 0.5rem;
}

.hm-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--hm-font-hand);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--hm-brown) !important;
  text-decoration: none;
}

.hm-brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--hm-brown);
  background: var(--hm-yellow);
}

.hm-header .nav-link {
  font-family: var(--hm-font-hand);
  font-size: 1.3rem;
  color: var(--hm-brown);
  padding-inline: 0.75rem;
}

.hm-header .nav-link:hover,
.hm-header .nav-link:focus {
  color: var(--hm-paper);
}

.hm-header .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.hm-header .navbar-toggler {
  border-color: var(--hm-brown);
}

.hm-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233b2416' stroke-linecap='round' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- Footer ------------------------------------------------------------ */

.hm-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  background: var(--hm-brown);
  color: var(--hm-cream);
  font-size: 0.95rem;
}

.hm-footer a {
  color: var(--hm-yellow);
}

.hm-footer .hm-hand {
  color: var(--hm-yellow);
  font-size: 1.4rem;
}

/* ---- Buttons, cards, badges -------------------------------------------- */

.btn {
  border-radius: 999px;
  font-weight: 700;
}

.btn-primary {
  --bs-btn-bg: var(--hm-rust);
  --bs-btn-border-color: var(--hm-rust);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--hm-brown);
  --bs-btn-hover-border-color: var(--hm-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--hm-brown);
  --bs-btn-active-border-color: var(--hm-brown);
  --bs-btn-focus-shadow-rgb: 162, 64, 28;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--hm-rust);
  --bs-btn-border-color: var(--hm-rust);
  --bs-btn-hover-bg: var(--hm-rust);
  --bs-btn-hover-border-color: var(--hm-rust);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--hm-rust);
  --bs-btn-active-border-color: var(--hm-rust);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 162, 64, 28;
}

.btn-check:checked + .btn-outline-primary {
  background: var(--hm-rust);
  color: #fff;
}

.btn-hm-big {
  font-family: var(--hm-font-hand);
  font-weight: 400;
  font-size: 1.5rem;
  padding: 0.6rem 2rem;
}

.card,
.bg-light {
  --bs-card-bg: var(--hm-paper);
  background-color: var(--hm-paper) !important;
}

.card {
  border: 1px solid var(--tt-border) !important;
  border-radius: 1rem;
}

.badge {
  color: var(--hm-brown);
  font-weight: 700;
}

.badge.bg-dark {
  background-color: var(--hm-brown) !important;
  color: var(--hm-cream);
}

.list-group-item {
  color: var(--hm-brown);
  border-color: var(--tt-border);
}

.form-control:focus {
  border-color: var(--hm-orange);
  box-shadow: 0 0 0 0.2rem rgb(229 150 7 / 30%);
}

/* ---- Homepage ---------------------------------------------------------- */

.hm-hero {
  padding-top: 1.5rem;
}

.hm-poster {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
  margin-inline: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgb(59 36 22 / 25%);
}

.hm-tagline {
  font-family: var(--hm-font-hand);
  color: var(--hm-orange-deep);
  font-size: 1.6rem;
  margin-bottom: 0;
}

.hm-title {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.hm-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
}

.hm-facts li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--tt-border);
}

.hm-facts .hm-fact-label {
  min-width: 1.5rem;
}

.hm-intro {
  font-size: 1.1rem;
}

.hm-section-title {
  font-size: 2rem;
  margin: 2rem 0 0.75rem;
}

.hm-cta {
  text-align: center;
  margin: 2rem 0 1rem;
}

@media (min-width: 768px) {
  .hm-brand {
    font-size: 1.9rem;
  }

  .hm-brand img {
    width: 64px;
    height: 64px;
  }

  .hm-title {
    font-size: 3.4rem;
  }

  .hm-poster {
    max-width: none;
  }
}

/* ---- Messages (from cookiecutter) -------------------------------------- */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}