/* =========================================================
   Twisted Pine Run
   2026 event theme / Bootstrap 5.3.3 companion stylesheet
   ========================================================= */

:root {
  --tpr-pine: #1d4734;
  --tpr-pine-dark: #102c21;
  --tpr-orange: #ef762f;
  --tpr-orange-dark: #cc5e23;
  --tpr-sand: #f4efe5;
  --tpr-sand-deep: #e5ddcf;
  --tpr-ink: #202522;
  --tpr-muted: #69736d;
  --tpr-white: #ffffff;
  --tpr-border: #d9d5cc;
  --tpr-shadow: 0 12px 35px rgba(16, 44, 33, .12);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 9rem;
}

body {
  color: var(--tpr-ink);
  background: var(--tpr-white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.btn {
  letter-spacing: -.015em;
}

a {
  color: var(--tpr-pine);
}

a:hover {
  color: var(--tpr-orange-dark);
}

.section-pad {
  padding: 5.5rem 0;
}

.bg-sand {
  background: var(--tpr-sand);
}

.bg-pine {
  background: var(--tpr-pine);
}

.section-kicker,
.tpr-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--tpr-orange-dark);
}

/* Accessibility */
.skip-link {
  position: absolute;
  z-index: 1100;
  top: .5rem;
  left: .5rem;
  padding: .65rem 1rem;
  background: #fff;
  color: #000;
  border-radius: .35rem;
}

/* Buttons */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tpr-orange);
  --bs-btn-border-color: var(--tpr-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tpr-orange-dark);
  --bs-btn-hover-border-color: var(--tpr-orange-dark);
  --bs-btn-focus-shadow-rgb: 239, 118, 47;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tpr-orange-dark);
  --bs-btn-active-border-color: var(--tpr-orange-dark);
  font-weight: 700;
}

.btn-pine {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tpr-pine);
  --bs-btn-border-color: var(--tpr-pine);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tpr-pine-dark);
  --bs-btn-hover-border-color: var(--tpr-pine-dark);
  font-weight: 700;
}

.btn-outline-pine {
  --bs-btn-color: var(--tpr-pine);
  --bs-btn-border-color: var(--tpr-pine);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tpr-pine);
  --bs-btn-hover-border-color: var(--tpr-pine);
  font-weight: 700;
}

/* Parent Ardor navigation */
.ardor-navbar {
  min-height: 48px;
  padding-top: .35rem;
  padding-bottom: .35rem;
  background: var(--tpr-pine-dark);
}

.ardor-navbar .navbar-brand {
  font-size: .95rem;
  letter-spacing: .1em;
}

.ardor-navbar .nav-link {
  font-size: .9rem;
}

/* Race navigation */
.tpr-navbar {
  z-index: 1020;
  padding-top: .6rem;
  padding-bottom: .6rem;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--tpr-border);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .06);
  backdrop-filter: blur(8px);
}

.tpr-brand {
  color: var(--tpr-pine);
  font-weight: 800;
  line-height: 1.05;
}

.tpr-brand small {
  display: block;
  margin-top: .18rem;
  color: var(--tpr-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tpr-navbar .nav-link {
  color: var(--tpr-ink);
  font-weight: 700;
  font-size: .9rem;
}

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

.nav-cta {
  padding: .45rem .9rem;
}

/* Hero */
.tpr-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(9, 26, 20, .86) 0%, rgba(9, 26, 20, .62) 42%, rgba(9, 26, 20, .14) 78%),
    url('/events/twisted-pine/assets/images/hero-banner.jpg') center center / cover no-repeat;
  color: #fff;
}

.tpr-hero-content {
  max-width: 690px;
  padding: 5rem 0;
}

.tpr-hero h1 {
  color: #fff;
  line-height: .98;
}

.tpr-hero .tpr-eyebrow {
  color: #fff;
}

.tpr-tagline {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  color: #fff;
}

/* Quick facts */
.tpr-quick-info {
  background: var(--tpr-pine);
  color: #fff;
}

.quick-info-item {
  min-height: 115px;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.18);
}

.quick-info-label {
  display: block;
  margin-bottom: .2rem;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.quick-info-item strong {
  font-size: 1rem;
}

/* Overview */
.info-panel {
  padding: 2rem;
  background: var(--tpr-sand);
  border-top: 5px solid var(--tpr-orange);
  box-shadow: var(--tpr-shadow);
}

.info-panel dt,
.info-panel dd {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Distance cards */
.distance-card {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--tpr-border);
  border-radius: .25rem;
  box-shadow: 0 8px 28px rgba(16, 44, 33, .07);
}

.distance-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.distance-name {
  color: var(--tpr-pine);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}

.difficulty {
  color: var(--tpr-muted);
  font-size: .78rem;
  font-weight: 700;
}

.course-photo {
  min-height: 440px;
  display: flex;
  align-items: end;
  padding: 2rem;
  background:
    linear-gradient(0deg, rgba(8, 25, 19, .8) 0%, rgba(8, 25, 19, .12) 65%),
    url('/events/twisted-pine/assets/images/trail-teaser.jpg') center / cover no-repeat;
}

.course-photo-copy {
  max-width: 650px;
}

/* Schedule */
.schedule-list {
  border-top: 4px solid var(--tpr-orange);
}

.schedule-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--tpr-border);
}

.schedule-row time {
  color: var(--tpr-pine);
  font-weight: 900;
}

/* Awards */
.award-item {
  height: 100%;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

.award-item i {
  width: 1.5rem;
  margin-top: .2rem;
  color: var(--tpr-orange);
  font-size: 1.3rem;
}

.award-item span {
  color: rgba(255,255,255,.78);
  font-size: .9rem;
}

/* FAQ */
.tpr-accordion .accordion-button {
  color: var(--tpr-ink);
  font-weight: 800;
  background: #fff;
}

.tpr-accordion .accordion-button:not(.collapsed) {
  color: var(--tpr-pine);
  background: var(--tpr-sand);
  box-shadow: none;
}

.tpr-accordion .accordion-button:focus {
  border-color: var(--tpr-orange);
  box-shadow: 0 0 0 .25rem rgba(239,118,47,.2);
}

/* Footer */
.site-footer {
  padding: 4rem 0;
  color: #fff;
  background: var(--tpr-pine-dark);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #ffd0b5;
  text-decoration: underline;
}

.footer-parent-brand {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.footer-race-name {
  color: #fff;
}

.footer-tagline {
  color: #ffd0b5;
  font-weight: 700;
}

.footer-heading {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.footer-links li {
  margin-bottom: .45rem;
}

.site-footer hr {
  border-color: rgba(255,255,255,.22);
}

/* Mobile CTA */
.mobile-cta {
  position: fixed;
  z-index: 1030;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: .5rem;
  padding: .65rem;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--tpr-border);
  box-shadow: 0 -6px 22px rgba(0,0,0,.12);
}

.mobile-cta .btn {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

/* Responsive */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 72px;
  }

  html {
    scroll-padding-top: 5rem;
  }

  .tpr-navbar {
    position: sticky;
    top: 0;
  }

  .tpr-navbar .navbar-collapse {
    padding-top: .75rem;
  }

  .tpr-navbar .nav-item {
    margin-bottom: .25rem;
  }

  .tpr-navbar .nav-cta {
    display: block;
    width: 100%;
    margin-top: .4rem;
    margin-left: 0 !important;
  }

  .tpr-hero {
    min-height: 640px;
    background-position: 58% center;
  }

  .section-pad {
    padding: 4rem 0;
  }
}

@media (max-width: 767.98px) {
  .tpr-hero {
    min-height: 560px;
    align-items: end;
    background:
      linear-gradient(0deg, rgba(9, 26, 20, .93) 0%, rgba(9, 26, 20, .62) 48%, rgba(9, 26, 20, .08) 82%),
      url('/events/twisted-pine/assets/images/hero-banner.jpg') 57% center / cover no-repeat;
  }

  .tpr-hero-content {
    padding: 8rem 0 3rem;
  }

  .tpr-hero .display-2 {
    font-size: clamp(2.75rem, 13vw, 4.25rem);
  }

  .quick-info-item {
    min-height: 100px;
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

  .course-photo {
    min-height: 380px;
    padding: 1.5rem;
  }

  .schedule-row {
    grid-template-columns: 105px 1fr;
    gap: 1rem;
  }
}

@media (max-width: 575.98px) {
  .section-pad {
    padding: 3.25rem 0;
  }

  .tpr-hero .lead {
    font-size: 1.05rem;
  }

  .distance-card {
    padding: 1.5rem;
  }
}