/* Theme overrides & additions — edit this file directly.
   Plain CSS, no build step (replaces the old custom.scss → custom.min.css
   pipeline). Loads after style.css, so rules here win on equal specificity. */

.stats-list li[data-content='Commuter Options'] {
  cursor: pointer;
  position: relative;
}

.stats-list li[data-content='Commuter Options'] [href='#location-map'] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (min-width: 480px) {
  .contact-holder {
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .contact-holder .contact-block {
    width: calc(100% / 3);
  }
}

#forum .headline {
  max-width: 900px;
  margin: 0 auto;
}

#forum .traverse-holder .description {
  margin-left: 0;
}

#discover_here .traverse-holder .logo {
  max-width: 150px;
}

/* Carousel/Image with Text — content container capped at 1600px so the
   side-by-side image/carousel column gets room next to the description. */
.carousel-with-text .container-wrap,
.image-with-text .container-wrap {
  max-width: 1600px;
}

.description.animation-slideup > p:last-child {
  margin-bottom: 0;
}

/* Header logo: the customizer anchor collapses to 0×0 (its img is
   absolutely positioned), so the logo was never clickable. Give the anchor
   the logo's box and lift it above the .colored swap image so it catches
   the click in both header states. */
[id="header"] .logo .custom-logo-link {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  aspect-ratio: 139 / 84;
}

.awards-list picture img {
  width: 120px;
  height: auto;
}

.gallery-slider .slick-track {
  display: flex !important;
}

.gallery-slider .slick-slide {
  height: 250px !important;
}

@media screen and (min-width: 768px) {
  .gallery-slider .slick-slide {
    height: 450px !important;
  }
}

@media screen and (min-width: 1300px) {
  .gallery-slider .slick-slide {
    height: 600px !important;
  }
}

.gallery-slider .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-stats .content-wrapper {
  display: flex;
  column-gap: 1.5rem;
  flex-direction: column;
  min-height: 550px;
  --description-width: 35%;
}

@media (min-width: 1024px) {
  .portfolio-stats .content-wrapper {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .portfolio-stats .content-wrapper .description {
    width: var(--description-width);
  }
}

@media (min-width: 1024px) {
  .portfolio-stats .content-wrapper .image-wrapper {
    width: calc(100% - var(--description-width));
  }
}

.portfolio-stats .description {
  text-align: center;
  padding-bottom: 28px;
}

@media (min-width: 1024px) {
  .portfolio-stats .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .portfolio-stats .description p {
    font-size: 0.8rem;
  }
}

.portfolio-stats .stats-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1rem;
}

.portfolio-stats .stats-wrapper .individual-stat {
  width: calc(100% / 3 - 1rem);
}

.portfolio-stats .stats-wrapper .individual-stat span {
  display: block;
}

.portfolio-stats .stats-wrapper .individual-stat span.stat {
  font-size: 2.6rem;
  font-weight: 500;
  color: #5d82cd;
}

@media (min-width: 1024px) {
  .portfolio-stats .stats-wrapper .individual-stat span.stat {
    font-size: 2.2rem;
  }
}

@media (min-width: 1200px) {
  .portfolio-stats .stats-wrapper .individual-stat span.stat {
    font-size: 2.6rem;
  }
}

.portfolio-stats .stats-wrapper .individual-stat span.caption {
  line-height: 1.2;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .portfolio-stats .stats-wrapper .individual-stat span.caption {
    font-size: 0.7rem;
  }
}

.portfolio-stats .image-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
}

@media (min-width: 1200px) {
  .portfolio-stats .image-wrapper {
    align-items: center;
  }
}

.portfolio-stats .image-wrapper picture.map {
  display: block;
  position: relative;
  z-index: 1;
  margin: 20px;
}

.portfolio-stats .image-wrapper picture.background {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media screen and (min-width: 768px) {
  .traverse-holder {
    display: flex;
    align-items: center;
    min-height: 650px;
  }
}

.phase-block .download-list .link .icon {
  flex-shrink: 0;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px;
}

@media screen and (min-width: 1024px) {
  .slide-caption {
    width: calc(100% - 58px);
    min-height: 58px;
    padding: 0px 18px;
  }
}

.slide-caption p {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

@media screen and (min-width: 1024px) {
  .slide-caption p {
    font-size: 0.7rem;
  }
}

/* ------------------------------------------------------------------ *
 * Location map — Area Map "Get Directions" building links
 * Replaces the old single address block in the bottom-left of the map
 * with a heading + a list of Google Maps links (one per building).
 * Desktop uses the existing .address-frame (bottom-left overlay);
 * mobile reuses the .area-map blue block styling.
 * ------------------------------------------------------------------ */

/* Shared list + link (desktop overlay and mobile block) */
.map-holder .directions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-holder .directions-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.3s;
}

.map-holder .directions-link .label {
  flex: 1 1 auto;
}

.map-holder .directions-link .icon {
  flex-shrink: 0;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3f6cc4;
  transition: background 0.3s;
}

.map-holder .directions-link .icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: 1px;
  transform: translate(-50%, -50%);
  border: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  transition: border-color 0.3s;
}

.map-holder .directions-link:hover .icon {
  background: #fff;
}

.map-holder .directions-link:hover .icon::before {
  border-color: transparent transparent transparent #3f6cc4;
}

/* Desktop overlay (.directions-frame keeps .address-frame positioning) */
.map-holder .directions-frame .directions-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 16px;
}

.map-holder .directions-frame .directions-title .icon-marker {
  font-size: 15px;
  margin-right: 9px;
}

.map-holder .directions-frame .directions-link {
  font-size: inherit;
  letter-spacing: inherit;
}

.map-holder .directions-frame .directions-list li + li {
  margin-top: 10px;
}

/* Mobile block (.directions-mobile reuses .area-map blue styling) */
.map-holder .directions-mobile .directions-list {
  max-width: 360px;
}

.map-holder .directions-mobile .directions-link {
  font-size: 0.87rem;
  letter-spacing: 0.89px;
  padding: 4px 0;
}

.map-holder .directions-mobile .directions-list li + li {
  margin-top: 14px;
}

/* Normalize a stray <h2> entered in an Area Map info row so it matches
 * the other bullets (otherwise it renders oversized and blue-on-blue). */
.map-holder .pin-number h2 {
  font-size: 0.87rem;
  line-height: 1.5;
  font-weight: 500;
  color: inherit;
  margin: 0;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Location map — desktop breakpoints & panel widths (map only)
 *   • Left tab column and the directions box share one width.
 *   • Desktop overlay starts at 1200px (was 1024px).
 *   (.desktop-visible/.desktop-hidden are shared site-wide, so the
 *    breakpoint shift is scoped to .map-holder.)
 * ------------------------------------------------------------------ */

.map-holder {
  --map-panel: 300px;
}

@media (min-width: 1450px) {
  .map-holder {
    --map-panel: 320px;
  }
}

.map-holder .tabset.desktop-visible,
.map-holder .address-frame.directions-frame.desktop-visible {
  width: var(--map-panel);
}

/* Keep the directions box sizing consistent so the building labels always
   fit the shared width (decoupled from the .address-frame breakpoint sizes). */
.map-holder .address-frame.directions-frame.desktop-visible {
  padding: 22px 24px;
  font-size: 0.62rem;
  letter-spacing: 1.6px;
  line-height: 1.5;
}

/* Hold the map's stacked/mobile layout through 1199px so the desktop
   overlay only appears at 1200px+. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .map-holder .desktop-visible {
    display: none !important;
  }
  .map-holder .desktop-hidden {
    display: block !important;
  }
  .map-holder .campus-map .title-block.desktop-hidden {
    display: flex !important;
  }
  .map-holder .js-tab-hidden {
    position: static !important;
    left: auto !important;
  }
  .map-holder .pin {
    opacity: 1;
  }
  .map-holder .pin-title {
    display: none !important;
  }
  .map-holder {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------
   Solid sticky header — per-page "Header Settings > Solid sticky header" ACF
   option (body class added in inc/theme_functions.php). The header keeps its
   fixed pinning but gets the white "scrolled" styling immediately, and the
   page content is offset below it so the header never overlays images.
   Heights mirror the .fixed regime: 78px mobile / 102px tablet / 83px desktop
   (desktop .fixed height is auto ≈ 82.8px; pinned here so header and content
   offset always match). */
body.solid-header {
  --solid-header-h: 78px;
}

body.solid-header #header {
  height: var(--solid-header-h);
  background: #fff;
  border-bottom: 1px solid rgba(71, 12, 24, 0.08);
}

body.solid-header #wrapper {
  padding-top: var(--solid-header-h);
}

/* Colored logo from the start (white logo returns while the mobile nav
   overlay is open, matching the .fixed.nav-active behavior). */
body.solid-header #header .logo img {
  opacity: 0;
  visibility: hidden;
}

body.solid-header #header .logo img.colored {
  opacity: 1;
  visibility: visible;
}

body.solid-header.nav-active #header .logo img {
  opacity: 1;
  visibility: visible;
}

body.solid-header.nav-active #header .logo img.colored {
  opacity: 0;
  visibility: hidden;
}

/* Dark burger lines from the start… */
body.solid-header .nav-opener span,
body.solid-header .nav-opener span:before,
body.solid-header .nav-opener span:after {
  background: #470c18;
}

/* …but white while the blue nav overlay is open. */
body.solid-header.nav-active .nav-opener span {
  background: transparent;
}

body.solid-header.nav-active .nav-opener span:before,
body.solid-header.nav-active .nav-opener span:after {
  background: #fff;
}

@media (min-width: 768px) {
  body.solid-header {
    --solid-header-h: 102px;
  }
}

@media (min-width: 1024px) {
  body.solid-header {
    --solid-header-h: 83px;
  }

  /* Dark nav links from the start (desktop inline nav). */
  body.solid-header .main-nav a {
    color: #470c18;
  }

  body.solid-header .main-nav a:hover,
  body.solid-header .main-nav a.anchor-active {
    color: #d64334;
  }
}