/* Slider Block */
.landing-slider {
  /* position: relative; */
  padding-bottom: 3rem !important;
}

.feature__content--no-image {
  padding-left: 3.5rem !important;
}

.landing-slider__item {
  min-height: auto !important; /* override main.css */
}

.landing-slider:has(
    .landing-slider__item.landing-slider__item--no-image.is-selected
  )
  .flickity-prev-next-button {
  /* top: 50% !important; add in for dynamic arrows with no-image slides
  transform: translateY(-50%); add in for dynamic arrows with no-image slides */
}

.landing-slider .flickity-page-dots {
  /* bottom: 1rem !important; */
}

.flickity-prev-next-button {
  /* top: calc(50% - 4rem) !important;
    -webkit-transform: translateY(-calc(50% + 4rem)) !important;
    transform: translateY(-calc(50% + 4rem)) !important;  */

  top: 50% !important; /* comment out for static arrows */
  transform: translateY(-50%) !important; /* comment out for static arrows */
}

@media (max-width: 1023px) {
  .feature__content--no-image {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

@media (max-width: 511px) {
  .landing-slider .flickity-page-dots {
    width: 100% !important;
    left: 0 !important;
  }
}

/* Full-width Hero Image Title */
.hero-container,
.hero-container.flex-normal {
  display: flex;
  flex-direction: column;
}
.hero-container.flex-reverse {
  flex-direction: column-reverse;
}
.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}

.splash-feature h1.text-align-left,
.splash-feature .splash__heading.text-align-left {
  text-align: left;
}
.splash-feature h1.text-align-center,
.splash-feature .splash__heading.text-align-center {
  text-align: center;
}
/* .splash-feature h1.text-align-right,
.splash-feature .splash__heading.text-align-right {
  text-align: right;
} */

.hero__image-acf-cont {
  width: 100%;
}

.hero__image-acf {
  width: 100%;
  height: auto;
}

/* General Content with Media */
.general-content-with-media-acf {
  /* Clearfix to contain floated .content__right */
  overflow: auto;
  margin: 2rem 0;
}

/* Hide JavaScript-generated empty play button divs */
.general-content-with-media-acf .caption__media__play:empty {
  display: none !important;
}

/* Column Grid Block */
.acf-title-link > .feed__title {
  border-bottom: 0.0625rem solid transparent;
  color: #ab0c2f;
  text-decoration: none;
}

.main__container--inner {
  padding-left: 0;
  padding-right: 0;
}
.main__container--narrow.main__container--inner {
  max-width: 48rem;
}

@media (min-width: 1024px) {
  .feed__grid--4 {
    gap: 2rem;
  }
  .feed__grid--4 > .feed__item {
    flex: 0 0 calc(25% - 2rem);
  }
  /* .main__container--narrow .feed__grid--4 .feed__item {
        width: calc(25% - 1rem);
    } */
}

.feed__image--square {
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
}
.feed__image--square > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main__container--narrow
  .main__full
  > .feed
  > .feed__grid--4
  > .feed__item
  > .button.editor-button,
.main__container--narrow
  .main__full
  > .feed
  > .feed__grid--3
  > .feed__item
  > .button.editor-button {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
/* Fifty-Fifty WYSIWYG */
.columns__item.columns__item--2 > div > :first-child {
  margin-top: 0;
}

/* Image with Red Overlay and Side-by-Side blocks */
.main__container.main__container_universal-block {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 80rem) {
  .main__container.main__container_universal-block-desktop {
    /* padding-left: 0 !important;
    padding-right: 0 !important; */
  }
}

/* @media (1024px <= width <= 1120px) {
  .main__container.main__container_universal-block-desktop .columns__item--2 {
    width: calc(50% - 2.25rem);
  }
} */

@media (min-width: 64rem) {
  .main__container_universal-block-desktop.tablet-padding
    .columns__item.columns__item--2
    > .split__img
    > img {
    max-width: 150px;
  }
}

@media (min-width: 48em) {
  .main__container_universal-block-desktop,
  .main__container_universal-block-desktop.tablet-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

@media (min-width: 48rem) {
  .main__container.main__container_universal-block_padding-left {
    padding-left: 4rem;
    /* padding-right: 0; */
    padding-right: 4rem;
  }

  .main__container.main__container_universal-block_padding-right {
    /* padding-left: 0; */
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 64em) {
  .main__container.image-with-red-overlay-container .feature__content--alt {
    width: 50%;
  }
}

.feature__img img {
  max-width: 100% !important;
}

@media (min-width: 64em) {
  .add_space_red_image {
    width: 88%;
  }

  /* .feature--alt2 becomes a single-cell CSS grid at this breakpoint (see
     main.css) rather than flexbox, so aligning the narrowed image within
     its grid cell needs `justify-self` on the item itself, not
     `justify-content` on the container — the container only has one 1fr
     track, so `justify-content` has nothing to distribute and silently does
     nothing. Without this, "offset image" + "show image on the right"
     combined left the image stuck on the left instead of mirroring to the
     right the way the text panel does. */
  .feature--alt2.feature--swap .feature__half.add_space_red_image {
    justify-self: end;
  }
}

.main-animate--right:has([class*="main__container_universal-block"])::before {
  /* content: '';
  position: absolute;
  top: 0;
  left: 0; */
  width: 48% !important;
  /* height: 12.5rem;
  background-color: #F3F3F3;  */
}

.main-animate--left:has([class*="main__container_universal-block"])::before {
  /* content: '';
  position: absolute;
  top: 0;
  right: 0; */
  width: 48% !important;
  /* height: 12.5rem;
  background-color: #F3F3F3;  */
}

.align-left-acf {
  text-align: left;
}

.split--alt {
  gap: 3rem;
}

.main__full p.feed__link > a {
  border-bottom-color: currentColor;
}

.main__full p.feed__link > a:hover {
  color: #fff;
  background-color: #ab0c2f;
  border-bottom-color: #ab0c2f;
}

/* Splash Hero - Red Text Box Overlay */
@media (min-width: 64em) {
  .hero__content.hero__content--left {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 63.99em) {
  .hero--splash-red-overlay .hero__image {
    padding-bottom: 0;
  }

  .hero--splash-red-overlay .hero__image img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Slider */
@media (min-width: 32em) {
  .feature--alt-half .feature__media-wrap {
    width: 50%;
  }
}

/* Video play button */
.media__item {
  background-color: #ab0c2f;
}

/* Page Notices */
.page-notices {
  font-size: 1rem;
}

/* Two columns: message (1fr — icon sits inline right before the title,
   both centered together as a unit) | toggle pill (auto, pinned to the
   right edge, only present when there are more notices to reveal). */
.page-notices .notice-message {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1rem;
  border-left: 6px solid;
  /* border-radius: 6px; */
}

.page-notices .notice-content {
  text-align: center;
}

/* Small screens: let the toggle drop to its own centered row underneath
   the message instead of squeezing into the same row. */
@media (max-width: 511px) {
  .page-notices .notice-message {
    grid-template-columns: 1fr;
  }

  .page-notices .notice-toggle {
    justify-self: center;
    margin-top: 0.35rem;
  }
}

.page-notices .notice-message > span {
  display: inline;
}

.page-notices .notice .notice-title {
  display: inline;
  margin: 0 0.25rem 0 0;
}

.page-notices .notice .notice-description {
  display: inline;
  margin: 0 0.5rem 0 0;
}

.notice-info {
  background: #eff6ff;
  border-color: #2563eb !important;
}

/* Icon lives on .notice-content's own ::before now, so it sits inline right
   next to the title/message and centers together with them as one unit,
   instead of anchoring to the far-left edge of the whole bar. */
.notice-info .notice-content:before {
  content: "";
  background: url("/wp-content/themes/lmu2019/images/icons/icons8-thumbtack-64.png")
    no-repeat center / contain;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

.notice-advisory {
  background: #fef3c7;
  border-color: #d97706 !important;
}

.notice-advisory .notice-content:before {
  content: "";
  background: url("/wp-content/themes/lmu2019/images/icons/icons8-triangle-48.png")
    no-repeat center / contain;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

.notice-important {
  background: #ffedd5;
  border-color: #ea580c !important;
}

.notice-important .notice-content:before {
  content: "";
  background: url("/wp-content/themes/lmu2019/images/icons/icons8-important-50.png")
    no-repeat center / contain;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

.notice-urgent {
  background: #fee2e2;
  border-color: #dc2626 !important;
}

.notice-urgent .notice-content:before {
  content: "";
  background: url("/wp-content/themes/lmu2019/images/icons/icons8-siren-50.png")
    no-repeat center / contain;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

.collapsed-notices {
  display: none; /* jQuery slideDown/slideUp controls visibility */
}

/* The "View X More Notices" toggle sits in its own grid column, pinned to
   the right edge of the bar — not floating, not overlapping the nav, and
   not competing with the centered message for space. */
.notice-toggle,
.notice-toggle:active,
.notice-toggle:focus {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  justify-self: end;
}

.notice-toggle:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("/wp-content/themes/lmu2019/images/icons/icons8-down-64.png")
    no-repeat center / contain;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}

/* Flip arrow upward when expanded */
.page-notices.notices-expanded .notice-toggle:after {
  transform: rotate(180deg);
}

/* =========================================================
   Posts Grid Block
   Drives column count via CSS variables set inline on
   .posts-grid__grid by template-parts/blocks/posts_grid_block.php
   ========================================================= */
.posts-grid__grid {
  display: grid;
  /* Override .feed__grid flex defaults */
  flex-wrap: nowrap;
  justify-content: stretch;
  margin-top: 0;
  gap: 2rem;
  grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr));
}

@media (min-width: 32em) {
  .posts-grid__grid {
    grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .posts-grid__grid {
    grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
  }
}

/* Reset the flex-era widths/margins on items inside the grid */
.posts-grid__grid > .posts-grid__item.feed__item {
  width: 100%;
  margin-top: 0;
}

.posts-grid__link {
  /* display: block; */
  color: inherit;
  text-decoration: none;
  color: #ab0c2f;
}

.feed__title.posts-grid__title:hover {
  text-decoration-color: #000 !important;
  color: #000 !important;
  text-decoration: underline;
}

.posts-grid__title {
  margin-top: 1rem;
}

/* Placeholder for posts without a thumbnail — keeps grid items aligned */
.feed__image--placeholder {
  /* background: #f0f0f1;
  min-height: 8rem; */
}
.feed__image--square.feed__image--placeholder {
  min-height: 0; /* aspect-ratio handles it */
}

.posts-grid__empty {
  padding: 1rem;
  color: #555;
}

.splash-wrap .hero-sub-title {
  line-height: 1.75rem;
  font-size: 1.5rem;
}

.text-color-blue {
  color: #0076a5 !important;
}
.text-color-black {
  color: #000;
}

.posts-grid__link > .posts-grid__title {
  font-size: 20px;
}

@media (min-width: 64rem) {
  .by-the-numbers__no-padding {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Removes top margin of the h2 if it's the first child */
.two-column-content-block > h2:first-child {
  margin-top: 0;
}

.bio-container {
  margin-bottom: 4rem;
}

/* Bio block — float the image left so the description wraps around it
   (image-article style) instead of sitting in a rigid flex column. */
.bio-flex {
  /* Block flow + clearfix so the floated image is contained and the
     description can wrap around it. */
  display: block;
}
.bio-flex::after {
  content: "";
  display: table;
  clear: both;
}

/* Floated image column. Scales with the viewport and is capped so the
   description always keeps room to wrap instead of being cut off. */
.bio-split-left {
  float: left;
  width: 300px;
  max-width: 40%;
  margin: 0.5em 2em 0.5em 0;
}

/* Description stays in normal flow and wraps around the floated image. */
.bio-split-right > :first-child {
  margin-top: 0;
}

.bio-name {
  /* font-family: "Metric", sans-serif; */
  line-height: 1.2;
  margin: 0 0 20px;
  /* color: #000;
  font-size: 27px;
  line-height: 32px; */
  font-weight: 600;
}

.bio-title {
  color: #ab0c2f;
  margin-top: 0;
}

/* Square, responsive image inside the floated column. */
.bio-image-container,
.bio-image-container > figure.alignleft {
  width: 100%;
  margin: 0;
}
.entry-content .bio-image-container > figure.alignleft,
.bio-image-container > figure.alignleft {
  float: none; /* the .bio-split-left column does the floating now */
  aspect-ratio: 1 / 1;
}
.entry-content .bio-image,
.bio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
  box-sizing: border-box;
}

/* Narrow screens: stop floating and stack the image above the text. */
@media (max-width: 600px) {
  .bio-split-left {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 0 1.5em;
  }
}

@media (min-width: 80em) {
  .bio.main__container {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 80em) {
  .main__acf-card {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 48em) {
  /* .main__acf-card {
    padding-right: 0;
    padding-left: 0;
  } */
}

.acf__card-container {
  --cards-per-row: 3;
  display: grid;
  grid-template-columns: repeat(var(--cards-per-row), 1fr);
  gap: 2rem;
  margin: 6rem 0;
}

.acf__card {
  text-align: center;
  padding: 4rem;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.11),
    0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11),
    0 6px 8px rgba(0, 0, 0, 0.11),
    0 8px 16px rgba(0, 0, 0, 0.11);
}

/* Default template */
@media (max-width: 1275px) {
  .content > .acf__card-container {
    grid-template-columns: repeat(min(var(--cards-per-row), 2), 1fr);
  }
}

/* Below this width, cap at 2 per row regardless of the field's value. */
@media (max-width: 1085px) {
  .acf__card-container {
    grid-template-columns: repeat(min(var(--cards-per-row), 2), 1fr);
  }
}

/* On narrow screens, always stack to a single column. */
@media (max-width: 670px) {
  .acf__card-container,
  .content > .acf__card-container {
    grid-template-columns: 1fr;
  }
}

.acf__card .dashicons {
  /* Give the dashicon the same fixed 75x75 footprint as the image/url icons
     and center the glyph on both axes with flexbox. This avoids relying on
     text-align or the glyph's own font metrics (the dashicon is a block <div>
     whose ::before glyph otherwise anchors to the left), so every dashicon
     lands dead center like the image and URL icons. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  line-height: 1;
}

.acf__card .url-icon,
.acf__card .dashicons:before {
  color: #0076a5;
}

.acf__card .url-icon,
.acf__card .image-icon {
  width: 75px;
  height: 75px;
}

.acf__card .dashicons:before {
  font-size: 75px;
  line-height: 1;
  transform: translate(var(--dash-dx, 0px), var(--dash-dy, 0px));
}

.feed__grid--by-the-numbers .h2.text-black {
  border-bottom-color: transparent;
}

.feed__grid--by-the-numbers .h2.text-black:hover {
  border-bottom-color: #ab0c2f;
}

.feed__grid--by-the-numbers .h2:hover {
  border-bottom-color: transparent;
}

.nav__container {
  /* box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.32); */
}

/* Full viewport height, minus however far down the page this block
   actually starts — the sitewide/page notices bar when one is showing,
   and/or the padding reserved for the (always-solid, in-flow-looking but
   actually just padded-for) nav bar below the 64em breakpoint. Both are
   in normal document flow above the hero, so without this it would
   otherwise clip against a plain 100vh (its "Explore" scroll indicator,
   anchored to the bottom, would end up pushed below the fold).
   `--splash-hero-top-offset` is kept in sync with the hero's actual
   measured top position — including while the notice bar expands/
   collapses via the "View N More Notices" toggle, and across breakpoint
   changes — by inc/page-notices.php. When it's unset (script hasn't run
   yet, or JS is unavailable) the `0px` fallback below applies, so this is
   a plain 100vh in that case. */
:root {
  --splash-hero-top-offset: 0px;
}
.splash-hero-full-screen__acf {
  /* main.css's base `.splash` rule also sets `min-height: 100vh` at this
     breakpoint, and min-height always wins over a smaller `height` value —
     so that has to be overridden too, or it silently keeps the box pinned
     to a full 100vh no matter what `height` says. */
  height: calc(100vh - var(--splash-hero-top-offset, 0px)) !important;
  min-height: calc(100vh - var(--splash-hero-top-offset, 0px)) !important;
}

@media (max-width: 1023px) {
  /* Sizing for .splash-hero-full-screen__acf itself lives in the
     un-gated rule above — it already covers every breakpoint via the
     measured --splash-hero-top-offset, so it doesn't need a mobile-only
     duplicate here. */
}