/* components.css — hand-written styles for behaviour that replaced third-party widgets/scripts on the live site
   (modals, timed popup, Instagram grid, before/after slider, form states, search, a11y helpers).
   WordPress: enqueue after the generated bundles (wp_enqueue_style('s4e-components', ...)). */

:root {
  --s4e-primary: #123F7E;
  --s4e-secondary: #D2E3F1;
  --s4e-text: #151515;
  --s4e-light: #F4F8FF;
  --s4e-muted: #696969;
  --s4e-focus: #3FFFD7;
  --s4e-radius: 6px;
}

/* ---------- accessibility helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link.sr-only-focusable:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; z-index: 100000; padding: 12px 18px; background: #fff; color: var(--s4e-primary); font-weight: 700; border-radius: var(--s4e-radius); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--s4e-focus); outline-offset: 2px; }
.s4e-header :where(a, button):focus-visible, .s4e-footer :where(a, button):focus-visible { outline-color: #ffbf47; }
iframe { border: 0; max-width: 100%; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- sticky helpers (Elementor Pro "sticky" setting) */
[data-sticky="top"] { position: sticky; top: 20px; align-self: flex-start; }
/* live offsets: single-post sidebar 30 px (sticky_offset 30), blog + archive sidebars 10 px (sticky_offset 10) */
.s-1102376[data-sticky="top"] { top: 30px; }
.s-aee0efd[data-sticky="top"], .s-e6b7fa2[data-sticky="top"] { top: 10px; }
/* footer CTA bar (Elementor Pro "sticky: bottom", mobile only): handled by main.js like Elementor's sticky module —
   a hidden spacer keeps its place in the footer and the bar is fixed to the bottom while its own place is below the fold. */
.sticky__spacer { visibility: hidden !important; transition: none !important; animation: none !important; }

/* ---------- navigation: keyboard / JS states the ElementsKit CSS expects */
.nav__menu > li.is-open > .nav__mega,
.nav__menu > li.is-open > .nav__dropdown { opacity: 1; visibility: visible; }

/* ---------- appointment modal = Elementor Pro popup #261881 ("dialog-lightbox" + post-261881.css), values measured on live:
   overlay rgba(0,0,0,.8), panel 500 px (tablet 480, mobile 300) x 100vh on the right, white, shadow 2px 8px 23px 3px rgba(0,0,0,.2),
   close icon 22/18/16 px at top/right 20 px in the accent colour, entrance slideInRight 1.2 s ease, exit = same animation reversed
   (1.2 s), then hidden. Closes on overlay click and Esc. The page behind is not scroll-locked (prevent_scroll off). */
dialog.popup { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background-color: rgba(0, 0, 0, .8); display: none; justify-content: flex-end; align-items: center; z-index: 9999; overflow: visible; color: #151515; }
dialog.popup[open] { display: flex; }
dialog.popup::backdrop { background: transparent; }
.popup__dialog { position: absolute; max-width: 100%; max-height: 100%; background-color: #fff; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); border-radius: 0; overflow: visible; pointer-events: all; animation-duration: 1.2s; animation-fill-mode: none; }
.popup__dialog.is-entering { animation-name: slideInRight; animation-timing-function: ease; }
.popup__dialog.is-leaving { animation-name: slideInRight; animation-timing-function: ease; animation-direction: reverse; animation-fill-mode: forwards; }
.popup__content { width: 500px; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 0; overflow: auto; display: flex; align-items: flex-start; }
.popup__content > .con { width: 100%; }
.popup__close { position: absolute; top: 20px; right: 20px; z-index: 9999; display: flex; margin: 0; padding: 0; border: 0; background: transparent; font-size: 22px; width: 1em; height: 1em; line-height: 1; cursor: pointer; pointer-events: all; }
.popup__close svg { display: block; width: 1em; height: 1em; fill: var(--s4e-primary); }
.popup__close:hover, .popup__close:focus, .popup__close:active { background: transparent; color: var(--s4e-primary); box-shadow: none; } /* the base button:hover/:focus rule painted it pink when the dialog focused it */
.popup__close svg { transition: opacity .2s ease, transform .2s ease; }
.popup__close:hover svg { opacity: .75; transform: rotate(90deg); }
.popup__close:focus:not(:focus-visible) { outline: none; }
.popup__close:focus-visible { outline: 2px solid var(--s4e-primary); outline-offset: 4px; border-radius: 4px; }
/* S4E Page Popups close button: keep the base button:focus rule (white text) from hiding its dark X on the white circle. */
.s4epp .s4epp__close--light:focus, .s4epp .s4epp__close--light:active { background: #fff; color: #1d1b2c; }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@media (max-width: 1024px) { .popup__content { width: 480px; } .popup__close { font-size: 18px; } }
@media (max-width: 767px) { .popup__content { width: 300px; } .popup__close { font-size: 16px; } }

/* ---------- iOS Safari / phones: keep text and links in the site's own colours
   (iOS turns phone numbers, emails, addresses and dates into links with its own styling, and enlarges text on rotate). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }
.s4e-footer a { -webkit-tap-highlight-color: transparent; }

/* ---------- Contact Form 7 6.2.4.1 — includes/css/styles.css as on live (class names mapped like the rest of the build:
   wpcf7-response-output → form__response, wpcf7-not-valid-tip → form__error, wpcf7-spinner → form__spinner …). Layer "vendor" sits
   below "defaults", the same cascade position as on live (CF7 CSS loads before Elementor/ElementsKit). */
@layer vendor {
.form-wrap .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}

.form-wrap .hidden-fields-container {
  display: none;
}

.form-wrap form .form__response {
  margin: 2em 0.5em 1em;
  padding: 0.2em 1em;
  border: 2px solid #00a0d2; /* Blue */
}

.form-wrap form.init .form__response,
.form-wrap form.resetting .form__response,
.form-wrap form.submitting .form__response {
  display: none;
}

.form-wrap form.sent .form__response {
  border-color: #46b450; /* Green */
}

.form-wrap form.failed .form__response,
.form-wrap form.aborted .form__response {
  border-color: #dc3232; /* Red */
}

.form-wrap form.spam .form__response {
  border-color: #f56e28; /* Orange */
}

.form-wrap form.invalid .form__response,
.form-wrap form.unaccepted .form__response,
.form-wrap form.payment-required .form__response {
  border-color: #ffb900; /* Yellow */
}

.form__wrap {
  position: relative;
}

.form__error {
  color: #dc3232; /* Red */
  font-size: 1em;
  font-weight: normal;
  display: block;
}

.use-floating-validation-tip .form__error {
  position: relative;
  top: -2ex;
  left: 1em;
  z-index: 100;
  border: 1px solid #dc3232;
  background: #fff;
  padding: 0.2em 0.8em;
  width: 24em;
}

.form__option {
  display: inline-block;
  margin: 0 0 0 1em;
}

.form__option-label::before,
.form__option-label::after {
  content: " ";
}

.form__spinner {
  visibility: hidden;
  display: inline-block;
  background-color: #23282d; /* Dark Gray 800 */
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 24px;
  position: relative;
}

form.submitting .form__spinner {
  visibility: visible;
}

.form__spinner::before {
  content: "";
  position: absolute;
  background-color: #fbfbfc; /* Light Gray 100 */
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 100%;
  transform-origin: 8px 8px;
  animation-name: wpcf7-spin;
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  .form__spinner::before {
    animation-name: wpcf7-blink;
    animation-duration: 2000ms;
  }
}

@keyframes wpcf7-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes wpcf7-blink {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.form-wrap [inert] {
  opacity: 0.5;
}

.form-wrap input[type="file"] {
  cursor: pointer;
}

.form-wrap input[type="file"]:disabled {
  cursor: default;
}

.form-wrap .form__submit:disabled {
  cursor: not-allowed;
}

.form-wrap input[type="url"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"] {
  direction: ltr;
}

.form__reflection > output {
  display: list-item;
  list-style: none;
}

.form__reflection > output[hidden] {
  display: none;
}
}


/* ---------- Instagram grid (Smash Balloon replacement) */
.ig-feed { width: 100%; }
.ig-feed__header { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: inherit; text-decoration: none; margin-bottom: 12px; }
.ig-feed__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.ig-feed__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-feed__item a { display: block; aspect-ratio: 1; overflow: hidden; background: #e9eef6; }
.ig-feed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ig-feed__item a:hover img { transform: scale(1.05); }
.ig-feed__ph { display: grid; place-items: center; height: 100%; color: var(--s4e-primary); font-weight: 600; }
.ig-feed__footer { text-align: center; margin-top: 16px; }
.ig-feed__follow { display: inline-block; padding: 10px 20px; border-radius: 4px; background: #408bd1; color: #fff !important; text-decoration: none; font-weight: 600; }
@media (max-width: 1024px) { .ig-feed__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .ig-feed__grid { grid-template-columns: 1fr; } }

/* ---------- nested carousel (Elementor Pro nested carousel / Swiper replacement; doctors section on tablet & mobile) */
.wgt-n-carousel { position: relative; }
.wgt-n-carousel .carousel__viewport { overflow: hidden; }
.wgt-n-carousel .carousel__viewport > .carousel__track { display: flex; overflow: visible; transition-property: transform; transition-timing-function: ease; }
.wgt-n-carousel .carousel__slide { flex: 0 0 auto; min-width: 0; }
.wgt-n-carousel .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: auto; display: grid; place-items: center; cursor: pointer; padding: 6px; }
.wgt-n-carousel .carousel__btn--prev { left: 0; }
.wgt-n-carousel .carousel__btn--next { right: 0; }
.wgt-n-carousel .carousel__btn svg { width: 25px; height: 25px; }

/* Mobile header: the "Book Appointment" button is now an "Emergency" button (same red as the desktop top-bar Emergency button) */
.el.s-a5d5bae .btn:not(._){background-color:#FF3232;color:#FFFFFF;fill:#FFFFFF}
.el.s-a5d5bae .btn:hover:not(._),.el.s-a5d5bae .btn:focus:not(._){background-color:var( --e-global-color-5bf5221 );color:var( --e-global-color-text );border-color:var( --e-global-color-5bf5221 )}

/* ---------- Mobile off-canvas navigation (mobile header menu only: .s-7ace4f2) ---------- */
.el.s-7ace4f2 .nav__container.nav__offcanvas:not(._){width:86%;max-width:360px;background-color:#FFFFFF;padding-bottom:96px;box-shadow:0 0 40px rgba(6,28,61,.25)}
.el.s-7ace4f2 .nav__overlay.nav__offcanvas:not(._){background-color:rgba(6,28,61,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* top bar: logo + round close button */
.el.s-7ace4f2 .nav__container .nav__identity:not(._){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 18px;border-bottom:1px solid #E6EDF6;position:sticky;top:0;background:#FFFFFF}
.el.s-7ace4f2 .nav__container .nav__logo:not(._){margin:0;padding:0}
.el.s-7ace4f2 .nav__container .nav__logo>img:not(._){max-width:130px;max-height:54px;width:auto;height:auto}
.el.s-7ace4f2 .nav__container button.nav__close:not(._){float:none;position:relative;flex:none;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:#EEF4FF;color:transparent;font-size:0;cursor:pointer;transition:background-color .2s}
.el.s-7ace4f2 .nav__container button.nav__close::before,.el.s-7ace4f2 .nav__container button.nav__close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:#123F7E;transform:rotate(45deg);transition:background-color .2s}
.el.s-7ace4f2 .nav__container button.nav__close::after{transform:rotate(-45deg)}
.el.s-7ace4f2 .nav__container button.nav__close:hover:not(._),.el.s-7ace4f2 .nav__container button.nav__close:focus-visible:not(._){background:#123F7E}
.el.s-7ace4f2 .nav__container button.nav__close:hover::before,.el.s-7ace4f2 .nav__container button.nav__close:hover::after,
.el.s-7ace4f2 .nav__container button.nav__close:focus-visible::before,.el.s-7ace4f2 .nav__container button.nav__close:focus-visible::after{background:#FFFFFF}
/* top-level items */
.el.s-7ace4f2 .nav__container .nav__menu:not(._){padding:6px 0 0}
.el.s-7ace4f2 .nav__container .nav__menu>li:not(._){margin:0 18px;border-bottom:1px solid #EEF2F7}
.el.s-7ace4f2 .nav__container .nav__menu>li>a:not(._){display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-family:"Lato",Sans-serif;font-size:17px;font-weight:700;line-height:1.3;color:#0F1B2D}
.el.s-7ace4f2 .nav__container .nav__menu>li>a:hover:not(._),.el.s-7ace4f2 .nav__container .nav__menu>li.is-open>a:not(._),.el.s-7ace4f2 .nav__container .nav__menu>li.is-current>a:not(._){color:#123F7E}
.el.s-7ace4f2 .nav__container .nav__menu>li>a .nav__indicator:not(._){width:32px;height:32px;padding:10px;border:0;border-radius:10px;background:#EEF4FF;fill:#123F7E;color:#123F7E;transition:transform .25s,background-color .2s}
.el.s-7ace4f2 .nav__container .nav__menu>li.is-open>a .nav__indicator:not(._){transform:rotate(180deg);background:#123F7E;fill:#FFFFFF}
/* sub-menus (Services, Resources) */
.el.s-7ace4f2 .nav__container .nav__mega:not(._){padding:0 0 14px;background:transparent}
.el.s-7ace4f2 .nav__container .nav__mega .con:not(._):not(._){background:transparent;--gap:0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list .icon-list__item:not(._):not(._){margin:0;padding:0!important;background:transparent!important;border-radius:0}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item>a:not(._):not(._){display:flex;align-items:center;gap:10px;padding:11px 10px 11px 16px;border-left:2px solid #DCE6F3;font-family:"Lato",Sans-serif;font-size:15px;line-height:1.35;color:#3B4656;transition:color .2s,background-color .2s,border-color .2s}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item>a::after{content:"";position:static;flex:none;width:7px;height:7px;margin-left:auto;background:none!important;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item:hover>a:not(._):not(._),.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item>a:focus-visible:not(._){background:#F4F8FD;border-left-color:#123F7E;color:#123F7E}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item span.icon-list__text:not(._):not(._){color:inherit!important;font-size:15px}
.el.s-7ace4f2 .nav__container .nav__mega .icon-list__item svg:not(._):not(._){display:none}