/*
 * Corrections to the mirrored pages that belong in CSS rather than in a
 * rewrite of somebody else's markup. Loaded after the page's own styles.
 */

/*
 * The header would not stick.
 *
 * .eslnav is `position: sticky; top: 0` and it works on every rebuilt page,
 * but on a mirrored one it scrolled away with the page. The reason is two
 * ancestors from the Joomla template: body.site and .body-innerwrapper both
 * carry `overflow-x: hidden`, and an overflow other than `visible` makes an
 * element a scroll container. The header then sticks to *that* box — which is
 * as tall as the whole document and never scrolls — instead of to the window.
 *
 * `clip` cuts off the same horizontal overflow they were hiding, without
 * creating a scroll container, so the sticking goes back to the window.
 */
body.site,
.body-wrapper,
.body-innerwrapper {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/*
 * The sign-up button in the hero, with the star HOPE wears everywhere else.
 *
 * The page builder's own button carried an empty <i class="icon icon-icon-1">
 * — an icon from a font the mirror does not have, so it drew nothing and left
 * a gap. postprocess.py replaces it with the same three stars as the header
 * and the HOPE AI menu item; this is what lays them out.
 */
.sppb-btn .esl-spark {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
}
a.sppb-btn:has(.esl-spark) {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

/*
 * The hero's decorative "fan".
 *
 * The hero picture has its own headline painted into it ("Meet HOPE — Your AI
 * English Tutor…"), and this element is positioned over it. At most widths it
 * lands squarely on that text. It carries no meaning, so it goes.
 */
.home-hero-section img[src*="abstract-element"] {
  display: none;
}

/*
 * "Learn More" on the home page.
 *
 * The page builder gave each card's button its own colour, so the row read as
 * five unrelated links. One button: blue block, white type, and the reverse on
 * hover.
 */
.sppb-btn.sppb-btn-link,
a.sppb-btn.sppb-btn-link {
  display: inline-block;
  padding: 0.7rem 1.6rem !important;
  border: 1px solid #0040bc !important;
  border-radius: 0 !important;
  background: #0040bc !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sppb-btn.sppb-btn-link:hover,
a.sppb-btn.sppb-btn-link:hover,
.sppb-btn.sppb-btn-link:focus-visible {
  background: #fff !important;
  color: #0040bc !important;
}

/*
 * The gap above the footer.
 *
 * The last page-builder section carries 180px of bottom padding, which left a
 * band of empty white between the page and the footer.
 */
.page-content.builder-container > .sppb-section:last-child {
  padding-bottom: 15px !important;
}

/*
 * The gap above the first section of the home page.
 *
 * The hero used to carry 60px of dead space before anything began, which on a
 * laptop pushed the headline off the fold for no reason.
 */
.page-content.builder-container > .sppb-section:first-child {
  margin-top: -60px;
}

/*
 * "Talk with HOPE" on the home page.
 *
 * A button of our own, put in place of the page builder's by header.js once
 * somebody is signed in. Restyling theirs was tried first and lost: their
 * rules for `.sppb-btn-primary` beat an inline `!important` on one of the two
 * copies and not the other, which is the worst possible outcome. An element
 * that carries none of their classes cannot be reached by any of their rules.
 */
.esl-hope-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.9em;
  background: #0040bc;
  color: #fff;
  font: 600 18px/1.2 var(--font-figtree, Figtree), system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(0, 64, 188, 0.75);
  transition: background 0.15s ease;
}
.esl-hope-cta:hover,
.esl-hope-cta:focus {
  background: #001a4d;
  color: #fff;
}
.esl-hope-cta svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}