@font-face {
  font-family:	'Love Light';
  src:		url('Love-Light.otf') format('opentype'),
  url('Love-Light.woff2') format('woff2'),
  url('Love-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:	'Love Regular';
  src:		url('Love-Regular.otf') format('opentype'),
  url('Love-Regular.woff2') format('woff2'),
  url('Love-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:	'Love Bold';
  src:		url('Love-Bold.otf') format('opentype'),
  url('Love-Bold.woff2') format('woff2'),
  url('Love-Bold.woff') format('woff');
}

:root {
  --plum: #71227e;
  --blue: #3e71e2;
  --red: #f10703;
  --green: #238200;
  --orange: #f27303;
  --pink: #da01b7;

  --d00: #ffffff;
  --d10: #f8f9fa;
  --d20: #e9ecef;
  --d40: #ced4da;
  --d70: #495057;
  --d90: #212529;
  --d100: #000000;

  --radius: 4px;

  --font-sans:
    "Helvetica Neue",
    Helvetica,
    "Love Light",
    "Love Regular",
    "Love Bold",
    "Love",
    Arial,
    sans-serif;

  /*
   * Default breadcrumb theme.
   * Standard pages begin black and are temporarily recolored by JavaScript
   * when a colored footer navigation item is hovered or focused.
   */
  --nav-bg: var(--d100);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);

  --nav-button-height: 92px;
  --nav-button-hover-height: 112px;
  --navstrip-height: var(--nav-button-hover-height);
  --drawer-closed-height: 54px;
}

/*
 * Top breadcrumb navigation
 */

.page-breadcrumbs,
.page-breadcrumbs.text-secondary {
  z-index: 1050;

  display: flex;
  align-items: center;

  min-height: 50px;
  padding: 6px 10px;

  overflow-x: auto;
  overflow-y: hidden;

  background-color: var(--nav-bg);
  color: var(--nav-text) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.25);

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;

  font-family: var(--font-sans);
}

/*
 * Breadcrumb links
 */

.page-breadcrumbs a,
.page-breadcrumbs.text-secondary a {
  position: relative;

  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;

  min-height: 30px;
  margin-right: 14px;

  color: var(--nav-text) !important;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  transition: color 160ms ease;
}

/*
 * Remove the margin after the final breadcrumb item.
 */

.page-breadcrumbs a:last-child,
.page-breadcrumbs.text-secondary a:last-child {
  margin-right: 0;
}

/*
 * Hover and keyboard-focus underline.
 */

.page-breadcrumbs a::after,
.page-breadcrumbs.text-secondary a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;

  height: 6px;

  background-color: transparent;

  transition: background-color 160ms ease;
}

.page-breadcrumbs a:hover,
.page-breadcrumbs a:focus,
.page-breadcrumbs a:focus-visible,
.page-breadcrumbs.text-secondary a:hover,
.page-breadcrumbs.text-secondary a:focus,
.page-breadcrumbs.text-secondary a:focus-visible {
  color: var(--nav-text) !important;
  text-decoration: none;
  outline: 0;
}

.page-breadcrumbs a:hover::after,
.page-breadcrumbs a:focus-visible::after,
.page-breadcrumbs.text-secondary a:hover::after,
.page-breadcrumbs.text-secondary a:focus-visible::after {
  background-color: var(--nav-accent);
}

/*
 * Fallback for browsers that support focus but not focus-visible.
 */

@supports not selector(:focus-visible) {
  .page-breadcrumbs a:focus::after,
  .page-breadcrumbs.text-secondary a:focus::after {
    background-color: var(--nav-accent);
  }
}

/*
 * Hide the horizontal scrollbar while preserving horizontal scrolling.
 */

.page-breadcrumbs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-breadcrumbs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*
 * Fixed page themes.
 *
 * A page using one of these classes keeps its assigned background color.
 * The JavaScript detects the theme-* class and skips footer hover previews.
 */

.page-breadcrumbs.theme-hold {
  --nav-bg: var(--plum);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

.page-breadcrumbs.theme-secure {
  --nav-bg: var(--blue);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

.page-breadcrumbs.theme-lockdown {
  --nav-bg: var(--red);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

.page-breadcrumbs.theme-evacuate {
  --nav-bg: var(--green);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

.page-breadcrumbs.theme-shelter {
  --nav-bg: var(--orange);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

.page-breadcrumbs.theme-reunify {
  --nav-bg: var(--pink);
  --nav-text: var(--d00);
  --nav-accent: var(--d00);
}

/*
 * Align the fixed footer navigation with the viewport.
 *
 * Bootstrap's .row normally uses -15px horizontal margins.
 * Those margins push fixed rows beyond the left and right edges.
 */
 #full_menu > .row.fixed-bottom,
 #small_menu > .row.fixed-bottom {
   right: 0;
   left: 0;
   width: 100%;
   margin-right: 0;
   margin-left: 0;
 }
 
 /*
  * Match the breadcrumb's content edge to the Bootstrap column padding
  * used by the footer navigation links.
  */
 .page-breadcrumbs,
 .page-breadcrumbs.text-secondary {
   padding-right: 15px;
   padding-left: 15px;
 }
 
 /*
  * Ensure all six footer items remain exactly one-sixth of the viewport.
  */
 #full_menu .menu-square,
 #small_menu .menu-square-small {
   flex: 0 0 16.666667%;
   width: 16.666667%;
   max-width: 16.666667%;
 }
 
 /*
  * Prevent long labels from changing the column width.
  */
 #full_menu .menu-square,
 #small_menu .menu-square-small {
   min-width: 0;
 }
 
 /*
  * Keep the final fixed footer drawer aligned too.
  */
 #menu_bottom.row {
   right: 0;
   left: 0;
   width: 100%;
   margin-right: 0;
   margin-left: 0;
 }

  /*
  * Bottom navigation hover treatment.
  * raised tile gets rounded top corners.
  */
  #full_menu .menu-square:hover,
  #full_menu .menu-square:focus-visible,
  #small_menu .menu-square-small:hover,
  #small_menu .menu-square-small:focus-visible {
    border-radius: var(--radius) var(--radius) 0 0;
    outline: 0;
  }

  /*
  * Reveal the existing bottom-menu content when JavaScript opens it.
  * Explicitly match the white-text hover state from mission.css.
  */
  #menu_bottom.drawer-open {
    opacity: 1;
    visibility: visible;
    color: #ffffff !important;
  }

  #menu_bottom.drawer-open > div,
  #menu_bottom.drawer-open .row,
  #menu_bottom.drawer-open .mission-menu-list,
  #menu_bottom.drawer-open .mission-menu-list p,
  #menu_bottom.drawer-open .mission-menu-list b,
  #menu_bottom.drawer-open .mission-menu-list a,
  #menu_bottom.drawer-open > .text-right,
  #menu_bottom.drawer-open > .text-right p,
  #menu_bottom.drawer-open > .text-right a {
    opacity: 1 !important;
    visibility: visible !important;
    color: #ffffff !important;
    transform: translateY(0) !important;
    pointer-events: auto;
  }

  /*
  * Keep the copyright text intentionally muted, matching the existing design.
  */
  #menu_bottom.drawer-open .mission-menu-list[style*="color:#999"],
  #menu_bottom.drawer-open .mission-menu-list[style*="color: #999"] {
    color: #999999 !important;
  }

/*
 * =========================================================
 * RESPONSIVE HEADER NAVIGATION
 * =========================================================
 */

 @media (max-width: 1200px) {

  .page-breadcrumbs,
  .page-breadcrumbs.text-secondary {
    min-height: 46px;
    padding: 5px 12px;
  }

  .page-breadcrumbs a,
  .page-breadcrumbs.text-secondary a {
    margin-right: 12px;
    font-size: 0.95rem;
  }
}

@media (max-width: 992px) {

  .page-breadcrumbs,
  .page-breadcrumbs.text-secondary {
    min-height: 42px;
    padding: 4px 10px;
  }

  .page-breadcrumbs a,
  .page-breadcrumbs.text-secondary a {
    margin-right: 10px;
    font-size: 0.86rem;
  }
}

@media (max-width: 768px) {

  .page-breadcrumbs,
  .page-breadcrumbs.text-secondary {
    min-height: 38px;
    padding: 3px 8px;
  }

  .page-breadcrumbs a,
  .page-breadcrumbs.text-secondary a {
    margin-right: 8px;
    font-size: 0.78rem;
  }

  .page-breadcrumbs a::after,
  .page-breadcrumbs.text-secondary a::after {
    height: 4px;
    bottom: -4px;
  }
}

@media (max-width: 576px) {

  .page-breadcrumbs,
  .page-breadcrumbs.text-secondary {
    min-height: 34px;
    padding: 2px 6px;
  }

  .page-breadcrumbs a,
  .page-breadcrumbs.text-secondary a {
    margin-right: 6px;
    font-size: 0.72rem;
  }

  .page-breadcrumbs a::after,
  .page-breadcrumbs.text-secondary a::after {
    height: 3px;
    bottom: -3px;
  }
}

/*
 * Respect reduced-motion preferences.
 */

@media (prefers-reduced-motion: reduce) {
  .page-breadcrumbs,
  .page-breadcrumbs a,
  .page-breadcrumbs a::after {
    transition: none;
  }
}