/* =========================================================
   Ranger Brake — one stylesheet for the whole site.

   Sections, in order:
     1.  Design tokens        6.  Carousel (homepage)
     2.  Base / resets        7.  Interior page header
     3.  Buttons              8.  About page
     4.  Header / nav         9.  Flyers page
     5.  Homepage hero        10. Videos page
                              11. Animations
                              12. Responsive

   Paths in this file (background images) are relative to this file, which
   lives at the site root — so they work the same on every page, no matter
   how deep the page's folder is.
   ========================================================= */

/* =========================================================
   1. Design tokens
   Change a color/font here and it updates everywhere it's used.
   ========================================================= */
:root {
  --color-red:        #f70707;   /* button background */
  --color-red-hover:  #f79007;   /* button hover background */
  --color-red-hover-border: #ffff00;
  --color-navy:       #17252a;   /* body + nav link text */
  --color-heading:    #333333;   /* headline text */
  --color-white:      #ffffff;
  --color-surface:    #f7f7f7;   /* light section background */
  --color-border:     #e2e2e2;

  --font-heading: 'Muli', sans-serif;
  --font-body:    'Muli', sans-serif;
  --font-button:  'Open Sans', sans-serif;

  --nav-height: 70px;
  --max-width: 1280px;
  --text-width: 820px;          /* comfortable reading measure */
}

/* =========================================================
   2. Base / resets
   ========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--color-navy);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; }

/* =========================================================
   3. Buttons — the red pill CTA used everywhere on the site
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 56px;
  border: 2px solid var(--color-red);
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn:hover,
.btn:focus {
  background-color: var(--color-red-hover);
  border-color: var(--color-red-hover-border);
}

/* =========================================================
   4. Header / navigation  (identical markup on every page)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  padding: 16px 24px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo img {
  max-height: 60px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.site-nav a {
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--color-red); }

.site-nav__contact {
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  text-transform: none;
  letter-spacing: normal;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-navy);
}

/* =========================================================
   5. Homepage hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('assets/images/hero-background.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 80px 24px;
  color: var(--color-white);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(242, 242, 242, 0.5);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.hero__content {
  flex: 1 1 420px;
  max-width: 560px;
  text-align: center;
}

.hero__logo img {
  max-height: 102px;
  width: auto;
  margin: 0 auto 24px;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.4em;
  color: var(--color-heading);
  margin: 0 0 28px;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* =========================================================
   6. Ranger CR / ISO carousel (homepage, left column)

   The comments in this section are load-bearing. Each one records a real
   bug that was hard to find. Please read them before rearranging anything.
   ========================================================= */
.carousel {
  position: relative;
  flex: 1 1 380px;
  max-width: 460px;
  /* Transparent — the hero photo shows through behind the slide content.
     For the white card look, add:
       background: rgba(255, 255, 255, 0.92); border-radius: 12px; */
  background: transparent;
  /* NOTE: horizontal padding deliberately lives on .carousel__slide and
     .carousel__controls instead of here. `overflow: hidden` clips to the
     PADDING box, not the content box — so a left/right padding of 32px here
     would leave a 32px-wide strip of gutter that is still inside the clip
     region but past the end of the current slide. The next slide's content
     shows through that strip. Keeping horizontal padding at 0 makes the clip
     edge line up exactly with the slide edge. */
  padding: 32px 0;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.6s ease;
  overflow: hidden;
  /* script.js overrides this width with an exact "<slide count> * 100%" value.
     This is just a safety net so the carousel still shows one slide at a time
     even if, for some reason, the script doesn't run. */
  width: 100%;
}

.carousel__slide {
  /* flex-basis must stay "auto" here — script.js sets an inline width, and
     if flex-basis were a fixed value like 100% (instead of auto), it would
     win over that inline width and silently double every slide's size. */
  flex: 0 0 auto;
  /* Flex items default to min-width: auto, meaning a slide won't shrink below
     its content's natural size. Images count toward that natural size at
     their intrinsic width, even though `img { max-width: 100% }` scales them
     down visually. Without this override, a slide holding a big image grows
     past the width script.js sets and throws off the whole track. */
  min-width: 0;
  overflow: hidden;
  /* The card's inner spacing lives here rather than on .carousel — see the
     clipping note in the .carousel rule above. box-sizing: border-box means
     this padding comes out of the slide's 50% width, not on top of it. */
  padding: 0 32px;
  background: transparent;
  text-align: center;
  color: var(--color-navy);
}

.carousel__title {
  font-family: var(--font-heading);
  font-size: 1.6em;
  font-weight: 400;
  margin: 0 0 16px;
}

.carousel__slide p,
.carousel__slide ol {
  text-align: left;
  font-size: 15px;
}

.carousel__slide img {
  margin: 16px auto;
  max-width: 100%;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Horizontal margin matches the slides' padding so the arrows stay aligned
     with the text above them. */
  margin: 24px 32px 0;
}

.carousel__arrow {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-red);
  cursor: pointer;
  padding: 8px 12px;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #cccccc;
  padding: 0;
  cursor: pointer;
}

.carousel__dots button.is-active {
  background: var(--color-red);
}

/* =========================================================
   7. Interior page header (About / Flyers / Videos)
   ========================================================= */
.page-header {
  position: relative;
  background-image: url('assets/images/hero-background.jpg');
  background-size: cover;
  background-position: center;
  padding: 72px 24px;
  text-align: center;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(247, 247, 247, 0.82);
}

.page-header__inner {
  position: relative;
  max-width: var(--text-width);
  margin: 0 auto;
}

.page-header h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.2em;
  color: var(--color-heading);
  margin: 0;
}

.page-header p {
  margin: 12px 0 0;
  color: var(--color-navy);
}

/* Generic content section wrapper used by all interior pages */
.section {
  padding: 64px 24px;
}

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

.section__inner {
  max-width: var(--text-width);
  margin: 0 auto;
}

.section__inner--wide { max-width: var(--max-width); }

/* =========================================================
   8. About page
   ========================================================= */
.about h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.6em;
  color: var(--color-heading);
  margin: 0 0 20px;
}

.about p {
  font-size: 16px;
  margin: 0 0 18px;
}

.about__cta {
  margin-top: 32px;
  text-align: center;
}

/* =========================================================
   9. Flyers page
   ========================================================= */
.flyer-group {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border);
}

.flyer-group:last-of-type { border-bottom: none; }

.flyer-group__figure {
  flex: 0 0 240px;
  max-width: 240px;
}

.flyer-group__body { flex: 1 1 320px; min-width: 0; }

.flyer-group h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4em;
  color: var(--color-heading);
  margin: 0 0 16px;
}

/* PDF link list */
.flyer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flyer-list li { border-bottom: 1px solid var(--color-border); }

.flyer-list li:last-child { border-bottom: none; }

.flyer-list a {
  display: block;
  padding: 12px 4px;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 15px;
}

.flyer-list a::after {
  content: ' \203A';   /* single right-pointing angle quote */
  color: var(--color-red);
}

.flyer-list a:hover { color: var(--color-red); }

/* =========================================================
   10. Videos page
   ========================================================= */
.video-index {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}

.video-index a {
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 600;
}

.video-index a:hover { color: var(--color-red); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px 32px;
}

.video h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--color-heading);
  margin: 0 0 12px;
}

/* Keeps each embed at 16:9 without any JavaScript */
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Anchor links land below the sticky header rather than under it */
.video { scroll-margin-top: calc(var(--nav-height) + 24px); }

/* =========================================================
   11. Animations — homepage entrance fades
   ========================================================= */
.hero__content {
  animation: fadeInUp 0.8s ease both;
  animation-delay: 0.2s;
}

/* .carousel uses a plain opacity fade (no transform) on purpose: its child
   .carousel__track also animates `transform` (the slide transition) inside
   an overflow:hidden box, and animating a parent transform at the same time
   is a known trigger for Chromium paint glitches. */
.carousel {
  animation: fadeIn 0.8s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .carousel { animation: none; }
  .carousel__track { transition: none; }
}

/* =========================================================
   12. Responsive
   ========================================================= */
@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    height: calc(100vh - var(--nav-height));
    width: 260px;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .site-nav.is-open { transform: translateX(0); }

  .site-nav__contact { text-align: left; }

  .nav-toggle { display: flex; }

  .hero { padding: 140px 16px 60px; }

  .section { padding: 48px 20px; }

  .page-header { padding: 56px 20px; }

  .flyer-group__figure {
    flex: 1 1 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}