/* Insight Clinic — site chrome: header, navigation, hero slider, footer.
 *
 * Geometry measured off the source: #Top_bar is 181px tall at 1440 and 1024,
 * 171px at 390, white. The logo box is 150x150.
 *
 * The desktop menu is replaced by a hamburger BELOW 1240 — the source is still
 * desktop AT exactly 1240 (container 1220, menu shown, sticky armed) and only
 * switches at 1239, so the queries below are `max-width: 1239.98px`. An earlier
 * `max-width: 1240px` here put that single pixel column on the wrong side.
 *
 * THE HEADER IS STICKY, and an earlier revision of this comment said it was not
 * — measured only at scroll 0, which is the one position where it is true. Past
 * scrollY 181 (its own height) the source pins #Top_bar and shrinks it to 61px.
 * Desktop only: at 1200 and below the class is added but position stays static
 * and the bar scrolls away. See the `.ic-stuck` block below and site.js.
 */

/* ── Header ─────────────────────────────────────────────── */
body.ic .ic-header {
  position: relative;
  z-index: 60;
  background: var(--ic-white);
}

/* No vertical padding: the source's menu links are the full 180px height of the
 * bar (they carry 60px of their own padding, which is what puts the hover rule
 * where it is). Padding here would stack on top of that and grow the header. */
body.ic .ic-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--ic-header-h);
}

/* The source's logo sits 20px inside the container's content edge (measured:
 * container content starts at 122, logo at 142). */
body.ic .ic-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 20px;
}
body.ic .ic-logo img {
  display: block;
  height: var(--ic-logo-h);
  width: auto;
}

/* ── Desktop navigation ─────────────────────────────────────
 * The menu is rendered by the BUILDER's nav component (`.hmg-nav__list` /
 * `.hmg-nav__link`), nested inside this theme's `.ic-nav`. So these rules are
 * written as descendant selectors and must not assume WordPress's own menu
 * classes — see the current-item rule below, which is where that bit.
 *
 * Geometry is measured off the source at 1440: the four links are contiguous
 * (no gap) and each carries 20.5px of horizontal padding, giving item widths of
 * 81.7 / 141.3 / 125.3 / 113.6 and a menu 461.9 wide ending flush at x=1318 —
 * the container's content edge. Reproduce the padding, not the total, so the
 * measure survives a menu edit. */
body.ic .ic-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ic .ic-nav li { margin: 0; }

body.ic .ic-nav a {
  position: relative;
  display: block;
  padding: 60px 20.5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 60px;
  color: var(--ic-ink);
  letter-spacing: normal;
  text-transform: none;
}

/* The hairline between items. On the source this is a `border-right` on a block
 * <span> inside each link — 60px tall, starting 60px down, and ABSENT on the
 * last item. The builder's nav renders no inner span, so it is a pseudo-element
 * here; the geometry is the source's, measured, not approximated.
 * At 5% black it is nearly invisible on a screenshot and very visible in the
 * header, which is exactly why it is worth reproducing. */
body.ic .ic-nav a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 60px;
  width: 1px;
  height: 60px;
  background: rgba(0, 0, 0, 0.05);
}
body.ic .ic-nav li:last-child > a::before { display: none; }

/* The source's hover/current rule: a 1px rose bar at 80% of the link width,
 * 69px up from the link's bottom edge, faded in rather than toggled. */
body.ic .ic-nav a::after {
  content: '';
  position: absolute;
  left: 10%;
  width: 80%;
  bottom: 69px;
  height: 1px;
  background: var(--ic-rose);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* `.is-current` is the BUILDER's marker for the current page. The WordPress
 * classes are kept for the non-builder fallback menu in header.php — targeting
 * only those is why the current page was not highlighted at all. */
body.ic .ic-nav a:hover,
body.ic .ic-nav .is-current > a,
body.ic .ic-nav .current-menu-item > a,
body.ic .ic-nav .current_page_item > a,
body.ic .ic-nav .current-menu-ancestor > a { color: var(--ic-rose); }

body.ic .ic-nav a:hover::after,
body.ic .ic-nav a:focus-visible::after,
body.ic .ic-nav .is-current > a::after,
body.ic .ic-nav .current-menu-item > a::after,
body.ic .ic-nav .current_page_item > a::after,
body.ic .ic-nav .current-menu-ancestor > a::after { opacity: 1; }

/* Sub-menus: the source has none today, but a client adding one in
 * Appearance → Menus must not produce a broken stack. */
body.ic .ic-nav .sub-menu {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
  padding: 8px 0;
  background: var(--ic-white);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body.ic .ic-nav li { position: relative; }
body.ic .ic-nav li:hover > .sub-menu,
body.ic .ic-nav li:focus-within > .sub-menu { display: flex; }
body.ic .ic-nav .sub-menu a { padding: 6px 16px; }

/* ── Search + hamburger ─────────────────────────────────── */
/* Hidden at desktop, and this is load-bearing for the menu's position: the bar
 * is `justify-content: space-between`, so a third child — even an empty one,
 * plus the 20px gap — holds the menu off the right edge. With the tools out of
 * the flow the menu ends flush at x=1318, which is where the source's ends.
 * Restored as a flex row at the mobile breakpoint below, for the burger. */
body.ic .ic-header__tools {
  display: none;
  align-items: center;
  gap: 14px;
}

/* The source renders this button but keeps it `display:none` at every width —
 * there is no search in its header. Kept in the markup (the search form and
 * /?s= results page both work) but hidden, to match.
 *
 * Scoped through .ic-header__tools so it outranks the generic .ic-icon-btn
 * `display:inline-flex` that follows it — equal specificity would lose on
 * source order, and the button reappeared on mobile. */
body.ic .ic-header__tools .ic-search-toggle { display: none; }

body.ic .ic-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ic-ink);
  cursor: pointer;
  border-radius: var(--ic-radius);
}
body.ic .ic-icon-btn:hover { color: var(--ic-rose); }
body.ic .ic-icon-btn svg { display: block; }

/* Rose, not ink — the source's burger is the one piece of header chrome that
 * carries the brand colour at rest (measured rgb(231,157,157)). */
body.ic .ic-burger {
  display: none;
  color: var(--ic-rose);
}

body.ic .ic-search {
  display: none;
  padding-bottom: 16px;
}
body.ic .ic-search.is-open { display: block; }
body.ic .ic-search form { display: flex; gap: 8px; }
body.ic .ic-search input[type='search'],
body.ic .ic-search input[type='text'] {
  flex: 1 1 auto;
  font-family: var(--ic-font);
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  background: var(--ic-white);
  color: var(--ic-ink);
}

/* ── Sticky header ──────────────────────────────────────────
 * Source behaviour, measured at 1440: past scrollY 181 the bar pins to the top
 * and shrinks 181 -> 61, logo 150 -> 60, links 180 -> 60, with a soft shadow and
 * z-index 701. Desktop only (>=1240) — below that the source lets it scroll away.
 *
 * `ic-stuck` goes on the BODY, not the header, so the body can reserve the
 * header's resting height while the header itself leaves the flow. That is what
 * keeps the page from jumping 181px the instant it pins; the source reserves the
 * same space by giving #Header a fixed height that does not collapse.
 *
 * Only a scroll BEHAVIOUR depends on the theme's JS. The header is fully drawn
 * and correct with JS off (and in the editor canvas, which runs none) — nothing
 * here may hide content, per the rule at the top of site.js. */
@media (min-width: 1240px) {
  body.ic .ic-header,
  body.ic .ic-header__bar,
  body.ic .ic-logo img,
  body.ic .ic-nav a {
    transition: height 0.2s ease, min-height 0.2s ease, padding 0.2s ease,
      line-height 0.2s ease, box-shadow 0.2s ease;
  }

  body.ic.ic-stuck { padding-top: var(--ic-header-h); }

  body.ic.ic-stuck .ic-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 701;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  body.ic.ic-stuck .ic-header__bar { min-height: 61px; }
  body.ic.ic-stuck .ic-logo img { height: 60px; }

  /* 15 + 30 + 15 = 60. The horizontal padding is unchanged, so the menu keeps
   * its resting width and the items do not slide as the bar collapses. */
  body.ic.ic-stuck .ic-nav a {
    padding: 15px 20.5px;
    line-height: 30px;
  }
  body.ic.ic-stuck .ic-nav a::before { top: 15px; height: 30px; }
  body.ic.ic-stuck .ic-nav a::after { bottom: -4px; }

  /* An in-page link (`/#contact`) would otherwise land underneath the pinned
   * bar. 61px is the stuck height; scroll-margin is honoured by the smooth
   * scrollIntoView in site.js as well as by a plain hash load. */
  body.ic [id] { scroll-margin-top: 61px; }
}

/* ── Mobile navigation ──────────────────────────────────── */
@media (max-width: 1239.98px) {
  body.ic .ic-header__tools { display: flex; }
  body.ic .ic-burger { display: inline-flex; }

  body.ic .ic-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ic-white);
    border-top: 1px solid var(--ic-line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    padding: 8px 0 16px;
  }
  body.ic .ic-nav.is-open { display: block; }

  body.ic .ic-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: var(--ic-wrap);
    margin-inline: auto;
    padding-inline: var(--ic-gutter);
  }
  /* Undo the desktop link box: the 60px padding and 60px line-height exist to
   * make the link fill the bar, which is meaningless in a stacked drop-down —
   * left alone they give every row an 84px height and strand the hover rule. */
  body.ic .ic-nav a {
    padding: 12px 0;
    line-height: 28px;
    border-bottom: 1px solid var(--ic-line);
  }
  body.ic .ic-nav a::after,
  body.ic .ic-nav a::before { display: none; }
  body.ic .ic-nav li:last-child > a { border-bottom: 0; }

  body.ic .ic-nav .sub-menu {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px;
  }
}

/* The source does NOT shrink the mark on a phone — it stays 150x150 and moves
 * to the centre of the bar, with the burger pinned right (measured at 390: img
 * at x=120..270 in a 390 viewport, burger right edge 10px off the edge).
 * Taking the tools out of the flow is what lets the logo centre on the bar
 * rather than on the space the burger leaves. */
@media (max-width: 767px) {
  body.ic .ic-header__bar { position: relative; }
  body.ic .ic-logo {
    flex: 1 1 auto;
    justify-content: center;
    padding-left: 0;
  }
  /* Pinned near the top rather than centred: the source's burger sits at
   * centre-y 40 in a 171px bar, beside the top of the mark, not level with it.
   * Our button is 40px tall (a tap target) against the source's 34, so the
   * offset is expressed to put the CENTRES in the same place. */
  body.ic .ic-header__tools {
    position: absolute;
    right: 10px;
    top: 20px;
  }
}

/* ── Hero slider ────────────────────────────────────────────
 * The source ran a 4-slide Slider Revolution instance whose only content was a
 * background image per slide, cross-fading with a slow Ken Burns pan. No text
 * layers, no links — so there is nothing to lose by dropping the 300KB plugin
 * and doing it in CSS. Heights are the measured source values: 743 at 1440,
 * 614 at 1024, 234 at 390. */
/* The slider is FLUID, not stepped. Slider Revolution scales its 1240x743 grid
 * to the container width and stops growing once it reaches its design size, so
 * the height is exactly `min(width * 743/1240, 743)`. Measured at 15 widths from
 * 320 to 1920: the largest deviation from that formula is 0.5px.
 *
 * This replaced three fixed heights (743 / 614 / 234) taken at the three capture
 * widths. Those three were each right AT their width and wrong everywhere else —
 * at 1200 the source is 719 and we were showing 614, 105px short.
 *
 * aspect-ratio rather than vw: vw includes the scrollbar gutter, and this box is
 * full-bleed, so its own width is the honest input. */
body.ic .ic-hero {
  position: relative;
  overflow: hidden;
  /* width MUST be explicit. Once max-height clamps a box that has an
   * aspect-ratio, the ratio is free to drive the INLINE axis too, and the hero
   * collapsed to 1240px inside a 1440px page — full-bleed photo, 200px of bare
   * page beside it. Pinning the width leaves the ratio only the height to
   * decide, which is the whole intent. */
  width: 100%;
  aspect-ratio: 1240 / 743;
  max-height: 743px;
  background: var(--ic-ink);
}

body.ic .ic-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ic-hero-fade 32s infinite;
  will-change: opacity, transform;
}
/* A real <img>, not a JS-applied background: the editor canvas runs no theme
 * JS, so the background version left the hero blank in the editor while looking
 * correct on the page — the exact editor/live split this build exists to avoid. */
body.ic .ic-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.ic .ic-hero__slide:nth-child(1) { animation-delay: 0s; }
body.ic .ic-hero__slide:nth-child(2) { animation-delay: 8s; }
body.ic .ic-hero__slide:nth-child(3) { animation-delay: 16s; }
body.ic .ic-hero__slide:nth-child(4) { animation-delay: 24s; }

@keyframes ic-hero-fade {
  0%    { opacity: 0; transform: scale(1); }
  3%    { opacity: 1; }
  25%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; transform: scale(1.12); }
}

/* One slide must be painted before the animation starts, or the hero flashes
 * the placeholder colour on first load. */
body.ic .ic-hero__slide:first-child { opacity: 1; }

/* NOT centred, though it reads that way at a glance. Slider Revolution lays the
 * layer out on its 1240x743 design grid at x=681 y=184, size 456x256, and scales
 * the whole grid by sliderHeight/743 — so the lockup sits right of centre and
 * grows with the hero. Verified against the source at 1440 / 1024 / 390: the
 * measured boxes are 456x256 @ (781,184), 376.6x211 @ (562,151) and
 * 143.4x80.5 @ (214,57), all of which are that one rule.
 *
 * Below 1240 the hero IS the grid (its aspect-ratio is 1240/743), so the layer is
 * pure percentages: 681/1240, 184/743, 456/1240. */
body.ic .ic-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.ic .ic-hero__overlay img {
  position: absolute;
  left: 54.9194%;
  top: 24.7644%;
  width: 36.7742%;
  height: auto;
}

/* Past 1240 the hero stops growing (max-height 743) and the grid stops scaling,
 * so the layer is fixed at its design size and the 1240 grid is centred in the
 * wider box: left = (W - 1240)/2 + 681 = 50% + 61px. */
@media (min-width: 1240px) {
  body.ic .ic-hero__overlay img {
    left: calc(50% + 61px);
    top: 184px;
    width: 456px;
  }
}

/* No breakpoint rules for the hero at all now. The aspect-ratio gives 614 at
 * 1024 and 234 at 390 — the two heights that used to be hard-coded here — and
 * the overlay's percentage placement gives its measured 143.4px width at 390,
 * so the old `max-width: 62%` phone override is gone too. */

@media (prefers-reduced-motion: reduce) {
  body.ic .ic-hero__slide { animation: none; opacity: 0; }
  body.ic .ic-hero__slide:first-child { opacity: 1; }
}

/* ── Footer ─────────────────────────────────────────────── */
body.ic .ic-footer {
  background: var(--ic-ink);
  color: var(--ic-white);
}
body.ic .ic-footer a { color: var(--ic-white); text-decoration: none; }
body.ic .ic-footer a:hover { color: var(--ic-rose); }

body.ic .ic-footer__widgets {
  padding-block: 70px;
  text-align: center;
}
body.ic .ic-footer__logo img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
}
body.ic .ic-footer__emails {
  font-size: 15px;
  line-height: 28px;
  margin: 0;
}

/* The source's footer widget carries its own inline `padding: 0 15%`, which
   holds the email line to a readable measure instead of letting it run the full
   1196px. Taken from that markup, not estimated. */
body.ic .ic-footer__widgets .ic-wrap { padding-inline: 15%; }

body.ic .ic-footer__copy {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
body.ic .ic-footer__copy .ic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 91px;
  padding-block: 20px;
  text-align: center;
}
body.ic .ic-footer__copyright { font-size: 13px; line-height: 22px; }

body.ic .ic-top {
  position: absolute;
  right: var(--ic-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ic-radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--ic-white);
  cursor: pointer;
}
body.ic .ic-top:hover { background: var(--ic-rose); }

@media (max-width: 767px) {
  body.ic .ic-footer__copy .ic-wrap { flex-direction: column; gap: 14px; min-height: 0; }
  body.ic .ic-top { position: static; transform: none; }
}

/* ── Page body ──────────────────────────────────────────── */
body.ic .ic-main { background: var(--ic-page); }

/* Non-builder templates (archive, search, 404, single post) still need a
 * readable measure — builder pages bring their own section widths. */
body.ic .ic-prose { padding-block: 70px; }
body.ic .ic-prose .ic-wrap > * { max-width: 820px; }

/* ── Formidable Forms ───────────────────────────────────────
 * The forms themselves are the NEXT pass; this is only what the clone needs to
 * LOOK like the source it replaces.
 *
 * Formidable hides its per-option labels with position:absolute and no offsets,
 * so each one resolves against its nearest positioned ancestor and shrink-fits
 * to its own text. BeTheme happened to give the option rows position:relative;
 * without that the containing block becomes the viewport, every hidden label
 * measures a full 1440px, and 124 of them push the document 731px wider than
 * the screen. The page looked fine — it just scrolled sideways.
 */
body.ic .frm_form_field .frm_checkbox,
body.ic .frm_form_field .frm_radio,
body.ic .frm_form_field .frm_opt_container { position: relative; }

/* A hidden label must never be able to widen the document, whatever its
 * ancestors do. Belt as well as braces, because the failure is invisible. */
body.ic .frm_screen_reader { max-width: 100%; }

body.ic .frm_forms { width: 100%; }
body.ic .with_frm_style .frm_submit button:hover { background: var(--ic-rose-dark); }