/* ==========================================================================
   Overrides for the Medinexa clone. Loaded LAST in the stylesheet chain.

   The template's animation runtime (GSAP/ScrollTrigger/SplitText, Swiper, WOW,
   Lenis, counters, marquee) is now loaded by app/_components/MedinexaRuntime,
   so the Swiper static-reconstruction and scroll-reveal force-visible rules
   that used to live here have been removed — the runtime drives those elements.
   Keep this file for genuinely static fixups only.
   ========================================================================== */

/* #preloader is dropped from the markup entirely; keep this as a safety net in
   case any preloader overlay is ever reintroduced. */
#preloader,
.preloader-logo {
  display: none !important;
}

/* Hero: Alegria's banner photo is far brighter than the template's, so the white
   hero copy needs a scrim to stay legible. Sits inside .mx-hero-img (z-index:-1,
   clip-path) so it is masked with the photo and stays behind the text. */
.mx-hero-sec .mx-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 31, 63, 0.92) 0%,
    rgba(11, 31, 63, 0.75) 32%,
    rgba(11, 31, 63, 0.25) 58%,
    rgba(11, 31, 63, 0) 78%
  );
}

/* The template paired this line with stock "member" avatars. Alegria has no
   client photos and would not publish them, so the list was dropped. */
.mx-hero-client.no-avatars > p {
  margin-left: 0;
}
/* The theme underlines this number (it held "9.5" in the template). Against
   "Over 10 Years" an underline reads as a broken link. */
.mx-hero-client.no-avatars > p span {
  text-decoration: none;
}

/* Header logo. The theme has no sizing rule for .logo_site-size, so the
   238x150 source needs one. */
.mx-header-section .brand-logo img.logo_site-size {
  display: block;
  width: 132px;
  height: auto;
}
.mobile_menu_content .m-brand-logo img.logo_site-m-size {
  width: 150px;
  height: auto;
}
/* Footer logo sits on the white .mx-ftr1-area card, so it uses the same
   full-colour transparent logo as the header. */
.mx-ftr-newslatter .brand-logo img.logo_site-size {
  width: 160px;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Hero entrance.

   Replaces the template's GSAP/SplitText hero intro (disabled in script.js).
   Deliberately pure CSS, running at first paint rather than after the
   post-hydration runtime loads:

   - `animation-fill-mode: both` holds the `from` state only while the
     animation is pending or running. If this stylesheet loads but the JS
     never does, the hero still resolves to fully visible. There is no
     JS-added class gating visibility — that mistake left content stuck
     hidden on a stale cache once already.
   - No `opacity: 0` is ever declared as a static rule, so the hero is
     visible by default in any browser that skips the animation.
   --------------------------------------------------------------------------- */
@keyframes mx-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mx-hero-settle {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

.mx-hero-sec .mx-slug,
.mx-hero-sec .mx_hero_title,
.mx-hero-sec .hero_desc,
.mx-hero-sec .mx-hero-text .mx-btn1,
.mx-hero-sec .mx-hero-client {
  animation: mx-hero-rise 0.85s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mx-hero-sec .mx-slug {
  animation-delay: 0.05s;
}
.mx-hero-sec .mx_hero_title {
  animation-delay: 0.16s;
}
.mx-hero-sec .hero_desc {
  animation-delay: 0.32s;
}
.mx-hero-sec .mx-hero-text .mx-btn1 {
  animation-delay: 0.44s;
}
.mx-hero-sec .mx-hero-client {
  animation-delay: 0.56s;
}
.mx-hero-sec .mx-hero-img > img {
  animation: mx-hero-settle 1.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .mx-hero-sec .mx-slug,
  .mx-hero-sec .mx_hero_title,
  .mx-hero-sec .hero_desc,
  .mx-hero-sec .mx-hero-text .mx-btn1,
  .mx-hero-sec .mx-hero-client,
  .mx-hero-sec .mx-hero-img > img {
    animation: none;
  }
}

/* About: the template's slots were sized by tall source images, so these slots
   collapsed without a pinned height. Pin them and crop with object-fit.
   about-us-one.webp is 450x344 landscape with both subjects near the middle, so
   it centers; it upscales ~1.5x to fill 505px and will look soft on retina. */
.mx-abt-sec .mx-abt1-img {
  height: 505px;
}
.mx-abt-sec .mx-abt1-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* .mx-abt1-exp pulls itself up by -188px to overlap the bottom of this image.
   The slot must stay tall enough to absorb that, or the "10+ Years" card lands
   on top of the section heading. 460px keeps the wrapper flush with .mx-abt1-img. */
.mx-abt-sec .mx-abt1-img2 .item-img {
  height: 460px;
}
.mx-abt-sec .mx-abt1-img2 .item-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Below 992px the theme wraps .mx-abt1-content and centers it, so every flex item
   sizes to its own max-content. The template's .item-img shrink-wraps to ab2.webp
   (290x426 + 10px border = 310x446) and stays a centered portrait card. image-02 is
   1920x530, so `width:100%` above stretched .item-img across the whole container and
   the 291px .mx-abt1-exp card (translateX(-20px)) hung off the left gutter. Pin the
   template's own box back so the wrapper shrink-wraps and centers as it does there. */
@media (max-width: 991px) {
  .mx-abt-sec .mx-abt1-img2 .item-img {
    width: 310px;
    max-width: 100%;
    height: 446px;
  }
}

/* FeatureBoxes: the tall bento tile took its height from a portrait source image.
   The tile is still stretched to the bento's right column rather than sized by its
   photo, so the tile survives a future swap back to a panoramic source.
   10-plus-years.webp is 400x710 — the first true portrait here, so it fills the
   tall tile with only a vertical crop and needs no off-center framing. */
.elementor-element-eb769dd,
.elementor-element-eb769dd > .elementor-element-32b00ea,
.elementor-element-eb769dd .elementor-widget-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mx-intro-item1 {
  flex: 1;
  display: flex;
  min-height: 500px;
}
.mx-intro-item1 .item-img {
  flex: 1;
  min-height: 0;
}
/* The "50+" tile's widget is the only child of the f90cfdc flex row, but Elementor
   leaves it width:auto/flex-grow:0, so it shrink-wraps to its text's max-content and
   leaves a gap on the right. The template does this too (369px of 406px at 430px) —
   its copy is simply longer than Alegria's, which hides the gap. Fill the row. */
.elementor-element-f90cfdc > .elementor-element-21bf558 {
  width: 100%;
  flex-grow: 1;
}
.mx-intro-item1 .item-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Services: Alegria has 3 services, so the template's 4-per-view Swiper was
   replaced with a static grid. Mirrors the Swiper breakpoints it superseded
   (4→3→2→1 becomes 3→3→2→1) and its 20px spaceBetween. */
.mx-ser1-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.mx-ser1-col {
  display: flex;
  min-width: 0;
}
.mx-ser1-col > .mx-ser1-item {
  width: 100%;
}
@media (max-width: 991px) {
  .mx-ser1-grid-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .mx-ser1-grid-inner {
    grid-template-columns: 1fr;
  }
}

/* Testimonials: the template's author block had an avatar; Alegria's reviewers
   are real Google reviewers with no photos, so the avatar was dropped. */
.mx-testi1-item .auth-inner .btm-text {
  padding-left: 0;
}

/* Appointment form: replaces the Contact Form 7 markup. */
.mx-form-status {
  margin-top: 16px;
  min-height: 1.5em;
  text-align: center;
}
.mx-form-status[data-form-status="error"] {
  color: #d33;
}
.mx-appoint-callout {
  margin-top: 24px;
}
.mx-appoint-callout a {
  color: var(--mx-prime-c);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Mobile nav drawer
   The template ships a near-black (#0f0d0d) drawer with white links and a red
   (#d60606) close X — no colour in it belongs to Alegria, and logo.webp's black
   wordmark bar disappears into the background. Repaint it white to match the
   header, where the same logo already reads correctly.
   Also fixes three template defects, noted per rule below.
   --------------------------------------------------------------------------- */

/* theme: background-color:#0f0d0d; height:100vh; overflow-y:scroll.
   100vh lets the iOS address bar clip the drawer's bottom -> 100dvh.
   overflow-y:scroll reserved a permanent scrollbar gutter -> auto. */
.mobile_menu_content {
  background-color: #fff;
  height: 100dvh;
  overflow-y: auto;
  box-shadow: 0 3px 24px rgba(11, 31, 63, 0.16);
}

/* theme: border-bottom rgba(255,255,255,.06) — invisible on white. */
.mobile_menu_content .mobile-main-navigation .navbar-nav li {
  border-bottom: 1px solid rgba(11, 31, 63, 0.1);
}

/* theme: color:#fff. The 18px link had no min tap height and no transition. */
.mobile_menu_content .mobile-main-navigation .navbar-nav li a {
  color: var(--mx-prime-c2);
  display: flex;
  align-items: center;
  min-height: 44px;
  border-left: 3px solid transparent;
  padding-left: 12px;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* The theme defines NO hover state for mobile nav links, and never styles
   .current-menu-item even though the class is present in the markup. */
.mobile_menu_content .mobile-main-navigation .navbar-nav li a:hover,
.mobile_menu_content .mobile-main-navigation .navbar-nav li a:focus-visible {
  color: var(--mx-prime-c);
}
.mobile_menu_content .mobile-main-navigation .navbar-nav li.current-menu-item a {
  color: var(--mx-prime-c);
  border-left-color: var(--mx-prime-c);
}

/* theme: color:#d60606 on a bare 20px glyph — off-palette, and the tap target
   was ~20px against a 44px minimum. */
.mobile_menu .mobile_menu_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f6f7f9;
  color: var(--mx-prime-c2);
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.mobile_menu .mobile_menu_close:hover {
  color: var(--mx-prime-c);
  background-color: rgba(27, 79, 232, 0.08);
}

/* theme: color:#fff, and :hover uses var(--ra-base-c1) — a variable that is
   defined NOWHERE in the vendored CSS, so the hover was dead. */
.mobile_menu .ptx-mobile-header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(11, 31, 63, 0.15);
  color: var(--mx-prime-c2);
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.mobile_menu .ptx-mobile-header-social a:hover {
  color: var(--mx-prime-c);
  border-color: var(--mx-prime-c);
}

/* theme: rgba(0,0,0,.9). A navy scrim reads better behind a white panel. */
.mobile_menu_overlay {
  background-color: rgba(11, 31, 63, 0.6);
}

/* NEW markup (mx-m-* is not a theme namespace). Below 1400px the header hides
   .ct-call, and below 480px it hides .ct-btn — so on a phone the header offered
   no way to call and no way to apply. The drawer carries both instead.
   Radius/height match .mx-btn1 so these read as the site's buttons. */
.mx-m-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.mx-m-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.mx-m-call {
  background-color: var(--mx-prime-c);
  color: #fff;
}
.mx-m-call:hover {
  background-color: var(--mx-prime-c2);
  color: #fff;
}
.mx-m-call svg {
  width: 20px;
  height: 20px;
}
.mx-m-join {
  border: 1px solid rgba(11, 31, 63, 0.25);
  color: var(--mx-prime-c2);
}
.mx-m-join:hover {
  background-color: var(--mx-prime-c2);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Paused links (temporary)
   The inner pages (/about-us, /our-services, /contact-us, /join-our-team,
   /login) don't exist yet, so those 26 anchors ship with no href at all rather
   than pointing at a 404. An <a> without href is already non-focusable and
   inert to the keyboard; this block covers the pointer: no link cursor, and no
   :hover effects firing on something that can't be clicked.

   The theme styles these as `a`, not `a[href]`, so the design is unchanged.
   DELETE this block and restore the href attributes when the pages land.
   --------------------------------------------------------------------------- */
a[data-paused] {
  cursor: default;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Footer background wordmark ("Alegria")
   The theme hardcodes font-size:324px (150px only below 768px) and
   letter-spacing:-20px, inside .mx-footer-sec.over-hidden. Those fixed sizes
   don't fit the fluid .container at most widths, so the word was clipped: it
   overflowed by 36px at 390px, and the template is worse at 768-1199px, where
   the font snaps back to 324px inside a ~714px container.

   The container is fluid (0.93-0.98 of the viewport, capped at 1584px), so one
   viewport-relative size fits everywhere. The usable box is narrower than the
   container: below 992px .mx-footer-sec takes margin:0 24px, and .container adds
   12px padding, so the text must fit `container - 24`. Solving that across
   320-1920 makes 26vw the largest safe factor (320px is the binding case); it
   lands the word at ~89-92% of the usable box. min() caps it at the theme's
   324px from ~1246px up, leaving desktop exactly as it was.

   Sizes are set on .mx-ftr-text so the -80px card overlap can scale with them:
   -80/324 = -0.247em, so the same ~27% of the word tucks behind the card at
   every width, as the template does on desktop. letter-spacing likewise moves
   to -0.062em (= -20/324) instead of a fixed -20px, which was disproportionately
   tight at the 150px mobile size. */
.mx-ftr-text {
  font-size: min(324px, 26vw);
  margin-bottom: -0.247em;
}
.mx-ftr-text h2 {
  font-size: inherit;
  letter-spacing: -0.062em;
  white-space: nowrap;
}