/*
 * 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;
}

/*
 * Read & Listen on the home page (postprocess.py: read_listen_home()).
 *
 * Announced to Bob 14 Sep 2026, the day the reader shipped. The section is
 * ours, not the page builder's, so like .esl-hope-cta above it carries its
 * own classes and none of theirs can reach it. The pink is the site's
 * "do this" pink (#ff5f95 — the trial badge, Start talking, Read Aloud),
 * and the sweep of light is the same one those buttons wear.
 */
.esl-read-listen {
  background: #f5f8ff;
  border-top: 1px solid #d6e3ff;
  border-bottom: 1px solid #d6e3ff;
}
.esl-read-listen .esl-rl-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 24px 78px;
  text-align: center;
}
.esl-read-listen .sppb-addon-title {
  color: #0040bc;
  /* 90px flat, one line — P'Doy, 14 Sep 2026: both this and INTERESTING
     ENGLISH CONTENT sit at 90px, full stop. The text is 11.162em wide in
     Crimson Pro, so 90px needs a 1005px line; below that the min() term
     shrinks it to exactly fill the viewport, still on one line. */
  /* the 6.75vw term keeps step with the template's own fluid sizing on
     screens too narrow for the full 90px */
  font-size: min(90px, 6.75vw, calc((100vw - 48px) / 11.162));
  line-height: 0.95;
  letter-spacing: -0.0222em;
  white-space: nowrap;
}

/* INTERESTING ENGLISH CONTENT itself. The template's rule says 90px but a
   responsive layer scales it up on wide screens (108px at 1600) — pinned
   here to the 90px it claims, so the two headings really are equal. */
@media (min-width: 1200px) {
  #sppb-addon-9edb6b15-d502-451a-ba29-70886f0b119c .sppb-addon-title {
    font-size: 90px !important;
  }
}
.esl-rl-copy {
  max-width: 560px;
  margin: 18px auto 0;
  font: 400 18px/1.65 var(--font-figtree, Figtree), system-ui, sans-serif;
  color: #3a4b6c;
}
.esl-rl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.esl-rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  background: #fff;
  border: 1px solid #84bdff;
  color: #0040bc;
  font: 600 14px/1 var(--font-figtree, Figtree), system-ui, sans-serif;
  white-space: nowrap;
}
.esl-rl-chip svg {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}
.esl-rl-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.9em;
  background: #ff5f95;
  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(255, 95, 149, 0.75);
  transition: background 0.15s ease;
}
.esl-rl-btn:hover,
.esl-rl-btn:focus {
  background: #ff4886;
  color: #fff;
}
.esl-rl-btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
}
.esl-rl-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 35%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: esl-rl-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes esl-rl-shine {
  0%, 62% { left: -40%; }
  92%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .esl-rl-btn::after { animation: none; opacity: 0; }
}