/* Scientech Blocks — assembled by plugin/build.py from redesign/*.css.
   Do not edit this file directly; edit the source and rebuild. */

/* Scientech — header support control.
 *
 * Ships alongside header.js, which turns the theme's `div.support` into a
 * WhatsApp link. Two things need saying in CSS: the control has to look
 * clickable, and it was never aligned with its neighbours.
 *
 * The misalignment is not specific to the product page, which is where it was
 * reported — it is in the header on every page. Measured at 1440 against the
 * two controls either side of it:
 *
 *              .icon height          glyph        block
 *   sign-in    36.4  (26px/36.4)     svg 24x25    42   x 61.4  @ y 34.4
 *   cart       36.4  (26px/36.4)     svg 25x25    59.8 x 61.4  @ y 34.4
 *   support    28    (20px/28)       <i>  20x20.5 49.1 x 53    @ y 38.6
 *
 * All three are centred in the same row, so support was not "pushed down" by a
 * stray margin — it is 8.4px shorter, and centring a shorter box lowers its
 * top edge by half of that. The shortfall is entirely in `.icon`: the other
 * two are icon-font boxes sized by a 26px font and its 36.4px line box, while
 * support's is 20px/28px. Its glyph was correspondingly small too, 20px
 * against their 24-25px.
 *
 * So the icon box is given the neighbours' height explicitly and centres its
 * glyph rather than relying on a line box to position it — line-height
 * centring is what made the original fragile. 24px matches the sign-in SVG's
 * rendered 24x25 exactly; 26px, the neighbours' font-size, would have rendered
 * this icon font noticeably larger than either SVG.
 *
 * Verified live after applying: all three read 61.4 tall at y 34.4, glyphs
 * 24x25 / 24x24 / 25x25.
 */

.header-ct-right .support {
  cursor: pointer;
}

/* header.js replaces the div with an <a> carrying the same classes, so the
   theme's own colour and hover treatment continue to apply. Only the underline
   a link brings by default has to go. */
a.support,
a.support:hover,
a.support:focus {
  text-decoration: none;
}

.header-ct-right .support .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36.4px;
  font-size: 24px;
  line-height: 1;
}