/**
 * Book Direct Bar — IPR
 *
 * Lives inside corporateplus's existing #footer-top region.
 * That region already provides:
 *   - Full-width wrapper (#footer-top)
 *   - Bootstrap container constraint (.container)
 *   - Grid scaffolding (.row > .col-12)
 *   - A dark background via .region--dark-background
 *
 * We don't fight any of that. We just:
 *   1. Override the corporateplus dark bg (too black) with our
 *      preferred dark gray, scoped to when our block is inside.
 *   2. Add a gold accent border to define the bar.
 *   3. Style the message itself (icon + text + link).
 *
 * Scoping note: the .book-direct-message class on our block body
 * is the hook we use everywhere — the corporateplus wrapper
 * classes stay untouched.
 */

/* Specials Bar — IPR */
.specials-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
	  color: #ffffff;
}

.specials-bar__label {
  color: #ffffff;
  font-weight: 600;
}

.specials-bar__divider {
  color: #444444;
}

.specials-bar__item {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.specials-bar__item:hover,
.specials-bar__item:focus {
  color: #ffffff;
  border-bottom-color: #C9A84C;
}

.specials-bar__item strong {
  color: #C9A84C;
  font-weight: 700;
}


/* When our block lives inside the dark footer-top region, soften
   the corporateplus near-black bg and add a gold top accent. */
#footer-top.region--dark-background:has(.book-direct-message) {
  background-color: #2a2a2a;
  border-top: 1px solid #C9A84C;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Inner message layout */
.book-direct-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  color: #ffffff;
}

.book-direct-message__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #C9A84C;
}

.book-direct-message__text {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #ffffff;
  text-align: center;
}

.book-direct-message__text a {
  color: #C9A84C;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.book-direct-message__text a:hover,
.book-direct-message__text a:focus {
  color: #C9A84C;
  border-bottom-color: #C9A84C;
}

.book-direct-message__text strong {
  color: #C9A84C;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .book-direct-message {
    flex-direction: column;
    gap: 0.5rem;
  }
  .book-direct-message__text {
    font-size: 0.875rem;
  }
}

/* Fallback for browsers without :has() support (Firefox <121,
   ancient Safari). Apply the same overrides to the bare region;
   slightly less surgical but works everywhere. */
@supports not selector(:has(*)) {
  #footer-top.region--dark-background {
    background-color: #1a1a1a;
    border-top: 1px solid #C9A84C;
  }
}