/* ROUTE56 website styles */
/* Basic resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  background-color: #0e0e10;
  color: #ffffff;
  scroll-behavior: smooth;
}

/* Container */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(10, 10, 12, 0.9);
  z-index: 1000;
  border-bottom: 1px solid #2a2a30;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
}

/* Adjust the logo image size */
.logo img {
  height: 48px;
  width: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #e63946;
}

/* Hero wrapper */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Slightly smaller hero height so content doesn’t overpower the page */
  min-height: 75vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Add extra bottom padding so that the next section doesn't overlap the hero image. */
  padding: 3rem 0 5rem 0;
  color: #ffffff;
}

/* Hero image at top: display cover photo full width with no overlay */
.hero-image {
  width: 100%;
  /* Remove positioning from generic hero class */
  position: relative;
}

.hero-image img.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero intro section holds the tagline, patch and CTA below the image */
.hero-intro {
  text-align: center;
  padding: 3rem 0 4rem 0;
  background-color: #0e0e10;
}

.hero-intro h1 {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.hero-intro .tagline {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  color: #dddddf;
}

.hero-intro .patch {
  margin: 2rem auto;
  width: 180px;
  max-width: 40%;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

.hero-intro .btn {
  margin-top: 1rem;
}

/* Social links within the hero section
   Display the Instagram and TikTok icons below the race summary line on the homepage. These icons mirror the
   styling of the footer social icons but are sized appropriately for the hero area. */
.hero-intro .social-links {
  margin-top: 0.75rem;
  font-size: 0;
  text-align: center;
}
.hero-intro .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e11f27;
  text-decoration: none;
  margin: 0 0.25rem;
}
.hero-intro .social-links img {
  /* Increase the size of social icons in the hero section for greater emphasis */
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.3s;
}

/* Label above the social icons in the hero section */
.hero-intro .follow-us {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  color: #dddddf;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-intro .social-links a:hover img {
  transform: scale(1.1);
}

/* Home page hero uses the new cover image and a lighter overlay for more impact */
/* Home page hero uses the supplied cover image.  The cover provides a cinematic road and fire theme without extra text. */
.hero-home {
  /* Use the user‑supplied cover image for the home hero.  This version shows the road and flames without overlay text. */
  background-image: url('assets/cover.jpg');
  /* Center the background so the flames and road are prominently visible. */
  background-position: center;
}

/* Event page hero uses a gritty park scene.  We override the default for
   both .event-hero and .hero-event further below, but keep this class
   here for backward compatibility. */
/* Default event hero background (fallback); overridden by inline styles on event.html */
.event-hero {
  /* Use the male vertical training image as a fallback if no inline style is set */
  background-image: url('assets/male_vertical.jpg');
  background-size: cover;
  background-position: center;
}

/* Subpage hero background: use a simple gradient instead of the busy banner */
.hero-subpage {
  background-image: linear-gradient(180deg, #0e0e10 0%, #17171c 100%);
}

/* Dark overlay on hero for readability.  Make the home hero slightly lighter so the cover image pops */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.hero-home::before {
  /* lighter overlay on home hero */
  background: rgba(0, 0, 0, 0.35);
}

/* Event page hero uses a gritty park scene with silhouetted palms at sunrise. */
/* Explicitly set the fallback event hero to the male vertical image when not overridden */
.hero-event, .event-hero {
  /* Default event hero background; overridden by inline styles in event.html */
  background-image: url('assets/event_hero_silhouette3.jpg');
  background-size: cover;
  background-position: center;
}
.hero-event::before, .event-hero::before {
  /* subtle overlay to ensure text readability */
  background: rgba(0, 0, 0, 0.4);
}

/* Registration page hero uses dynamic start-line energy image */
/* Registration page hero uses dynamic start-line energy image */
/* Default register hero background; overridden later to use register_new2.jpg */
.hero-register, .register-hero {
  background-image: url('assets/register_new2.jpg');
  background-size: cover;
  background-position: center;
}
.hero-register::before, .register-hero::before {
  background: rgba(0, 0, 0, 0.4);
}

/* Results page hero uses same energetic image for consistency */
/* Results page hero uses same energetic image for consistency */
/* Default results hero background; overridden later to use the uploaded results_new image */
.hero-results, .results-hero {
  background-image: url('assets/results_new.jpg');
  background-size: cover;
  background-position: center;
}
.hero-results::before, .results-hero::before {
  background: rgba(0, 0, 0, 0.4);
}

/* About page hero: dynamic abstract image with runner silhouette, gear and route lines */
/* About page hero: use a compressed JPEG version of the abstract hero graphic. */
.hero-about {
  background-image: url('assets/about_hero.jpg');
  background-size: cover;
  background-position: center;
}

.hero-about::before {
  /* Semi-transparent overlay to ensure text readability */
  background: rgba(0, 0, 0, 0.4);
}

/* Subpage hero background: use a simple gradient instead of the busy banner */
.hero-subpage {
  background-image: linear-gradient(180deg, #0e0e10 0%, #17171c 100%);
}

.hero-subpage::before {
  /* No overlay needed for subpage hero since the background is dark */
  display: none;
}

/* Register page hero uses a dark road with glowing lava cracks to evoke the
   energy of the start line. */
.register-hero, .hero-register {
  background-image: url('assets/road_lava.png');
  background-size: cover;
  background-position: center;
}

/* Results page hero uses an abstract circuit board with glowing
   red traces to hint at timing systems and data without showing digits. */
.results-hero, .hero-results {
  background-image: url('assets/circuit_board.png');
  background-size: cover;
  background-position: center;
}

/* Override register hero background to use the latest uploaded image.  This rule
   appears near the end of the stylesheet so it takes precedence over
   earlier definitions (e.g. road_lava or register_hero). */
.hero-register, .register-hero {
  background-image: url('assets/register_new2.jpg');
  background-size: cover;
  background-position: center;
}

/* Style for the Stress Test image on the home page next-event section */
.next-event img.next-event-image {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 1.5rem auto 0 auto;
  border-radius: 8px;
}

/* intentionally removed duplicate next-event rule; see below for final definition */

/* Override the course and quiz vertical images to use the latest uploaded assets. */
/* Course image container – holds the image and controls its width */
.course-image-left {
  /* Increase the width of the course image further so more of the photo is visible */
  width: 40%;
  /* Remove the background since we now insert an <img> for the full photo */
  background: none;
  display: none;
}
@media (min-width: 992px) {
  .course-image-left {
    /* On wide screens, show the image column as a flex container.  Align
       the single course image to the bottom of the container so its lower
       edge matches the bottom of the course description. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.interactive-image {
  width: 25%;
  min-height: 100%;
  /* Display the quiz photo without a gradient overlay */
  background: url('assets/woman_quiz.jpg');
  background-size: cover;
  background-position: center;
  display: none;
}
@media (min-width: 992px) {
  .interactive-image {
    display: block;
  }
}

/* === About Page Styles === */
/* Two column layout used on the About page */
.two-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.two-column .column {
  flex: 1;
}
/* Reverse layout on larger screens */
.two-column.reverse {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 992px) {
  .two-column {
    flex-direction: row;
  }
  .two-column.reverse {
    flex-direction: row-reverse;
  }
  .two-column .column {
    flex: 1;
  }
}
/* About page image wrapper */
.about-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* About page photos */
.about-photo {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
/* Call-to-action section on the About page */
.cta-section {
  background: #0e0e10;
  color: #fff;
  text-align: center;
  padding: 4rem 0;
}
.cta-section .cta-content h2 {
  font-family: 'Russo One', sans-serif;
  margin-bottom: 1rem;
}
.cta-section .cta-content p {
  margin-bottom: 1.5rem;
}

/* Ensure the course photo scales to fit its container without cropping.  The image
   retains its aspect ratio and displays fully within the available width. */
.course-photo {
  width: 100%;
  /* Allow the image to maintain its aspect ratio and display fully.  Using height:auto and
     object-fit: contain prevents cropping so the entire photo is visible. */
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Override results page hero to use the updated image */
.hero-results, .results-hero {
  background-image: url('assets/results_new.jpg');
  background-size: cover;
  background-position: center;
}

/* Divisions & Schedule section background with overlay */
.divisions-bg {
  position: relative;
  background-image: url('assets/divisions.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.divisions-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Remove bottom padding now that the course section displays a single image
     anchored via flex to align its bottom with the end of the course grid. */
  padding-bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}
.divisions-bg .container {
  position: relative;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 1;
}

/* Style for the patch emblem */
.patch {
  /* Increase spacing around the patch to give breathing room between the headline and call‑to‑action */
  margin: 2rem auto;
  /* Reduce emblem size to avoid overpowering the hero section */
  width: 180px;
  max-width: 40%;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

.hero-content {
  text-align: center;
}

.hero h1 {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.highlight {
  color: #e63946;
}

/* A helper class to force white text, used for the final line of the home hero tagline */
.white-line {
  color: #ffffff;
}

/* Style for registered trademark symbols (®) used in brand names.  This sets a
   smaller font size and positions the symbol as superscript so it sits at the
   top corner of the associated word. */
.reg-symbol {
  /* Shrink the trademark symbol to a small fixed size so it doesn't overpower the
     surrounding text. Use rem units so it's independent of the parent heading size. */
  /* Size the trademark symbol smaller than the surrounding heading text. Use a small
     fixed size so that the registered trademark doesn’t dominate the word. */
  font-size: 0.6rem;
  /* Raise the symbol slightly relative to the baseline. The positive value moves
     it upward relative to surrounding text. */
  vertical-align: 0.3rem;
}

/* Styling for registered trademark symbols when used as superscript with brand names */
/*
 * Styling for the registered trademark symbol when used inline with brand names
 * in the hero tagline. We swap from <sup> to a simple <span> with class
 * "regmark" so that we can precisely control its size and position relative to
 * the adjacent text.
 *
 * The symbol should appear slightly smaller than the surrounding letters but
 * large enough to be legible. Position it as a true superscript anchored to
 * the top‑right corner of the preceding word by using relative positioning
 * and negative top offset. A small left margin creates visual separation.
 */
/* Default registered trademark styling. When used on its own (outside of a brand wrapper),
   the symbol should be small and sit neatly after the word. */
.regmark {
  font-size: 0.8rem;
  display: inline-block;
  margin-left: 0.15rem;
  line-height: 1;
}

/* Brand names wrapper to allow absolute positioning of the registered mark */
.brand {
  position: relative;
  display: inline-block;
}

/* Registered mark styling when placed inside a brand wrapper */
.brand .regmark {
  /* Size of the registered mark relative to the 3rem heading; about one third keeps it legible */
  font-size: 1.1rem;
  position: absolute;
  /* Position the symbol near the top of the last letter. A negative top pulls it upward. */
  /* Anchor the top of the symbol to the top of the parent brand container */
  /* Lift the symbol above the baseline so it aligns with the top of the preceding letter */
  top: -0.4rem;
  /* Position the symbol slightly past the right edge of the word to create space */
  right: -0.5rem;
  /* Remove left positioning so right takes effect */
  left: auto;
  /* No extra margin needed; spacing achieved via right offset */
  margin: 0;
}

/* Preserve legacy styling for <sup class="regmark"> in other contexts. */
sup.regmark {
  font-size: 1rem;
  transform: translateY(-60%);
}

/* Style for registered trademark symbols used inside superscript elements next to brand names. */

.tagline {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  color: #dddddf;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: #e63946;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #bf2c3a;
}

/* Smaller button used within strategy cards.  Inherits general button styling but with reduced padding and font size */
.btn-small {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #e63946;
  color: #ffffff;
  font-size: 0.85rem;
}
.btn-small:hover {
  background-color: #bf2c3a;
}

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

.section-alt {
  background-color: #17171c;
}

/* Section headings should feel spacious and bold.  Increase
   letter‑spacing so the letters breathe and the titles stand out on
   dark backgrounds. */
.section h2 {
  /* Use Russo One for section titles to differentiate them from the hero copy */
  font-family: 'Russo One', sans-serif;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #e63946;
  /* Increased letter spacing for extra punch */
  /* Increase letter spacing slightly to give section titles more breathing room */
  /* Give section titles even more breathing room.  A larger
     letter‑spacing helps the big Anton font stand out on dark backgrounds. */
  letter-spacing: 0.18em;
}

.section-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.section-content p {
  margin-bottom: 1rem;
  color: #dddddf;
}

/* Next event call‑out */
/* Next event call‑out uses the stress test graphic as the background.  The dark overlay improves
   contrast between the text and the image behind it. */
.next-event {
  position: relative;
  /* Use the new announcement image provided by the user for the home event section */
  background-image: url('assets/home_announce_1.jpg');
  background-size: cover;
  background-position: center;
  /* Reduced padding to shrink the height of the next‑event section further */
  padding: 2.5rem 0;
  text-align: center;
  color: #ffffff;
  border-top: 4px solid #e63946;
  overflow: hidden;
}

/* Responsive adjustments for next-event on small screens */
@media (max-width: 768px) {
  .next-event {
    padding: 3rem 0;
  }
  .next-event h2 {
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
  }
  .next-event p {
    font-size: 1rem;
  }
}

/* Mailchimp form styling within the registration section */
.registration-section #mc_embed_signup {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;
  background: transparent;
  padding: 0;
}

/* Mailchimp form styling for event call‑out (subscription) section */
.event-callout #mc_embed_signup {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;
  background: transparent;
  padding: 0;
}
.event-callout #mc_embed_signup input[type="email"],
.event-callout #mc_embed_signup input[type="text"] {
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.event-callout #mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 0.25rem;
}
.event-callout #mc_embed_signup .clear input[type="submit"] {
  background: #e63946;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  display: block;
  width: 100%;
  font-family: 'Russo One', sans-serif;
  font-size: 1.2rem;
}
.event-callout #mc_embed_signup h2 {
  font-size: 1.5rem;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  margin-bottom: 1rem;
}
.event-callout #mc_embed_signup .indicates-required,
.event-callout #mc_embed_signup .asterisk {
  display: none;
}
.registration-section #mc_embed_signup input[type="email"],
.registration-section #mc_embed_signup input[type="text"] {
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.registration-section #mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 0.25rem;
}
.registration-section #mc_embed_signup .clear input[type="submit"] {
  background: #e63946;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  display: block;
  width: 100%;
  font-family: 'Russo One', sans-serif;
  font-size: 1.2rem;
}
.registration-section #mc_embed_signup h2 {
  font-size: 1.5rem;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  margin-bottom: 1rem;
}
.registration-section #mc_embed_signup .indicates-required,
.registration-section #mc_embed_signup .asterisk {
  display: none;
}

/* General subscribe footer form styling */
.subscribe-footer {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.subscribe-footer h3 {
  font-family: 'Russo One', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.subscribe-footer form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.subscribe-footer input[type="email"] {
  flex: 1 1 250px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
}
.subscribe-footer button {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-family: 'Russo One', sans-serif;
  background: #e63946;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

/* Enlarge registration closed notice on the registration page */
.registration-notice {
  /* Increase the size and prominence of the closed registration notice */
  font-size: 1.6rem;
  color: #e63946;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ============================================================
   Subscribe popup overlay

   This overlay is injected by main.js on the first page load to
   prompt visitors to join the mailing list.  It appears only
   once per browser thanks to a localStorage flag and then
   automatically disappears upon closing.  The form mirrors
   the fields and styling of the footer subscription form. */
.subscribe-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.subscribe-popup-content {
  position: relative;
  background: #0e0e10;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.subscribe-popup-content h3 {
  font-family: 'Russo One', sans-serif;
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
}

.subscribe-popup-content form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.subscribe-popup-content input[type="email"] {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
}

.subscribe-popup-content button[type="submit"] {
  background: #e63946;
  color: #fff;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s ease-in-out;
}

.subscribe-popup-content button[type="submit"]:hover {
  background: #c43039;
}

.subscribe-popup-content .popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* dark overlay to increase contrast between text and background */
.next-event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Slightly darker overlay for improved legibility */
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.next-event .container {
  position: relative;
  z-index: 1;
}

.next-event h2 {
  font-family: 'Russo One', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  /* stroke and shadow for definition */
  -webkit-text-stroke: 2px #000000;
  text-shadow: 0 4px 8px rgba(0,0,0,0.7);
  line-height: 1.2;
}
.next-event p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  color: #dddddf;
  /* Ensure long text wraps properly on smaller screens */
  white-space: normal;
  word-break: break-word;
}

/* Big announcement styling for the event call-out on the home page.
   This text is intentionally larger and bolder to draw attention to the event date and wave details. */
.big-announcement {
  font-family: 'Russo One', sans-serif;
  /* Increase the font size using a responsive clamp so it scales between small and large screens */
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  color: #ffffff;
  margin: 1rem 0;
  font-weight: 700;
}

/* Styling for the merged event call‑out inside the systems section on the event page */
.event-merged-callout {
  margin-top: 2rem;
  text-align: center;
}
.event-merged-callout h3 {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #e63946;
  /* Add subtle shadow for readability */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);

  /* Ensure the headline wraps cleanly on narrow screens instead of overflowing its container */
  white-space: normal;
  word-break: break-word;
}
.event-merged-callout p {
  font-size: 1.2rem;
  line-height: 1.4;
  color: #f5f5f5;
}

/* Interactive quiz section */
.quiz-section {
  padding: 3rem 0;
  background-color: #17171c;
  text-align: center;
}
.challenge-section {
  padding: 3rem 0;
  background-color: #121217;
  text-align: center;
}

/* Strategy section: interactive cards to explore Blocks */
.strategy-section {
  padding: 3rem 0;
  background-color: #121217;
  text-align: center;
}
.strategy-section h3 {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  color: #e63946;
}
.strategy-section p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #dddddf;
}
.strategy-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  /* Allow the dropdown panels to overflow on top of subsequent rows.  Setting
     overflow to visible and a positioning context ensures absolutely
     positioned card bodies can overlay other cards without increasing the
     height of the parent container. */
  position: relative;
  overflow: visible;
}
.strategy-card {
  background-color: #202028;
  border-left: 4px solid #e63946;
  border-radius: 6px;
  padding: 1.5rem;
  width: calc(33.333% - 1rem);
  min-width: 260px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.strategy-card h4 {
  margin-bottom: 0.7rem;
  font-size: 1.3rem;
  color: #e63946;
}
.strategy-card .card-content {
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.4;
}

/* Hide card body by default; reveal when the card is active */
.strategy-card .card-body {
  /* Position the card body absolutely so it overlays the content below instead of
     pushing sections down.  It will appear directly beneath the card heading
     when toggled on. */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: #202028;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  display: none;
  text-align: left;
}
.strategy-card.active .card-body {
  display: block;
}

/* Pro tip styling within the strategy cards */
.strategy-card .pro-tip {
  margin-top: 0.5rem;
  font-style: italic;
  color: #e63946;
  font-size: 0.9rem;
  display: none;
}

/* When pro tip is toggled on */
.strategy-card .pro-tip.show {
  display: block;
}
.strategy-card.active {
  background-color: #2a2a30;
}
.strategy-card.active .card-content {
  display: block;
}

@media (max-width: 768px) {
  .strategy-card {
    width: 100%;
  }
}
.course-dropdown {
  margin-top: 1rem;
}

.course-dropdown .dropdown-btn {
  margin-right: 0.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.course-dropdown .dropdown-btn:hover {
  background-color: #555;
}

.course-dropdown .dropdown-content {
  display: none;
  margin-top: 0.75rem;
  background-color: #202028;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  font-size: 0.95rem;
}

.course-dropdown .dropdown-content.show {
  display: block;
}

/* Container to wrap the division toggle buttons and dropdown content for each block.  
   This wrapper allows the dropdown panel to anchor itself relative to the buttons so
   the overlay appears directly beneath the controls rather than far below the card. */
.block-wrapper {
  position: relative;
  margin-top: 0.5rem;
}

/* Per‑block division toggle buttons: sit under the block description instead of overlaying
   the heading.  We remove absolute positioning and allow them to flow in the normal
   document layout.  The buttons align themselves to the right so they don’t overlap
   the text. */
.block-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Dropdown content for each block.  Hidden by default and absolutely positioned so it
   overlays content when revealed.  Because it lives inside .block-wrapper, the top
   property of 100% anchors it just below the buttons. */
.block-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background-color: #202028;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  z-index: 50;
}

.block-content.show {
  display: block;
}
.challenge-section h3 {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  color: #e63946;
}
.challenge-section p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #dddddf;
}

/* Photo highlight section: showcase gritty images to build atmosphere */
.photo-highlight {
  padding: 3rem 0;
  background-color: #0e0e10;
  text-align: center;
}

.photo-highlight img {
  /*
   * Display the gritty photo at half its original width. Reducing
   * the width instead of scaling the image file itself keeps the
   * asset crisp across different screen sizes. A 50% width ensures
   * that the image is half as wide as its container while still
   * respecting the auto height for proper aspect ratio.  The
   * max-width remains to cap the image on very large screens.
   */
  width: 50%;
  height: auto;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  margin: 0 auto 1rem auto;
}

.photo-highlight .highlight-caption {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: #e63946;
}
.challenge-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.challenge-form input[type="number"] {
  padding: 0.6rem 1rem;
  border-radius: 4px;
  border: none;
  width: 200px;
  background-color: #202028;
  color: #ffffff;
}
.challenge-result {
  margin-top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #e63946;
}
.quiz-section h3 {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.quiz-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.quiz-buttons button {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  background-color: #202028;
  color: #ffffff;
  border: 2px solid #e63946;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.quiz-buttons button:hover {
  background-color: #e63946;
  color: #ffffff;
}
.quiz-result {
  margin-top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #e63946;
}

/* Course Grid */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/*
 * Mobile adjustments
 * These styles optimize the layout for screens narrower than 768px.  Navigation links wrap into multiple rows,
 * hero text scales down, and navigation content stacks vertically so that all menu items remain accessible
 * without horizontal scrolling.  You can refine these rules further to suit your specific design requirements.
 */
@media (max-width: 768px) {
  /* Stack nav content and allow links to wrap */
  .nav-content {
    flex-direction: column;
    align-items: center;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .nav-links li {
    margin-bottom: 0.5rem;
  }
  /* Scale down hero intro typography on small screens */
  .hero-intro h1 {
    font-size: 2rem;
  }
  .hero-intro .tagline {
    font-size: 1rem;
  }
  /* Reduce hero minimum height on small screens */
  .hero {
    min-height: 60vh;
    padding: 2rem 0 4rem 0;
  }
}

/*
 * Race dashboard tabs and iframe styling for results page.  These styles
 * control the layout of the participants/live/results toggles and ensure
 * the embedded pages are readable on both desktop and mobile screens.
 */
.race-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 1rem;
}
.race-tabs .tab-btn {
  padding: 0.6rem 1.2rem;
  border: 2px solid #e63946;
  border-radius: 4px;
  background-color: #202028;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.race-tabs .tab-btn.active,
.race-tabs .tab-btn:hover {
  background-color: #e63946;
  color: #ffffff;
}
.tab-content {
  display: none;
  width: 100%;
  margin-top: 1rem;
}
.tab-content.show {
  display: block;
}
.results-iframe {
  width: 100%;
  height: 800px;
  border: none;
  border-radius: 6px;
  background-color: #0e0e10;
}
@media (max-width: 768px) {
  .results-iframe {
    height: 600px;
  }
  .race-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.course-item {
  background-color: #202028;
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 4px solid #e63946;
  /* Allow absolute-positioned dropdown content to anchor within each course item */
  position: relative;
}

.course-item h3 {
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
  color: #e63946;
}

.course-item ul {
  text-align: left;
  list-style-type: disc;
  padding-left: 1.5rem;
  color: #ccccd0;
}

.item-desc {
  color: #ccccd0;
  font-style: italic;
}

.full-width {
  grid-column: 1 / -1;
}

/* Course layout section */
.course-layout {
  margin-top: 3rem;
  text-align: center;
}
.course-layout h3 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  color: #e63946;
}
.course-layout img {
  width: 100%;
  max-width: 800px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Divisions */
.divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* ------------------------------------------------------------- */
/* Training page styles                                         */
/* Define styles for the dedicated Training page.  These rules */
/* mirror the aesthetic of the rest of the site while giving   */
/* prominence to both our physical and virtual training hubs.   */
/* ------------------------------------------------------------- */

/* Hero for the training page: reuse dark dramatic background */
.hero-training {
  position: relative;
  /* Updated background to feature a dramatic split image that captures in‑studio and virtual training */
  /* Use compressed JPEG version of the hero image to reduce file size */
  background-image: url('assets/hero_training_new.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 6rem 0;
  text-align: center;
}
.hero-training .hero-content {
  position: relative;
  z-index: 1;
}
.hero-training::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* Hero for the merch page */
.hero-merch {
  position: relative;
  /* Use a bold lifestyle photo of athletes wearing ROUTE56 gear for the merch hero */
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/merch_hero.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 6rem 0;
}
.hero-merch .hero-content {
  position: relative;
  z-index: 1;
}
.hero-merch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 0;
}

/* Merch product layout */
.merch-product {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 992px) {
  .merch-product {
    flex-direction: row;
    align-items: stretch;
  }
}
.merch-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-photo {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.merch-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.merch-details h2 {
  font-family: 'Russo One', sans-serif;
  margin-top: 0;
}
.price {
  font-size: 1.8rem;
  color: #e63946;
  margin-bottom: 0.5rem;
}
.product-description {
  margin-bottom: 1rem;
}

/* Order form styling */
.order-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-form h3 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: #e63946;
}
.order-form .form-row {
  display: flex;
  flex-direction: column;
}
.order-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.order-form input,
.order-form select {
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #1a1a1d;
  color: #fff;
}
.order-form .small-text {
  font-size: 0.85rem;
  color: #ccc;
}

/* Product gallery styling for merch page */
.product-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thumbnail-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.thumb {
  width: 70px;
  height: auto;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.thumb.active,
.thumb:hover {
  border-color: #e63946;
}
/* Total price styling */
.total-price {
  font-weight: 700;
  color: #e63946;
  margin: 0.25rem 0 0.5rem;
}

/* Boutique section styling */
.boutique-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 992px) {
  .boutique-section {
    flex-direction: row;
    align-items: stretch;
  }
  .boutique-section .boutique-image, .boutique-section .boutique-content {
    flex: 1;
  }
}
.boutique-photo {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.boutique-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boutique-content h2 {
  font-family: 'Russo One', sans-serif;
  margin-top: 0;
}

/* Boutique 56 logo styling */
/* Style for Boutique 56 logo */
.boutique-logo {
  display: block;
  /* Further enlarge the Boutique 56 logo. Increase the max width to allow the logo
     to be three times larger than the original. The width will scale down on smaller
     screens due to the responsive container. */
  max-width: 1200px;
  width: 100%;
  height: auto;
  margin: 0 auto 1rem;
}
.boutique-list {
  margin: 1rem 0;
  padding-left: 1.2rem;
}
.boutique-list li {
  margin-bottom: 0.5rem;
}

/* Training section base layout */
.training-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 992px) {
  .training-section {
    flex-direction: row;
    align-items: stretch;
  }
  .training-section.reverse {
    flex-direction: row-reverse;
  }
}
.training-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.training-content h2 {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #e63946;
}
.training-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.training-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.training-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.training-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: #e63946;
  font-size: 1.2rem;
  line-height: 1;
}
.training-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.training-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When the training image container needs to stack multiple elements vertically (e.g., a video
   thumbnail above a static image) use the `stacked` modifier */
.training-image.stacked {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
}
.training-photo {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Larger thumbnails for embedded videos on the training page */
.large-video-thumb {
  /* Increase the size of the large video thumbnails even further */
  max-height: 800px;
}

/* Logo row for training sections */
.training-logos {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.training-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.05);
  padding: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Large logos displayed above training section titles */
.training-title-logo {
  display: block;
  /* Increase the max-width so the logo appears more prominent and aligns with the heading width */
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto 0.75rem auto;
}

/* Enlarge the HIIT56 Online logo significantly */
.training-title-logo.online-logo {
  max-width: 480px;
}

.division {
  background-color: #202028;
  padding: 1.5rem;
  border-radius: 6px;
  border-top: 4px solid #e63946;
}

.division h3 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: #e63946;
}

.division p {
  color: #ccccd0;
}

/* Registration */
.registration-section {
  background-color: #17171c;
  text-align: center;
}

.registration-form {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.registration-form input[type="email"] {
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 4px;
  width: 280px;
  max-width: 100%;
}

.registration-form button {
  background-color: #e63946;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.registration-form button:hover {
  background-color: #bf2c3a;
}

/* Generic form controls for multi‑page forms */
.form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: #e63946;
  font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  border: none;
  background-color: #202028;
  color: #ffffff;
}

.form-group input[type="checkbox"] {
  margin-right: 0.5rem;
}

.form-actions {
  text-align: center;
}

/* Schedule and results tables */
.schedule-table,
.results-table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem;
  border-collapse: collapse;
}

.schedule-table th,
.schedule-table td,
.results-table th,
.results-table td {
  padding: 0.6rem 1rem;
  border: 1px solid #2a2a30;
  text-align: left;
  color: #dddde1;
}

.schedule-table th,
.results-table th {
  background-color: #202028;
  color: #e63946;
}

.schedule-table tr:nth-child(even),
.results-table tr:nth-child(even) {
  background-color: #1a1a1f;
}

.schedule-table tr:nth-child(odd),
.results-table tr:nth-child(odd) {
  background-color: #14141b;
}

/* Search form on results page */
.search-form {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.search-form input {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 4px 0 0 4px;
  background-color: #202028;
  color: #ffffff;
  width: 300px;
}

.search-form button {
  background-color: #e63946;
  color: #ffffff;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-form button:hover {
  background-color: #bf2c3a;
}

.note {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #999aa2;
}

/* Timing image in timing section */
.timing-image {
  margin-top: 2rem;
  text-align: center;
}
.timing-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Footer */
.footer {
  background-color: #0a0a0d;
  padding: 2rem 0;
  text-align: center;
}

/*
 * Final override for systems-section to ensure full-height content on all screen sizes.
 * This resets properties defined earlier that set a fixed aspect ratio or hide overflow.
 */
.systems-section {
  height: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: visible;
}
.systems-section .section-content {
  position: static;
  height: auto;
  width: 100%;
  padding: 0;
  text-align: left;
}
/* Rules page specific styling */
.rules-section {
  position: relative;
  background-image: url('assets/rules_hero.jpg');
  background-size: cover;
  background-position: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: #fff;
}
.rules-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 14, 16, 0.8);
  z-index: 0;
}
.rules-section .section-content {
  position: relative;
  z-index: 1;
}
.rules-section ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.rules-section ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

/* Rules detail (movement) background */
.rules-detail-section {
  position: relative;
  background-image: url('assets/rules_detail_bg.jpg');
  background-size: cover;
  background-position: center;
  padding: 2rem;
  margin-top: 1.5rem;
  border-radius: 0.5rem;
  color: #fff;
}
.rules-detail-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14,14,16,0.8);
  z-index: 0;
  border-radius: 0.5rem;
}
.rules-detail-section * {
  position: relative;
  z-index: 1;
}
.rules-detail-section ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.rules-detail-section ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

.footer-content p {
  margin-bottom: 0.5rem;
  color: #7a7a86;
}

.small-text {
  font-size: 0.8rem;
}

/* Extremely small legal text in the footer.  Use a muted color and tight spacing to avoid
   overpowering the rest of the footer content. */
.trademark-disclaimer {
  font-size: 0.65rem;
  color: #5f5f69;
  max-width: 90%;
  margin: 0.75rem auto 0;
  line-height: 1.3;
}

/* Social link styling in footer */
/* Footer social icon container */
.footer-social {
  margin-top: 0.5rem;
  /* reset font size because we will render an icon */
  font-size: 0;
}
/* Style the link containing the social icon */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e11f27;
  text-decoration: none;
}
/* Instagram SVG icon appearance */
/* Footer social icon styles */
/* Use image icons instead of inline SVG */
.footer-social img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s;
}
.footer-social a:hover img {
  transform: scale(1.1);
}

/* Responsive adjustments for the event Systems section on smaller screens */
@media (max-width: 768px) {
  /* Allow the systems section to expand to fit its content and show full text */
  .systems-section {
    height: auto;
    padding-top: 0;
    padding: 3rem 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
  }
  .systems-section .section-content {
    position: static;
    height: auto;
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .systems-section h2 {
    font-size: 2rem;
  }
  .systems-section p,
  .systems-section li {
    font-size: 1rem;
    line-height: 1.4;
  }

  /* Ensure event call‑out sections don’t clip text on small screens */
  .event-callout {
    overflow: visible;
  }
}

/* Remove default bullet markers in next-event and systems section lists */
.next-event ul,
.systems-section ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.next-event li,
.systems-section li {
  margin: 0.25rem 0;
  padding-left: 0;
}

/* Event page call‑out styles */
.event-callout {
  position: relative;
  width: 100%;
  /* Allow content to expand beyond the background container on all devices.  Hiding overflow
     caused text to be clipped on mobile when the call‑out lines wrapped onto a second line. */
  overflow: visible;
  color: #ffffff;
}

/*
 * Event page specific adjustments
 *
 * The event description section (systems-section) now displays the full illustration as an inline
 * image instead of a background.  To ensure the image is visible without cropping, we remove
 * the background image and overlay on the systems-section and add a dedicated class for
 * the inline image.  We also enlarge the hero tagline on the event page and the date/time
 * and location lines in the merged call‑out for greater emphasis.
 */

/* Display the full illustration at the top of the systems section */
.systems-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

/* Remove of overrides for the systems section background and overlay has been reverted to restore the original
   background image and dark overlay defined earlier in the stylesheet. */

/* Larger tagline on the event hero for emphasis */
.hero-event .tagline {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 600;
  color: #f5f5f5;
}

/* Enlarge the date/time headline in the merged event call‑out */
.event-merged-callout h3 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: #e63946;
  margin-bottom: 0.5rem;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Enlarge the date/time and location lines */
.event-merged-callout .event-date-time,
.event-merged-callout .event-location {
  font-size: clamp(1.25rem, 3.5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

/* Add some spacing under each paragraph in the merged call‑out */
.event-merged-callout p {
  margin-bottom: 1rem;
}

/*
 * Additional mobile-specific tweaks to prevent text clipping on very small screens.
 * Reduce the maximum font sizes for the event call‑out headline and details,
 * and relax padding around the systems section so long paragraphs don’t get cut off.
 */
@media (max-width: 768px) {
  .event-merged-callout h3 {
    /* Lower the minimum and maximum sizes to keep the date within narrow viewports */
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .event-merged-callout .event-date-time,
  .event-merged-callout .event-location {
    /* Slightly smaller call‑out details for phones */
    font-size: clamp(1rem, 4.5vw, 1.6rem);
  }
  .systems-section {
    /* Reduce vertical padding to avoid unnecessary whitespace on small screens */
    padding: 4rem 1rem;
    overflow: visible;
  }
}

/* Systems section on the event page: apply dramatic background
   Use the systems_bg.jpg image uploaded by the user instead of the old PNG.
   The background covers the section and centers the key focal point (obstacles and fire).
*/
/* Systems & Stress Test section on the event page: use the stress‑test illustration
   uploaded by the user.  This graphic conveys the intensity of the system
   rehearsal and complements the event’s fiery branding. */
/*
 * Systems & Stress Test section on the event page.  Display the full
 * stress‑test illustration without cropping by matching the container’s
 * aspect ratio to that of the image (height/width ≈ 0.667).  We set the
 * height via `padding-top` so it scales fluidly with the page width.  The
 * background image is contained within the section so no part of it is
 * clipped, and the section content is overlaid on top using absolute
 * positioning.  This approach ensures visitors can see the entire graphic
 * behind the text on any screen size.
 */
.systems-section {
  position: relative;
  /* Use the new home announce image provided by the user as the background and cover the section */
  background-image: url('assets/home_announce_3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  padding: 6rem 0;
  height: auto;
  color: #ffffff;
  overflow: hidden;
}
/* Overlay to darken the background illustration for improved text contrast */
.systems-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Darken the overlay so the white text is readable */
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}
/* Position the section content over the illustration and fill the section */
.systems-section .section-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  padding: 0 2rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}
.systems-section h2 {
  font-family: 'Anton', sans-serif;
  font-size: 2.8rem;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  color: #e63946;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.systems-section p {
  font-size: 1.4rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #dddddf;
}

.event-callout-bg {
  position: relative;
  padding: 6rem 0;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.event-callout-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.event-callout .container {
  position: relative;
  z-index: 1;
}

.event-callout h2 {
  font-family: 'Anton', sans-serif;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.event-callout p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  color: #dddddf;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .registration-form {
    flex-direction: column;
    align-items: center;
  }
}

/*
 * Long vertical images beside the Course and interactive sections.
 * On larger screens, these background images provide visual impact while
 * fading smoothly into the dark page background.  They remain hidden on
 * smaller screens to conserve space.
 */
.course-container {
  display: flex;
  gap: 2rem;
  /* Allow columns to size naturally so the image can display its full height */
  /* Stretch columns to equal height so the bottom image aligns with the
     bottom edge of the course description.  This ensures the photo column
     matches the height of the content column on large screens. */
  align-items: stretch;
}
/* Course image container – the <img> inside handles the full photo display */
/*
 * Course image container – use a background image rather than an <img> so the
 * full photo is visible without cropping.  We set the width and a generous
 * minimum height to allow the entire vertical image to show.  The image is
 * contained within the box rather than being cropped, and centred for visual
 * balance.  On smaller screens this column remains hidden to conserve space.
 */
/*
 * Course image container.  Widen the column and increase its minimum height so the
 * full vertical photo can be displayed without cropping.  The image is scaled
 * to fit within the available space (via `background-size: contain`), and its
 * aspect ratio is preserved.  Increasing the `min-height` to 1,000 px gives
 * enough vertical space for the entire image to be visible alongside the
 * course description on wide screens.
 */
/*
 * Left rail for the course section: contains one or more images that illustrate
 * the ROUTE56 stations.  The width is set wide enough to balance with the
 * course description on large screens.  Background properties are removed
 * because we now insert images via <img> tags, ensuring the photos display
 * without duplication or cropping.  On smaller screens the rail hides to
 * prioritize text.
 */
.course-image-left {
  width: 40%;
  /* Hidden on small screens; become a flex column on larger screens via media query */
  display: none;
  /* Remove background properties – images are inserted in the markup */
  background-image: none;
  background-size: initial;
  background-repeat: initial;
  background-position: initial;
  /* Prepare for stacking multiple images; the flex layout and distribution
     rules are defined in the media query */
  flex-direction: column;
  height: 100%;
}
@media (min-width: 992px) {
  .course-image-left {
    display: flex;
    flex-direction: column;
    /* Space the images so the first image sticks to the top and the second
       image sticks to the bottom of the container.  This mirrors the
       example provided by the user where two photos bookend the course
       description. */
    justify-content: space-between;
  }
}
.course-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  /* Remove the automatic top margin so that stacked images respect the
     spacing defined in the parent (.course-image-left).  Each image
     therefore sits naturally at the top or bottom of its slot. */
  margin-top: 0;
}

/* A placeholder rule for .bottom-img is no longer needed now that only one
   image is used in the course column.  If future designs require multiple
   images, this class can be reintroduced. */
.course-content {
  flex: 1;
}

.interactive-wrapper {
  display: flex;
  gap: 2rem;
}
.interactive-content {
  flex: 1;
}
.interactive-image {
  width: 25%;
  min-height: 100%;
  /* Show the quiz image without a gradient overlay */
  background: url('assets/woman_quiz.jpg');
  background-size: cover;
  background-position: center;
  display: none;
}
@media (min-width: 992px) {
  .interactive-image {
    display: block;
  }
}

/*
 * Mobile navigation hamburger menu
 * Display a hamburger toggle on screens under 768px and hide the nav links until toggled.  The hamburger icon uses pseudo‑elements
 * for the three lines and appears on the right side of the navbar.  Clicking the toggle adds the `open` class to .nav-links.
 */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
/* Style each line of the hamburger icon.  We avoid pseudo elements so all three lines
   are separate DOM elements, making spacing consistent on mobile. */
.nav-toggle .hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  margin: 5px 0;
  transition: transform 0.3s ease;
}
@media (max-width: 768px) {
  .nav-content {
    position: relative;
  }
  /* On small screens, display the nav contents as a row: logo on the left
     and the hamburger toggle on the right.  Use margin‑left:auto on the
     toggle to push it to the far right without overlapping the logo. */
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-toggle {
    display: block;
    position: relative;
    margin-left: 0;
  }
  /* Reduce logo size on small screens so the hamburger icon doesn’t overlap */
  .logo img {
    height: 40px;
    width: auto;
  }

  /* Reduce the Systems & Stress Test section typography on mobile to prevent overspill */
  .systems-section h2 {
    font-size: 2rem;
  }
  .systems-section p {
    font-size: 1rem;
    padding: 0 1rem;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: rgba(10, 10, 12, 0.95);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    gap: 1rem;
    align-items: center;
    text-align: center;
    z-index: 1000;
  }
  .nav-links.open {
    display: flex;
  }
}

/* Mobile-specific override to ensure the IT’S HAPPENING heading fits on one line.
   The vw unit scales with viewport width and !important ensures precedence. */
@media (max-width: 768px) {
  .next-event h2 {
    font-size: 4vw !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Override systems-section height and overlay on mobile to ensure full text visibility */
  .systems-section {
    height: auto !important;
    overflow: visible !important;
  }
  .systems-section::before {
    /* Maintain a darker overlay on mobile for readability */
    background: rgba(0, 0, 0, 0.55) !important;
  }
}

/*
 * Final mobile containment fixes for the event page.
 *
 * On very narrow screens, some lines in the systems section and merged
 * call‑out were still being clipped because inherited properties (like
 * overflow: hidden and fixed widths) took precedence.  The rules below
 * reset those properties with high specificity and !important flags to
 * ensure the content can expand naturally within its container.  They
 * also force the containers to use box‑sizing: border-box so padding
 * doesn’t push the content outside the viewport.  Text wrapping is
 * explicitly allowed on the call‑out headline and detail lines so long
 * dates and addresses break as needed without overflowing.
 */
@media (max-width: 768px) {
  /* Ensure the systems section itself and its immediate children can grow */
  .systems-section,
  .systems-section .section-content,
  .event-merged-callout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .systems-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    height: auto !important;
  }
  /* Make sure long lines wrap properly in the merged call‑out */
  .event-merged-callout h3,
  .event-merged-callout p,
  .event-merged-callout .event-date-time,
  .event-merged-callout .event-location {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: normal !important;
  }
}



@media (max-width: 768px) {
  /* Softer headline size for narrow phones */
  .event-merged-callout h3 {
    font-size: clamp(1.1rem, 5.2vw, 1.6rem) !important;
    letter-spacing: 0.01em;
  }

  /* Date / location / details — smaller but readable */
  .event-merged-callout .event-date-time,
  .event-merged-callout .event-location,
  .event-merged-callout p {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem) !important;
  }

  /* Body copy inside the event section */
  .systems-section h2 {
    font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
  }
  .systems-section p,
  .systems-section li {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
    max-width: 100% !important;
  }

  /* Keep the section comfortable on mobile */
  .systems-section {
    height: auto !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.75rem !important;
    background-position: center;
    background-size: cover;
  }
  .systems-section::before {
    background: rgba(0,0,0,0.45) !important;
  }
}

/* Final override to ensure event call-out text wraps and doesn't break words */
@media (max-width: 768px) {
  .event-merged-callout h3,
  .event-merged-callout p,
  .event-merged-callout .event-date-time,
  .event-merged-callout .event-location {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}


@media (max-width: 768px) {
  /* Smaller tagline for the event hero on mobile to prevent overflow */
  .hero-event .tagline {
    font-size: clamp(1rem, 5vw, 1.2rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}



/* ==== Home page mobile wrap fix (no word-splitting) ==== */
@media (max-width: 768px) {
  /* Make the callout container fill and pad correctly */
  .next-event .event-merged-callout,
  .next-event .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow: visible !important;
  }
  /* Keep words intact, but allow normal line breaks */
  .next-event .event-merged-callout h3,
  .next-event .event-merged-callout p {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.28;
  }
  /* Scale headline a touch on phones */
  .next-event .event-merged-callout h3 {
    font-size: clamp(1.1rem, 5.2vw, 1.6rem) !important;
    letter-spacing: 0.01em;
  }
  /* Date/location/body in the callout */
  .next-event .event-merged-callout .event-date-time,
  .next-event .event-merged-callout .event-location,
  .next-event .event-merged-callout p {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem) !important;
  }
  /* Let the section breathe and not crop */
  .next-event {
    overflow: visible !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    background-position: center;
    background-size: cover;
  }
}