/*!
 * The CareHub - occasion marks: wrapper only.
 *
 * All the artwork, animation and lockup layout lives inside
 * carehub-occasions.js, which injects it once as <style id="ch-occ-css">.
 * This file does one job: hold the mounted mark in the box the theme's <img>
 * occupied, so swapping it in shifts nothing on the page.
 *
 * It deliberately does NOT restyle anything inside .hdr-lock. The component
 * already lays the 988 lockup out as a flex row (mark | wordmark over link)
 * with the link at the 14px the design calls for. An earlier version of this
 * file set `height:100%` on every .lk and re-styled .crisis-html; that fought
 * the component's own rules and pushed the link out over the mark.
 *
 * Everything is scoped to .chom. The component's rules are scoped to
 * .ch-occ / .lk / .hdr-lock, and neither set collides with the carehub theme
 * (checked against its 300KB stylesheet: zero hits on every class used here).
 */

/*
 * FIT BY WIDTH, ANCHORED TO THE BASELINE.
 *
 * The mark takes the same width as the logo it replaces, so the header's
 * horizontal footprint is unchanged. Height is NOT normalised, and that is
 * deliberate: the marks are not all the same shape. Their viewBoxes are
 *
 *     std    184 x 37.8     most marks
 *     top    184 x 51.8     santa, hanukkah, diwali, pilgrim, newyear, july4
 *     broom  198 x 51.8     witch
 *     fan    190 x 44.8     turkey
 *
 * and in every one of them the extra space is ABOVE and to the LEFT - the
 * baseline and the right edge are common. An accessory like the Santa hat
 * lives in that space.
 *
 * So the wrapper is sized to the STANDARD box and the artwork hangs out of
 * the top. Centring instead would push the wordmark down by ~7px whenever a
 * `top` mark was showing, and the logo would visibly bob between Dec 1 and
 * Dec 26 as the Christmas rotation cycles star -> santa -> tree.
 */
.chom {
  position: relative;         /* the artwork is placed against this box */
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  overflow: visible;          /* accessories extend above and to the left */
}

.chom > .ch-occ {
  line-height: 0;
}

/*
 * The artwork is taken out of flow and pinned by JS so the standard logo
 * lands in the same place in every mark, whatever its viewBox. The wrapper
 * keeps the standard footprint, so the header's layout never moves.
 *
 * The SVG is positioned rather than its .ch-occ parent: it carries explicit
 * pixel width and height, so `bottom` resolves against a known box. Pinning
 * the parent instead left it with an auto height that collapsed, and the
 * artwork hung off the BOTTOM of the wrapper - the wordmark then sat 13px
 * low on exactly the marks this is meant to hold steady.
 *
 * Direct child only - the SVGs inside .hdr-lock are the component's business.
 */
.chom > .ch-occ > .lk {
  position: absolute;
  display: block;
  max-width: none;            /* sized explicitly in px; see placeArtwork() */
}

/*
 * The Suicide Prevention lockup is the one mark that cannot fit the slot: the
 * 988 line is 196px of real text beside a 38px mark, so it wants about 241x38
 * where the others want 184x38. It renders at its natural size rather than
 * being squeezed, because shrinking it would take the crisis line below the
 * 14px the design specifies - and that line is the point of the mark.
 */
.chom--crisis {
  width: auto !important;
  height: auto !important;
}

/* The crisis lockup lays itself out; it is left in normal flow. */
.chom--crisis > .ch-occ {
  position: static;
  height: auto;
}

/* Never let it force a horizontal scrollbar on a narrow screen. */
.chom--crisis .hdr-lock {
  max-width: 100%;
  flex-wrap: wrap;
}

/*
 * The 988 link is real, focusable text inside the logo. The component styles
 * it; it does not give it a visible focus ring, and a keyboard user needs one.
 */
.chom .crisis-html:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}