/* Shared visual language with the Next.js frontend. Loaded after base components. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url('../fonts/Oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #e5e1d6;
  --bs-body-color-rgb: 229, 225, 214;
  --bs-body-font-family: Oswald, 'Arial Narrow', sans-serif;
  --bs-primary: #b7322b;
  --bs-primary-rgb: 183, 50, 43;
  --bs-link-color: #ed6158;
  --bs-link-hover-color: #e5e1d6;
  --bs-border-color: #494238;
  --bs-secondary-color: #bcb4a7;
  --bs-tertiary-bg: #1a1a1a;
}
body, #page, #main-wrapper {
  background: #000;
  color: #e5e1d6;
}
body {
  font-family: Oswald, 'Arial Narrow', sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
a, .link { color: #ed6158; text-underline-offset: 5px; }
a:hover, a:focus, .link:hover, .link:focus { color: #e5e1d6; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 1px;
  color: #e5e1d6;
}
h1, .page-title { font-size: clamp(48px, 6vw, 88px); margin: 24px 0 32px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
#main { padding-top: 32px; padding-bottom: 48px; }
#navbar-main, #navbar-top {
  background: #000 !important; /* Override Bootstrap's bg-primary utility. */
  color: #e5e1d6;
}
#navbar-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 14px 24px;
  border-bottom: 1px solid #494238;
}
#navbar-main > .container, #navbar-main > .container-fluid {
  justify-content: center;
  flex-wrap: wrap;
}
#navbar-main .site-branding--last-one-out {
  width: 100%;
  margin: 0 auto;
}
.site-branding--last-one-out .band-brand { width: min(100%, 560px); margin: 0 auto; }
.band-brand__horizontal { width: 100%; height: auto; aspect-ratio: 3.9; }
.band-brand__name { top: 14%; left: 5%; width: 73%; height: auto; }
.band-brand__door { top: 8px; right: 1%; width: 18.7%; height: 100%; object-fit: contain; object-position: top; }
.band-brand__tear { height: 3px; }
.band-brand__tear--top { top: 0; width: 96%; }
.band-brand__tear--bottom { top: 72%; width: 82%; }
.band-brand__tear > img { width: 12px; height: 3px; flex-basis: 12px; }
.band-brand__tear-fill { background-size: auto 3px; }
#CollapsingNavbar { flex-basis: 100%; justify-content: center; }
#navbar-main .navbar-nav { justify-content: center; gap: 24px; margin-inline: auto; }
#navbar-main .nav-link, #navbar-top .nav-link {
  color: #e5e1d6;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 2px solid transparent;
}
#navbar-main .nav-link:hover, #navbar-main .nav-link.is-active,
#navbar-main .nav-link.active, #navbar-top .nav-link:hover {
  color: #ed6158;
  border-bottom-color: #b7322b;
}
.navbar-toggler { border-color: #807565; min-width: 44px; min-height: 44px; }
.card, .list-group-item, .sidebar .block, .dropdown-menu, .offcanvas {
  --bs-card-bg: #131313;
  --bs-card-color: #e5e1d6;
  --bs-card-border-color: #494238;
  --bs-list-group-bg: #131313;
  --bs-list-group-color: #e5e1d6;
  --bs-list-group-border-color: #494238;
  background: #131313;
  color: #e5e1d6;
  border-color: #494238;
  border-radius: 0;
}
.card { border-top: 3px solid #716758; background: linear-gradient(125deg, #1a1a1a, #0b0b0b); }
.card:hover { border-top-color: #b7322b; }
.card-body { padding: 24px; }
.card-header { background: #1a1a1a; border-color: #494238; font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; }
.card h2.btn { font-family: 'Bebas Neue', sans-serif; font-size: 32px; }
.card h2 a { color: #e5e1d6; text-decoration: none; }
.card h2 a:hover { color: #ed6158; }
.dropdown-item { color: #e5e1d6; }
.dropdown-item:hover, .dropdown-item:focus { background: #30211e; color: #e5e1d6; }
.btn, .button { border-radius: 0; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.btn-primary, .button--primary {
  --bs-btn-bg: #b7322b;
  --bs-btn-border-color: #b7322b;
  --bs-btn-hover-bg: #91241f;
  --bs-btn-hover-border-color: #d05a51;
  --bs-btn-active-bg: #91241f;
  --bs-btn-active-border-color: #d05a51;
  background: #b7322b;
  border-color: #b7322b;
  color: #e5e1d6;
  padding: 12px 24px;
}
.btn-primary:hover, .btn-primary:focus, .button--primary:hover { background: #91241f; border-color: #d05a51; color: #fff; }
.btn-secondary, .btn-outline-primary { background: transparent; border-color: #807565; color: #e5e1d6; }
.btn-secondary:hover, .btn-outline-primary:hover { background: #30211e; border-color: #b7322b; color: #e5e1d6; }
.form-control, .form-select, textarea, select, input.form-text, input.form-email {
  background-color: #121212;
  color: #e5e1d6;
  border: 1px solid #807565;
  border-radius: 0;
}
.form-control:focus, .form-select:focus {
  background-color: #121212;
  color: #e5e1d6;
  border-color: #e5e1d6;
  box-shadow: 0 0 0 2px #b7322b;
}
.form-control::placeholder { color: #aaa397; opacity: 1; }
.form-text, .description, .text-muted { color: #bcb4a7 !important; }
input.form-text { color: #e5e1d6 !important; }
.form-check-input:checked { background-color: #b7322b; border-color: #b7322b; }
table, .table {
  --bs-table-bg: #131313;
  --bs-table-color: #e5e1d6;
  --bs-table-striped-bg: #1a1a1a;
  --bs-table-striped-color: #e5e1d6;
  --bs-table-hover-bg: #30211e;
  --bs-table-hover-color: #e5e1d6;
  --bs-table-border-color: #494238;
  color: #e5e1d6;
}
table tr, table tr:nth-child(even) { background: #131313; border-color: #494238; }
table thead th { background: #1a1a1a; color: #e5e1d6; }
.nav-tabs { border-color: #494238; }
.nav-tabs .nav-link { color: #e5e1d6; border-radius: 0; }
.nav-tabs .nav-link:hover { color: #ed6158; border-color: #494238; }
.nav-tabs .nav-link.active { background: #1a1a1a; color: #e5e1d6; border-color: #b7322b #494238 #1a1a1a; }
.page-link { color: #e5e1d6; background: #131313; border-color: #494238; }
.page-link:hover { color: #fff; background: #30211e; border-color: #807565; }
.page-item.active .page-link { background: #b7322b; border-color: #b7322b; color: #fff; }
audio { max-width: 100%; width: 100%; margin-block: 12px; }
.node__content img { max-width: 100%; height: auto; }
.site-footer { background: #000; color: #bcb4a7; border-top: 1px solid #494238; }
.site-footer a { color: #e5e1d6; }
.site-footer a:hover { color: #ed6158; }
:focus-visible { outline: 2px solid #e5e1d6; outline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1439px) {
  .site-branding--last-one-out .band-brand { width: min(52vw, 400px); }
}
@media (max-width: 767px) {
  .site-branding--last-one-out .band-brand { width: 110px; }
  .band-brand__horizontal { display: none; }
  .band-brand__badge { display: block; width: 110px; height: auto; }
  #navbar-main > .navbar-toggler, #navbar-main > .container > .navbar-toggler { position: absolute; right: 22px; top: 47px; }
  #navbar-main .navbar-nav { gap: 4px; padding-top: 16px; text-align: center; }
  #main { padding-top: 20px; }
  .node--type-song-page .node__content .row > .col-8,
  .node--type-song-page .node__content .row > .col { flex: 0 0 100%; width: 100%; margin-bottom: 18px; }
  .card-body { padding: 18px; }
}