/* ------------------------------------------------------------------
   State rules the clone needs that the site's own CSS does not supply.
   The markup uses Bootstrap 5 collapse attributes (data-bs-toggle) but the
   bundled stylesheet only ships Bootstrap 3's `.collapse.in`. The original
   gets `.show` / `.collapsing` behaviour from its JS bundle's own CSS.
   ------------------------------------------------------------------ */
.collapse.show{display:block}
/* the fullscreen mobile nav is a flex column; a blanket display:block collapses
   its layout and pushes every link off-screen. It is the only collapse target on
   the page that is not display:block when open. */
.navbar-fullscreen.collapse.show{display:flex}
.collapsing{height:0;overflow:hidden;transition:height .35s ease}
@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}

/* Background slideshow: slides are absolutely stacked and cross-faded.
   Swiper normally writes these inline; the clone drives them from CSS so they
   stay correct at every viewport width. */
.elementor-background-slideshow{position:absolute;inset:0;overflow:hidden}
.elementor-background-slideshow .swiper-wrapper{position:absolute;inset:0;transform:none!important}
.elementor-background-slideshow .swiper-slide{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 1.5s ease-in-out;will-change:opacity}
.elementor-background-slideshow .swiper-slide.mm-active{opacity:1}

/* Entrance animation resting state, applied by JS only (never in markup) so a
   visitor with JS disabled still sees every section. */
.mm-anim-init{opacity:0;transform:translateY(30px)}
.mm-anim-run{opacity:1;transform:translateY(0);
  transition:opacity 1s cubic-bezier(.165,.84,.44,1),transform 1s cubic-bezier(.165,.84,.44,1)}
@media (prefers-reduced-motion:reduce){
  .mm-anim-init{opacity:1;transform:none}
  .mm-anim-run{transition:none}
}

/* ------------------------------------------------------------------
   Carousel controls, below the library's own breakpoint.

   The carousel library initialises ON SCROLL, and only at >=1200px. Checking the live
   site without scrolling made it look as though the controls never existed; scrolling to
   them shows the nav arrows and dot strips appear on desktop and do not on mobile.

   So the capture's controls are correct at >=1200px and wrong below it, where the mobile
   dot strip was adding 56px inside every carousel widget and pushing the page down.
   ------------------------------------------------------------------ */
@media (max-width:1199px){
  .carousel-nav,
  .carousel-dots,
  .carousel-dots-mobile,
  .flickity-page-dots,
  .flickity-button,
  .flickity-prev-next-button{display:none!important}
}

/* ------------------------------------------------------------------
   "Book an appointment" pop-up (inc/popup.php + behaviour.js 10b).
   Same look as live's Liquid lity modal: 80% black backdrop, white box with
   a 4px radius, 750/970/1170px wide at the same breakpoints, 90vh tall with its
   own scroll, round close button top right. Below 768px it fits the screen
   (live's box runs off the right edge there).
   ------------------------------------------------------------------ */
.hksc-pop{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  opacity:0;transition:opacity .3s ease}
.hksc-pop[hidden]{display:none!important}
.hksc-pop.is-open{opacity:1}
.hksc-pop-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8)}
.hksc-pop-box{position:relative;z-index:1;background:#fff;border-radius:4px;
  box-shadow:0 20px 65px -5px rgba(0,0,0,.5);width:calc(100vw - 24px);max-width:100%;
  transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.3,1,.6,1)}
.hksc-pop.is-open .hksc-pop-box{transform:none}
@media (min-width:768px){.hksc-pop-box{width:750px}}
@media (min-width:992px){.hksc-pop-box{width:970px}}
@media (min-width:1200px){.hksc-pop-box{width:1170px}}
.hksc-pop-scroll{max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}
.hksc-pop .lqd-modal{width:100%;padding:25px 2em;position:relative}
@media (max-width:767px){.hksc-pop .lqd-modal{padding:20px 14px}}
.hksc-pop-close{position:fixed;top:30px;right:30px;z-index:2;width:35px;height:35px;padding:0;
  display:inline-grid;place-content:center;border:0;border-radius:10em;background:transparent;
  color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(3px)}
@media (max-width:767px){.hksc-pop-close{top:8px;right:8px;background:rgba(0,0,0,.55)}}
.hksc-pop-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hksc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.hksc-pop-lock,html.hksc-pop-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hksc-pop,.hksc-pop-box{transition:none}}

/* Form feedback. Elementor's own message classes are used, so the site's form CSS
   styles them where it exists; these rules make sure they are always readable. */
.elementor-form .hksc-msg{margin-top:12px;padding:10px 14px;border-radius:4px;font-size:.95em;width:100%}
.elementor-form .hksc-msg.elementor-message-success{background:#E4F3EC;color:#0B6B46}
.elementor-form .hksc-msg.elementor-message-danger{background:#FDECEC;color:#B3261E}
.elementor-form .hksc-err{display:block;margin-top:4px;color:#B3261E;font-size:13px;line-height:1.4}
.elementor-form .hksc-msg::before,.elementor-form .hksc-err::before{content:none}
.elementor-form .elementor-error .elementor-field{border-color:#B3261E}
.elementor-form .elementor-button[disabled]{opacity:.7;cursor:progress}


/* ------------------------------------------------------------------
   Desktop header dropdowns. The site's CSS shows a submenu on :hover but keeps it
   pointer-events:none unless the item is .is-active (which the old theme's JS added).
   behaviour.js now adds .is-active/.hksc-open with a short grace period; these rules
   are the no-JS fallback and keep the submenu visible during that grace period and
   for keyboard focus. Only for devices that can hover; touch uses the mobile nav.
   ------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  body:not([data-elementor-device-mode*="mobile"]):not([data-elementor-device-mode*="tablet"]) .main-nav li.menu-item-has-children:hover > .nav-item-children,
  body:not([data-elementor-device-mode*="mobile"]):not([data-elementor-device-mode*="tablet"]) .main-nav li.menu-item-has-children:focus-within > .nav-item-children,
  body:not([data-elementor-device-mode*="mobile"]):not([data-elementor-device-mode*="tablet"]) .main-nav li.hksc-open > .nav-item-children{
    pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0)}
}

/* Mobile / tablet hamburger menu: the parent item's chevron sits inline after the link
   (the old theme placed it with JS), and tapping it opens the submenu below. */
[data-elementor-device-mode*="mobile"] .main-nav.lqd-menu-items-block > li.menu-item-has-children,
[data-elementor-device-mode*="tablet"] .main-nav.lqd-menu-items-block > li.menu-item-has-children{
  flex-flow:row wrap;align-items:center!important}
[data-elementor-device-mode*="mobile"] .main-nav.lqd-menu-items-block > li.menu-item-has-children > .submenu-expander,
[data-elementor-device-mode*="tablet"] .main-nav.lqd-menu-items-block > li.menu-item-has-children > .submenu-expander{
  position:static;top:auto;right:auto;left:auto;margin-inline-start:.6em;cursor:pointer;
  width:40px;height:40px;background-color:rgba(255,255,255,.08)}
[data-elementor-device-mode*="mobile"] .main-nav.lqd-menu-items-block li.hksc-sub-open > .nav-item-children,
[data-elementor-device-mode*="tablet"] .main-nav.lqd-menu-items-block li.hksc-sub-open > .nav-item-children{
  display:block;flex-basis:100%;pointer-events:auto}

/* Hamburger menu taps. The menu's left-to-right wipe is a clip-path transition the theme runs
   for 2s (plus 0.15s delay), though it looks finished at about 0.9s, and Chrome does not hit-test
   the menu until that transition ends: every tap in the first ~2.5s fell through to the
   decorative background. Run the wipe at the theme's own 0.8s close duration, so it ends when it
   visibly ends, and keep the decorative background columns out of hit-testing. */
.navbar-fullscreen.is-active .header-modules-container{transition-duration:.8s}
.navbar-fullscreen .lqd-fsh-bg{pointer-events:none}