/* =========================================================
   Proline HD — one stylesheet for the whole site.

   Sections, in order:
     1. Design tokens          6. Feature grid (About)
     2. Base / resets          7. Flyers page
     3. Buttons                8. Videos page
     4. Header / navigation    9. Animations
     5. Homepage sections     10. Responsive

   Background-image paths in this file are relative to this file, which lives
   at the site root — so they resolve the same on every page regardless of how
   deep that page's folder is.
   ========================================================= */

/* =========================================================
   1. Design tokens
   These are the real values from the old site's theme. Change one here and
   it updates everywhere it's used.
   ========================================================= */
:root {
  --color-orange:       #f79007;   /* primary button background */
  --color-red:          #f40303;   /* button border, button hover background */
  --color-red-bright:   #fe0404;   /* button hover background */
  --color-blue:         #03a9f4;   /* brand accent */
  --color-blue-dark:    #026e9f;   /* button hover border, headings on light */
  --color-heading:      #333333;
  --color-body:         #666666;   /* the original used #999 — too light to read */
  --color-white:        #ffffff;
  --color-surface:      #f5f7f8;   /* light section background */
  --color-border:       #e2e6e8;

  --font-body:    'Open Sans', sans-serif;
  --font-heading: '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);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}

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

a { text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0 0 16px;
}

h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; font-weight: 600; }

/* =========================================================
   3. Buttons — the orange pill CTA used across the site
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The original used 30px/75px padding, which is enormous on small screens.
     This keeps the same proportions but lets the button shrink. */
  padding: 22px 44px;
  border-radius: 56px;
  border: 2px solid var(--color-red);
  background-color: var(--color-orange);
  color: var(--color-white);
  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-bright);
  border-color: var(--color-blue-dark);
}

/* =========================================================
   4. Header / navigation  (identical markup on every page)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  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: 52px;
  width: auto;
}

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

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

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

.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-heading);
}

/* =========================================================
   5. Homepage sections
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  background-image: url('assets/images/hero-background.jpg');
  background-size: cover;
  background-position: 51% 25%;   /* matches the original framing */
  background-repeat: no-repeat;
  padding: 64px 24px 0;
}

/* No scrim here on purpose. The background is a light American flag with the
   product collage in front of it, and all the hero text is dark. Adding an
   overlay muddies the flag and was wrong in an earlier version of this file. */

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
}

/* Left column: headline, tagline, CTAs */
.hero__content {
  flex: 1 1 420px;
  max-width: 620px;
  text-align: left;
}

.hero__title {
  color: var(--color-heading);
  font-size: 2.6em;
  font-weight: 300;
  margin: 0 0 16px;
}

/* "AN AMERICAN" is set heavy on its own line above the lighter-weight rest
   of the headline. */
.hero__title strong {
  display: block;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.hero__tagline {
  color: var(--color-body);
  font-size: 0.95em;
  margin: 0 0 28px;
}

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

/* Generic content section wrapper, used on every page */
.section {
  padding: 72px 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); }

.section--center { text-align: center; }

.lead {
  font-size: 1.1em;
  margin: 0 0 20px;
}

/* Pull quote — the "There's a Difference" statement */
.quote {
  border-left: 4px solid var(--color-orange);
  padding-left: 24px;
  margin: 0;
  font-size: 1.1em;
  font-style: italic;
}

/* Two-column promo block: text beside a product photo */
.promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  justify-content: center;
}

.promo__body { flex: 1 1 340px; min-width: 0; }

.promo__figure { flex: 1 1 360px; min-width: 0; max-width: 520px; }

.promo h2 { color: var(--color-blue-dark); }

/* =========================================================
   5b. Hero carousel (right column of the homepage hero)

   Every comment in this block records a bug that was genuinely hard to find
   on the sister site. Please read them before rearranging anything here.
   ========================================================= */
.carousel {
  position: relative;
  flex: 1 1 400px;
  max-width: 520px;
  /* Horizontal padding MUST stay 0. `overflow: hidden` clips to the padding
     box, not the content box — so left/right padding here would leave a strip
     of gutter inside the clip region but past the end of the current slide,
     and the next slide's content shows through it. The slides carry the
     horizontal padding instead (see .carousel__slide). */
  padding: 0;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.6s ease;
  overflow: hidden;
  /* script.js replaces this with an exact "<slide count> * 100%". This is only
     a fallback so one slide still shows if the script fails to run. */
  width: 100%;
}

.carousel__slide {
  /* flex-basis must stay auto: script.js sets an inline width, and a fixed
     flex-basis (like 100%) would win over it and silently double each slide. */
  flex: 0 0 auto;
  /* Flex items default to min-width: auto, so a slide won't shrink below its
     content's natural size — and an image counts at its intrinsic width even
     though max-width scales it down visually. Without this, a slide holding a
     large photo grows past the width script.js sets and breaks the track. */
  min-width: 0;
  overflow: hidden;
  /* Inner spacing lives here, not on .carousel. The 56px sides also keep the
     text clear of the prev/next arrows. */
  padding: 0 56px;
  text-align: center;
}

.carousel__title {
  font-size: 2.2em;
  font-weight: 300;
  color: var(--color-heading);
  margin: 0 0 12px;
}

.carousel__title strong { font-weight: 700; }

.carousel__slide p {
  color: var(--color-body);
  margin: 0 0 8px;
}

.carousel__slide img { margin: 12px auto 0; }

/* Arrows sit at mid-height over the card, matching the original. They're
   absolutely positioned against .carousel — which has no horizontal padding —
   so they don't affect the clip box at all. */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-heading);
  cursor: pointer;
  padding: 8px 10px;
}

.carousel__arrow:hover { color: var(--color-orange); }

.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

/* =========================================================
   6. Feature grid — the "A few things we're great at" cards
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.feature {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px 24px;
}

.feature h3 {
  font-size: 1.1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-blue-dark);
  margin: 0 0 12px;
}

.feature p { margin: 0; font-size: 15px; }

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

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

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

.page-header h1 {
  color: var(--color-white);
  font-size: 2.2em;
  margin: 0;
}

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

.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 220px;
  max-width: 220px;
}

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

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

.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-heading);
  font-weight: 600;
  font-size: 15px;
}

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

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

/* Categories with no bulletins yet — see the catalog instead */
.flyer-group__note {
  margin: 0;
  font-size: 15px;
  font-style: italic;
}

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

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

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

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

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

/* Keeps each embed at 16:9 with no 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); }

/* =========================================================
   9. Animations
   ========================================================= */
.hero__inner {
  animation: fadeInUp 0.8s ease both;
}

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

@media (prefers-reduced-motion: reduce) {
  .hero__inner { animation: none; }
}

/* =========================================================
   10. 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: 40px 16px 0;
    min-height: 0;
  }

  .hero__title { font-size: 1.9em; }

  .hero__content { text-align: center; }

  .hero__buttons { justify-content: center; }

  .carousel__slide { padding: 0 44px; }

  .section { padding: 48px 20px; }

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

  .btn { padding: 18px 32px; }

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