h2 {
  border-bottom: 2px solid #dee2e6;
}

/*
 * Global link styling
 */
:root {
  --bs-link-color: #1558d6;
  --bs-link-color-rgb: 21, 88, 214;
  --bs-link-hover-color: #1558d6;
}

.page-header {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e9ecef;
}

.detail-header {
  background-color: #fff;
  color: #212529;
  border-bottom: 1px solid #dee2e6;
}

body {
  background: #f4f4f4;
}

.section-card {
  border: 1px solid #dee2e6;
  border-radius: 0;
  margin-bottom: 1.5rem;
}

.section-header {
  background: #223b53;
  color: #ffffff;
  font-weight: 600;
  padding: .75rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.section-body {
  padding: 1rem;
  background: #fff;
}

/* YouTube slider */
.youtube-slider {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.youtube-slider .video-item {
  scroll-snap-align: start;
}

dl.row dt,
dl.list-spec dt {
  color: #495057;
}

.table thead {
  background: #e9ecef;
  color: #495057;
}

.table td,
.table th {
  color: #343a40;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  white-space: nowrap;
}

.symbol-right {
  color: #198754;
}

.symbol-none {
  color: #6c757d;
}

.article-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0;
  margin-bottom: 1.5rem;
}

.article-body {
  padding: 0.1rem 0.8rem;
  font-size: 1rem;
  line-height: 1.8;
}

.article-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  position: relative;
  padding: .5em 1.2em;
}

.article-body h3::before,
.article-body h3::after {
  display: inline-block;
  position: absolute;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid #00c2ab;
  background: none;
  content: '';
}

.article-body h3::before {
  top: calc(50% - 3px);
  left: 0;
}

.article-body h3::after {
  top: calc(50% + 3px);
  left: 5px;
}

/* Ensure links inside tables match global styling */
.table a {
  color: #1558d6;
  text-decoration: none;
}

/* Badge style for latest club tag */
.badge-latest {
  background-color: #f0b400;
  color: #fff;
}

/* Badge style for release year on shaft results */
.badge-release-year {
  background-color: #f4b702;
  color: #fff;
}

/* Histogram layout adjustments for mobile */
@media (max-width: 576px) {
  .histogram-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .histogram-section canvas {
    width: 100% !important;
  }
}

/* Placeholder style for search inputs */
.search-input::placeholder {
  color: #bbb;
}

/* Darker borders for dropdown buttons */
.btn-outline-secondary {
  border-color: #111;
  color: #111;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  border-color: #111;
  color: #111;
}

/* Darker border for toggle buttons */
.flex-toggle .btn {
  border-color: #222;
}

/* Darker borders for input fields and selects */
.form-control,
.form-select {
  border-color: #111;
}

/* Breadcrumb styling */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '\203A';
  padding: 0 .5rem;
  color: #6c757d;
}

.breadcrumb-item a {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

/* Cross chart styles */
.cross-chart-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
}
.cross-chart-wrapper canvas {
  background-color: #fff;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 576px) {
  .cross-chart-wrapper {
    aspect-ratio: auto;
  }
  .cross-chart-wrapper canvas {
    height: 250px !important;
  }
}


/* Ensure result count text is black on shaft search page */
#shaftResultCount {
  color: #000;
}

/* Header navigation styles                                   */
/* --------------------------------------------------------- */
.header-nav .nav-link {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  color: #fff;
}

.header-nav .nav-link:hover {
  color: #4f6ef7;
}

/* Prevent header navigation from wrapping on small screens */
.header-nav {
  flex-wrap: nowrap;
}

.header-nav .container {
  flex-wrap: nowrap;
}

@media (max-width: 576px) {
  .header-nav .nav-link {
    padding: 0.25rem 0.5rem;
  }
}

/* --------------------------------------------------------- */
/* Search page shared styles                                 */
/* --------------------------------------------------------- */
/* Header section for search forms */
.search-header {
  background: #223b53;
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1rem;
  margin: -20px -20px 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Tooltip icon next to labels */
.tooltip-icon {
  font-size: 0.9em;
  vertical-align: text-top;
  cursor: pointer;
  color: #428bca;
}

/* Summary bar fixed to bottom showing selected filters */
#filterSummaryBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1050;
}

#filterSummaryBar.closed .summary-body {
  display: none;
}

#filterSummaryBar .summary-header {
  padding: 6px 10px;
  font-weight: 600;
  background: #f8f9fa;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
}

#filterSummaryBar .summary-label,
#filterSummaryBar .summary-search-btn {
  flex: 1 1 0;
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
}

#filterSummaryBar .summary-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background-color: #007bff;
  border: 1px solid #007bff;
  color: #fff;
  font-weight: 400;
  border-radius: 0.375rem;
}

#filterSummaryBar .summary-arrow {
  margin-left: 0.25rem;
}

#filterSummaryBar .summary-search-btn {
  flex: 0 0 50%;
  background-color: #da870b;
  border-color: #da870b;
  color: #fff;
}

#filterSummaryBar .summary-search-btn:hover,
#filterSummaryBar .summary-search-btn:focus {
  background-color: #da870b;
  border-color: #da870b;
  color: #fff;
}

#filterSummaryBar .summary-body {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 12px;
}

#filterSummaryBar ul {
  font-size: 0.85rem;
  margin-bottom: 0;
}

#filterSummaryBar .summary-result-count {
  font-size: 0.9rem;
}

#filterSummaryBar .reset-btn {
  margin-bottom: 0;
}

/* Quick search summary items */
#quickSummary .quick-summary-item {
  cursor: pointer;
}