/* =============================================================================
   HEALS chrome: nav, megamenu, crisis bar, footer, shared buttons
   =============================================================================
   NOT ONE BRAND VALUE IS WRITTEN HERE. Every colour and font resolves through the
   custom properties in the theme's tokens.css. `.build\verify-no-hardcoded-brand.php`
   fails the build if a hex literal appears in this file.
   ========================================================================== */

/* ---------------------------------------------------------------- the scope --
   A widget that inherits its tokens from an ancestor is correct only while it sits
   inside the container that happens to carry the class. Drag it elsewhere in
   Elementor and the design quietly changes. So each widget carries its own scope.

   .heals-v1-scope is display:contents, so it adds no box: no background, no
   containing block, no stacking context, no overflow edge. Nested inside a real
   .heals-v1 it is completely inert; standing alone it still styles its contents.

   MUST come after the .heals-v1 block so `display` wins on equal specificity.
   Some widgets deliberately do NOT emit it: see Heals_Widget_Base::in_scope().    */
.heals-v1 {
  font-family: var(--heals-font-body);
  color: var(--heals-text);
}
.heals-v1-scope { display: contents; }

/* ------------------------------------------- WordPress's border-color booby trap
   Core ships `html :where([style*="border-color"]) { border-style: solid; }` in the
   block global stylesheet. It is an ATTRIBUTE SUBSTRING match on the whole style
   attribute, so it fires on any element whose inline style merely CONTAINS the text
   "border-color", including anything that lists border-color in a `transition`.
   Such an element declares a width for the one border it wants and nothing for the
   other three, so the browser fills those in with `medium`, which is 3px.

   In BKK this made the nav 132px tall instead of 129 with a 3px line across the top
   of the site. Zeroing the widths here is safe: anything that genuinely wants a
   border declares it inline, and inline wins.                                    */
.heals-v1 [style*="border-color"] { border-width: 0; }

/* ----------------------------------------------------------------- selection */
.heals-v1 ::selection { background: var(--heals-selection); }

/* ====================================================================== nav == */

.heals-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--heals-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--heals-line);
}

.heals-nav__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 0 var(--heals-gutter);
  height: var(--heals-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.heals-nav__brand { display: flex; align-items: center; flex: none; }

/* ---------------------------------------------- another people's-CSS landmine
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto; }` in
 * woocommerce-layout.css. `.woocommerce-page` is a BODY class, so on every shop, cart,
 * checkout and account page that rule reaches the site nav.
 *
 * It scores (0,1,1), exactly the same as `.heals-nav__brand img`, and its stylesheet
 * loads later, so it wins on source order. The logo then rendered at its natural 822px
 * instead of 66px tall, which blew the nav out to 1705px and gave every commerce page a
 * horizontal scrollbar. The marketing pages were fine, which is what made it easy to
 * miss.
 *
 * Fixed by owning two classes instead of one, taking these to (0,2,1). Not an ID, and
 * not !important: both would win but both make the next override worse. The same
 * treatment is applied to the footer logo, which the same rule reaches.
 */
.heals-nav .heals-nav__brand img {
  height: 66px;
  width: auto;
  display: block;
  filter: var(--heals-shadow-logo);
}

.heals-nav__menu { display: flex; align-items: center; gap: 22px; }
.heals-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heals-nav__item { position: relative; }

.heals-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--heals-text-nav);
  text-decoration: none;
  padding: 31px 1px 29px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.heals-nav__link:hover,
.heals-nav__link:focus-visible { color: var(--heals-indigo-500); }

.heals-nav__item.is-active > .heals-nav__link {
  font-weight: 700;
  color: var(--heals-indigo-500);
  border-bottom-color: var(--heals-indigo-500);
}

.heals-nav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.heals-nav__item--has-mega.is-open .heals-nav__caret { transform: rotate(180deg); }

/* ------------------------------------------------------------------ megamenu */

.heals-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 640px;
  background: var(--heals-surface);
  border: 1px solid var(--heals-line);
  border-radius: var(--heals-radius-lg);
  box-shadow: 0 18px 48px rgb(35 34 92 / 12%);
  padding: 26px 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.heals-nav__item--has-mega:hover .heals-mega,
.heals-nav__item--has-mega:focus-within .heals-mega,
.heals-nav__item--has-mega.is-open .heals-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* minmax rather than 1fr: with equal fractions the narrowest column forced
   "Continuing Education" onto two lines and pushed its "Coming soon" badge into the
   gutter. A floor width keeps every label on one line. */
.heals-mega__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(175px, 1fr));
  gap: 28px;
}

.heals-mega__heading {
  margin: 0 0 12px;
  font-family: var(--heals-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heals-blue);
}

.heals-mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.heals-mega__link {
  display: inline-flex;
  /* Wrap the badge onto its own line rather than letting it stretch the column, and
     top-align so a two-line label still reads with its badge. */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13.5px;
  color: var(--heals-text-body);
  text-decoration: none;
}
.heals-mega__link:hover,
.heals-mega__link:focus-visible { color: var(--heals-indigo-500); }

.heals-badge {
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heals-text-faint);
  border: 1px solid var(--heals-line-chip);
  border-radius: var(--heals-radius-pill);
  padding: 2px 7px;
}

/* ------------------------------------------------------------------- buttons */

.heals-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heals-font-body);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--heals-radius-pill);
  padding: 10px 20px;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.heals-btn--solid {
  color: var(--heals-surface);
  background: var(--heals-indigo);
  box-shadow: var(--heals-shadow-pill);
}
.heals-btn--solid:hover,
.heals-btn--solid:focus-visible { background: var(--heals-indigo-600); color: var(--heals-surface); }

.heals-btn--ghost {
  color: var(--heals-indigo-500);
  background: var(--heals-surface);
  border-color: var(--heals-line-strong);
}
.heals-btn--ghost:hover,
.heals-btn--ghost:focus-visible { border-color: var(--heals-indigo-500); }

/* --------------------------------------------------------------- mobile toggle
 * SPECIFICITY IS LOAD-BEARING ON EVERY FORM CONTROL IN THIS FILE.
 *
 * hello-elementor's reset.css ships:
 *     [type="button"], [type="submit"], button {
 *       border: 1px solid #CC3366; display: inline-block; ...
 *     }
 *
 * `[type="button"]` scores (0,1,0), which TIES a single class like
 * `.heals-nav__toggle`, and reset.css is enqueued after ours, so it wins on source
 * order. The result shipped to a screenshot: a pink-bordered hamburger visible on
 * desktop, because the reset also overrode `display: none`, and a pink outlined
 * newsletter button in the footer of every page.
 *
 * So every control here is scoped to two classes, taking it to (0,2,0). Same fix as
 * the WooCommerce `.woocommerce-page img` case above. Do not reduce these back to a
 * single class, and do not reach for !important instead.
 */

.heals-nav .heals-nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--heals-line);
  border-radius: var(--heals-radius-sm);
  cursor: pointer;
  color: var(--heals-ink);
}
.heals-nav__toggle span,
.heals-nav__toggle span::before,
.heals-nav__toggle span::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--heals-ink);
  border-radius: 2px;
  content: '';
  position: relative;
}
.heals-nav__toggle span::before { position: absolute; top: -6px; }
.heals-nav__toggle span::after  { position: absolute; top: 6px; }

/* ===================================================================== footer = */

.heals-crisis { background: var(--heals-surface-dark); color: var(--heals-surface); }
.heals-crisis__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 18px var(--heals-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.heals-crisis__label {
  font-family: var(--heals-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heals-cyan-300);
}
.heals-crisis__text {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--heals-lh-body);
  color: var(--heals-text-on-dark-2);
}
.heals-crisis__text strong { color: var(--heals-surface); }

.heals-footer__body {
  background: var(--heals-surface-alt);
  border-top: 1px solid var(--heals-line);
}
.heals-footer__grid {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 56px var(--heals-gutter) 28px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
}

.heals-footer__brand { display: flex; flex-direction: column; gap: 14px; }
/* (0,2,1), for the same WooCommerce `.woocommerce-page img` reason as the nav logo. */
.heals-footer .heals-footer__logo {
  height: 66px;
  width: auto;
  align-self: flex-start;
  filter: var(--heals-shadow-logo);
}
.heals-footer__blurb {
  margin: 0;
  font-size: var(--heals-fs-card);
  line-height: var(--heals-lh-body);
  color: var(--heals-text-body);
}
.heals-footer__contact { display: flex; flex-direction: column; gap: 6px; }
.heals-footer__contact a {
  font-size: var(--heals-fs-card);
  font-weight: 600;
  color: var(--heals-text-body);
  text-decoration: none;
}
.heals-footer__contact a:hover { color: var(--heals-indigo-500); }

.heals-footer__col { display: flex; flex-direction: column; gap: 10px; }
.heals-footer__heading {
  margin: 0 0 4px;
  font-family: var(--heals-font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heals-ink);
}
.heals-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.heals-footer__list a {
  font-size: var(--heals-fs-card);
  color: var(--heals-text-body);
  text-decoration: none;
}
.heals-footer__list a:hover { color: var(--heals-indigo-500); }

/* ------------------------------------------------------------------- opt-in */

/* Two classes throughout, for the reset.css reason documented at the mobile toggle.
   reset.css also sets `border: 1px solid #666` on every text input, which is why the
   email fields came out grey-bordered instead of on-brand. */
.heals-optin { display: flex; gap: 8px; }
.heals-optin .heals-optin__input {
  flex: 1;
  min-width: 0;
  font-family: var(--heals-font-body);
  font-size: var(--heals-fs-card);
  padding: 10px 14px;
  border: 1px solid var(--heals-line-chip);
  border-radius: var(--heals-radius-pill);
  outline: none;
  color: var(--heals-ink);
  background: var(--heals-surface);
}
.heals-optin .heals-optin__input:focus-visible { border-color: var(--heals-indigo-500); }
.heals-optin .heals-optin__button {
  font-family: var(--heals-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--heals-surface);
  background: var(--heals-indigo);
  border: 1px solid var(--heals-indigo);
  border-radius: var(--heals-radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.heals-optin .heals-optin__button:hover {
  background: var(--heals-indigo-600);
  border-color: var(--heals-indigo-600);
  color: var(--heals-surface);
}

/* -------------------------------------------------------------------- legal */

.heals-footer__legal {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 0 var(--heals-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 13px, not 12px, at every width. This paragraph is the site's compliance disclaimer,
   stating that HEALS provides education only and does not create a clinician-patient
   relationship. It is the last text on the site that should be squinted at, and the
   visual hierarchy loses nothing at 13. */
.heals-footer__disclaimer {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--heals-line);
  font-size: 13px;
  line-height: var(--heals-lh-loose);
  color: var(--heals-text-faint);
}
.heals-footer__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 13px;
  color: var(--heals-text-faint);
}
.heals-footer__fine a { color: var(--heals-text-faint); text-decoration: none; }
.heals-footer__fine a:hover { color: var(--heals-indigo-500); }

/* ==================================================================== mobile = */

@media (max-width: 1080px) {
  .heals-mega { min-width: 520px; }
  .heals-nav__list { gap: 16px; }
}

@media (max-width: 900px) {
  .heals-nav .heals-nav__toggle { display: inline-flex; }

  .heals-nav__menu {
    position: absolute;
    top: var(--heals-nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--heals-surface);
    border-bottom: 1px solid var(--heals-line);
    padding: 8px var(--heals-gutter) 20px;
    display: none;
  }
  .heals-nav__menu.is-open { display: flex; }

  .heals-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .heals-nav__link { padding: 14px 0; border-bottom: 1px solid var(--heals-line-soft); }
  .heals-nav__item.is-active > .heals-nav__link { border-bottom-color: var(--heals-line-soft); }

  /* On mobile the megamenu is an accordion, not an overlay: absolute positioning
     inside a scrolling drawer traps the panel off-screen. */
  .heals-mega {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    padding: 4px 0 12px 12px;
    display: none;
  }
  .heals-nav__item--has-mega:hover .heals-mega { display: none; }
  .heals-nav__item--has-mega.is-open .heals-mega { display: block; transform: none; }
  .heals-mega__inner { grid-template-columns: 1fr; gap: 18px; }

  .heals-nav__cta { margin-top: 16px; align-self: flex-start; }

  .heals-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ------------------------------------------------------- touch tap targets --
 * A footer link's tap target is only as tall as its line box, which measured 16px. A
 * responsive audit found 462 controls under 32px, nearly all of them footer and
 * megamenu links. WCAG 2.5.8 sets 24x24 CSS px as the floor and the practical touch
 * guidance is 44x44, so on coarse pointers the links get real vertical padding and the
 * list gap shrinks to compensate, keeping the footer's visual rhythm close to the
 * desktop version while making every link genuinely tappable.
 *
 * Keyed on WIDTH **or** a coarse pointer. Pointer alone was the first attempt and it
 * silently did nothing in testing, because headless Chromium reports `pointer: fine`,
 * as does any desktop browser narrowed to phone width. A media feature you cannot
 * verify is a fix you cannot trust, so width carries it and the pointer query extends
 * it to large touch devices.
 */
@media (max-width: 900px), (pointer: coarse) {
  .heals-footer__list { gap: 0; }
  .heals-footer__list a,
  .heals-footer__contact a,
  .heals-footer__fine a {
    display: inline-block;
    padding: 12px 0;
    line-height: 1.25;
  }
  .heals-footer__contact { gap: 0; }
  .heals-footer__fine { gap: 4px 20px; }

  /* Megamenu links inside the mobile drawer. */
  .heals-mega__list { gap: 0; }
  .heals-mega__link { padding: 11px 0; }

  /* Inline "→" links used as section CTAs, e.g. "Book a presentation". */
  .heals-section .heals-mega__link { padding: 12px 0; }
}

@media (max-width: 600px) {
  .heals-footer__grid { grid-template-columns: 1fr; }
  /* Must match the (0,2,1) of the desktop rules above, or WooCommerce's
     `.woocommerce-page img` wins again at this breakpoint only. */
  .heals-nav .heals-nav__brand img,
  .heals-footer .heals-footer__logo { height: 52px; }
}