/* Blog reading experience.

   The posts run 1,300-5,000 words down a 780px column set at 16px/1.8 — about
   95 characters a line, well past the 60-75 that reads comfortably — with 8 to
   29 section headings and no way to see the shape of the article or move around
   inside it. The sidebar that existed carried a 258px spacer above it and laid
   each recent post out as a 50/50 split of thumbnail and title, which wrapped
   titles to one word per line and made each card 480px tall.

   This file sets a readable measure and rhythm for the article, adds a sticky
   aside holding a contents list, a related-reading block and a course CTA, and
   rebuilds the recent-post cards as compact media rows.

   Markup comes from scripts/blog-reading.js. Everything is scoped to .reg-post
   (the body) or .reg-article (the post's own column), so the header, the footer
   and the rest of the site are untouched. */

.reg-post {
  --reg-red: #ff1e00;
  --reg-ink: #14110f;
  --reg-body: #34302d;
  --reg-muted: #6d6763;
  --reg-line: #e4e7ea;
  --reg-wash: #f7f9f9;
  /* ~77 characters at 17px Open Sans. */
  --reg-measure: 660px;
}

/* ------------------------------------------------------------------ article */

/* One measure for the whole column, not for the paragraphs alone. Capping only
   the text left 661px paragraphs sitting under 1150px headings beside 1150px
   tables — every block starting at the same left edge and ending at a different
   right one, which is what read as broken. Everything shares an edge now. */
.reg-article > .elementor-widget-wrap {
  max-width: var(--reg-measure);
}

/* Individual widgets carry authored widths — 96.875% on a heading here, 93.75%
   on a FAQ block there — which are drag artifacts from the Elementor editor
   rather than decisions: they left headings sitting 10px inside their own
   paragraphs. The width comes from per-post CSS keyed to that page's ids
   (.elementor-4350 .elementor-element.elementor-element-7910908, 0,3,0), so the
   column is named here to clear it. In a single-column article every block
   wants the same edge. */
.reg-post .reg-article > .elementor-widget-wrap > .elementor-element {
  width: 100%;
  max-width: 100%;
  --container-widget-width: 100%;
}

.reg-article .elementor-widget-text-editor {
  font-size: 17px;
  line-height: 1.78;
  color: var(--reg-body);
}

.reg-article .elementor-widget-text-editor p {
  margin: 0 0 1.15em;
}

.reg-article .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.reg-article h2,
.reg-article h3,
.reg-article h4 {
  color: var(--reg-ink);
  /* Clears the anchor from the top of the viewport when a contents link jumps
     to it, so the heading is not left flush against the edge. */
  scroll-margin-top: 88px;
}

.reg-article h2 {
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.28;
  margin: 2em 0 .5em;
}

.reg-article h3 {
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.35;
  margin: 1.7em 0 .4em;
}

.reg-article ul,
.reg-article ol {
  margin: 0 0 1.25em;
  padding-left: 1.3em;
}

.reg-article li {
  margin-bottom: .45em;
  line-height: 1.7;
}

.reg-article li::marker {
  color: var(--reg-red);
}

.reg-article img {
  border-radius: 10px;
}

.reg-article blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--reg-red);
  color: var(--reg-ink);
  font-style: normal;
}

/* Five posts carry band-score tables. They were unstyled and could push the
   column sideways on a phone, so they scroll inside their own box. */
.reg-article .elementor-widget-text-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 15.5px;
}

.reg-article .elementor-widget-text-editor th,
.reg-article .elementor-widget-text-editor td {
  border: 1px solid var(--reg-line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.reg-article .elementor-widget-text-editor th {
  background: var(--reg-wash);
  color: var(--reg-ink);
  font-weight: 700;
}

.reg-article .elementor-widget-text-editor tbody tr:nth-child(even) td {
  background: #fbfcfc;
}

.reg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
}

.reg-table-scroll table {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------- aside */

/* Not sticky, deliberately. The right column also carries the recent-post list
   below this, and a stuck aside meant that list scrolled up underneath it —
   two blocks of text painted over each other. Only the contents rail sticks,
   and it is alone in its track, so it has nothing to collide with. */
.reg-aside {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.reg-card {
  border: 1px solid var(--reg-line);
  border-radius: 14px;
  background: #fff;
  padding: 15px 17px;
}

.reg-card__title {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--reg-muted);
}

/* Contents. Capped so a 24-heading post cannot push the CTA off the screen;
   the list scrolls inside the card instead. When it does, assets/blog.js adds
   is-scrollable and the last line fades out, so a half-cut item reads as more
   list rather than as a rendering fault. */
.reg-toc {
  position: relative;
}

.reg-toc.is-scrollable::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 42px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%);
  pointer-events: none;
}

.reg-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reg-toc__list a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--reg-line);
  color: var(--reg-body);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.reg-toc__list a:hover {
  color: var(--reg-red);
  border-left-color: var(--reg-red);
}

.reg-toc__list a[aria-current="true"] {
  color: var(--reg-red);
  border-left-color: var(--reg-red);
  font-weight: 600;
}

.reg-toc__list .is-sub a {
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--reg-muted);
}

/* Related reading. */
.reg-more__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reg-more__list li + li {
  border-top: 1px solid var(--reg-line);
}

.reg-more__list a {
  display: block;
  padding: 10px 0;
  color: var(--reg-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.42;
  text-decoration: none;
  transition: color .15s ease;
}

.reg-more__list a:hover {
  color: var(--reg-red);
}

/* Course CTA. The one place in the aside allowed to shout. */
.reg-cta {
  border-radius: 14px;
  background: var(--reg-ink);
  color: #fff;
  padding: 17px;
}

.reg-cta__title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.reg-cta__body {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.55;
  color: #cfc9c6;
}

/* The theme paints every link brand red from .elementor-kit-88 a (0,1,1), which
   outranks a lone class and left this label red on red — invisible. Naming the
   card and the element settles it. */
.reg-cta a.reg-cta__link {
  display: inline-block;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--reg-red);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.reg-cta a.reg-cta__link:hover {
  background: #fff;
  color: var(--reg-ink);
}

/* --------------------------------------------------------- sidebar clean-up */

/* The 258px spacer that pushed "Recent Posts" below the fold. */
.reg-sidebar .elementor-widget-spacer {
  display: none;
}

/* "Recent Posts" is a plain heading widget sitting outside the card system.
   Matched to the card labels so the aside reads as one column. */
.reg-sidebar .elementor-widget-heading .elementor-heading-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--reg-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Recent-post cards. The template splits each into two 50% columns and wraps
   them in 3em of padding, which left the title about 170px wide — one word a
   line — inside a 480px-tall card. A fixed thumbnail beside a fluid title is
   what it was reaching for.

   The padding and the 36px title come from per-post Elementor CSS whose
   selectors are built from that page's own ids
   (.elementor-4350 .elementor-element.elementor-element-67e8681 …, five
   classes deep and different on every post) so they cannot be named here.
   These selectors walk the same chain out of generic class names to land one
   step above it without !important. */
.reg-post .reg-sidebar .elementor-widget-container .ekit-wid-con .elementskit-blog-block-post {
  padding: 0;
}

.reg-post .reg-sidebar .elementor-widget-container .ekit-wid-con .elementskit-post-body .entry-title,
.reg-post .reg-sidebar .elementor-widget-container .ekit-wid-con .elementskit-post-body .elementskit-entry-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 600;
  /* A few titles run past 90 characters. Three lines keeps every card the
     height of its thumbnail; the full title stays in the link's own text. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The plugin's grid row is pulled out 15px each side to cancel gutters its
   cards no longer have, which pushed the page 15px wider than the viewport at
   1024px. Predates this file — visible with it disabled — but this is the
   widget being rebuilt, so it is fixed here. */
.reg-post .ekit-row.post-items {
  margin-left: 0;
  margin-right: 0;
}

.reg-post .elementskit-blog-block-post .row.no-gutters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
}

.reg-post .elementskit-blog-block-post .ekit-col-6 {
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.reg-post .elementskit-blog-block-post .ekit-col-6.order-1 {
  flex: 0 0 72px;
}

.reg-post .elementskit-entry-thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 9px;
}

.reg-post .elementskit-blog-block-post .elementskit-entry-title,
.reg-post .elementskit-blog-block-post .entry-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
}

.reg-post .elementskit-blog-block-post .elementskit-entry-title a,
.reg-post .elementskit-blog-block-post .entry-title a {
  color: var(--reg-ink);
  font-weight: 600;
}

.reg-post .elementskit-blog-block-post .elementskit-post-body {
  padding: 0;
}

.reg-post .post-item {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--reg-line);
}

.reg-post .post-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}


/* --------------------------------------------------------------------- FAQ */

/* Built by scripts/blog-faq.js. Native <details>, so it opens without
   JavaScript and a keyboard or screen reader gets the disclosure semantics for
   free. The plus/minus is drawn from borders rather than a glyph, which keeps
   it aligned at any font size and needs no icon font. */

.reg-faq {
  margin: 1.6em 0 2em;
  border: 1px solid var(--reg-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.reg-faq__item + .reg-faq__item {
  border-top: 1px solid var(--reg-line);
}

.reg-faq__q {
  position: relative;
  display: block;
  padding: 15px 52px 15px 18px;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--reg-ink);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease, color .15s ease;
}

.reg-faq__q::-webkit-details-marker {
  display: none;
}

.reg-faq__q:hover {
  background: var(--reg-wash);
  color: var(--reg-red);
}

.reg-faq__item[open] > .reg-faq__q {
  color: var(--reg-red);
}

/* The horizontal bar of the plus. */
.reg-faq__q::before,
.reg-faq__q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}

/* ...and the vertical one, which rotates away when the answer is open. */
.reg-faq__q::after {
  transform: translateY(-50%) rotate(90deg);
}

.reg-faq__item[open] > .reg-faq__q::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.reg-faq__q::before {
  transform: translateY(-50%);
}

.reg-faq__q:focus-visible {
  outline: 3px solid var(--reg-red);
  outline-offset: -3px;
}

.reg-faq__a {
  padding: 0 18px 16px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--reg-body);
}

.reg-faq__a > :first-child { margin-top: 0; }
.reg-faq__a > :last-child { margin-bottom: 0; }

.reg-faq__a p {
  margin: 0 0 .9em;
}

/* Two posts keep a plugin accordion. Matched to the above so a reader moving
   between posts sees one component, not two. */
.reg-article .elementskit-accordion .elementskit-card,
.reg-article .elementor-accordion .elementor-accordion-item {
  border: 0;
  border-top: 1px solid var(--reg-line);
  background: #fff;
}

.reg-article .elementskit-accordion .elementskit-card:first-child,
.reg-article .elementor-accordion .elementor-accordion-item:first-child {
  border-top: 0;
}

.reg-article .elementskit-accordion,
.reg-article .elementor-accordion {
  margin: 1.6em 0 2em;
  border: 1px solid var(--reg-line);
  border-radius: 14px;
  overflow: hidden;
}

/* ------------------------------------------- collapsed contents (not sticky) */

/* The same links as the sticky card, rendered a second time as a disclosure.
   Which copy is visible depends on the layout: never both. Its appearance is
   defined unconditionally here because two different rules switch it on — the
   narrow breakpoint below, and .reg-flow, which applies at every width. */
.reg-toc-m {
  display: none;
  margin: 0 0 22px;
  border: 1px solid var(--reg-line);
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
}

.reg-toc-m > summary {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--reg-ink);
  cursor: pointer;
  list-style: none;
}

.reg-toc-m > summary::-webkit-details-marker {
  display: none;
}

.reg-toc-m > summary::after {
  content: "";
  float: right;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-right: 2px solid var(--reg-muted);
  border-bottom: 2px solid var(--reg-muted);
  transform: rotate(45deg);
}

.reg-toc-m[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 9px;
}

.reg-toc-m .reg-toc__list {
  max-height: none;
  padding-bottom: 12px;
}

/* -------------------------------------------------------------- post layout */

/* One layout for all 29 posts from 1200px up: contents rail, article, aside.
   Two page shapes arrive at it. Most posts already have a row holding the
   article and the sidebar as siblings, and the rail becomes its third child.
   The two full-width posts — /ielts-preparation-course/ and
   /blog/ielts-prep-course-kuwait-expats-nurses/ — have no such row, so their
   rail and aside sit inside the single column instead. Either way the grid gets
   three children.

   Tracks are assigned by class, never by source order, so the six posts too
   short for a contents list leave track one empty rather than sliding the
   article into it. Every post puts its text in the same place.

   1170px of container: 200 + 28 + 634 + 28 + 280. The middle track is the
   reading measure, so the cap that applies elsewhere is lifted inside it. */

.reg-flow .reg-article > .elementor-widget-wrap {
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .reg-post .reg-row,
  .reg-flow .reg-article > .elementor-widget-wrap {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 280px;
    column-gap: 28px;
    max-width: none;
  }

  /* Items stretch to the row rather than shrinking to their content, because
     what sticks inside a column can only travel as far as that column's own
     box. Left at start-aligned, the sidebar ended where the recent-post list
     ended and the aside came unstuck two thirds of the way down the article. */
  .reg-post .reg-toc-rail {
    grid-column: 1;
    grid-row: 1;
  }

  /* So the rail is the full-height box and the card inside it is what sticks. */
  .reg-post .reg-toc-rail > .reg-card {
    position: sticky;
    top: 20px;
  }

  /* The rail has a column to itself, so the list runs much further before it
     needs to scroll than it can stacked above a CTA in a shared aside. */
  .reg-post .reg-toc-rail .reg-toc__list {
    max-height: min(76vh, 640px);
  }

  /* Elementor sizes these columns with .elementor-col-66 / -33 percentages,
     which the tracks now own instead. */
  .reg-post .reg-row > .reg-article,
  .reg-flow .reg-article > .elementor-widget-wrap > .elementor-element {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
  }

  /* The article is the tall one, so it defines the row; no need to stretch it. */
  .reg-flow .reg-article > .elementor-widget-wrap > .elementor-element {
    align-self: start;
  }

  /* On the other posts the grid is the container and the 10px widget-wrap
     padding falls inside the article track; here the grid IS the widget-wrap,
     so that padding sat outside it and pushed both rails 10px across. Move it
     off the grid and onto the article, and all 29 posts line up exactly. */
  .reg-flow .reg-article > .elementor-widget-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .reg-flow .reg-article > .elementor-widget-wrap > .elementor-element {
    padding-left: 10px;
    padding-right: 10px;
  }

  .reg-post .reg-row > .reg-sidebar {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    max-width: none;
  }

  /* On the full-width posts the aside is the grid child, so it sticks itself.
     Elsewhere it sticks inside the sidebar column, which must stay unstuck or
     the recent-post list below it could never be scrolled to. */
  .reg-flow .reg-aside {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
    grid-template-columns: none;
  }

  /* The measure is the middle track now. */
  .reg-article > .elementor-widget-wrap {
    max-width: none;
  }

  /* The gap replaces the sidebar's own inset. */
  .reg-sidebar > .elementor-widget-wrap {
    padding-left: 0;
  }

  /* The collapsed copy under the H1 belongs to the stacked layout only. */
  .reg-post .reg-toc-m {
    display: none;
  }
}

/* Below the grid there is no track for the rail: the contents fall back to the
   collapsed block under the H1, and on the full-width posts the aside becomes a
   band after the article. These have to stay inside the query — as flat rules
   they sat after the grid above and quietly turned the right rail static. */
@media (max-width: 1199px) {
  .reg-toc-rail {
    display: none;
  }

  .reg-toc-m {
    display: block;
  }

  /* Below the rails every post reads as one column: article, then related
     reading and the recent posts under it. Elementor would otherwise keep the
     article and sidebar side by side down to 767px, which left the two
     full-width posts stacked while the other 27 were not — the same layout
     split this file exists to remove, just at a narrower width. Stacking also
     buys the article the whole column to read in. */
  .reg-post .reg-row {
    display: block;
  }

  .reg-post .reg-row > .reg-article,
  .reg-post .reg-row > .reg-sidebar {
    width: 100%;
    max-width: 100%;
  }

  .reg-sidebar > .elementor-widget-wrap {
    padding-left: 0;
  }

  /* Stacked, the article has a whole container to sit in and the measure would
     otherwise hug the left with a wide gap beside it. Centre it — on every
     post, so the text lands in the same place whichever template it came
     from. */
  .reg-article > .elementor-widget-wrap {
    margin-inline: auto;
  }

  .reg-flow .reg-aside {
    margin-top: 36px;
  }
}

@media (min-width: 760px) and (max-width: 1199px) {
  .reg-flow .reg-aside {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
  .reg-aside {
    position: static;
  }

  .reg-toc-m {
    display: block;
  }

  .reg-article .elementor-widget-text-editor {
    font-size: 16.5px;
  }
}