:root {
  --caza-pink: #ec117c; /* caza pink*/
  --caza-light-gray: #d9d3d3;
  --caza-dark-gray: #605c5c;
  --zoom-scale: 1.03;
  --bg: #fafafa;
  --fg: var(--bs-dark); /*#111111;*/
  --header-h: 112px;

  --smartbar-logo-h: 96px; /* logo height when visible */
  --smartbar-padY-big: 14px; /* bar padding when logo visible */
  --smartbar-padY-small: 6px; /* bar padding in title mode */

  --smartbar-bg: rgba(66, 62, 54, 0.8);
}

.pt-header {
  padding-top: calc(var(--header-h) + 64px);
} /* + a little breathing room */

[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
} /* anchor links won’t hide under header */

.theme-dark {
  --bg: var(--bs-dark); /* your dark background #0b0b0b; */
  --fg: #f2f2f2; /* your light text */
}

/* Apply tokens */
html,
body {
  background: var(--bg);
  color: var(--fg);
  scroll-behavior: smooth;
}

/* Respect reduced motion; otherwise enhance the transition */
@media (prefers-reduced-motion: no-preference) {
  /* Cross-document View Transitions fade:
     - root is the whole page
     - increase duration a bit for a nicer crossfade */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
  }

  /* Optional: ease and slight scale for polish */
  ::view-transition-old(root) {
    animation-timing-function: ease-out;
  }
  ::view-transition-new(root) {
    animation-timing-function: ease-in;
  }
}

body {
  font-family: "Barlow", sans-serif; /* Add fallbacks as needed */
  font-size: 18px;
}
.caza-pink {
  color: var(--caza-pink) !important;
}
.caza-light-gray {
  color: var(--caza-light-gray) !important;
}
.caza-dark-gray {
  color: var(--caza-dark-gray) !important;
}

.border-pink {
  border-color: var(--caza-pink) !important;
}

.border-black {
  border-color: black !important;
}

.featured-project .cat-name {
  border-color: var(--caza-pink) !important;
}

a.view-project-btn {
  text-decoration: none;
}

.featured-thumb .featured-title a {
  text-decoration: none;
  color: #000;
}

.field-note > img {
  width: 100%;
  height: 70vh;
}

.field-item a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
}

/* #wpGalleryCarousel .carousel-caption { position: static; margin-top:.5rem; padding:0 .75rem; }*/
.carousel-caption.d-none {
  display: block !important;
} /* if you had d-none d-md-block */
/* #wpGalleryCarousel .carousel-caption p { margin:0; } */

.carousel-caption {
  position: unset;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 0;
  padding-bottom: 0;
  color: #000;
  text-align: left;
}

/* two-line headline; never grows, never shrinks */
.headline-2l {
  line-height: 1.25; /* your rhythm */
  min-block-size: calc(2lh); /* always at least 2 lines tall */
  max-block-size: calc(2lh); /* and never taller than 2 lines */
  overflow: hidden; /* extra text won't push layout */
  display: -webkit-box; /* clamp for WebKit/Blink */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* single-line title; long titles truncate instead of wrapping and growing the card */
.title-1l {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* project card thumbnail: fixed ratio regardless of source image proportions or media-library crop settings */
.card-thumb {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* single-line meta rows (Research/Location/Size); long values truncate instead of wrapping */
.meta-1l {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PROJECT Filters -----------------------------------------------

wpc-filters-main-wrap

*/
#calendarSort:hover,
#alphaSort:hover {
  cursor: pointer;
}
.wpc-edit-filter-set {
  display: none;
}
.work-filter__terms .widget_wpc_filters_widget {
  margin-bottom: 0;
}
.work-filter__terms .wpc-filters-widget-wrapper {
  display: flex;
}
.work-filter__terms .wpc-filters-section {
  width: 25%;
  margin-right: 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.work-filter__terms .wpc-filter-content .wpc-filters-widget-select {
  margin-bottom: 0;
}
.work-filter__terms .wpc-filter-content {
  width: 100%;
}
.filter-active {
  color: red;
}

/* PROJECT Filters -----------------------------------------------

----- */

/* navbar */
.navbar-toggler {
  border: none;
  border-radius: 0;
}

.navbar-toggler .custom-toggler-icon {
  color: #fafafa; /* Adjust color as needed */
  font-size: 1.5em; /* Adjust size as needed */
}
.navbar-toggler .search-icon {
  color: #fafafa; /* Adjust color as needed */
  font-size: 1.5rem; /* Adjust size as needed */
}

.offcanvas-header .btn-search .search-icon {
  color: #666; /* Adjust color as needed */
  font-size: 1.5rem; /* Adjust size as needed */
}

.offcanvas-header .btn-search {
  border: none;
  background: none;
  line-height: 1;
  padding: 0;
}

.offcanvas-header .btn-close {
  color: var(--caza-dark-gray); /* Adjust color as needed */
  font-size: 1.25rem; /* Adjust size as needed */
}

.offcanvas-header .btn-close:hover,
.offcanvas-header .btn-search a:hover {
  color: var(--caza-pink);
}

.offcanvas-header .offcanvas-title a {
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--caza-dark-gray);
}

.offcanvas-body .surba {
  font-size: 1.2rem;
}

.offcanvas-body .surba a {
  text-decoration: none;
  font-size: 1.2rem;
}

.menu-main-menu-container ul {
  padding: 0.75rem;
  margin-bottom: 0.5em;
}

.menu-main-menu-container ul li a {
  text-decoration: none;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--caza-dark-gray);
}

.menu-main-menu-container ul li a:hover {
  text-decoration: none;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--caza-pink);
}

.main-menu-footer-link a:hover {
  color: var(--caza-pink) !important;
}

/* footer */
.footer-1 figure {
  margin: 0 !important;
}

.footer-menu .footer-nav {
  padding-left: 0;
  padding-top: 0;
}

.footer-nav {
  /* display: flex;
  flex-wrap: wrap; */
  gap: 0.5rem 1rem; /* row x column gap */
  /* margin: 0.75rem 0 0; */
  padding: 0;
}
.footer-nav > li {
  list-style: none;
}

.footer-nav a {
  text-decoration: none;
  color: var(--caza-light-gray);
  font-size: 1.25rem;
  line-height: 1.6;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--caza-pink);
  text-decoration: none;
}

/* Optional: highlight current page/category in footer menu */
.footer-nav .current-menu-item > a,
.footer-nav .current_page_item > a {
  color: var(--caza-light-gray);
  text-decoration: none;
}

.footer-menu h5 {
  font-size: 1rem;
}
.copyright {
  font-size: 1rem;
  color: var(--caza-dark-gray);
}

.copyright a {
  text-decoration: none;
}

/* smartbar */

/* Base bar */
.navbar.smartbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: transparent;
  padding-block: var(--smartbar-padY-big);
  transition: transform 0.28s ease, opacity 0.2s ease, padding 0.2s ease;
}
.navbar.smartbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: cursor;
  transition: opacity 0.2s ease;
}
.navbar.smartbar .container-fluid {
  position: relative;
  z-index: 1;
}

/* Slide away on scroll down (your JS toggles .bar-hidden) */
.navbar.smartbar.bar-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Brand overlap */
.navbar-brand {
  margin: 0;
  padding: 0;
} /* kill Bootstrap’s extra space */
.brand-slot {
  display: grid;
  place-items: start;
  line-height: 1;
}
.brand-slot > .brand-title,
.brand-slot > .brand-logo {
  grid-area: 1 / 1;
}

/* Animate visibility + height of logo */
.brand-logo {
  overflow: hidden;
  max-height: var(--smartbar-logo-h);
  transition: opacity 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
}
.brand-logo .custom-logo {
  display: block;
  height: var(--smartbar-logo-h);
  width: auto;
}

/* Default (top): show logo, hide title */
.navbar.smartbar .brand-logo {
  opacity: 1;
  visibility: visible;
}
.navbar.smartbar .brand-title {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Title mode: shrink bar + collapse logo height */
.navbar.smartbar.is-title {
  padding-block: var(--smartbar-padY-small);
}
.navbar.smartbar.is-title .brand-logo {
  opacity: 0;
  visibility: hidden;
  max-height: 0; /* collapses height */
}
.navbar.smartbar.is-title .brand-title {
  opacity: 1;
  visibility: visible;
}

/* .navbar.smartbar.is-title .navbar-brand {
  margin-top: 0 !important;
} */

/* end smartbar */

/* Base “icon button” shape */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Hover is subtle */
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Remove the default black box on focus, replace with your own */
.icon-btn:focus {
  outline: none;
}

/* Show a nice ring for keyboard users */
.icon-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--caza-pink, #ff2a7f) 45%, transparent);
}

/* Fallback for older browsers without :focus-visible */
@supports not selector(:focus-visible) {
  .icon-btn:focus {
    outline: 3px solid var(--caza-pink, #ff2a7f);
    outline-offset: 2px;
  }
}

/* Suppress focus styles when focus wasn't keyboard-triggered */
.navbar a:focus:not(:focus-visible),
.navbar button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Softer focus ring for nav links */
.navbar .nav-link:focus {
  outline: none;
}
.navbar .nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 0.5rem;
}

/* Toggler (hamburger) focus ring */
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Or nuke Bootstrap's toggler ring and rely on your .icon-btn rules */
.navbar .navbar-toggler:focus {
  box-shadow: none;
}

/* Optional: fade-on-load utility for images */
.fade-onload {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-onload.is-loaded {
  opacity: 1;
}

/* ---------------------------------------------------------------------- 
FRONT HERO IMAGE CAROUSEL
------------------------------------------------------------------------- */

/* --- Full-viewport slides on ALL breakpoints --- */
.front-carousel,
.front-carousel .carousel-inner,
.front-carousel .carousel-item {
  /* order matters: fallback first, best last */
  min-height: calc(var(--vh, 1vh) * 100); /* JS-stabilized mobile Safari */
  min-height: 100svh; /* small viewport unit (iOS 16+) */
  min-height: 100lvh; /* large viewport: stable, no resize on mobile chrome show/hide */
}

/* Keep carousel layout sane */
.front-carousel {
  width: 100%;
  overflow: hidden;
}
.front-carousel .carousel-item {
  position: relative;
  display: grid;
  place-items: center;
}

/* --- Make the media fill the slide --- */
.front-carousel .carousel-item picture,
.front-carousel .carousel-item picture > img,
.front-carousel .carousel-item img.carousel-img-vert {
  display: block;
  width: 100vw; /* span full viewport width */
  height: calc(var(--vh, 1vh) * 100); /* stabilized full height */
  height: 100svh;
  height: 100lvh; /* large viewport: stable, no resize on mobile chrome show/hide */
  max-height: none;
  object-fit: cover; /* fill + crop */
  object-position: center center;
  z-index: 1;
}

/* Caption overlay (unchanged) */
.front-carousel .caption-safe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem clamp(1rem, 4vw, 2rem) calc(1rem + env(safe-area-inset-bottom));
  margin: 0;
  text-align: left;
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  .front-carousel .caption-safe {
    padding-bottom: 1.25rem;
  }
}

/* Optional variant: show entire image (no crop) */
.front-carousel--contain .carousel-item picture > img,
.front-carousel--contain .carousel-item .carousel-img-vert {
  object-fit: contain !important;
  background: #000;
}

/* ---------------------------------------------------------------------- */
/* FEATURED CONTENT - CAROUSELS
   -------------------------------------------------- */

/* Make indicators visible and move them under the carousel content */
.carousel .carousel-indicators {
  position: static; /* instead of absolute at bottom */
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

/* Style the dots so you can clearly see them */
.carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff4f9a; /* your pink or accent */
  opacity: 0.4;
  border: none;
}

.carousel .carousel-indicators .active {
  opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* HERO - IMAGES
   -------------------------------------------------- */

/* Container: no fixed height by default (so mobile can size naturally) */
.hero-vh {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Remove Bootstrap horizontal gutters so the hero is truly edge-to-edge */
.hero-vh .row {
  --bs-gutter-x: 0;
}

/* Image (mobile-first): full width, natural height */
.hero-vh__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ≥ sm: make the hero fill the viewport and crop the image nicely */
@media (min-width: 576px) {
  .hero-vh {
    min-height: 100svh; /* safer than 100vh on mobile browsers */
  }
  .hero-vh__img {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Stable hero height, never shrinks/expands on scroll */
.front-hero {
  min-height: 100vh; /* fallback */
}

@supports (height: 100svh) {
  .front-hero {
    min-height: 100svh;
  } /* improves older mobile Safari */
}

@supports (height: 100lvh) {
  .front-hero {
    min-height: 100lvh;
  } /* stable: no jump on scroll */
}

/* Make the carousel and images fill the hero */
.front-hero .carousel,
.front-hero .carousel-inner,
.front-hero .carousel-item {
  height: 100%;
}

.front-hero .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FADE ON LOAD
   -------------------------------------------------- */

/* Default: visible, but ready to animate */
.fade-onload {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Only fade if JS is running (toggle .js on <html>) */
.js .fade-onload {
  opacity: 0;
}
.js .fade-onload.is-loaded {
  opacity: 1;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-onload {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .hero-vh,
  .mission {
    margin-top: 128px;
  } /* or padding-top */
}

/* ---------------------------------------------------------------------- */

.caza-btn-primary {
  background-color: var(--bs-white);
}

/* .caza-btn-primary:visited {
  color: var(--bs-white);
} */

.caza-btn-primary:hover {
  color: var(--caza-pink) !important;
  background-color: var(--caza-gray) !important;
  text-decoration: none;
}

.caza-btn-dark {
  background-color: var(--bs-dark);
  color: var(--bs-white);
}

.caza-btn-dark:hover {
  color: var(--caza-pink) !important;
  background-color: var(--bs-dark) !important;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  a .thumb img {
    transition: transform 0.25s ease;
  }
}

/* Subtle image zoom only when the link is interacted */
.field-item:has(.stretched-link:hover) a .thumb img,
.field-item:has(.stretched-link:focus-visible) a .thumb img {
  transform: scale(var(--zoom-scale));
}

/* Fill the visible viewport; dvh handles mobile browser chrome */
.main-vh {
  min-height: 100vh;
  min-height: 100dvh; /* override when supported */
}

/* If you have a fixed header (your .smartbar), subtract it */
.smartbar {
  --smartbar-h: 72px;
} /* set your real header height */
.main-vh {
  min-height: calc(100dvh - var(--smartbar-h));
}

/* Optional: sticky footer layout (whole page fills viewport) */
.site {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.site > main {
  flex: 1 0 auto;
} /* main expands to fill */

/* Center the search form vertically on the landing/no-results view */
.search-landing {
  min-height: calc(100dvh - var(--smartbar-h, 0px)); /* fill visible viewport */
  display: grid;
  align-content: center; /* vertical centering */
}

.search-form {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 99px !important;
  border-bottom-left-radius: 99px !important;
  padding-left: 1rem !important;
}

.search-button {
  border-top-right-radius: 99px !important;
  border-bottom-right-radius: 99px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-right: 1rem !important;
  color: white;
  background-color: var(--caza-dark-gray);
}

.search-button:hover {
  background-color: var(--caza-pink);
}

/* optional: also center horizontally on small screens */
@media (max-width: 576px) {
  .search-landing {
    justify-items: stretch;
  } /* keep form full-width */
}

/* QUIZ */
#start.fade,
#quiz.fade,
#results.fade,
.question.fade,
.msg.fade {
  transition: opacity 0.6s ease-in-out;
}

#quiz.stack {
  position: relative;
}

#quiz.stack .question {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
}

#quiz.position-relative .question {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#start button {
  color: white;
  border-color: var(--caza-dark-gray);
  background-color: var(--caza-dark-gray);
}

#start button:hover {
  color: white;
  background-color: var(--caza-pink);
}

.wp-block-button__link {
  color: #fff;
  background-color: #32373c;
  border-radius: 9999px;
  box-shadow: none;
  text-decoration: none;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-size: 1.125em;
}

.wp-block-buttons .wp-block-button__link:hover {
  color: var(--caza-pink);
}

.load-more-wrap a {
  padding: 1.25rem;
  text-decoration: none;
  color: var(--caza-dark-gray);
}

.load-more-wrap a:hover {
  color: var(--caza-dark-pink);
}

.load-more-wrap {
  display: none; /* keep markup for JS & no-JS fallback if needed */
}

#load-more-sentinel {
  height: 1px;
}

/* Make the inner container behave like a vertical flex stage 
.cover-fill > .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  min-height: inherit; 
}*/

/* Push the Buttons group to the bottom of the stage 
.cover-fill > .wp-block-cover__inner-container > .wp-block-buttons {
  margin-top: auto;
} */

.mailerlite-form-title h3 {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.mailerlite-form,
.mailerlite-form * {
  font-family: "Barlow", sans-serif;
  color: var(--caza-light-gray);
}
.mailerlite-form .mailerlite-subscribe-button-container {
  float: left;
  text-align: left !important;
}

.mailerlite-form .mailerlite-form-field {
  margin-bottom: 0.25rem;
}

.mailerlite-form-field input {
  width: 100%;
  border-radius: 1.5rem;
  background-color: var(--bs-dark);
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-style: solid !important;
  color: var(--caza-light-gray) !important;
}

.mailerlite-form-field input:-webkit-autofill,
.mailerlite-form-field input:-webkit-autofill:hover,
.mailerlite-form-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--caza-light-gray) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bs-dark) inset !important;
  box-shadow: 0 0 0px 1000px var(--bs-dark) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.mailerlite-form-inputs {
  padding-right: 5rem;
}

.mailerlite-subscribe-button-container button {
  border-radius: 1.5rem;
  padding: 0.7rem;
  background-color: var(--caza-dark-gray);
  color: white; /*var(--caza-dark-gray);*/
  border-style: solid !important;
}

.mailerlite-subscribe-button-container button:hover {
  background-color: var(--caza-pink);
}

.caza-aside {
  margin-top: 2rem;
}

.caza-aside a {
  color: var(--caza-pink);
  text-decoration: underline;
  text-underline-offset: 5px; /* Adjust this value as needed */
}

.wp-block-group {
  margin-top: 2rem;
}

/* Make a Gutenberg Group behave like a Bootstrap .row */
.wp-block-group.row-like {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  /* Bootstrap row negative gutters */
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);

  /* Kill Gutenberg block gap */
  --wp--style--block-gap: 0 !important;
  gap: 0 !important;
}

/* Make immediate children act like .col-* (gutter padding) */
.wp-block-group.row-like > * {
  box-sizing: border-box;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  flex: 0 0 auto; /* let Bootstrap .col-* set width */
  min-width: 0;
}

/* Optional: if WP adds width constraints to group contents, relax them */
.wp-block-group.is-layout-flex.row-like {
  align-items: stretch;
}

/* Start hidden; Bootstrap's .fade + .show will handle the transition */
#backToTop {
  z-index: 1030; /* above content/navs */
  opacity: 0; /* .fade baseline */
  pointer-events: none; /* ignore clicks while hidden */
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btn-circle {
  width: 50px; /* Set equal width and height */
  height: 50px;
  padding: 0; /* Remove default padding for better control */
  border-radius: 50%; /* Makes the element circular */
  display: inline-flex; /* Use flexbox for easy centering of content */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
}
#backToTop:hover {
  color: var(--caza-pink);
}

/* Optional: give a little extra clearance on devices with a safe area */
@supports (padding: max(0px)) {
  #backToTop {
    margin-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Reveal base */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

/* Visible state */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Optional directions */
[data-reveal="left"] {
  transform: translateX(-16px);
}
[data-reveal="right"] {
  transform: translateX(16px);
}
[data-reveal="up"] {
  transform: translateY(16px);
}
[data-reveal="down"] {
  transform: translateY(-16px);
}

/* Optional stagger helper (use data-reveal-delay) */

/* Ensure breadcrumb container is flex + vertically aligned */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Each item is flex-aligned and allowed to shrink */
.breadcrumb-item {
  display: flex;
  align-items: center;
  min-width: 0; /* IMPORTANT for ellipsis in flex layouts */
}

/* Pipe delimiter */
.breadcrumb-item + .breadcrumb-item::before {
  content: "|";
  padding: 0 0.75rem;
  color: var(--caza-light-gray);
  display: inline-flex;
  align-items: center;
}

/* White text everywhere */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item span {
  color: var(--caza-light-gray);
  cursor: pointer;
}

/* Keep visited links white */
.breadcrumb-item a:link,
.breadcrumb-item a:visited {
  color: var(--caza-light-gray);
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--caza-light-gray);
  text-decoration: underline;
}

/* Bold current item */
.breadcrumb-item.active,
.breadcrumb-item.active span,
.breadcrumb-item.active a {
  color: #ffffff;
  cursor: pointer;
}

/* 🔥 Ellipsis on the actual text span */
#crumbs [itemprop="name"] {
  display: inline-block;
  max-width: 250px; /* tweak to taste */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.gtranslate_wrapper a {
  color: var(--caza-dark-gray);
}

.gtranslate_wrapper a:hover,
.gtranslate_wrapper .gt-current-lang {
  color: var(--caza-pink);
}

/* ==========================
   FILTER EVERYTHING – LAYOUT
   ========================== */

/* Turn the inner wrapper into a 4-column responsive row */
.work-filter__terms .widget_wpc_filters_widget .wpc-filters-widget-wrapper {
  display: flex;
  flex-wrap: wrap;
  /* gap: 1rem; space between dropdowns */
  /* margin-right: 1rem; */
  row-gap: 1rem;
}

/* Each filter block = flex item */
.work-filter__terms .widget_wpc_filters_widget .wpc-filters-section {
  flex: 1 1 calc(25% - 1rem); /* 4 columns on desktop */
  min-width: 120px; /* prevents the dropdown from becoming too tiny */
  margin-right: 1rem;
}

/* 2 columns on tablets */
@media (max-width: 991.98px) {
  .work-filter__terms .widget_wpc_filters_widget .wpc-filters-section {
    flex: 1 1 calc(50% - 1rem);
  }
}

/* Full width on mobile */
@media (max-width: 575.98px) {
  .work-filter__terms .widget_wpc_filters_widget .wpc-filters-section {
    flex: 1 1 100%;
    margin-right: 0;
  }
}

/* Optional: remove extra vertical gaps the plugin may add */
.work-filter__terms
  .widget_wpc_filters_widget
  .wpc-filters-section
  + .wpc-filters-section {
  margin-top: 0;
}

/* Make filter selects look like Bootstrap form-select */
.work-filter__terms
  .widget_wpc_filters_widget
  select.wpc-filters-widget-select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.475rem 2.25rem 0.475rem 0.75rem;
  font-family: "Barlow", sans-serif; /* Add fallbacks as needed */

  font-size: 1rem;
  line-height: 1.5;
  color: var(--caza-dark-gray);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--caza-dark-gray);
  border-radius: 1.5rem; /* <- adjust for more/less round */
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.work-filter__terms
  .widget_wpc_filters_widget
  select.wpc-filters-widget-select:hover {
  color: var(--caza-pink) !important;
}

/* Optional: subtle label or header tweaks, if you ever use titles */
.work-filter__terms .widget_wpc_filters_widget .wpc-filter-header,
.work-filter__terms .widget_wpc_filters_widget .wpc-filter-title {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

/* Filters “hamburger” button container – align with Bootstrap buttons */
.work-filter__terms .wpc-filters-open-button-container {
  margin-bottom: 0.75rem;
}

/* Make the Filters toggle look like a Bootstrap button */
.work-filter__terms .wpc-open-close-filters-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #ced4da;
  font-size: 0.875rem;
  text-decoration: none;
}

/* Apply / Cancel row at the bottom of the widget */
.work-filter__terms .wpc-filters-widget-controls-container {
  margin-top: 0.75rem;
}

.work-filter__terms .wpc-filters-widget-controls-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Make “Show (81)” and “Cancel” look like buttons */
.work-filter__terms .wpc-filters-apply-button,
.work-filter__terms .wpc-filters-close-button {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
}

/* Primary action */
.work-filter__terms .wpc-filters-apply-button {
  background-color: #000;
  color: #fff;
}

/* Secondary action */
.work-filter__terms .wpc-filters-close-button {
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #dee2e6;
}

/* Base: make the controls row flex */
.work-filter__terms
  .widget_wpc_filters_widget
  .wpc-filters-widget-controls-wrapper {
  display: flex;
  gap: 0.75rem;
}

/* Each item can grow */
.work-filter__terms
  .widget_wpc_filters_widget
  .wpc-filters-widget-controls-item {
  flex: 1 1 auto;
}

/* Make the links fill their flex items */
.work-filter__terms .widget_wpc_filters_widget .wpc-filters-apply-button,
.work-filter__terms .widget_wpc_filters_widget .wpc-filters-close-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 1.5rem; /* or 999px for pill */
}

/* Tablet / “two-column mode”:
   lock both items to 50% so they span the full row together */
@media (min-width: 576px) and (max-width: 991.98px) {
  .work-filter__terms
    .widget_wpc_filters_widget
    .wpc-filters-widget-controls-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Common look: same rounding as selects */
.work-filter__terms .widget_wpc_filters_widget select.wpc-filters-widget-select,
.sort-btn {
  border-radius: 1.5rem; /* or 999px for full pill */
  padding: 0.5rem 1rem;
}

/* 2-column mode: filters AND sort buttons share same width behavior */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Make the sort stack behave like the filters wrapper */
  .sort-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* match the filters gap */
  }

  /* Only the two sort buttons participate in 2-col layout */
  .sort-stack .sort-btn {
    /* flex: 0 0 calc(50% - 0.5rem); */
    max-width: calc(50% - 0.5rem);
  }

  .sort-stack .ms-auto {
    margin-left: 0 !important;
  }
}

/* Treat Date / Alpha areas as pill buttons */
#calendarSort,
#alphaSort {
  color: var(--caza-dark-gray) !important;
  font-size: 1rem !important;
  line-height: 1.5;

  cursor: pointer;
  font-size: 1rem;
  padding: 0.475rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--caza-dark-gray);
  /* transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease; */
}

/* Default muted state */
#calendarSort,
#alphaSort {
  color: var(--caza-dark-gray);
}

/* Hover / active-esque look */
#calendarSort:hover,
#alphaSort:hover {
  /* background-color: #f8f9fa;
  border-color: #ced4da;
  color: #212529; */
  color: var(--caza-pink) !important;
}

/* If you add an 'is-active' class via JS, highlight it like primary */
#calendarSort.is-active,
#alphaSort.is-active {
  /* background-color: #000; */
  border-color: var(--caza-pink);
  /* color: #fff; */
}

/* Make the "|" divider disappear on mobile and align better */
.row.mb-4.is-visible > .col-6.col-lg-2:first-of-type > div:first-child {
  color: #dee2e6;
  padding: 0 0.5rem;
}

@media (max-width: 991.98px) {
  /* Stack sorting controls nicely under filters */
  .row.mb-4.is-visible > .col-6.col-lg-2 {
    margin-top: 0.5rem;
    justify-content: flex-start !important;
  }

  /* Hide the vertical bar on small screens */
  .row.mb-4.is-visible > .col-6.col-lg-2:first-of-type > div:first-child {
    display: none;
  }

  #calendarSort,
  #alphaSort {
    font-size: 0.8rem;
  }
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
  text-decoration: underline;
}

a:hover {
  color: var(--caza-pink);
  text-decoration: underline;
}