/* Obsidian Firewalking Custom Styles */

/*
  Color palette based on the Spring Ember palette provided by the user.
  Using CSS custom properties makes it easy to tweak colours across
  the entire site from one place. The neutrals provide a warm, welcoming
  backdrop while the ember and deep ember colours are used for calls to
  action and accents. Greens and blues offer fresh highlights.
*/

:root {
  --color-ember: #E4572E;
  --color-deep-ember: #B23A1E;
  --color-spring-green: #3BAA5C;
  --color-sky-blue: #3b82f6;
  --color-cream: #FFFAF3;
  --color-charcoal: #1F2937;
  --color-ash: #6B7280;
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Global typography and base styles */
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-ember);
  text-decoration: none;
}

a:hover {
  color: var(--color-deep-ember);
}

/* Navbar styling */
.navbar {
  background-color: var(--color-cream);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
}

.navbar .nav-link {
  color: var(--color-charcoal);
  font-weight: 500;
}

.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: var(--color-ember);
}

.navbar-brand {
  font-weight: 700;
  color: var(--color-deep-ember);
}

.navbar-brand:hover {
  color: var(--color-ember);
}

/* Button variants */
.btn-ember {
  background-color: var(--color-ember);
  color: #fff;
  border: none;
}

.btn-ember:hover, .btn-ember:focus {
  background-color: var(--color-deep-ember);
  color: #fff;
}

.btn-outline-ember {
  color: var(--color-ember);
  border: 2px solid var(--color-ember);
}

.btn-outline-ember:hover, .btn-outline-ember:focus {
  background-color: var(--color-ember);
  color: #fff;
}

/* Hero section */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--color-cream);
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(31, 41, 55, 0.6), rgba(31, 41, 55, 0.8));
  z-index: -1;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
}

.hero-content p.lead {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--color-cream);
}

/* Generic section spacing */
.section {
  padding: 4rem 0;
}

.section-alt {
  background-color: var(--color-cream);
}

.section-dark {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

.section-dark a {
  color: var(--color-spring-green);
}

/* Cards */
.card {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* Gallery image */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Page headers with background images */
.page-header {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  text-align: center;
  background-size: cover;
  background-position: center;
}

.page-header h1,
.page-header p.lead,
.page-header p.mb-0 { /* Include any other text you want shadowed */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Horizontal-offset Vertical-offset Blur-radius Color */
}

.page-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(31, 41, 55, 0.6), rgba(31, 41, 55, 0.6));
  z-index: -1;
}

/* Accent border for cards */
.border-ember {
  border: 2px solid var(--color-ember) !important;
}

/* Footer styling */
footer {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  padding: 2rem 0;
}

footer a {
  color: var(--color-spring-green);
  text-decoration: underline;
}

footer a:hover {
  color: var(--color-sky-blue);
}

/* Form focus styles */
form .form-control:focus {
  border-color: var(--color-ember);
  box-shadow: 0 0 0 0.2rem rgba(228, 87, 46, 0.25);
}

.subheadline {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* NAV spacing so content isn't under the fixed bar */
body { padding-top: 72px; } /* adjust if your navbar height differs */

/* ===== HERO (used on About, IFG page, etc.) ===== */
.hero{
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;            /* keep bg edges clipped */
}
.hero .hero-bg{
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* cover the area without distortion */
  z-index: 0;
}
.hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* darken, not white */
  pointer-events: none;
  z-index: 1;
}
.hero .container{ position: relative; z-index: 2; }

/* ===== PAGE HEADER (used on index) ===== */
.page-header{
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 40vh;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-header .overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
}
.page-header .container{ position: relative; z-index: 1; }

/* (Optional) make sure generic .container isn’t globally altered elsewhere */

/* === HOTFIX 2025-08-24 === */

/* keep content clear of fixed navbar */
body { padding-top: 72px; }

/* navbar should always sit on top of headers/overlays */
.navbar { z-index: 1050; }

/* HERO pattern (pages that use <header class="hero"> with <img class="hero-bg">) */
.hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }

/* PAGE-HEADER pattern (pages that use background-image inline) */
.page-header {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-header .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
}
.page-header .container { position: relative; z-index: 2; }

/* safety: prevent accidental horizontal scroll if any image exceeds width */
html, body { max-width: 100%; overflow-x: hidden; }

/* Skip link: hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-200%);
  background: #111;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  z-index: 10000;            /* above the navbar */
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform .2s ease-out; }
}

/* Ensure anchor target isn't hidden under fixed navbar */
#main-content { scroll-margin-top: 80px; } /* adjust if your navbar is taller */

.card .seats { font-weight: 600; }
.card.is-low .seats { color: #b45309; }      /* subtle amber when low */
.card.is-soldout .seats { color: #991b1b; }  /* red when sold out */

/*
 * Your Production Brand Buttons
 * (Uses your palette's raw hex codes)
*/

/* 1. Your PRIMARY Brand Button (Solid Spring Green) */
.btn-ember {
  background-color: #A4BE38;  /* Spring Green */
  border-color: #A4BE38;
  color: #154C45 !important; /* Dark Green text - !important overrides Bootstrap text color */
  text-decoration: none;    /* Ensure no underline */
}

/* Darken slightly on hover */
.btn-ember:hover {
  background-color: #93AB32;  /* A darker Spring Green */
  border-color: #93AB32;
  color: #154C45 !important;
}


/* 2. Your SECONDARY Brand Button (Outline) */
.btn-ember-outline {
  background-color: transparent;
  border: 2px solid #A4BE38; /* Spring Green border */
  color: #154C45;           /* Dark Green text */
  text-decoration: none;   /* Ensure no underline */
}

/* Fill on hover */
.btn-ember-outline:hover {
  background-color: #A4BE38;  /* Fills with Spring Green */
  border-color: #A4BE38;
  color: #154C45;
}