/* Turn sidebar off */
body.full-width-content .content#genesis-content {
  float: none;
  width: 100%;
}

.site-container {
  overflow-x: hidden;
  animation: fadein 1s;
  word-wrap: break-word;
  /* padding-top: 0; */
}

.site-inner {
  clear: both;
  margin: 0 auto;
  padding: 20px 20px 0;
}

main.content {
  display: block;
}

.content#genesis-content {
  margin-top: 0;
}

.entry-title {
  font-size: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}

.wp-singular .entry-header > h1.entry-title {
  margin-top: 0;
}

.entry-header > h1.entry-title {
  color: #0076a5;
}

/* main.css has `header { position: relative; z-index: 3 }` which
   accidentally applies to this element (it matches any <header>).
   .header--collapsed is only z-index: 2, so the post title was
   painting on top of the fixed nav. Setting z-index: auto removes
   the stacking context so .entry-header paints in normal document
   order, safely below the collapsed header. */
header.entry-header,
.archive-description {
  z-index: auto;
}

.entry-header .entry-meta {
  margin-bottom: 20px;
}

.entry-categories a {
  text-transform: capitalize;
}

.entry-categories a,
.entry-tags a,
.entry-time {
  font-weight: 600;
  color: rgb(0, 0, 0);
  font-size: 15px;
}

.entry-time {
  text-transform: uppercase;
}

.entry-footer .entry-meta {
  padding-top: 20px;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 50px;
}
p.entry-meta {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 24px;
  margin-top: 0;
}

.entry-meta .entry-categories a,
.entry-meta .entry-tags a {
  color: #ab0c2f;
  font-weight: 600 !important;
}

.entry-categories,
.entry-tags {
  display: block;
  /* font-weight: 600; */
}

.entry-tags {
  line-height: 13px;
}

.entry-categories-tag,
.entry-tags-tag {
  text-transform: capitalize;
  font-weight: 600 !important;
}

.sidebar {
  font-size: 16px;
  line-height: 1.5;
}

.genesis-sidebar-title.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.widget:before {
  content: " ";
  display: table;
}

.textwidget {
  position: relative;
}

.searchandfilter h4 {
  margin: 0;
  padding: 5px 0 10px;
  color: #0076a5;
  font-size: 36px !important;
  font-weight: 600;
  line-height: 1.2;
}

figcaption,
.wp-element-caption {
  color: #0076a5;
  background-color: transparent;
  text-transform: initial;
  /* padding-left: 0; */
  font-size: 13px;
  font-weight: 600;
  padding: 15px 15px 15px 0;
  text-align: left;
  margin-bottom: 1em;
  margin-top: 0.5em;
}

.site-container.page .wp-block-image figure > .wp-element-caption {
  display: block;
}

/* .wp-block-group.is-inline-image {
  display: flow-root;
} */

figure:not(.alignleft, .alignright) {
  clear: both;
}

/* Pullquote */

/* `.wp-block-pullquote:after` below is an unscoped selector that needs
   `.wp-block-pullquote` itself to be the positioning context. The
   `position: relative` inside `.site-container .wp-block-pullquote` only
   matches on the single-post template (which has a `.site-container`
   wrapper). On Page templates, which have no `.site-container`, the
   pullquote stayed `position: static`, so `:after`'s `height: 100%`
   fell back to the nearest positioned ancestor -- `.main__container`,
   whose auto height is the full page's content height -- producing a
   large unwanted gray backdrop stretching far below the actual
   pullquote. Setting `position: relative` here unconditionally fixes
   that everywhere without changing anything on the single-post view
   (same value, already applied there). */
.wp-block-pullquote {
  position: relative;
}

.site-container .wp-block-pullquote {
  /* clear: both; */
  border: none;
  margin: 0 0 0 13px !important;
  padding: 0 0 28px !important;
  position: relative;
  /* font-size: 1.5em; */
  /* line-height: 1.6; */
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.wp-block-pullquote:after {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  content: " ";
  position: absolute;
  top: -70px;
  left: -20%;
  z-index: -1;
}

.wp-block-pullquote blockquote {
  border-left: 4px solid #0076a5;
  margin: 0;
  /* color: #0076a5 !important; */
  font-style: italic;
  font-size: 30px;
  line-height: 30px;
  padding: 0 13px;
  background: transparent;
  text-align: left;
}

.site-container .wp-block-pullquote p,
.site-container .wp-block-quote p {
  font-family: "Metric" !important;
  color: #0076a5;
  font-size: 30px !important;
  line-height: 30px !important;
  margin-bottom: 15px !important;
}

.sidebar .widget {
  margin-bottom: 40px;
}

.wp-singular .wp-block-image img {
  width: 100%;
}

@media (max-width: 959px) {
  .widget-wrap > p:first-of-type {
    margin-top: 0;
  }
}

@media only screen and (min-width: 960px) {
  .site-inner {
    max-width: 1260px;
  }

  .content#genesis-content {
    margin-bottom: 60px;
    float: left;
    width: 65%;
  }

  .entry-title {
    font-size: 50px;
  }

  .sidebar {
    float: right;
    width: 30%;
    padding-top: 70px;
  }

  .sidebar .widget {
    margin-bottom: 60px;
  }
}

@media only screen and (min-width: 426px) {
  .site-inner {
    padding: 20px 30px 0;
  }

  body.search .site-inner {
    padding: 20px 30px 0;
  }
}

/* =========================================================
   Single Post (blog article) editorial layout
   Newsroom-style: inline image wrapping.
   Scoped to body.single-post so pages are unaffected.
   Body type, font, and rhythm intentionally left to the
   theme's existing defaults — only image alignment behavior
   is adjusted here.
   ========================================================= */

/* Clearfix on the content container so floated images don't
   escape the article wrapper */
body.single-post .entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Each Group block establishes its own block formatting context
   so floated images inside an inline-image group don't leak into
   the next block. This lets editors stack multiple inline image+
   paragraph groups cleanly. */
body.single-post .entry-content .wp-block-group {
  display: flow-root;
}

/* ---------------------------------------------------------
   Inline image alignment
   ---------------------------------------------------------
   WordPress emits two HTML shapes for an aligned image,
   depending on whether the editor resized it:

   1) Plain:    <figure class="wp-block-image alignleft …">
   2) Resized:  <div class="wp-block-image">
                  <figure class="alignleft size-large is-resized">

   The float must apply in BOTH shapes. We target `.alignleft`
   / `.alignright` directly inside .entry-content so it
   matches the figure regardless of nesting, and we zero out
   the wrapping div's margin (when present) so collapse is
   tight.
   --------------------------------------------------------- */

/* Mobile first: stack inline images, no float */
body.single-post .entry-content .alignleft,
body.single-post .entry-content .alignright {
  float: none;
  display: block;
  margin: 1rem auto;
  max-width: 100%;
}
body.single-post .entry-content .alignleft img,
body.single-post .entry-content .alignright img {
  max-width: 100%;
  height: auto;
}

/* Tablet+ : float so paragraphs wrap around the image */
@media (min-width: 48em) {
  body.single-post .entry-content .alignleft {
    float: left;
    margin: 0.25rem 1.5rem 0.75rem 0;
    max-width: 50%;
  }
  body.single-post .entry-content .alignright {
    float: right;
    margin: 0.25rem 0 0.75rem 1.5rem;
    max-width: 50%;
  }
  /* When the figure is wrapped in <div class="wp-block-image">,
     collapse the wrapper so its margins don't push the next
     paragraph below the float. */
  body.single-post .entry-content .wp-block-image:has(> figure.alignleft),
  body.single-post .entry-content .wp-block-image:has(> figure.alignright) {
    margin: 0;
  }
}

/* Center-aligned image (no wrap) */
body.single-post .entry-content .aligncenter {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
}

/* Headings inside a post clear floats so they break the wrap
   cleanly when an editor wants to stop the image flow. */
/* body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  clear: both;
} */

/* Any non-text, non-image block that is a direct child of the post
   content must clear floats. This prevents sliders, galleries,
   embeds, ACF blocks, etc. from being pulled into the column beside
   a floated image when there isn't enough paragraph text to fill it.

   Excluded from clearing so their content wraps around floated images:
   - <p>               — plain paragraphs
   - <ul>, <ol>        — lists (e.g. from the Classic/WYSIWYG block)
   - <blockquote>      — quotes inside the Classic block
   - .wp-block-image   — the image wrapper itself
   - headings          — h1–h6 (cleared separately above)

   NOTE: the inline-image block patterns use a Group block wrapper
   (display:flow-root) so the float and all WYSIWYG content are
   contained within the group. This rule is a belt-and-suspenders
   fallback for Classic block content placed outside a group. */
body.single-post
  .entry-content
  > *:not(p):not(ul):not(ol):not(blockquote):not(.wp-block-image):not(h1):not(
    h2
  ):not(h3):not(h4):not(h5):not(h6) {
  clear: both;
}

/* =========================================================
   Archive / Search / Home – article card layout
   Matches production newsroom.lmu.edu list views:
   image fixed on left, text content on right with padding
   ========================================================= */

.home .entry,
.blog .entry,
.archive .entry,
.search-results .entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 0 50px;
}

.home .entry-image-link,
.blog .entry-image-link,
.archive .entry-image-link,
.search-results .entry-image-link {
  flex: 0 0 345px;
  display: block;
}

.home .entry-image-link img,
.blog .entry-image-link img,
.archive .entry-image-link img,
.search-results .entry-image-link img {
  width: 345px;
  height: 260px;
  object-fit: cover;
  display: block;
  /* vertical-align: top; */
  max-width: 100%;
}

.entry-image-link:hover {
  border-bottom-color: transparent;
}

.home .entry-content-wrapper,
.blog .entry-content-wrapper,
.archive .entry-content-wrapper,
.search-results .entry-content-wrapper {
  flex: 0 1 auto;
  padding: 0 0 0 60px;
}

.home .entry-title,
.blog .entry-title,
.archive .entry-title,
.search-results .entry-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 29px;
}

.home .entry-meta,
.blog .entry-meta,
.archive .entry-meta,
.search-results .entry-meta {
  display: none;
}

/* Posts without a featured image: content-wrapper takes full width */
.home .entry:not(:has(.entry-image-link)) .entry-content-wrapper,
.blog .entry:not(:has(.entry-image-link)) .entry-content-wrapper,
.archive .entry:not(:has(.entry-image-link)) .entry-content-wrapper,
.search-results .entry:not(:has(.entry-image-link)) .entry-content-wrapper {
  padding: 0;
}

.entry-title-link:hover {
  text-decoration: underline;
  border-bottom: none;
  color: #000;
}

.search-results #genesis-content > article {
  padding-top: 0 !important;
}

@media only screen and (min-width: 768px) {
  .archive .entry-image-link img {
    width: 345px;
    height: 260px;
    object-fit: cover;
  }

  .entry-content-wrapper {
    padding: 0 0 0 30px;
  }

  .home .entry-content-wrapper,
  .blog .entry-content-wrapper,
  .archive .entry-content-wrapper,
  .search .entry-content-wrapper {
    padding: 0px 0px 0px 30px;
  }
}

/* Responsive: stack on small screens */
@media (max-width: 767px) {
  .home .entry,
  .blog .entry,
  .archive .entry,
  .search-results .entry {
    flex-direction: column;
  }

  .home .entry-image-link,
  .blog .entry-image-link,
  .archive .entry-image-link,
  .search-results .entry-image-link {
    flex: none;
    width: 100%;
  }

  .home .entry-image-link img,
  .blog .entry-image-link img,
  .archive .entry-image-link img,
  .search-results .entry-image-link img {
    width: 100%;
    height: auto;
  }

  .home .entry-content-wrapper,
  .blog .entry-content-wrapper,
  .archive .entry-content-wrapper,
  .search-results .entry-content-wrapper {
    padding: 0 0 0;
  }
}

/* =========================================================
   Nav search overlay z-index fix.
   .search lives inside header { z-index: 3 }, which forms a
   stacking context. No matter how high .search's own z-index
   is, it's capped by the header's stacking context level.
   Fix: when search is open, elevate the entire header
   stacking context to 9999, and give .search a positive
   z-index so it isn't hidden behind header's own background.
   ========================================================= */
body.search-active header#audience-nav {
  z-index: 9999;
}

.search-active .search {
  z-index: 1;
  clip-path: inset(0px -50px -50px);
}

/* =========================================================
   WordPress search results page body-class collision fix.
   main.css has  .search { visibility:hidden; opacity:0;
   position:absolute; top:100%; z-index:-1; ... }  for the
   nav search overlay.  WordPress adds class="search ..." to
   <body> on search-results pages, so that rule accidentally
   applies to the body and hides the entire page.
   This override resets every conflicting property.
   ========================================================= */
/* Archive and Search Results page for Posts */

body.search {
  visibility: visible;
  opacity: 1;
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  height: auto;
  overflow-y: auto;
  box-shadow: none;
  background-color: transparent;
  margin-left: 0;
  width: 100%;
}

/* .archive .content-sidebar-wrap,
.home .content-sidebar-wrap {
  margin-top: 4rem;
} */

.after-entry,
.archive-description,
.author-box {
  margin-bottom: 40px !important;
}

h1.archive-title {
  color: #107fb8;
  font-size: 42px;
}

@media only screen and (min-width: 960px) {
  body.search .site-inner {
    max-width: 1260px;
  }

  /* Global (Relevanssi) search results have no sidebar/widget
     (see search.php, which now suppresses genesis-sidebar-primary
     on is_search()), so let the content column use the full width
     instead of the 65% reserved for a sidebar. Scoped to body.search
     only — home.php, archive.php, and single.php keep the 65% rule
     above since the Search and Filter widget still lives there. */
  body.search .content#genesis-content {
    width: 100%;
  }

  .archive-description {
    margin-bottom: 40px;
    margin-bottom: 60px !important;
  }

  .after-entry,
  .archive-description,
  .author-box,
  .comment-respond,
  .entry,
  .entry-comments,
  .entry-pings {
    margin-bottom: 60px;
  }

  h1.archive-title {
    font-family: "Metric";
    font-weight: 600;
    font-size: 50px;
    /* color: #000; */
  }
}

@media only screen and (min-width: 1280px) {
  .entry-content-wrapper {
    padding: 0 0 0 60px !important;
  }
}

.archive-description .entry-title,
.archive-title,
.author-box-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.after-entry,
.archive-description,
.author-box,
.comment-respond,
.entry,
.entry-comments,
.entry-pings {
  margin-bottom: 60px;
}

body.home article,
body.blog article,
body.archive article,
body.search article {
  display: flex;
}

@media (max-width: 768px) {
  body.home article,
  body.blog article,
  body.archive article,
  body.search article {
    flex-direction: column;
  }
}

body.home article,
body.blog article,
body.archive .hentry,
body.search .hentry {
  margin-bottom: 50px;
}

/* Search & Filter Search Widget */
.searchandfilter label {
  display: block;
  margin: 0;
  padding: 0;
}

.searchandfilter ul {
  display: block;
  margin-top: 0;
  margin-bottom: 0 !important;
  padding-left: 0;
}

.searchandfilter ul li {
  list-style: none;
  display: block;
  padding: 10px 0;
  margin: 0;
}

.searchandfilter input[name="ofsearch"] {
  background-color: #f3f3f3;
  border: 1px solid #cacac8;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px;
  width: 100%;
  text-transform: uppercase;
  line-height: 1.15;
}

.searchandfilter select[name="ofpost_tag"],
.searchandfilter select[name="ofdepartment"],
.searchandfilter select[name="ofcategory"] {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 10.5px 2px;
  font-weight: 600;
  color: #333;
  font-size: 15px;
  width: 100%;
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.searchandfilter input[type="submit"] {
  background-color: #ab0c2f;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: normal;
  width: fit-content;
  height: 40px;
  text-align: center;
  padding: 0 30px;
}

.wp-singular .entry-content p,
.search .entry-content p,
.archive .entry-content p {
  font-size: 20px;
  line-height: 23px;
  margin: 0 0 28px;
}

.archive .entry-content p:last-child {
  margin-bottom: 0px;
}

.widget-wrap > p:first-of-type {
  margin-top: 1.5rem;
}

/* Search & Filter — Reset All Filters button */
.sf-reset-btn {
  display: block;
  padding-top: 10px;
  /* padding: 0; */
  color: #ab0c2f;
  /* font-weight: 400; */
  cursor: pointer;
}
.sf-reset-btn:hover {
  text-decoration: underline;
}

/* =========================================================
   Post Slider (acf/post-slider) — Flickity-powered
   ========================================================= */

.post-slider-wrap {
  width: 100%;
  margin: 30px 0;
  margin: 1rem 0 4rem;
}

/* Flickity container */
.post-slider {
  width: 100%;
  outline: none;
  position: relative;
}

/* Each slide — fixed-height flex container so portrait images fill
   the height naturally and landscape images fill the width. A dark
   background shows in the pillarbox/letterbox area when the image
   doesn't cover the full container. */
.post-slide__item {
  position: relative;
  width: 100%;
  height: 540px;
  background: #fff;
  overflow: hidden;
}

/* Centre the image with absolute positioning so the caption's
   bottom: 0 is always anchored to the container, never shifted
   by flex alignment at any viewport width. */
.post-slide__item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  /* --Align the image to the bottom of the slide ⬇️-- */
  /* position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto; */
}

/* Caption overlay — bottom-left, matches Jetpack style */
.post-slide__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

/* Flickity arrow buttons — custom icons (mirrors LMU newsroom slider).
   Every selector here is scoped to `.post-slider` so the landing
   slider (.landing-slider) and caterpillar slider (.slider) keep
   their default Flickity arrow rendering, untouched. */
.post-slider .flickity-button {
  background-color: #fff;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  width: 28px;
  height: 30px;
  margin: -14px 0 0;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.5s ease-out;
}

.post-slider .flickity-button:hover {
  opacity: 1;
}

/* Hide Flickity's auto-drawn SVG arrow on this slider only —
   we use custom SVG background-images instead. The default
   .flickity-button-icon on other sliders is unaffected because
   this selector is namespaced under `.post-slider`. */
.post-slider .flickity-button-icon {
  display: none;
}

/* Direction-specific icons */
.post-slider .flickity-prev-next-button.previous {
  background-image: url("../images/icons/post-slider-prev.svg");
}
.post-slider .flickity-prev-next-button.next {
  background-image: url("../images/icons/post-slider-next.svg");
}

@media (max-width: 599px) {
  .post-slider .flickity-prev-next-button.previous,
  .post-slider .flickity-prev-next-button.next {
    display: none;
  }
}

/* Dot navigation */
.post-slider .flickity-page-dots {
  /* bottom: 12px; */
  text-align: left;
  /* padding-left: 16px; */
  position: absolute;
  bottom: -35px;
  /* left: -548px; */
}

.post-slider .flickity-page-dots > li:first-child {
  margin-left: 0;
}

.post-slider .flickity-page-dots .dot {
  /* width: 10px;
  height: 10px; */
  margin: 0 4px;
  /* background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  background: currentColor; */
  background-color: #000;
  height: 8px;
  opacity: 0.5;
  transform: scale(0.75);
  transition:
    opacity 0.25s,
    transform 0.25s;
  vertical-align: top;
  width: 8px;
}

.post-slider .flickity-page-dots .dot.is-selected {
  /* background: #fff; */
  transform: scale(1);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .post-slide__item {
    height: 280px;
    /* img inherits the shorter container via max-height: 100% */
  }
}

/* =========================================================
   Author Bio Box — single post
   Only renders when the author has biographical info set.
   ========================================================= */
.lmu-author-bio {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #f5f5f5;
  padding: 24px;
  margin-top: 40px;
  border-top: 3px solid #ab0c2f;
}

.lmu-author-bio__photo {
  flex-shrink: 0;
}

.lmu-author-bio__avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.lmu-author-bio__info {
  flex: 1;
  min-width: 0;
}

.lmu-author-bio__name {
  color: #ab0c2f !important;
  font-weight: 700;
  font-size: 18px !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}

.lmu-author-bio__title {
  color: #888b8d !important;
  font-size: 15px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 480px) {
  .lmu-author-bio {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* =========================================================
   Post content — custom unordered list bullets
   Scoped to .entry-content so nav menus, sidebars, and
   widget lists are completely unaffected.
   ========================================================= */

/* Remove the browser default disc bullet and left padding so
   we can paint our own marker via ::before.

   display:flow-root establishes a new block formatting context on the
   <ul> itself. Per spec, a BFC box must not overlap any float in the
   same outer BFC — so in the inline-image patterns the entire list box
   is pushed beside the floated image rather than starting at the
   container's left edge. This makes position:absolute on li::before
   work correctly: the li's box starts at the same x-position as the
   visible text, so left:-1.25em puts the bullet just to the left of
   the text rather than behind the image.
   In non-float contexts display:flow-root behaves identically to
   display:block, so regular post content is unaffected. */
.entry-content ul {
  list-style: none;
  padding-left: 1.4em;
  margin-bottom: 1.25em;
  display: flow-root;
}

/* Each list item gets a small crimson square as its bullet.
   `left: -1.25em` pulls it back to the indent created on the <ul>
   above, keeping text aligned with regular paragraphs. */
.entry-content ul:not(.alert-box-block *) > li {
  position: relative;
  padding-left: 0.1em;
  margin-bottom: 0.55em;
  line-height: 1.6;
}

.entry-content ul:not(.alert-box-block *) > li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #ab0c2f;
  border-radius: 1px; /* very slight rounding — still reads as a square */
  position: absolute;
  left: -1.25em;
  top: 0.52em; /* vertically centres the square against the cap-height */
}

/* Nested lists inherit the same style without doubling indents */
.entry-content ul ul {
  margin-top: 0.4em;
  margin-bottom: 0;
  padding-left: 1.4em;
}

/* =========================================================
   Post content — polished image treatment
   Scoped tightly to .entry-content so images in the sidebar,
   header, navigation, and author bio box are never affected.
   ========================================================= */
.entry-content img {
  max-width: 100%;
  height: auto;
  /* border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); */
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Preserve existing float/alignment behaviour — only add the
   polish rules, never override layout properties set above. */
.entry-content .alignleft img,
.entry-content .alignright img,
.entry-content .aligncenter img,
.entry-content .wp-block-image img {
  /* border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); */
}

/* Icons, logos, and decorative sprites inside post content
   (e.g. smilies, inline SVG img tags) should stay unstyled. */
.entry-content img.emoji,
.entry-content img.wp-smiley {
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================================
   Single post footer — category & tag pill badges
   Scoped to body.single-post so archive/search/home views
   are completely unaffected.
   ========================================================= */

/* Label stacked above pills */
body.single-post .entry-footer .entry-tags,
body.single-post .entry-footer .entry-categories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #888b8d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pill cluster — inline-flex so the pills sit on the same
   axis as the label and wrap naturally on narrow viewports */
body.single-post .entry-footer .entry-tags-tag,
body.single-post .entry-footer .entry-categories-tag {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

/* WordPress outputs get_the_category_list() as <ul class="post-categories">.
   Strip all list chrome and make it a flex pill row. */
body.single-post .entry-footer .post-categories {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.single-post .entry-footer .post-categories li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Category pills — LMU Crimson */
body.single-post .entry-footer .entry-categories-tag a,
body.single-post .entry-footer .post-categories li a {
  display: inline-flex;
  align-items: center;
  background-color: #ab0c2f;
  color: #fff !important;
  font-size: 16px;
  line-height: 1;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 20px;
  padding: 5px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}

body.single-post .entry-footer .entry-categories-tag a:hover,
body.single-post .entry-footer .post-categories li a:hover {
  background-color: #870a25;
  color: #fff !important;
  text-decoration: none;
}

/* Tag pills — LMU Blue */
body.single-post .entry-footer .entry-tags-tag a {
  display: inline-flex;
  align-items: center;
  background-color: #0076a5;
  color: #fff !important;
  font-size: 16px;
  line-height: 1;
  font-weight: 600 !important;
  text-transform: none;
  border-radius: 20px;
  padding: 5px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}

body.single-post .entry-footer .entry-tags-tag a:hover {
  background-color: #005a7e;
  color: #fff !important;
  text-decoration: none;
}

/* @media (min-width: 48em) { */
body.single-post .entry-content .bio-image-container > figure.alignleft {
  max-width: 100%;
  margin: 0;
}
/* } */

.entry-content .bio-image-container > figure.alignleft > img {
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
  height: 100%;
}