/**
 * Classic app shell marquee — theater border + title strip.
 * Extracted from utilities.css / main.css for preservation during 2026 redesign.
 */

.special-border-card {
  border: 30px solid transparent;
  padding: 15px;
  border-image-slice: 30;
  border-image-source: url("/images/square5.png");
  border-image-repeat: repeat;
  border-radius: 25px;
  -webkit-border-radius: 25px;
}

/* Must beat main.css `.card:not([class*="bg-"])` + global `.card` (border/bg)
   otherwise Safari paints a flat dark card, kills border-image, and title inherits wrong color. */
body .marquee-container .card.marquee-header {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  height: 150px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* White field + marquee lines */
  background-color: #ffffff !important;
  background-image: url("/images/marquee-bg.jpg") !important;
  background-size: 137px 123px !important;
  background-position: center center !important;
  background-repeat: repeat-x !important;
  color: var(--border-dark, #495057) !important;
  /* border-image slices need transparent borders; global .card rules set gray borders */
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 30px !important;
  border-image-source: url("/images/square5.png") !important;
  border-image-slice: 30 !important;
  border-image-repeat: repeat !important;
  /* repaint edge cases on iOS (border-image disappearing) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

body .marquee-container .card.marquee-header .card-body {
  background: transparent !important;
  color: inherit !important;
}

body .marquee-container .card.marquee-header .card-body h2.marquee-title {
  font-family:
    "TW Cen MT Condensed Bold", "Arial Narrow", Arial,
    sans-serif !important;
  font-weight: bold !important;
  /* rem — not em; linked titles must not 3× again on the inner <a> */
  font-size: 3rem !important;
  letter-spacing: 3px !important;
  color: #cc0000 !important;
  text-shadow:
    1px 1px 0 #990000,
    -1px -1px 0 #990000,
    1px -1px 0 #990000,
    -1px 1px 0 #990000 !important;
}

body .marquee-container .card.marquee-header .card-body h2.marquee-title a {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  text-shadow: inherit !important;
}

.marquee-container {
  margin: 0 20px 0 20px;
  width: auto;
}

@media (max-width: 576px) {
  .marquee-title {
    font-size: 1.7rem !important;
  }
}