/* =========================================
   Johnny2Step — Prairie Dawn (light western)
   ========================================= */

:root{
  --bg: #faf7f1;             /* parchment background */
  --nav: #f3e7d4;            /* wheat beige navbar */
  --panel: #fffdf9;          /* off-white panels */
  --panel-elev: #f8f2e7;     /* slightly darker lifted panel */
  --border: #d8cbb4;         /* saddle-tan border */
  --text: #2c1b0f;           /* deep coffee brown */
  --muted: #7b624b;          /* dusty brown */
  --subtle: #a89279;         /* faded parchment text */
  --accent: #b6682b;         /* western leather */
  --accent-2: #d17933;       /* warm sunset for hover */
  --accent-warm: #c24d3c;    /* rustic western red (likes/hearts) */
  --radius: 12px;
  --shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--text);
  font-family: "Inter","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
}

a{ color: var(--accent); }
a:hover{ color: var(--accent-2); }

/* Navbar */
.navbar{
  background: var(--nav) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.navbar-brand, .nav-link{ color: var(--text) !important; }
.navbar-brand:hover, .nav-link:hover{ color: var(--accent) !important; }

/* Cards */
.card, .panel-contrast{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-contrast{ background: var(--panel-elev); }

/* Buttons */
.btn{
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover{
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.btn-outline-light{
  background: rgba(255,255,255,.65);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.95);
  border-color: var(--accent);
}

/* Warm heart button */
.btn.btn-sm.btn-primary,
.btn.btn-sm.btn-primary span{
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: #fff;
}

/* Table */
.table{
  color: var(--text);
  border-collapse: separate;
  border-spacing: 0 12px;
}
.table thead th{
  background: #f3e7d4;
  color: var(--text);
  border: 1px solid var(--border);
}
.table tbody tr:hover td{
  background: rgba(182,104,43,.08); /* leather glow */
}

/* Badges */
.badge.text-bg-dark{
  background: #e8dac6 !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

/* Forms */
.form-control, .form-select{
  background: #fffdf9;
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .18rem rgba(182,104,43,.25);
}

/* Section heading */
.container .h4{
  border-left: 5px solid var(--accent);
  padding-left: .6rem;
}
/* ===== Lighten the main page background ===== */

/* Main shell – replace the dark grey with parchment */
body,
main,
.page-shell,
.content-wrapper,
.container-fluid {
  background: #faf3e3 !important;  /* light parchment */
}

/* If any wrappers are still using Bootstrap's bg-dark, override it */
.bg-dark {
  background-color: #f5ebd8 !important;  /* soft tan instead of charcoal */
}

/* Keep the cards floating on top of a light surface */
.card,
.panel-contrast {
  background: #fffdf9;
}

/* Make navbar tighter and let logo fill the height */
.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* Remove default padding around the brand */
.navbar-brand {
  padding: 0;
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
}

/* Big logo, no extra white space */
.navbar-logo {
  display: block;
  height: 64px;      /* adjust to taste */
  max-height: 64px;
  width: auto;
}

/* Slightly smaller on mobile so it doesn't dominate */
@media (max-width: 576px) {
  .navbar-logo {
    height: 52px;
    max-height: 52px;
  }
}
/* Make section headings use the same dark brown as the DANCE badge */
.container .h4,
.container h1.h4 {
  color: #2c1b0f !important;  /* deep coffee brown */
}
.card:hover {
  cursor: pointer;
}

.form-label {
  color: var(--text);
}


/* Home hero (first-visit splash) */
.home-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}

.home-hero .hero-logo {
  display: block;
  max-width: 260px;  /* cap size, but keep proportions */
  width: auto;       /* use natural width */
  height: auto;      /* use natural height */
  opacity: 0;
  animation:
    hero-float-in 900ms ease-out forwards,
    hero-bob 4s ease-in-out 900ms infinite;
}

.home-hero .hero-title {
  margin-top: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.home-hero .hero-subtitle {
  margin-top: .5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* Simple CTA pulse */
.home-hero .hero-cta {
  margin-top: 1.75rem;
  padding-inline: 2.5rem;
  animation: hero-pulse 2.4s ease-in-out 1.2s infinite;
}

/* Animations */
@keyframes hero-float-in {
  from {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes hero-pulse {
  0%, 100% { transform: scale(1); box-shadow: none; }
  50%      { transform: scale(1.03); box-shadow: 0 0 0 0.35rem rgba(182,104,43,.2); }
}

/* =========================================================
   Kind-based background tint overlay (very subtle)
   Works even if body/main background uses !important
   ========================================================= */

body {
  position: relative;
}

/* Overlay layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Default (all) tint */
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(251,191,36,.07), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(251,191,36,.06), transparent 70%);
}

/* Make sure page content sits ABOVE the overlay */
body > * {
  position: relative;
  z-index: 1;
}

/* Per-kind tints (tuned for your light parchment theme) */
body[data-kind="dance"]::before {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(255,90,31,.08), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(255,90,31,.06), transparent 70%);
}

body[data-kind="social"]::before {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(49,196,141,.08), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(49,196,141,.06), transparent 70%);
}

body[data-kind="classes"]::before {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(96,165,250,.08), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(96,165,250,.06), transparent 70%);
}

body[data-kind="events"]::before {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(167,139,250,.09), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(167,139,250,.07), transparent 70%);
}

body[data-kind="all"]::before {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(251,191,36,.07), transparent 65%),
    radial-gradient(900px 600px at 90% 10%, rgba(251,191,36,.06), transparent 70%);
}
/* Your main wrapper in base.html is: <main class="container my-4"> */
main.container {
  position: relative;
  overflow: hidden;           /* keeps the tint neatly inside rounded edges */
  border-radius: 18px;        /* subtle rounding so it looks intentional */
}

/* Put a tint layer ABOVE the main background, but BELOW content */
main.container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* default (all) */
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(251,191,36,.10), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(251,191,36,.08), transparent 68%);
}

/* Ensure main content renders above the tint */
main.container > * {
  position: relative;
  z-index: 1;
}

/* Per-kind tints */
body[data-kind="dance"] main.container::before {
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(255,90,31,.12), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(255,90,31,.09), transparent 68%);
}

body[data-kind="social"] main.container::before {
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(49,196,141,.12), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(49,196,141,.09), transparent 68%);
}

body[data-kind="classes"] main.container::before {
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(96,165,250,.12), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(96,165,250,.09), transparent 68%);
}

body[data-kind="events"] main.container::before {
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(167,139,250,.13), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(167,139,250,.10), transparent 68%);
}

body[data-kind="all"] main.container::before {
  background:
    radial-gradient(1000px 650px at 10% 0%, rgba(251,191,36,.10), transparent 62%),
    radial-gradient(800px 520px at 92% 12%, rgba(251,191,36,.08), transparent 68%);
}

.post-date { color:#2c1b0f !important; }