/*
 * Styles for the vanilla replacements on the review template. Loaded after the
 * theme CSS, and scoped to the elements this template introduces, so it does
 * not restyle anything the theme already owns.
 *
 * Replaces slicknav.css and asPieProgress.min.css. TablePress (7 files) and
 * wpDiscuz (3) are not loaded at all: no page renders a TablePress table, and
 * the comment form is dropped.
 */

/* ------------------------------------------------------------ mobile menu */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: #1d4b6c;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  content: '';
  position: relative;
}
.menu-toggle__bar::before { top: -7px; }
.menu-toggle__bar::after { top: 5px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bar { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bar::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 991px) {
  .menu-toggle { display: block; }
  .main-menu-area nav > ul {
    display: none;
  }
  .main-menu-area nav > ul.is-open {
    display: block;
  }
  .main-menu-area nav > ul.is-open li ul { display: none; }
  .main-menu-area nav > ul.is-open li.is-open > ul { display: block; }
}

/* ----------------------------------------------------------------- charts */
.bars { margin: 1.5rem 0; }
.bars__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #2b3a4a;
}
.bars__svg { width: 100%; height: auto; display: block; }
.bars__track { fill: #eef2f6; }
.bars__label { font-size: 13px; fill: #526689; }
.bars__value { font-size: 13px; fill: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bars__svg rect { transition: none !important; }
}

/* ------------------------------------------------------------ lite-youtube */
.lite-youtube {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.lite-youtube::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}
.lite-youtube__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.lite-youtube__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M27 34V14l17 10z' fill='%23fff'/%3E%3C/svg%3E") center / 68px 48px no-repeat;
  transition: background-color 0.2s ease;
}
.lite-youtube:hover .lite-youtube__play::after,
.lite-youtube__play:focus-visible::after {
  background-color: #f00;
}
.lite-youtube.is-active::before,
.lite-youtube.is-active .lite-youtube__play { display: none; }
.lite-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------- rescued from dropped sheets */
/*
 * Two things the dropped stylesheets were still styling. Found by
 * migration/scripts/check-dropped-css.mjs, which takes the selectors out of
 * every stylesheet the build no longer loads and asks whether any of them still
 * match built markup. Both of these did.
 */

/*
 * sms-comments.css styled .comment-form-area and its heading. The wpDiscuz form
 * inside it is gone, but the "Ask an Expert" heading is content and was kept, so
 * these few rules have to come with it or the heading renders as a bare default
 * h3 on 59 pages. Only the rules that apply to what survived; the rest of that
 * stylesheet styled the form.
 */
.comment-form-area {
  position: relative;
  padding: 30px 20px 0 20px;
  margin-top: 20px;
  background: #fafafa;
}
.comment-form-area h3 {
  padding-bottom: 28px;
  position: relative;
  font-size: 24px;
  font-weight: 600;
  overflow: hidden;
}
.comment-form-area h3::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 100%;
  height: 1px;
  background: #d5d9dc;
  margin-left: 15px;
}

/*
 * Font Awesome came from the wpDiscuz bundle, which is dropped. Exactly two
 * glyphs survive in the content: fa-linkedin on the author boxes across many
 * pages, and fa-check on one review. Reinstating a whole icon font, and its
 * ~900 KB of webfonts, to render two glyphs would be worse than the problem.
 * These draw the same two marks from inline SVG with no font request at all.
 */
.fa-linkedin::before,
.fa-check::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.fa-linkedin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E");
}
.fa-check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4l-166.4-166.4c-9.4-9.4-9.4-24.6 0-33.9l33.9-33.9c9.4-9.4 24.6-9.4 33.9 0L192 328.1 404.7 115.3c9.4-9.4 24.6-9.4 33.9 0l33.9 33.9c9.4 9.4 9.4 24.6 0 33.9L207.8 439.4c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4l-166.4-166.4c-9.4-9.4-9.4-24.6 0-33.9l33.9-33.9c9.4-9.4 24.6-9.4 33.9 0L192 328.1 404.7 115.3c9.4-9.4 24.6-9.4 33.9 0l33.9 33.9c9.4 9.4 9.4 24.6 0 33.9L207.8 439.4c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E");
}

/*
 * .clearfix was defined only in the wpDiscuz stylesheet, as `clear: both`. It
 * survives on Tatsu page-builder markup on two pages, where without it a float
 * would not clear. One line, and it is the whole of what that stylesheet
 * contributed to markup we kept.
 */
.clearfix {
  clear: both;
}