/* Internal resources menu bar. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#internal {
  font-family: 'Source Sans';
  font-weight: 300;
  width: auto;
  text-align: left;
  background-color: #3c3c3c;
  line-height: 150%;
  /* Horizontal alignment matches #identity-wrapper (no extra bar-only inset). */
  padding: 5px 0;
}

#internal-wrapper {
  max-width: var(--Desktop-Container-Width);
  margin-left: var(--Mobile-Side-Margin);
  margin-right: var(--Mobile-Side-Margin);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}

.internal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1em;
  row-gap: 0.25rem;
}

.internal-links a {
  font-size: 100%;
  color: #c0c0c0;
  margin: 0;
}
.internal-links a:hover { color: white; }

.internal-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
}
.internal-social a {
  color: #c0c0c0;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1;
  text-decoration: none;
}
.internal-social a:hover { color: white; }

/* Utility bar only: on mobile show Instagram; footer #social keeps all four. */
@media (max-width: 767px) {
  #internal .internal-social .chan-social-link:not(.chan-social-link--instagram) {
    display: none;
  }
}

@media (min-width: 768px) {
  #internal { padding: 0.3vw 0; }
  .internal-links a { font-size: clamp(12px, 1.25vw, 18px); }
  #internal-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}



/* USC and Chan identity. */

#identity { order: 1; width: 100%; position: relative; margin: 1.5vw 0; }

#identity-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 24px var(--Mobile-Side-Margin) 8px var(--Mobile-Side-Margin);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  @media (min-width: 768px) {
      #identity-wrapper { width: 100%; margin: 0 auto; }
  }


/* Chan identity. */

#chan-identity-3line { display: block; margin: 10px 10px 0 10px; }
#chan-identity-3line img { max-width: 100%; height: auto; }
#chan-identity-2line { display: none; }

@media (min-width: 768px) {
   #chan-identity-2line { display: block; margin: 0 0 0 1em; }
   #chan-identity-2line img { width: 45%; height: auto; }
   #chan-identity-3line { display: none; }
}

@media (min-width: 926px) { #chan-identity-2line { margin-left: 2em; } }


/* USC identity. */

#usc-identity-mobile { display: block; }
#usc-identity-mobile img { width: 44px; /* height: 57px; */ margin: 0 0 0 0; }
#usc-identity { display: none; }

@media (min-width: 768px) {
   #usc-identity { order: 3; display: block; margin-left: 20px; }
   #usc-identity img { width: 44px; height: auto; }
   #usc-identity-mobile { display: none; }
}

@media (min-width: 926px) { #usc-identity { margin-right: 0; } }


/* Search form. */

#search-form
   { float: right; text-align: right; margin: 10px 10px 7px 0;
    display: block;
    position: absolute;
    bottom: -50px;
    right: 0; }
#search-form input#keywords
   { font-size: 150%; font-family: 'Source Sans'; font-weight: 300; width: 140px;
     border: 1px solid #eeeeee; color: #000000; background-color: #EDEDED;
     padding: 2px 35px 2px 12px;
     -appearance: none; border-radius: 3px; }
#search-form input#keywords::placeholder {
  color: #000000;
  opacity: 1;
  text-transform: uppercase;
}
#search-form input#submit
   { height: 16px; width: 16px; position: absolute; right: 10px;
     top: 0; bottom: 0; margin: auto 0; opacity: 0.40; filter: alpha(opacity=40); }
#search-form input#submit:hover,
#search-form:focus-within input#submit,
#search-form input#keywords:not(:placeholder-shown) + input#submit
   { opacity: 1.0; filter: alpha(opacity=100); }

@media (min-width: 768px) {
   #search-form { order: 2; display: block; position: relative; right: auto; top: auto; bottom: auto; margin: 0 0 0 auto; width: 226px; height: 40px;  }
   #search-form input#keywords { width: 198px; height: 24px; font-size: 20px; padding: 8px 8px 8px 18px; background-color: #EDEDED; color: #000000; font-weight: 400;}
   #search-form input#submit { height: 24px; width: 24px; } }