/* ------------------------------------------------------------------
   Touch target sizes. Measured on the rendered pages at 375px, where 45
   real controls sat under the 44px minimum. Links inside sentences are
   left alone - the guideline exempts them, and padding them would break
   the line spacing of the paragraph they sit in.
   ------------------------------------------------------------------ */

/* Slider dots. The dot stays 8px; an invisible 44px square is centred over
   it, so the target grows without the row of dots spreading out. */
.slick-dots li { position: relative; }
.slick-dots li button { position: relative; }
.slick-dots li button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* A 328x17 link is a full-width row of text pretending to be a button. The
   theme pins these to the bottom of a card with a four-class selector, so
   these have to match that weight to win; inline-flex keeps them sitting
   side by side, and flex-end keeps the text where the design put it while
   the target grows upward into the card's own padding. */
.treatments-wrapp .treatments-col1 .treatments-col2 .treatments-btn1,
.treatments-wrapp .treatments-btn1,
.treatment-wrapp .treatments-btn1 {
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
}

/* The mobile menu button, at 60x13 the smallest target on the page and the
   one every phone visitor has to hit first.

   Padding with a matching negative margin, NOT a width/height: the burger and
   its "Menu" label (drawn by ::after) are laid out with floats, and making the
   button a flex container stops floats applying and moves the label. Padding
   grows the hit area; the negative margin pulls the box back so the icon stays
   exactly where the design puts it. Only vertically - widening it would push
   the transparent area over whatever sits alongside and swallow those clicks. */
.header-menu-toggle {
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: -16px;
  margin-bottom: -16px;
}

/* Inside the drawer: the links, the close button and the social icons. */
.header-nav .menu-log .menu-lo {
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* The drawer's close button keeps its designed 30px circle. The X inside it is
   two bars pinned at "left: 8px", a figure derived from that 30px box - 30 less
   the 2px border, less the 12px bar, halved. Forcing the circle to 44px left
   the bars at 8px while the centre moved to 15px, so the X sat visibly off to
   the left. The circle stays 30px and an invisible 44px square is centred over
   it instead, the same way the slider dots are handled. */
.header-nav__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
/* The 36px social circles, wherever they appear - the drawer, the mobile
   link bar and the footer. Only the anchors: the same class is also used on
   a decorative <span> inside larger buttons, which needs no target of its
   own. Same trick as the dots, so the icons do not move apart. */
a.circle-effects1 { position: relative; }
a.circle-effects1::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* Two of ours that landed a pixel or two short of the line. Fluent Forms
   writes a per-form ff_btn_style rule at a weight plain specificity cannot
   beat, which is the same reason its colours needed !important. */
.edc-rating__btn { padding-top: 15px; padding-bottom: 15px; }
.frm-fluent-form .ff-btn-submit,
.fluentform .ff-btn-submit {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* The closed mobile drawer is a 320px panel pinned to the left of the screen
   and moved out of sight with transform. It is hidden, so it should not be
   able to take a tap - but that relies on visibility:hidden holding, and if
   it ever does not, an invisible panel sits across the left of a phone screen
   swallowing taps meant for the header's contact button and social icons.
   Saying so explicitly costs nothing and removes the possibility. */
.header-nav { pointer-events: none; }
.menu-is-open .header-nav { pointer-events: auto; }

/* Anything focusable needs to be visible when focused, which matters more
   once targets are being tapped and tabbed rather than clicked precisely. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #4A3475;
  outline-offset: 2px;
}