/* =============================================================================
   chrome.css — Header/footer (chrome) overrides
   -----------------------------------------------------------------------------
   Small, intentional adjustments that sit on top of the vendored institutional
   theme (assets/vendor/northeast.css) WITHOUT editing the vendored snapshot, so
   the snapshot stays a clean, refreshable copy of the live file.

   Loaded AFTER northeast.css so these rules win.
   ============================================================================= */

/* Header banner band.
   The vendored northeast.css points #internal-top at "../img/image2-desktop.webp"
   (relative to the vendor/ folder). We re-point it at the banner you provide at
   assets/img/banner/image2-desktop.webp, and add a solid fallback color so the
   header still looks correct (matching the live navy fallback) until the image
   is in place. */
#internal-top {
  background-color: #00476c; /* fallback — matches live mobile fallback */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    url("../img/banner/image2-desktop.webp");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
}

/* Mobile: the live site DROPS the banner image below the lg breakpoint and shows
   a solid navy band instead. northeast.css declares this, but because our banner
   rule above is loaded later we must restate it here so the cascade still wins.
   (This is the responsiveness parity fix — without it, mobile would keep showing
   the banner image, unlike the live site.) */
@media (max-width: 991.98px) {
  #internal-top {
    background-image: none !important;
    background-color: #00476c !important;
  }
}

/* Breadcrumb links — the live site renders ALL breadcrumb links white/regular
   on the banner (its theme repeats id="breadcrumbs" on each link). We achieve
   the same result with one scoped rule, keeping the markup valid. Without this,
   only the first link (which carries the id) would be white and the rest would
   fall back to the theme's blue link color — low contrast on the navy banner. */
#internal-breadcrumbs a { color: #fff; font-weight: 400; }
#internal-breadcrumbs a:hover,
#internal-breadcrumbs a:focus { color: #fff; }

/* Top-bar search field — visual match for the live Google Custom Search box:
   a single white field, 1px teal border, 4px radius, magnifier inside on the
   left. The live widget is Google CSE (needs the institution's account/key), so
   this is wired as a static field for now but mirrors the look. */
.ne-search {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 360px;
  text-align: left;
}
.ne-search .ne-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  pointer-events: none;
}
.ne-search .ne-search__input {
  width: 100%;
  height: 38px;
  padding: 6px 12px 6px 40px;
  font-size: 16px;
  color: #444746;
  background: #fff;
  border: 1px solid #0d7172;   /* matches live .gsc-input-box border */
  border-radius: 4px;          /* matches live */
}
.ne-search .ne-search__input::placeholder { color: #8a8d8c; opacity: 1; }
.ne-search .ne-search__input:focus {
  outline: 3px solid #0d7172;  /* matches the live CSE focus treatment */
  outline-offset: 2px;
}

/* Footer logo sizing.
   The live site uses a small PNG (renders ~282px wide) as a bare <img>. We reuse
   the shared white WEBP, which is intrinsically 800×192, so a bare <img> would
   overflow the column. Constrain it to match the live footer logo size while
   staying responsive. (Swap in the institution's PNG to drop this rule.) */
#footer img {
  width: 282px;
  max-width: 100%;
  height: auto;
}

/* Mobile menu toggle — the live site renders the "Menu" toggle white (text,
   icon, and border) on the navy banner. Bootstrap's default toggler is dark
   (rgba(0,0,0,.65)) on a transparent background, which is invisible here. */
#internal-top .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}
#internal-top .navbar-toggler .text,
#internal-top .navbar-toggler i { color: #fff; }
#internal-top .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4); }

/* Note: #social-row-icons spacing (display:inline-block; padding:0 10px) and the
   2em white icons are already provided by the vendored northeast.css — no extra
   rules needed here. The content-area background is intentionally left to the
   .ne-modern layer; like the live site, .shell itself stays transparent. */

/* Smooth in-page scrolling for the jump-link nav (respects reduced motion). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Back-to-top button — page-level (outside .ne-modern), pairs with the in-page
   jump nav. Hidden until the user scrolls; shown via .is-visible from subnav.js.
   On deploy this can defer to the institution's global back-to-top if present. */
.ne-to-top {
  position: fixed;
  right: 1.3125rem;
  bottom: 1.3125rem;
  z-index: 200;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #0d7172;
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 21px rgba(10, 37, 64, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(13px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .12s ease;
}
.ne-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ne-to-top:hover { background: #0a5b5c; }
.ne-to-top:focus-visible { outline: 2px solid #156e99; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ne-to-top { transition: opacity .2s linear; transform: none; }
  .ne-to-top.is-visible { transform: none; }
}