/* 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%;
  padding: 5px 0;
}

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

.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: calc(0.45em * 0.75);
}
.internal-social a {
  color: #c0c0c0;
  font-size: clamp(18px, 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;
  }
}

/* Match production #internal padding so utility links line up with #chan-identity-2line insets. */
@media (min-width: 768px) {
  #internal { padding: 0.3vw 1em; }
  .internal-links a { font-size: clamp(12px, 1.5vw, 18px); }
  #internal-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 926px) {
  #internal { padding-left: 2em; }
}



/* USC and Chan identity. */

#identity { width: 100%; position: relative; margin: 1.5vw 0; box-sizing: border-box; }


/* 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; position: absolute; right: 0px; top: 0px; }
#usc-identity-mobile img { width: 120px; height: 39px; margin: 0 10px 0 0; }
#usc-identity { display: none; }

@media (min-width: 768px) {
   /*
    * Grid stacks Chan (left) vs USC + search (right column) so the search bar never
    * paints over the USC wordmark (absolute + width:100% on the form caused overlap).
    */
   #identity {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 18%;
     grid-template-rows: auto auto;
     row-gap: 1em;
     column-gap: 0;
     align-items: start;
     padding-right: 10px;
   }

   #chan-identity-2line {
     grid-column: 1;
     grid-row: 1 / -1;
     align-self: start;
   }

   #usc-identity {
     display: block;
     position: relative;
     grid-column: 2;
     grid-row: 1;
     width: 100%;
     top: auto;
     right: auto;
     justify-self: end;
     align-self: start;
     padding-top: 1em;
     box-sizing: border-box;
   }
   #usc-identity a { display: block; margin-bottom: 0; }
   #usc-identity img { width: 100%; height: auto; }
   #usc-identity-mobile { display: none; }
}

@media (min-width: 926px) {
   #identity { padding-right: 18px; }
}


/* Search form. */

#search-form
   { float: right; text-align: right; margin: 10px 10px 0 0;
     display: block; position: relative; }
#search-form input#keywords
   { font-size: 150%; font-family: 'Source Sans'; font-weight: 300; width: 140px;
     border: 1px solid #eeeeee; color: #cccccc; padding: 2px 35px 2px 12px;
     -webkit-appearance: none; border-radius: 3px; box-sizing: border-box; }
#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 { opacity: 1.0; filter: alpha(opacity=100); }

@media (min-width: 768px) {
   #search-form {
     float: none;
     grid-column: 2;
     grid-row: 2;
     position: relative;
     right: auto;
     bottom: auto;
     margin: 0;
     width: 100%;
     align-self: end;
     text-align: right;
     padding-bottom: 0.25em;
   }
   #search-form input#keywords {
     width: 100%;
     max-width: 280px;
     font-size: clamp(14px, 1.8vw, 20px);
   }
   #search-form input#submit { height: 1.6vw; width: 1.6vw; max-height: 22px; max-width: 22px; }
}