/* HLB button.
 *
 * NOTE ON THE CLASS NAME. `custom/custom.css` already defines a `.hlb-btn`
 * from the Careers work, with a literal arrow in ::after and its own hover.
 * That one is still in use, so this component is `.hlb-button` to keep the
 * two apart. Do not rename either without checking the other.
 *
 * Colour is driven by local custom properties. A variant redefines the
 * properties and never restates the rules, same pattern as the header. To add
 * a button for a new background, copy one of the variant blocks below, change
 * the values, and check the label ratio noted in its comment.
 *
 * The arrow has its own property rather than following currentColor, so the
 * label and the arrow can move independently.
 */

.hlb-button {
  /* Fallbacks only. Every real use should carry a variant class. */
  --hlb-button-bg:            var(--hlb-coral-light);
  --hlb-button-fg:            var(--hlb-navy);
  --hlb-button-arrow:         var(--hlb-navy);
  --hlb-button-rule:          transparent;
  --hlb-button-bg-hover:      var(--hlb-navy);
  --hlb-button-fg-hover:      var(--hlb-mint);
  --hlb-button-arrow-hover:   var(--hlb-mint);
  --hlb-button-rule-hover:    transparent;
  --hlb-button-focus:         var(--hlb-navy);

  /* How far the arrow nudges on hover. Must stay well under the button's
     right padding, since the arrow travels into it. */
  --hlb-button-nudge:         4px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  /* The button is a flex item in the CTA band. Without this it shrinks below
     its own content width when the headline is long, and since the arrow is
     flex: 0 0 auto the label absorbs the whole loss and slides under the
     arrow. nowrap stops the label wrapping to two lines instead. */
  flex-shrink: 0;
  white-space: nowrap;

  box-sizing: border-box;
  min-width: 187px;
  min-height: 44px;
  padding: 13px 16px;
  border: 0;
  border-radius: 5px;
  background: var(--hlb-button-bg);
  color: var(--hlb-button-fg);

  /* The rule is an inset shadow, not a border. A border sits in the box model,
     so a variant with a rule in only one state would change the content width
     between states unless every variant carried a transparent one. An inset
     shadow is painted inside the padding box and costs nothing in layout,
     which is also what makes it read as a line INSIDE the button rather than
     a ring around it. Transparent on the filled states. */
  box-shadow: inset 0 0 0 1px var(--hlb-button-rule);

  font: 400 12px/1 var(--hlb-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Kills any inherited glyph arrow, from the legacy .hlb-btn rules or from the
   Customizer's SUBSCRIBE rule. Either one puts a literal arrow here and the
   button ends up with two. */
.hlb-button::after,
.hlb-button::before {
  content: none;
}

/* Geometos sits high in its em box, so flex centring lands the cap height
   above true centre while the arrow, a real 8px box, centres exactly. This
   is the optical correction. Tune the value, do not remove it. */
.hlb-button > span {
  position: relative;
  top: 1.5px;
}

/* Arrow.
 *
 * Drawn at full length in both states. On hover the whole arrow nudges right
 * by --hlb-button-nudge and nothing else about it changes: no stretch, no
 * relative motion between the shaft and the head, so the shape cannot
 * distort at any size.
 *
 * The nudge is a transform, so it does not reflow the label. It travels into
 * the button's 16px right padding, which is why the nudge value has to stay
 * well under it. */
.hlb-button__arrow {
  flex: 0 0 auto;
  width: 46px;
  height: 8px;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.hlb-button:hover .hlb-button__arrow,
.hlb-button:focus-visible .hlb-button__arrow {
  transform: translateX(var(--hlb-button-nudge));
}

/* Stroked, not filled. Geometry is the centreline of the Figma outline: a
   45 degree chevron with 4.5px arms at 1px weight, round caps and joins,
   and a 1px shaft with square ends.
   fill: none is defensive. If these elements are ever fed a two segment
   polyline it closes into a solid triangle, which is what a filled version
   of this arrow degrades into. */
.hlb-button__arrow-shaft,
.hlb-button__arrow-head {
  fill: none;
  stroke: var(--hlb-button-arrow);
  stroke-width: 1;
  transition: stroke .18s ease;
}

.hlb-button__arrow-head {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hlb-button:visited {
  color: var(--hlb-button-fg);
}

.hlb-button:hover,
.hlb-button:focus-visible {
  background: var(--hlb-button-bg-hover);
  color: var(--hlb-button-fg-hover);
  box-shadow: inset 0 0 0 1px var(--hlb-button-rule-hover);
  text-decoration: none;
}

.hlb-button:hover .hlb-button__arrow-shaft,
.hlb-button:hover .hlb-button__arrow-head,
.hlb-button:focus-visible .hlb-button__arrow-shaft,
.hlb-button:focus-visible .hlb-button__arrow-head {
  stroke: var(--hlb-button-arrow-hover);
}

/* Keyboard focus ONLY. This must never be attached to :hover as well. The
   outline is painted outside the box, so on hover it reads as a second ring
   floating around the button instead of the component's own edge. */
.hlb-button:focus-visible {
  outline: 2px solid var(--hlb-button-focus);
  outline-offset: 3px;
}

/* Variant: sitting on the turquoise CTA band.
 *
 * Rest  navy #083558 on coral #FD826D ....... 5.17:1  passes AA
 * Hover white on navy #083558 .............. 12.65:1  passes AAA
 *       mint #6BE0CB arrow on navy ......... 7.92:1  decorative anyway
 *
 * White was the original spec for the rest label and measures 2.44:1 on the
 * coral, which fails AA at every size. Navy is the change. The arrow is
 * decorative and aria-hidden, so it carries no ratio of its own. To keep it
 * white through the hover instead, set both arrow properties to
 * var(--hlb-white). */
.hlb-button--on-turquoise {
  --hlb-button-bg:            var(--hlb-coral-light);
  --hlb-button-fg:            var(--hlb-navy);
  --hlb-button-arrow:         var(--hlb-white);
  --hlb-button-rule:          transparent;
  --hlb-button-bg-hover:      var(--hlb-navy);
  --hlb-button-fg-hover:      var(--hlb-white);
  --hlb-button-arrow-hover:   var(--hlb-mint);
  --hlb-button-rule-hover:    transparent;
  --hlb-button-focus:         var(--hlb-navy);
}

/* Variant: sitting on navy. Overlay panel and footer.
 *
 * Per the comp: coral fill at rest. Hover drops the fill to the navy behind
 * it and leaves a white rule inside the button. Label and arrow are white in
 * both states, so only the fill and the rule change and the type never moves.
 *
 * Rest   white on coral #FD826D ............. 2.44:1  FAILS AA
 * Hover  white on navy #083558 ............. 12.65:1  passes AAA
 *        white rule vs navy ................ 12.65:1  passes 1.4.11
 *
 * The rest state is the comp exactly and it does not meet AA at 12px. Setting
 * --hlb-button-fg to var(--hlb-navy) takes it to 5.17:1 and passes, the same
 * change the turquoise button took. One line here if an audit flags it.
 *
 * bg-hover is `transparent` rather than a navy value on purpose, so the
 * variant works on the panel and the footer band without caring which navy is
 * behind it. It does mean this variant must not be placed on a light
 * background: the hover would show the page through it.
 *
 * Focus ring is white, not navy: a navy ring on navy is invisible and fails
 * 2.4.7 outright. */
.hlb-button--on-navy {
  --hlb-button-bg:            var(--hlb-coral-light);
  --hlb-button-fg:            var(--hlb-white);
  --hlb-button-arrow:         var(--hlb-white);
  --hlb-button-rule:          transparent;
  --hlb-button-bg-hover:      transparent;
  --hlb-button-fg-hover:      var(--hlb-white);
  --hlb-button-arrow-hover:   var(--hlb-white);
  --hlb-button-rule-hover:    var(--hlb-white);
  --hlb-button-focus:         var(--hlb-white);
}

/* Motion off. Colour still changes, the arrow stays put. */
@media (prefers-reduced-motion: reduce) {
  .hlb-button__arrow {
    transition: none;
  }

  .hlb-button:hover .hlb-button__arrow,
  .hlb-button:focus-visible .hlb-button__arrow {
    transform: none;
  }
}