/* Colorado Sports Hub - site styles (mobile first) */
:root {
  --ink: #1d2433;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #1f5fa8;
  --page: #f5f7fa;
  --card: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header and navigation */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-logo { display: flex; justify-content: center; }
.site-logo img { height: 56px; }

/* On phones the team links scroll sideways instead of wrapping */
.site-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.site-nav a:hover { text-decoration: none; }
.site-nav a.active { background: var(--accent); color: #fff; }

/* Phones get a dropdown instead of the scrolling row */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.team-select-label { display: none; padding: 10px 0; }
.team-select {
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}
@media (max-width: 767px) {
  .site-nav { display: none; }
  .team-select-label { display: block; }
}

/* Page layout: one column on phones, main column plus sidebar on desktop */
.layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
.main-col { min-width: 0; }

.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.breadcrumb a { color: var(--muted); }

.section-title {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 16px 0 12px;
}

/* Card grid: 1 column on phones, 2 on tablets, 3 on large screens */
.featured,
.post-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .featured,
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .featured,
  .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The lead story spans the full grid width, with the image beside the text */
@media (min-width: 768px) {
  .featured .post-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .featured .post-card:first-child .post-card-thumb { flex: 0 0 50%; aspect-ratio: auto; min-height: 260px; }
  .featured .post-card:first-child .post-card-body { flex: 1; }
  .featured .post-card:first-child .post-card-title { font-size: 24px; }
}

/* Post cards: thumbnail above the text on phones, beside it on larger screens.
   No floats, so titles never wrap around an image. */
.post-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #eef1f5;
}
.post-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card-body { padding: 14px 16px 16px; min-width: 0; }
.post-card-team {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-card-title {
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.post-card-title a { color: var(--ink); }
.post-card-date { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.post-card-body p { margin: 0; font-size: 15px; color: #344054; }

/* Promo cards sit inside the feed on phones and tablets, where the sidebar is
   too far down to reach. On wide screens the sidebar shows the same content. */
.promo-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.promo-card h2 { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.promo-card p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.promo-card img { max-height: 220px; width: auto; margin: 8px auto; object-fit: contain; }
.main-col > .promo-card { margin-top: 16px; }
@media (min-width: 768px) {
  .promo-card { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .promo-card { display: none; }
}

/* Turn off scroll anchoring. When new posts are added above the sidebar or footer,
   the browser would otherwise shift the page to keep them in place, which keeps the
   load trigger on screen and loads every remaining post at once. */
body { overflow-anchor: none; }
#feed-end { height: 1px; }

/* Sidebar */
.side-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.side-box h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
}
.side-box p { font-size: 14px; color: var(--muted); }
.shop-img { width: 100%; max-height: 260px; object-fit: contain; margin: 8px 0; }
.btn {
  display: inline-block;
  background: #2e7d32;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
}
.btn:hover { color: #fff; text-decoration: none; }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li { margin-bottom: 8px; font-size: 15px; }
.sitemap-list a { color: var(--ink); }

/* Footer */
.site-footer { background: #101828; color: #d0d5dd; padding: 32px 16px 16px; margin-top: 32px; }
.footer-cols { max-width: 1140px; margin: 0 auto; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.site-footer h3 { font-family: 'Nunito', sans-serif; color: #fff; font-size: 16px; margin: 0 0 8px; }
.site-footer a { color: #d0d5dd; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.copyright { text-align: center; font-size: 13px; margin: 24px 0 0; color: #98a2b3; }