/*
 * Responsive layout
 *
 * Desktop:             1024px and wider
 * Tablet:             768px to 1023px
 * Large mobile:       600px to 767px
 * Standard mobile:    390px to 599px
 * Compact mobile:     389px and narrower
 */

/* Phase 3: keep added text labels out of the existing PC image menu. */
#navigate .menu-list {
  font-size: 0;
}

#navigate .menu-text {
  display: none;
}

#navigate .menu-toggle {
  display: none;
}

/* Keep the original 1000px slide scale on PC and make it scalable below. */
#header {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: calc(100% + 2px) auto;
}

.bgswitcher-bg {
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: calc(100% + 2px) auto !important;
}

/* Mobile-only text layer; the existing PC catch layer remains authoritative. */
.mobile-catchcopy {
  display: none;
}

/* Phase 7: page-top control is enabled only in responsive layouts. */
#page-top {
  display: none;
}

/* Keep the footer telephone link visually consistent on every viewport. */
#footer .phoneno a {
  color: #ffffff;
  text-decoration: none;
}

/* Phase 2: common single-column foundation for tablet and mobile. */
@media screen and (max-width: 1023px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  body {
    overflow-x: hidden;
  }

  h1,
  #header,
  #outline,
  #midunit,
  #unit_right,
  #unit_left,
  #under_menu,
  #footer {
    max-width: 100%;
  }

  h1,
  #header,
  #outline {
    width: 100%;
  }

  #header {
    overflow: hidden;
  }

  #outline {
    margin-right: auto;
    margin-left: auto;
  }

  #navigate {
    width: 100%;
    padding-left: 0;
    overflow: visible;
    background-image: none;
    white-space: normal;
  }

  #navigate ul {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  #navigate .menu-list {
    height: auto;
  }

  #navigate li {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
  }

  #navigate li a {
    display: block;
    min-height: 44px;
    padding: 12px 8px;
    border-right: 1px solid #4d82b2;
    border-bottom: 1px solid #4d82b2;
    background-color: #004a8e;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  #navigate li a:hover,
  #navigate li a:focus {
    background-color: #1368a7;
    color: #ffffff;
  }

  #navigate li a:focus-visible {
    outline: 3px solid #fbf100;
    outline-offset: -3px;
  }

  #navigate li img {
    display: none;
  }

  #navigate .menu-text {
    display: block;
  }

  #midunit,
  #unit_right,
  #unit_left {
    display: block;
    float: none;
    width: 100%;
  }

  #unit_right {
    margin: 0 0 1em;
    padding-right: 5px;
    padding-left: 5px;
    overflow-wrap: anywhere;
  }

  #unit_left {
    margin: 0;
    padding-right: 32px;
    padding-left: 21px;
  }

  #under_menu,
  #footer {
    clear: both;
    width: calc(100% + 28px);
    max-width: none;
    margin-right: -14px;
    margin-left: -14px;
  }

  #under_menu ul {
    margin: 0 auto;
    padding: 0;
  }

  #under_menu li {
    white-space: normal;
  }

  #footer,
  #footer p {
    overflow-wrap: anywhere;
  }

  #page-top {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 1100;
    display: block;
    width: 56px;
    height: 56px;
    margin: 0;
    overflow-wrap: normal;
  }

  #page-top a {
    display: block;
    width: 56px;
    height: 56px;
    padding-top: 7px;
    border-radius: 50%;
    background-color: rgba(0, 74, 142, 0.82);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  #page-top a::before {
    display: block;
    font-size: 16px;
    line-height: 1;
    content: "\25B2";
  }

  #page-top a:hover,
  #page-top a:focus {
    background-color: rgba(19, 104, 167, 0.95);
    color: #ffffff;
  }

  #page-top a:focus-visible {
    outline: 3px solid #fbf100;
    outline-offset: 2px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  iframe,
  table,
  input,
  textarea,
  select {
    max-width: 100%;
  }

  textarea {
    width: 100%;
  }

  .facilities .databox,
  .facilities .gmapbox {
    max-width: 100%;
  }

  /* Phase 7: allow the PDF icon and long link text to use their full height. */
  .facilities .panfbox {
    width: 100%;
    height: auto;
    min-height: 34px;
    padding: 5px 4px 4px 35px;
    background-position: left top;
    line-height: 1.3;
  }

  .facilities .panfbox a {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Phase 2: prevent the contact form table from forcing a wide viewport. */
@media screen and (max-width: 599px) {
  #unit_right form table,
  #unit_right form tbody,
  #unit_right form tr,
  #unit_right form th,
  #unit_right form td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  #unit_right form input[type="text"],
  #unit_right form input[type="email"],
  #unit_right form input[type="tel"],
  #unit_right form textarea,
  #unit_right form select {
    width: 100%;
    max-width: 100%;
  }
}

/* Phase 3: tablet text menu in two rows (5 items, then 4 items). */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Phase 4: scale the 1000 x 420 PC header without shifting the slide. */
  #header {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: min(420px, 42vw);
    background-position: left top;
    background-size: calc(100% + 2px) auto;
  }

  #catch_img {
    box-sizing: content-box;
    width: min(366px, 36.6vw);
    height: min(210px, 21vw);
    margin-left: min(81px, 8.1vw);
    padding-top: min(200px, 20vw);
    padding-right: min(5px, 0.5vw);
    padding-bottom: min(5px, 0.5vw);
    padding-left: min(5px, 0.5vw);
    background-position: center min(30px, 3vw);
    background-size: min(370px, 37vw) auto;
    font-size: min(14px, 1.4vw);
    line-height: 2.2;
  }

  #catch_img h2 {
    margin-bottom: min(5px, 0.5vw);
    font-size: min(30px, 3vw);
  }

  /* Phase 7: extend the two-row tablet menu across the outline gutters. */
  #navigate {
    width: calc(100% + 28px);
    max-width: none;
    margin-right: -14px;
    margin-left: -14px;
    background-color: #004a8e;
  }

  #navigate ul {
    background-color: #004a8e;
  }

  #navigate li:nth-child(-n+5) {
    width: 20%;
  }

  #navigate li:nth-child(n+6) {
    width: 25%;
  }

  /* Phase 4: improve tablet reading width and spacing. */
  #unit_right {
    margin-bottom: 1.5em;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.7;
  }

  #unit_right h3 {
    font-size: 26px;
    line-height: 1.3;
  }

  /* Phase 7: keep facility data and Google Maps side by side above 814px. */
  .facilities .databox {
    width: calc(100% - 410px);
  }

  .facilities .gmapbox {
    width: 390px;
  }

}

/* Phase 7: keep banner rows until the 400px single-column limit. */
@media screen and (min-width: 401px) and (max-width: 1023px) {
  #unit_left {
    padding: 16px 18px 24px;
  }

  #unit_left ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
  }

  #unit_left li {
    display: inline-block;
    width: 33.333%;
    margin: 0 0 1em;
    padding: 0 6px;
    vertical-align: top;
    font-size: 14px;
    text-align: center;
  }

  #unit_left li img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* Phase 7: stack facility maps at and below the layout limit. */
@media screen and (max-width: 814px) {
  .facilities .databox,
  .facilities .gmapbox {
    display: block;
    float: none;
    width: 100%;
  }

  .facilities .gmapbox {
    clear: both;
    margin-top: 16px;
  }

  .facilities .gmapbox iframe {
    display: block;
    width: 100%;
  }

  /* Phase 7 trial: enlarge the raster access map with the stacked iframe. */
  .facilities .databox > img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Phase 5: smartphone menu bar and collapsible text navigation. */
@media screen and (max-width: 767px) {
  #under_menu {
    display: none;
  }

  /* Phase 7: stack the revised footer fields for smartphone readability. */
  #footer > p:not(#page-top) > span {
    display: block;
  }

  #footer > p:not(#page-top) > br {
    display: none;
  }

  #footer .phoneno {
    margin: 4px 0 2.7px;
    padding: 0 12px;
    font-size: 125%;
    line-height: 0;
  }

  #footer .phoneno a {
    display: block;
    padding: 4px 0 2.7px;
    line-height: 1.2;
  }

  /* Phase 6: combine the organization bar and menu button at the top. */
  h1 {
    position: relative;
    z-index: 800;
    display: block;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 4px 56px 4px 8px;
    overflow: hidden;
    border-bottom: 0;
    background-color: #000000;
    color: #ffffff;
    font-size: 16px;
    line-height: 40px;
    text-align: left;
    white-space: nowrap;
  }

  h1 .page-context {
    display: none;
  }

  h1 .organization-name {
    display: block;
  }

  /* Phase 6: show the people on the right side of the mobile slide. */
  #header {
    position: relative;
    height: clamp(276px, 86.15vw, 336px);
    margin-bottom: 2rem;
    border-bottom: 1px solid #b3b3b3;
    background-position: right top;
    background-size: auto 100%;
  }

  .bgswitcher-bg {
    background-position: right top !important;
    background-size: auto 100% !important;
  }

  /* The combined PC logo/catchcopy layer is replaced after crop review. */
  #catch_img {
    display: none;
  }

  /* Phase 6 and 7: independent mobile catchcopy with bottom breathing room. */
  #header .mobile-catchcopy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: calc(100px + 0.2rem);
    margin: 0;
    padding: 4px 10px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.88);
    color: #111111;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.28;
    text-align: left;
  }

  #header .mobile-catchcopy h2 {
    margin: 0 0 2px;
    padding: 0;
    color: #129fdf;
    font-size: clamp(20px, 5.4vw, 24px);
    font-weight: bold;
    line-height: 1.2;
  }

  #header .mobile-catchcopy p {
    margin: 0;
    padding: 0;
  }

  #navigate .menu-toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 0;
    border-left: 1px solid #4d82b2;
    border-radius: 0;
    background-color: #004a8e;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    appearance: none;
  }

  .menu-js #navigate .menu-toggle {
    display: block;
  }

  #navigate .menu-toggle:hover,
  #navigate .menu-toggle:focus {
    background-color: #1368a7;
    color: #ffffff;
  }

  #navigate .menu-toggle:focus-visible {
    outline: 3px solid #fbf100;
    outline-offset: -3px;
  }

  #navigate .menu-toggle-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    vertical-align: -2px;
  }

  #navigate .menu-toggle-icon::before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    border-top: 2px solid currentColor;
    content: "";
  }

  .menu-js #navigate .menu-list {
    display: none;
  }

  .menu-js #navigate.menu-open .menu-list {
    position: absolute;
    top: 48px;
    right: 0;
    left: 0;
    z-index: 900;
    display: block;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  }

  .menu-js #navigate.menu-open .menu-toggle {
    background-color: #1368a7;
  }

  #navigate li {
    display: block;
    width: 100%;
  }

  #navigate .menu-toggle-text {
    display: none;
  }
}

/* Phase 7: one banner per row at 400px and below. */
@media screen and (max-width: 400px) {
  #unit_left ul {
    font-size: inherit;
  }

  #unit_left li {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }

  #unit_left li img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Phase 5 through 7: standard smartphone adjustments. */
@media screen and (min-width: 390px) and (max-width: 599px) {
}

/* Phase 6 and 7: compact smartphone corrections. */
@media screen and (max-width: 389px) {
  h1 {
    font-size: clamp(13px, 4.1vw, 16px);
    line-height: 40px;
    white-space: nowrap;
  }

  h1 .legal-form,
  h1 .organization-core {
    display: inline;
  }
}