/* UBG site content: announcement bar, closed notice, event card.
   Loaded after main.css. Edited content comes from /admin/. */

#site-banner {
  width: 100%;
  font-family: 'UniversCom-67BoldCond', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}
#site-banner[hidden] { display: none; }

#site-banner .sb-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  padding: 10px 16px;
  font-size: 1.35em;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: #c22527;
}
#site-banner .sb-item + .sb-item { border-top: 1px solid rgba(255, 255, 255, .35); }
#site-banner .sb-dark   { background: #393939; }
#site-banner .sb-yellow { background: #f2c230; color: #222; }
#site-banner .sb-closed { background: #8f1517; font-size: 1.6em; padding: 14px 16px; }

#site-banner .sb-link {
  display: inline-block;
  padding: 4px 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
  color: inherit;
  font-size: .8em;
  text-decoration: none;
  white-space: nowrap;
}
#site-banner .sb-link:hover,
#site-banner .sb-link:focus { background: rgba(255, 255, 255, .2); }
#site-banner .sb-yellow .sb-link:hover { background: rgba(0, 0, 0, .08); }

/* Closed notice inside the Current Hours box */
#open-hours .hours-closed {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #8f1517;
  color: #fff;
  font-family: 'UniversCom-67BoldCond', Arial, sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
}

/* Event card - same look as the other photo tiles */
#event-card[hidden] { display: none; }
#event-card span.main { cursor: default; }

@media (max-width: 950px) {
  #site-banner .sb-item { font-size: 1.1em; padding: 8px 12px; }
  #site-banner .sb-closed { font-size: 1.3em; }
}

/* ---------------- Rules page (rules.php, edited at /admin/rules.php) ---------------- */
.rules-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 30px;
  padding: 0 10px;
  font-size: 1.35em;
  color: #222;
}
.rules-page h1 {
  margin: 0 0 16px;
  padding: 4px 12px;
  background: #393939;
  color: #fff;
  font-family: 'UniversCom-67BoldCond', Arial, sans-serif;
  font-weight: normal;
  font-size: 1.9em;
  text-transform: uppercase;
}
.rules-intro, .rules-outro { max-width: 900px; }
.rules-intro p, .rules-outro p { margin: 0 0 12px; }

.rules-list {
  list-style: none;
  counter-reset: rule;
  margin: 24px 0;
  padding: 0;
  columns: 2 460px;
  column-gap: 48px;
}
.rules-list > li {
  counter-increment: rule;
  position: relative;
  break-inside: avoid;
  padding: 2px 0 18px 64px;
  min-height: 48px;
  display: block;
}
.rules-list > li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #c22527;
  color: #fff;
  font-family: 'UniversCom-85XBlack', 'UniversCom-67BoldCond', Arial, sans-serif;
  font-size: 1.3em;
}
.rules-list > li:target::before { background: #393939; }
.rules-list h2 {
  margin: 0 0 6px;
  font-family: 'UniversCom-67BoldCond', Arial, sans-serif;
  font-weight: normal;
  font-size: 1.3em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #393939;
}
.rules-list ul { margin: 0; padding-left: 22px; list-style: disc; }
.rules-list ul li { margin: 3px 0; display: list-item; }
.rules-list ul ul { list-style: circle; }

.rules-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.rules-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 0;
  background: #c22527;
  color: #fff;
  font-family: 'UniversCom-67BoldCond', Arial, sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.rules-btn.dark { background: #393939; }
.rules-btn:hover, .rules-btn:focus { filter: brightness(1.15); }
.rules-updated { color: #666; font-size: .85em; }

@media (max-width: 600px) {
  .rules-page { font-size: 1.15em; }
  .rules-list > li { padding-left: 50px; }
  .rules-list > li::before { width: 38px; height: 38px; font-size: 1.1em; }
}

@media print {
  #site-banner, .header, .footer, .rules-actions { display: none !important; }
  .rules-page { font-size: 11pt; margin: 0; }
  .rules-list { columns: 2; column-gap: 28px; }
  .rules-list > li::before, .rules-page h1 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}