/* Unique World Holidays — Contact Us page, Section 1 (breadcrumb + page
   title). Same-to-same replacement for the Elementor container it used to
   be (post 540, container 6f39b2f: fixed background image + page-title
   widget + Header Footer Elementor's breadcrumb widget, no overlay, no
   explicit padding — used Elementor's own 10px container default, min-
   height 200px) — see partials/contact-hero-section.php for the full
   context. Overlay on the image variant is new, same deliberate addition
   About Us/Client Feedback's own hero already made for contrast (the
   original had none). .gsap-fade-in is this project's existing reusable
   scroll-reveal utility (see assets/js/animations.js) — not a new
   animation system.

   The old page-title widget declared its own custom typography (Poppins,
   capitalize), but on an actual <h1> that's always beaten by the site-wide
   h1-h6 rule (functions.php, font-family: "Cinzel", serif !important) —
   confirmed by comparing directly against the live page, which really
   renders this title in Cinzel, not Poppins. So font-family is left
   unset here (same as About Us's own hero) and Cinzel applies exactly
   like it does everywhere else; only text-transform: capitalize is kept
   explicit, since the site-wide rule doesn't touch that property. */

.uwh-contact-hero {
  position: relative;
  width: 100%;
  min-height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* Color variant doesn't parallax-scroll a photo, so a fixed attachment
   (which only matters for an actual image) is irrelevant there — left on
   the shared rule above regardless since it's a no-op without a
   background-image. */

.uwh-contact-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.uwh-contact-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* ---- Breadcrumb ----
   Small, subtle, sits below the title. Overrides Astra's own breadcrumb
   widget styling (.ast-breadcrumbs-wrapper/-inner, dynamically generated
   by Astra core) so it reads correctly against this section's own
   background instead of Astra's site-wide default breadcrumb colors.

   Color comes from --uwh-contact-hero-breadcrumb-color, an ACF-driven
   custom property set inline on the section (see
   contact-hero-section.php) — defaults to #F4F6EF, the resolved color the
   old breadcrumb widget actually rendered in (not pure white). Same
   "muted" links/separator vs. "full strength" current-page distinction as
   About Us's own hero, via color-mix(...) so it works for whatever color
   is chosen. */
.uwh-contact-breadcrumb,
.uwh-contact-breadcrumb .ast-breadcrumbs-wrapper,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner {
  margin: 0;
  padding: 0;
  background: none;
}
.uwh-contact-breadcrumb,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner * {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: color-mix(
    in srgb,
    var(--uwh-contact-hero-breadcrumb-color, #f4f6ef),
    transparent 15%
  );
}
.uwh-contact-breadcrumb a,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner a {
  color: color-mix(
    in srgb,
    var(--uwh-contact-hero-breadcrumb-color, #f4f6ef),
    transparent 15%
  );
  text-decoration: none;
}
.uwh-contact-breadcrumb a:hover,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner a:hover {
  color: var(--uwh-contact-hero-breadcrumb-color, #f4f6ef);
  text-decoration: underline;
}
.uwh-contact-breadcrumb .ast-breadcrumbs-inner span:last-child,
.uwh-contact-breadcrumb .ast-breadcrumbs-inner .trail-end {
  color: var(--uwh-contact-hero-breadcrumb-color, #f4f6ef);
}

/* ---- Page title ----
   font-family intentionally omitted, same reasoning as About Us's own
   hero — the site-wide h1-h6 rule (functions.php) always wins on a real
   <h1> regardless of what's declared here. text-transform: capitalize IS
   kept explicit since that rule doesn't touch it (see the file banner
   comment above). Color from --uwh-contact-hero-title-color, same
   ACF-driven custom property pattern as the breadcrumb above. */
.uwh-contact-hero-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.625rem);
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--uwh-contact-hero-title-color, #ffffff);
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
  .uwh-contact-hero {
    min-height: 220px;
    padding: 10px;
  }
}