/* 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;
}

@media (max-width: 500px) {
  .hide-below-500 {
    display: none;
  }
}

#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: calc(100% - 20px);
    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;
    min-width: 0;
  }

  @media (min-width: 768px) {
      #identity-wrapper { width: calc(100% - 10px);
        margin: 0 auto;
      }
      /* Logos and crest stay fixed width so the search field can grow between them. */
      #identity-wrapper > #chan-identity-desktop,
      #identity-wrapper > #chan-identity-mobile,
      #identity-wrapper > #usc-identity-mobile,
      #identity-wrapper > #usc-identity {
        flex-shrink: 0;
      }
  }


/* 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;
     box-sizing: border-box;
     border-radius: 3px; }
/* Redraw native clear controls so they align with text and the #submit icon (WebKit draws them too high with tight line-height + padding). */
#search-form input#keywords::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='%232B5597' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 11px 11px;
}
#search-form input#keywords::-moz-search-clear-button {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='%232B5597' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 11px 11px;
}
#search-form input#keywords::placeholder {
  color: #000000;
  opacity: 1;
  text-transform: lowercase;
}
#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); }

/* Mobile: grow search when focused or it has text; keep left clear of the hamburger "menu" control.
   Offset matches SmartMenus 1.2.1 sm-core-showhide (.main-menu-btn: margin-left 35px, width 120px) + gap. */
@media (max-width: 767px) {
  #search-form {
    float: none;
    left: calc(15px + 120px + 12px);
    right: var(--Mobile-Side-Margin);
    width: auto;
    margin: 10px 0 6px 0;
  }
  #search-form input#keywords {
    display: block;
    margin-left: auto;
    width: 140px;
    max-width: 100%;
    transition: width 0.28s ease;
  }
  #search-form:focus-within input#keywords,
  #search-form input#keywords:not(:placeholder-shown) {
    width: 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;
     min-width: 226px;
     max-width: 500px;
     height: 40px;
     flex: 0 0 226px;
     padding-left: 16px;
     box-sizing: border-box;
     min-height: 0;
     transition: width 0.28s ease, flex-grow 0.28s ease, flex-shrink 0.28s ease;
   }
   #search-form:focus-within,
   #search-form:has(#keywords:not(:placeholder-shown)) {
     flex: 1 1 auto;
     width: min(500px, 80%);
     min-width: 226px;
   }
   /* Extra right padding: room for redrawn clear control + magnifier (#submit). */
   #search-form input#keywords { width: 100%; height: 40px; font-size: 20px; line-height: 24px; padding: 8px 44px 8px 18px; background-color: #EDEDED; color: #000000; font-weight: 400;}
   #search-form input#submit { height: 24px; width: 24px; } }