/* ============================================   Newport Celebration Run Event-Specific Styles   File: ncr.css   Location: /events/celebration-run/assets/css/   ============================================ *//* ---------- CSS Variables ---------- */:root {  --ncr-primary: #c8102e;        /* Celebration red */  --ncr-secondary: #002868;      /* Deep blue */  --ncr-accent: #ffd700;         /* Gold highlight */  --ncr-bg-light: #f8f9fa;  --ncr-text-dark: #212529;  --ncr-text-light: #ffffff;  --ncr-font-heading: 'Playfair Display', serif;  --ncr-font-body: 'Poppins', sans-serif;}/* ---------- General Typography ---------- */html, body {  height: 100%;}body {  margin: 0;  padding: 0;  padding-top: 70px;  font-family: var(--ncr-font-body);  color: var(--ncr-text-dark);  overflow-x: hidden;}* {  box-sizing: border-box;  margin: 0;  padding: 0;}h1, h2, h3, h4, h5 {  font-family: var(--ncr-font-heading);  color: var(--ncr-primary);}.lead {  font-weight: 400;}/* ----- BASE NAV STYLES ----- */.celebration-run-menu {  position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: 1020;  background-color: var(--ncr-secondary);  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}.celebration-run-menu .navbar-brand {  font-weight: 700;  font-size: 1.1rem;  color: var(--ncr-accent);}.celebration-run-menu .menu-logo {  height: 50px;  width: auto;}.celebration-run-menu .nav-link {  color: var(--ncr-text-light) !important;  font-weight: 600;  padding: 0.5rem 1rem;  transition: color 0.2s ease;}.celebration-run-menu .nav-link:hover,.celebration-run-menu .nav-link.active {  color: var(--ncr-accent) !important;}/* ----- REGISTER BUTTON STYLE ----- */.celebration-run-menu .register-link {  background: var(--ncr-primary);  border-radius: 4px;  font-weight: 700;  color: var(--ncr-text-light) !important;}.celebration-run-menu .register-link:hover {  background: var(--ncr-accent);  color: var(--ncr-text-dark) !important;}/* ----- DROPDOWN ----- */.celebration-run-menu .dropdown-menu {  background: #fff;  border: none;  border-radius: 0.5rem;  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);  padding: 0.5rem 0;}.celebration-run-menu .dropdown-item {  color: var(--ncr-secondary);  font-weight: 600;  font-size: 1rem;  padding: 0.65rem 1.25rem;  transition: background 0.2s ease, color 0.2s ease;}.celebration-run-menu .dropdown-item:hover,.celebration-run-menu .dropdown-item:focus {  background: var(--ncr-primary);  color: var(--ncr-text-light);}/* ----- TOGGLER ----- */.celebration-run-menu .navbar-toggler {  border: 2px solid #fff;  border-radius: 4px;  background: transparent;}.celebration-run-menu .navbar-toggler-icon {  filter: invert(1);}/* ----- MOBILE ----- */@media (max-width: 768px) {  .celebration-run-menu .navbar-collapse {    background: var(--ncr-secondary);    padding: 1rem;  }  .celebration-run-menu .nav-link {    display: block;    width: 100%;    text-align: center;    border-bottom: 1px solid rgba(255, 255, 255, 0.1);    font-size: 1.05rem;  }  .celebration-run-menu .nav-link:last-child {    border-bottom: none;  }  .celebration-run-menu .dropdown-menu {    background: #fff;    border-radius: 0.5rem;  }  .celebration-run-menu .dropdown-item {    text-align: center;    font-size: 1.05rem;  }  .celebration-run-menu .menu-logo {    height: 32px;  }}:root {  --ncr-navbar-height: 70px;}.hero-carousel {  overflow-x: hidden;  position: relative;  z-index: 1;  margin-top: calc(-1 * var(--ncr-navbar-height));}.hero-carousel .carousel-caption {  background: rgba(255, 255, 255, 0.75);  color: var(--ncr-primary);  padding: 2rem 2rem; /* less padding */  border-radius: 1rem;  max-width: 650px;  width: auto; /* shrink to content */  display: inline-block; /* only as wide as content */  text-align: left; /* looks natural */  backdrop-filter: blur(5px);  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);  font-family: var(--ncr-font-body);}.hero-carousel .carousel-item {  height: 100vh;  min-height: 400px;  background-size: cover;  background-position: center;  background-color: #000; /* fallback */  position: relative;}.hero-carousel .carousel-caption h1 {  color: var(--ncr-secondary);  font-size: 2.5rem;  font-weight: 700;}.hero-carousel .carousel-caption .lead {  color: var(--ncr-text-dark);  font-size: 1.25rem;  font-weight: 400;}.hero-carousel .btn-primary {  background-color: var(--ncr-primary);  border-color: var(--ncr-primary);  font-weight: 600;}.hero-carousel .btn-primary:hover {  background-color: var(--ncr-secondary);  border-color: var(--ncr-secondary);}@media (max-width: 768px) {  .hero-carousel .carousel-item {    height: 85vh;    min-height: 480px;  }  .hero-carousel .carousel-caption {    padding: calc(3rem + var(--ncr-navbar-height)) 1rem 1.5rem;    max-width: 90%;    width: 100%;    text-align: center; /* center for small screens */    display: block; /* stack naturally */  }    .hero-carousel .carousel-caption h1 {    font-size: 1.5rem;    line-height: 1.3;    margin-bottom: 1rem;  }  .hero-carousel .carousel-caption .lead {    font-size: 1rem;    line-height: 1.5;    margin-bottom: 1.25rem;  }  .hero-carousel .btn-primary {    font-size: 1rem;    padding: 0.6rem 1.25rem;  }}.hero-thankyou {  position: relative;}.hero-thankyou::before {  content: "";  position: absolute;  inset: 0;  background: rgba(0, 40, 104, 0.6);}.hero-thankyou .container {  position: relative;  z-index: 2;}/* ---------- Breadcrumb ---------- */.breadcrumb-nav {  background-color: var(--ncr-bg-light);  border-bottom: 1px solid #ddd;  font-size: 0.95rem;  padding: 0.75rem 0;  /* 🔥 REMOVED sticky position — breadcrumb is static */  position: static;  top: auto;  z-index: auto;  box-shadow: none;}.breadcrumb {  margin-bottom: 0;  background: transparent;  padding: 0;}.breadcrumb-item a {  color: var(--ncr-secondary);  text-decoration: none;  transition: color 0.2s ease;}.breadcrumb-item a:hover {  color: var(--ncr-primary);  text-decoration: underline;}.breadcrumb-item.active {  color: var(--ncr-text-dark);  font-weight: 600;}@media (max-width: 576px) {  .breadcrumb-nav {    padding: 0.5rem 0;    position: static; /* stay static on mobile too */    box-shadow: none;  }  .breadcrumb {    font-size: 0.85rem;    flex-wrap: wrap;  }  .breadcrumb-item {    display: flex;    align-items: center;  }  .breadcrumb-item i {    margin-right: 0.25rem;  }}/* ---------- Event Sections ---------- */section {  padding-top: 3rem;  padding-bottom: 3rem;}.event-details {  background-color: var(--ncr-bg-light);  text-align: center;}.event-details h2 {  font-size: 2rem;  font-weight: 700;  color: var(--ncr-primary);}.event-details .lead {  font-size: 1.25rem;  font-weight: 400;  color: var(--ncr-text-dark);  margin-bottom: 2rem;}.event-details-list li {  font-size: 1.05rem;  margin-bottom: 1rem;  display: flex;  justify-content: center;  align-items: center;  gap: 0.5rem;}.event-details-card {  display: inline-block;  background: #fff;  border: 1px solid #eee;  border-radius: 0.75rem;  padding: 2rem;  box-shadow: 0 4px 12px rgba(0,0,0,0.05);  margin-bottom: 2rem;}.event-details-list li {  font-size: 1.1rem;  margin-bottom: 1rem;  display: flex;  justify-content: flex-start;  align-items: center;  gap: 0.5rem;}.event-details-list li i {  color: var(--ncr-secondary);  font-size: 1.1rem;}/* ---------- Mobile-first tweaks ---------- */@media (max-width: 576px) {	.event-details {	padding-top: 2rem;    padding-bottom: 2rem;  }		  .event-details h2 {    font-size: 1.5rem;  }  .event-details .lead {    font-size: 1.05rem;    margin-bottom: 1.5rem;  }  .event-details-list li {    flex-direction: column;    align-items: flex-start;    text-align: left;  }  .event-details-list li strong {    display: block;  }  .event-details-list li i {    margin-bottom: 0.25rem;  }}.race-cards-section {  background: var(--ncr-bg-light);}.race-card {  background: #fff;  border: 1px solid #eaeaea;  border-radius: 0.75rem;  transition: transform 0.3s ease, box-shadow 0.3s ease;  cursor: default; /* change to pointer if you wrap in <a> later */}.race-card:hover {  transform: translateY(-6px);  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);}.race-icon {  font-size: 2.5rem;  color: var(--ncr-primary);}.race-title {  font-size: 1.4rem;  font-weight: 700;  color: var(--ncr-secondary);  margin-bottom: 0.5rem;}.race-desc {  font-size: 1.05rem;  color: var(--ncr-text-dark);  line-height: 1.5;}/* Subtle hover color shift for icon if you want */.race-card:hover .race-icon {  color: var(--ncr-secondary);}/* Mobile tweaks */@media (max-width: 576px) {  .race-title {    font-size: 1.2rem;  }  .race-desc {    font-size: 1rem;  }}.noaa-feature {  position: relative;  min-height: 450px;  display: flex;  align-items: center;  justify-content: center;  background: url('/events/celebration-run/assets/images/noaa-pier.jpg') center/cover no-repeat;  background-attachment: fixed;}.noaa-overlay {  background: rgba(0, 40, 104, 0.6); /* Deep brand blue tint instead of black */  backdrop-filter: blur(4px);  max-width: 800px;  border-radius: 0.75rem;  padding: 2rem 2.5rem;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}.noaa-feature h2 {  font-size: 2rem;  font-weight: 700;  color: var(--ncr-accent);}.noaa-feature .lead {  font-size: 1.2rem;  color: #fff;  font-weight: 400;}.noaa-feature .btn-light {  background-color: var(--ncr-accent);  color: var(--ncr-text-dark);  font-weight: 600;  border: none;}.noaa-feature .btn-light:hover {  background-color: #fff;  color: var(--ncr-primary);}/* 🌐 Responsive */@media (max-width: 768px) {  .noaa-feature {    background-attachment: scroll; /* Prevent parallax weirdness on mobile */    min-height: 350px;    padding: 2rem 1rem;  }  .noaa-overlay {    padding: 1.5rem 1.25rem;  }  .noaa-feature h2 {    font-size: 1.5rem;  }  .noaa-feature .lead {    font-size: 1rem;  }  .noaa-feature .btn-light {    padding: 0.65rem 1.5rem;    font-size: 1rem;  }}.why-feature {  background-color: #fff;  border: 1px solid #eee;  border-radius: 0.75rem;  padding: 1.75rem;  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);  transition: transform 0.3s ease, box-shadow 0.3s ease;  height: 100%; /* Makes cards equal height inside row g-4 */}.why-feature:hover {  transform: translateY(-4px);  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);}.why-icon {  font-size: 2rem;  color: var(--ncr-primary);  flex-shrink: 0;}.why-title {  font-size: 1.25rem;  font-weight: 700;  color: var(--ncr-secondary);  margin-bottom: 0.35rem;}.why-desc {  font-size: 1rem;  color: var(--ncr-text-dark);  margin: 0;  line-height: 1.5;}/* Add slight spacing for better layout */.why-join h2 {  font-size: 2rem;  font-weight: 700;  color: var(--ncr-primary);}@media (max-width: 576px) {  .why-feature {    padding: 1.25rem;  }  .why-title {    font-size: 1.1rem;  }  .why-desc {    font-size: 0.95rem;  }}.highlights-gallery {  background: var(--ncr-bg-light);}.highlights-gallery .carousel-inner {  border-radius: 0.75rem;  overflow: hidden;}.highlights-gallery .carousel-item img {  max-height: 400px;  object-fit: cover;}.highlights-gallery .carousel-caption {  background: rgba(0, 0, 0, 0.6);  color: #fff;  font-size: 0.95rem;  padding: 0.5rem 1rem;  border-radius: 0.25rem;}.highlights-gallery .carousel-control-prev-icon,.highlights-gallery .carousel-control-next-icon {  filter: invert(1);  background-color: rgba(0,0,0,0.4);  border-radius: 50%;  padding: 0.5rem;}@media (max-width: 768px) {  .highlights-gallery .carousel-item img {    max-height: 250px;  }}.beneficiary h2 {  color: var(--ncr-primary);  font-weight: 700;}.benefit-card {  background: #fff;  border: 1px solid #ddd;  border-top: 4px solid var(--ncr-primary);  border-radius: 0.75rem;  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);  max-width: 700px;  transition: transform 0.3s ease;}.benefit-card:hover {  transform: translateY(-4px);}.benefit-logo {  height: 60px;  width: auto;  transition: transform 0.3s ease;}.benefit-logo:hover {  transform: scale(1.05);}.benefit-card p.lead {  font-size: 1.15rem;  color: var(--ncr-text-dark);}.benefit-card p.small {  font-size: 0.95rem;  color: var(--ncr-text-dark);  opacity: 0.75;}@media (max-width: 576px) {  .benefit-card {    padding: 1.5rem;  }  .benefit-card p.lead {    font-size: 1.05rem;  }}/* Social Feed Cards */.social-feed .card {  border: 1px solid #eee;  border-top: 4px solid var(--ncr-primary);  border-radius: 0.75rem;  transition: transform 0.2s ease, box-shadow 0.2s ease;}.social-feed .card:hover {  transform: translateY(-4px);  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);}.social-feed .card-body {  padding: 1.5rem;}.social-feed .card-title {  font-size: 1.1rem;  font-weight: 700;  color: var(--ncr-primary);  margin-bottom: 0.5rem;}.social-feed .card-text {  font-size: 1rem;  color: var(--ncr-text-dark);  line-height: 1.5;}.social-feed .card small {  display: block;  margin-top: 0.5rem;  color: #777;  font-size: 0.85rem;}/* ---------- Volunteer CTA ---------- */.volunteer-cta {  background-color: var(--ncr-primary);  color: var(--ncr-text-light);}.volunteer-cta .volunteer-icon {  font-size: 3rem;  line-height: 1;}.volunteer-cta h2 {  font-size: 2rem;  font-weight: 700;}.volunteer-cta .btn-light {  background-color: var(--ncr-accent);  color: var(--ncr-text-dark);  border: none;  font-weight: 600;  padding: 0.75rem 2rem;  border-radius: 0.5rem;  transition: background-color 0.3s ease, color 0.3s ease;}.volunteer-cta .btn-light:hover {  background-color: var(--ncr-text-light);  color: var(--ncr-primary);}/* 📱 Mobile tweaks */@media (max-width: 576px) {  .volunteer-cta h2 {    font-size: 1.5rem;  }  .volunteer-cta .lead {    font-size: 1rem;  }  .volunteer-cta .btn-light {    font-size: 1rem;    padding: 0.65rem 1.5rem;  }}/* End Landing *//* Race Details *//* ---------- Race Detail Cards ---------- */.race-detail-card {  background: var(--ncr-bg-light);  border: 1px solid #ddd;  border-radius: 0.75rem;  padding: 2rem 2rem 2rem 2rem; /* already good */  margin-bottom: 1.5rem; /* Already handled by `mb-5` in HTML */  transition: transform 0.3s ease, box-shadow 0.3s ease;}.race-detail-card:hover {  transform: translateY(-4px);  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);}.race-detail-card h3 {  font-family: var(--ncr-font-heading);  color: var(--ncr-secondary);  margin-bottom: 1rem;  font-size: 1.5rem;}.race-detail-card p,.race-detail-card ul {  color: var(--ncr-text-dark);  line-height: 1.6;  margin-bottom: 0.75rem;}.race-detail-card ul {  padding-left: 1.25rem;}.race-detail-card ul li {  margin-bottom: 0.5rem;}.race-detail-card a.btn {  margin-top: 0.5rem;}.race-detail-card a.btn-outline-primary:hover {  background-color: var(--ncr-primary);  color: #fff;}.half-marathon { border-top: 4px solid var(--ncr-primary); }.tenk { border-top: 4px solid var(--ncr-secondary); }.fivek { border-top: 4px solid var(--ncr-accent); }.kids-run { border-top: 4px solid #f04c4c; }@media (max-width: 576px) {  .race-detail-card {    padding: 1.5rem 1rem;  }  .race-detail-card h3 {    font-size: 1.25rem;  }  .race-detail-card p,  .race-detail-card li {    font-size: 0.95rem;  }}/* End Event Info *?/* ----- Universal Page Banner Styling ----- */.page-banner {  position: relative;  overflow: hidden;  background: var(--ncr-secondary);  color: var(--ncr-text-light);  min-height: 500px; /* adjust for your photo */  display: flex;  align-items: center;  background-size: cover;  background-position: center;}.page-banner h1 {  font-size: 2.25rem;  font-weight: 700;  font-family: var(--ncr-font-heading);}.page-banner .lead {  font-size: 1.25rem;  font-weight: 400;}.page-banner-overlay {  position: absolute;  top: 0;   left: 0;  width: 100%;  height: 100%;  background: rgba(0, 40, 104, 0.5); /* deep blue overlay */  z-index: 1;}.page-banner .container {  position: relative; /* ensure text sits above overlay */  z-index: 2;}@media (max-width: 576px) {  .page-banner {    min-height: 300px; /* NEW: ensure the banner still has height on small screens */  }  .page-banner h1 {    font-size: 1.75rem;  }  .page-banner .lead {    font-size: 1.05rem;  }}/* ----- Start List Styling (Final Polished) ----- */.start-list-section {  background: var(--ncr-bg-light);  color: var(--ncr-text-dark);}.start-list-section .lead {  color: var(--ncr-text-dark);}#start-list-container.card {  background: #fff;  border: 1px solid #ddd;  border-radius: 0.75rem;  border-top: 4px solid var(--ncr-primary);  max-width: 100%;  overflow-x: auto;}#start-list-container table th {  background: var(--ncr-secondary);  color: var(--ncr-text-light);  border: none;}#start-list-container table td {  vertical-align: middle;}#start-list-container table tbody tr:hover {  background: rgba(0, 40, 104, 0.05);}#race-filter,#search {  border: 2px solid var(--ncr-secondary);  background: #fff;}.spinner-border {  color: var(--ncr-primary);}.help-text a {  color: var(--ncr-secondary);  text-decoration: underline;}.help-text a:hover {  color: var(--ncr-primary);}@media (max-width: 576px) {  #start-list-container.card {    padding: 1rem;  }}/* End Start List *//* ---------- Results Page ---------- */.results-header h1 {  font-family: var(--ncr-font-heading);  font-weight: 700;  font-size: 2rem;  color: var(--ncr-primary);}.results-header p {  font-size: 1.1rem;  color: var(--ncr-text-dark);}.results-header nav.breadcrumb-nav {  font-size: 0.9rem;}.results-header .breadcrumb {  background: transparent;  padding: 0;}.results-page {  background: var(--ncr-bg-light);}.results-page h1 {  font-family: var(--ncr-font-heading);  color: var(--ncr-primary);  font-weight: 700;  font-size: 2rem;}.results-controls {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 1rem;}.results-controls .btn {  font-weight: 600;  border-radius: 0.5rem;}.results-controls .dropdown-menu {  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}.results-controls .dropdown-item {  font-weight: 500;  cursor: pointer;}#resultsTable table {  background: #fff;  border: 1px solid #ddd;  border-radius: 0.5rem;  border-collapse: separate;  border-spacing: 0;  overflow: hidden;}#resultsTable table th {  background: var(--ncr-secondary);  color: var(--ncr-text-light);  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.02em;}#resultsTable table td {  vertical-align: middle;}#resultsTable table tbody tr {  transition: background 0.2s ease;}#resultsTable table tbody tr:hover {  background: rgba(0, 40, 104, 0.05);}/* Pagination */#resultsPagination {  display: flex;  justify-content: center;  margin-top: 1rem;}#resultsPagination .pagination {  gap: 0.25rem;}#resultsPagination .page-item .page-link {  border-radius: 0.375rem;  color: var(--ncr-primary);}#resultsPagination .page-item.active .page-link {  background: var(--ncr-primary);  border-color: var(--ncr-primary);  color: #fff;}@media (max-width: 576px) {  .results-controls {    flex-direction: column;    align-items: stretch;  }  .results-controls .btn {    width: 100%;    margin-bottom: 0.5rem;  }}/* ---------- End Results ---------- *//* ---------- Footer ---------- */.site-footer {  background-color: var(--ncr-secondary);  color: var(--ncr-text-light);  font-size: 0.95rem;}.site-footer a {  color: var(--ncr-text-light);  text-decoration: none;  transition: color 0.2s ease;}.site-footer p.small.text-muted a {  color: rgba(255, 255, 255, 0.7);  font-weight: 500;}.site-footer p.small.text-muted a:hover {  color: var(--ncr-accent);}.site-footer a:hover {  color: var(--ncr-accent);  text-decoration: underline;}.footer-logo img {  height: 36px;  opacity: 0.9; /* slight fade for subtlety */}.footer-links a {  margin: 0 0.4rem;  font-weight: 500;}.footer-links span {  color: rgba(255, 255, 255, 0.3);}.footer-social a {  color: var(--ncr-text-light);  font-size: 1.2rem;  margin: 0 0.5rem;}.footer-social a:hover {  color: var(--ncr-accent);}.site-footer hr {  border-color: rgba(255, 255, 255, 0.1);}@media (max-width: 576px) {  .footer-logo img {    height: 28px;  }  .footer-links {    display: flex;    flex-wrap: wrap;    justify-content: center;    gap: 0.5rem;  }  .footer-links a {    display: inline-block;    margin: 0 0.25rem;    font-size: 0.9rem;  }  .footer-social a {    font-size: 1.1rem;  }}