/* The Steele Family Foundation palette and supplied white wordmark. */
:root {
  --sff-navy: #27387e;
  --sff-light-blue: #a0cfef;
  --sff-red: #dc1f25;
  --primary-color: var(--sff-navy);
  --secondary-color: #ffffff;
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: var(--sff-red);
  --white-color: #ffffff;
  --divider-color: #27387e33;
  --dark-divider-color: #a0cfef40;
  --error-color: var(--sff-red);
  --plyr-color-main: var(--sff-red);
}

/* The white wordmark always sits on a solid dark surface. */
header.main-header .header-sticky {
  background-color: var(--sff-navy);
  border-radius: 20px 20px 0 0;
  border-bottom-color: var(--sff-light-blue);
}

header.main-header .header-sticky.active {
  background-color: var(--sff-navy);
}

.navbar {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar-brand {
  flex: 0 0 auto;
  width: clamp(230px, 22vw, 300px);
}

img.sff-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-logo img.sff-logo,
.footer-logo-royal img.sff-logo,
.footer-logo-stone img.sff-logo {
  width: 100%;
  max-width: 330px;
}

.sidebar-cta-box-logo {
  background: var(--sff-navy);
  border-radius: 8px;
  padding: 12px;
}

.sidebar-cta-box-logo img.sff-logo {
  width: 100%;
  max-width: 300px;
}

.sidebar-cta-image figure::before {
  opacity: 0.9;
}

.main-footer,
.main-footer-royal,
.main-footer-stone {
  background-color: var(--sff-navy);
  background-image: none;
}

/* Light blue pairs with navy, never with white text. */
.section-title .section-sub-title,
.bg-section .section-title .section-sub-title {
  background: var(--sff-light-blue);
  color: var(--sff-navy);
}

.dark-section .section-title .section-sub-title {
  background: var(--sff-navy);
  color: var(--white-color);
  border: 1px solid var(--sff-light-blue);
}

.main-menu > .nav-menu-wrapper > ul > li > a:hover,
.main-menu > .nav-menu-wrapper > ul > li > a:focus,
.main-menu > .nav-menu-wrapper > ul > li > a:focus-visible {
  color: var(--sff-light-blue);
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus,
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
  background: var(--sff-navy);
  color: var(--white-color);
}

.slicknav_open > a .slicknav_arrow::after {
  color: var(--white-color);
}

footer[class] a:not(.btn-default):hover,
footer[class] a:not(.btn-default):focus-visible,
.donate-now-contact-list-royal ul li a:hover,
.sidebar-cta-contact-content p a:hover,
.dark-section .section-footer-text p a {
  color: var(--sff-light-blue);
}

footer [class*="newsletter-form"] .form-group {
  background-color: var(--sff-navy);
  border: 1px solid var(--sff-light-blue);
}

footer [class*="newsletter-form"] .form-group .form-control,
footer [class*="newsletter-form"] .form-group .form-control::placeholder {
  color: var(--white-color);
  opacity: 1;
}

.footer-contact-list ul li img {
  filter: brightness(0) invert(1);
}

.footer-links-royal ul li::marker,
.hero-list-royal ul li::before,
.dark-section .section-footer-text ul li i {
  color: var(--sff-light-blue);
}

.btn-default.btn-highlighted::after,
.btn-default.btn-border::after {
  background: var(--sff-light-blue);
}

.btn-default.btn-highlighted:hover,
.btn-default.btn-border:hover {
  color: var(--sff-navy);
}

/* Keep moving photographs dark enough for the existing white hero copy. */
.hero::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 25%, rgba(0, 0, 0, 0.82) 100%);
}

.hero-royal::before {
  background: rgba(0, 0, 0, 0.65);
  opacity: 1;
}

:is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--sff-navy);
  outline-offset: 4px;
}

:is(header, footer, .dark-section) :is(a, button, input, textarea, select):focus-visible {
  outline-color: var(--sff-light-blue);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand { width: 235px; }
  .main-menu ul li { margin-left: 3px; margin-right: 3px; }
  .main-menu ul li a { padding-left: 7px !important; padding-right: 7px !important; }
}

@media (max-width: 991px) {
  .navbar { padding-top: 15px; padding-bottom: 15px; }
  .navbar-brand { width: min(270px, calc(100vw - 125px)); }
}