/* ===== RMISA Skiing Custom Styles ===== */

/* --- Global spacing --- */
/* Push page content down so it doesn't hide behind the fixed navbar */
body {
  padding-top: 70px; /* adjust if your nav is taller */
}

/* --- Navbar tweaks --- */
.navbar-wrap {
  max-width: 1100px;   /* keeps nav content centered on wide screens */
  margin: 0 auto;
}
.navbar-brand img {
  height: 34px;
  width: auto;
  display: block;
}
.navbar-nav > li > a {
  font-size: 14px;
  font-weight: 600;
}

/* --- Tables (schedule & standings) --- */
.table-wrap {
  max-width: 800px;    /* keeps big tables from stretching full width */
  margin: 0 auto;      /* center them on the page */
}
.table td, .table th {
  vertical-align: middle;
}

/* --- Footer tweaks --- */
.site-footer .well {
  margin-bottom: 0;
  text-align: center;
}
.site-footer a {
  text-decoration: underline;
}

/* --- Misc elements --- */
hr {
  display: block;
  margin: 0.5em auto;
  border-style: inset;
  border-width: 1px;
  width: 100%;
}
/* --- Mobile table scrolling --- */
.table-responsive {
  -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
}

.table-responsive > .table {
  margin-bottom: 0; /* tighter look inside wrapper */
}

@media (max-width: 767px) {
  .table-responsive {
    border: 1px solid #ddd;   /* optional: subtle border around scrollable table */
    margin-bottom: 15px;
  }
  .table-responsive::-webkit-scrollbar {
    height: 8px;              /* optional: thinner scrollbar on mobile */
  }
}
/* --- Mobile scroll hint for wide tables --- */
@media (max-width: 767px) {
  .table-wrap[data-scroll-hint="true"] {
    position: relative;
  }

  .table-wrap[data-scroll-hint="true"]::after {
    content: "← Swipe to scroll →";
    position: absolute;
    bottom: -1.6em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    pointer-events: none;
  }
}
.site-footer {
  margin-top: 30px; /* adds space above the footer */
}
/* story page typography */
.story-body p { font-size: 16px; text-indent: 20px; text-align: justify; }
/* if you wrap your story text in <div class="story-body">...</div> */
/* Meet header rows in schedule.php */
.table tr.info {
  background-color: #f5f7fa;   /* lighter gray-blue for subtle highlight */
  border-top: 2px solid #dce3eb;
  border-bottom: 2px solid #dce3eb;
}

.table tr.info td {
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

/* On hover, don’t dim the header rows */
.table tr.info:hover td {
  background-color: #f5f7fa;
}

/* Small screens: keep things legible */
@media (max-width: 768px) {
  .table tr.info td {
    font-size: 14px;
  }
}

/* Meet header rows in schedule.php - Gold highlight */
.table tr.info {
  background-color: #fff8e1;   /* warm light gold */
  border-top: 2px solid #e6d9b8;
  border-bottom: 2px solid #e6d9b8;
}

.table tr.info td {
  font-weight: bold;
  font-size: 15px;
  color: #333; /* dark text for contrast */
}

.table tr.info:hover td {
  background-color: #fff8e1; /* keep highlight on hover */
}
/* Results column styling */
.results-col {
  font-size: 13px;         /* slightly smaller than body */
  white-space: nowrap;     /* keep links on one line */
}

.results-col a {
  margin-right: 6px;       /* space between links */
  font-weight: 600;        /* make links pop a bit */
}

.results-col a:last-child {
  margin-right: 0;
}
/* Podium rows for race result tables */
.table tr.podium-1 { background: #fff8e1; border-left: 4px solid #f1c40f; }
.table tr.podium-2 { background: #f7f7f7; border-left: 4px solid #bdc3c7; }
.table tr.podium-3 { background: #fff1e6; border-left: 4px solid #e67e22; }

/* keep hover slight for readability */
.table-hover > tbody > tr.podium-1:hover { background: #fff3c4; }
.table-hover > tbody > tr.podium-2:hover { background: #f0f0f0; }
.table-hover > tbody > tr.podium-3:hover { background: #ffe8d6; }

/* ---- Race page tweaks ---- */
.results-table .col-rank  { width: 5%;  }
.results-table .col-name  { width: 22%; }  /* give names breathing room (esp. Alpine) */
.results-table .col-team  { width: 9%;  }
.results-table .col-run   { width: 10%; }
.results-table .col-rk    { width: 5%;  }
.results-table .col-total { width: 10%; }
.results-table .col-back  { width: 7%;  }
.results-table .col-tmpts { width: 7%;  }
.results-table .col-ncaa  { width: 7%;  }

/* Top-3 highlight rows */
.table .row-gold  > td { background: #FFF9D6; }  /* subtle gold */
.table .row-silver> td { background: #F5F7FA; }  /* subtle silver */
.table .row-bronze> td { background: #FFF1E0; }  /* subtle bronze */

/* Medal icon next to the winner's name */
.medal { margin-right: 6px; display: inline-block; line-height: 1; }
/* ---- Schools page ---- */
.school-card { margin-bottom: 24px; }
.school-logo { max-width: 180px; height: auto; }
.school-meta-table td,
.school-contact td,
.school-coaches td { font-size: 13px; }
.school-coaches td strong { display: block; }

/* Horizontal scroll wrapper (already used) */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header for wide tables */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;                  /* keep on top of rows */
  background: #f7f9fc;         /* solid bg so stripes don’t bleed through */
  box-shadow: 0 2px 0 rgba(0,0,0,0.04); /* subtle divider under header */
}

/* Zebra striping a touch lighter than Bootstrap’s default */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #fafbfc;
}

/* Optional: nicer hover (keeps good contrast with stripes) */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #eef2f7;
}

.season-nav-inner {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}
/* Season nav layout */
.season-nav-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;   /* wraps on tiny screens */
  margin: 10px 0 20px;
}

/* Make the dropdown a sensible (non-full) width */
.season-select.form-control {
  display: inline-block; /* override Bootstrap block behavior */
  width: auto;           /* shrink to content */
  min-width: 160px;      /* but not too tiny */
  max-width: 220px;
  margin: 0;             /* remove any weird spacing */
}

/* On md+ screens, keep all 3 controls on one line */
@media (min-width: 768px) {
  .season-nav-inner { flex-wrap: nowrap; }
}
.mt-30 { margin-top: 30px; }