/* ------------------------------------------------------------------
   Base document sizing
------------------------------------------------------------------- */

html,
body {
  height: 100%;
  margin: 0;
}

/*
  Prevent WordPress from pushing the page down when the admin bar is shown.
  We handle offsetting fixed elements manually.
*/
html {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Font Awesome webfonts (local)

   IMPORTANT
   - Theme markup uses Font Awesome 6 classes (e.g. .fa-solid .fa-people-roof)
   - The block editor preview should match the front-end

   We ship the Font Awesome Free 6 webfonts in:
     /assets/fonts/font-awesome-6/webfonts/

   This file wires those webfonts up to the FA6 font-family names used by
   assets/css/fontawesome.min.css so icons render without relying on a CDN.
------------------------------------------------------------------- */

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/font-awesome-6/webfonts/fa-solid-900.woff2") format("woff2"),
       url("../fonts/font-awesome-6/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/font-awesome-6/webfonts/fa-regular-400.woff2") format("woff2"),
       url("../fonts/font-awesome-6/webfonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/font-awesome-6/webfonts/fa-brands-400.woff2") format("woff2"),
       url("../fonts/font-awesome-6/webfonts/fa-brands-400.ttf") format("truetype");
}

/*
  Font Awesome 6 note
  -------------------
  The theme markup (copied from TLS) uses style classes directly, e.g.
    <i class="fa-solid fa-chevron-right"></i>
  Some Font Awesome builds only set `font-weight` on the base `.fa` class.
  If `font-weight` is not set, browsers will often pick the 400 face (regular)
  and solid glyphs will render as "missing".

  Force the correct weights so icons render reliably.
*/

.fa-solid,
.fas {
  font-weight: 900;
}

.fa-regular,
.far {
  font-weight: 400;
}

.fa-brands,
.fab {
  font-weight: 400;
}

/* ------------------------------------------------------------------
   Fixed header offset
   (Prevents the first module/content on the page from sitting under
   the fixed header. Adjust in one place if header height changes.)
------------------------------------------------------------------- */

:root {
  --tls-header-height: 87px;
}

/*
  Offset is applied in templates where needed so article layouts can shift
  the entire page sections container beneath the fixed header.
*/

/* ------------------------------------------------------------------
   Page layout (header + content + footer)
------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
}

/* Primary page wrapper */
.tls-page {
  flex: 1 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content should consume remaining height */
.tls-content {
  flex: 1 0 auto;
  padding-top: var(--tls-header-height);
}

/* When the hero is enabled, it already clears the fixed header.
   Remove the extra top padding so there isn't a large gap before content. */
body.has-tls-hero .tls-content {
  padding-top: 0;
}

/* Block editor canvas should match front-end typography sizing */
.editor-styles-wrapper {
  font-size: var(--tls-font-size-paragraph);
  font-family: var(--tls-font-family);
}

/* ------------------------------------------------------------------
   Gutenberg content width & centering
   - Keeps plain blocks (paragraphs, headings, groups...) centered
   - Allows TLS modules / alignfull blocks to remain full-bleed
------------------------------------------------------------------- */

.tls-entry-content > :where(*):not(.tls-fullbleed):not(.alignfull) {
  max-width: 1285px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Wide == content width for this theme */
.tls-entry-content > .alignwide {
  max-width: 1285px;
}

/* Full-bleed blocks should truly span edge-to-edge */
.tls-entry-content > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Footer must never shrink or float */
.footer {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Full-bleed helper for insertable modules
   (Allows section backgrounds to span edge-to-edge even if inserted
   inside a Bootstrap .container in the editor)
------------------------------------------------------------------- */

.tls-fullbleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/*
  Block editor selection alignment
  -------------------------------
  Our dynamic TLS modules render full-width sections via `.tls-fullbleed`.
  In the block editor, the selectable block wrapper is slightly inset from
  the canvas edge, so `.tls-fullbleed` can make module text appear ~25px
  outside the blue selection outline.

  Make the *block wrapper itself* full-bleed in the editor so:
  - the selection outline matches the rendered module width
  - inner `.tls-fullbleed` sections no longer need to break out further
*/

.editor-styles-wrapper .tls-module-block,
.editor-styles-wrapper .tls-hero-banner-block {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* In the editor canvas, Gutenberg wrapper widths can make the Why Use TLS
   checkpoint overlay sit too far to the right. Constrain the stack to its
   content width so the overlaid checkpoint box aligns like the front-end. */
.editor-styles-wrapper .tls-editor-page-sections #uspContent .stackedUspBox {
  width: fit-content;
  max-width: 100%;
}

.editor-styles-wrapper .tls-editor-page-sections #uspContent .stackedUspBox .checkPointContainer {
  right: -10rem;
  bottom: -30rem;
}

.editor-styles-wrapper .tls-editor-page-sections #uspContent {
  margin-bottom: 150px;
}

/* ------------------------------------------------------------------
   Hero banner tweaks
   - Hug the top: reduce vertical padding (matches home feel)
   - Optional right-bleed image with a soft fade at 50% width
------------------------------------------------------------------- */

/* Reduce the default hero padding from the captured stylesheet so the content
   sits closer to the top of the hero area.
   IMPORTANT: keep horizontal padding at 0 so the hero image aligns with
   the same container edges as the rest of the page content. */
#responsiveHero {
  --tls-hero-pad-top: 4rem;
  --tls-hero-pad-bottom: 6rem;
  padding: var(--tls-hero-pad-top) 0 var(--tls-hero-pad-bottom);
}

@media (max-width: 768px) {
  #responsiveHero {
    --tls-hero-pad-top: 3rem;
    --tls-hero-pad-bottom: 4rem;
  }
}

/* When NOT bleeding the image to the viewport edge, keep the image aligned
   to the right edge of the content container. */
#responsiveHero:not(.tls-hero--bleed-right) .hero-image {
  display: flex;
  justify-content: flex-end;
}

#responsiveHero:not(.tls-hero--bleed-right) .hero-image img {
  width: 100%;
  max-width: 425px;
  height: auto;
}

#responsiveHero.tls-hero--fade-contained .hero-image img {
  max-width: none;
}

#responsiveHero.tls-hero--fade-contained img {
  border-radius: 0;
}

/* Trusted line sizing (ensure it stays readable) */
#responsiveHero .trusted {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
}

#responsiveHero .trusted i {
  font-size: 2.2rem;
  line-height: 1;
}

#responsiveHero .trusted p {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

#responsiveHero .home-info .tls-hero-subtitle {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

#responsiveHero .tls-hero-bottom-text {
  font-size: 2rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  #responsiveHero .trusted {
    gap: 0.9rem;
    margin-top: 1.5rem;
  }
  #responsiveHero .trusted p {
    font-size: 1.7rem;
  }
  #responsiveHero .home-info .tls-hero-subtitle,
  #responsiveHero .tls-hero-bottom-text {
    font-size: 1.7rem;
  }
}

/* Right-bleed image option.
   The text remains constrained to the container while the image column
   extends to the viewport edge.
   A gradient overlay fades the image into the hero background at ~50%. */
#responsiveHero.tls-hero--bleed-right .hero-image {
  position: relative;
  overflow: hidden;
  /* Ensure the image never forces the hero taller than its text content */
  min-height: 0;
  /* Extend the image into the hero's vertical padding so it fills the full
     visible hero height (no top/bottom padding around the image). */
  margin-top: calc(-1 * var(--tls-hero-pad-top));
  margin-bottom: calc(-1 * var(--tls-hero-pad-bottom));
  /* Account for bootstrap container right padding so we truly bleed to edge. */
  margin-right: calc(50% - 50vw - 15px);
}

#responsiveHero.tls-hero--bleed-right {
  overflow-x: clip;
}

#responsiveHero.tls-hero--bleed-right .hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Soft fade on the left half of the image so it blends into the background
   when the image becomes very wide. */
#responsiveHero.tls-hero--bleed-right .hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 70%;
  pointer-events: none;
  z-index: 1;
  /* Match the captured hero background colour */
  background: linear-gradient(
    to right,
    #00202b 0%,
    rgba(0, 32, 43, 0.7) 45%,
    rgba(0, 32, 43, 0) 100%
  );
}

/* Fade-contained image option.
   Keep the image aligned to the inner container edge with a softer fade
   that starts at 25% of the image width. */
#responsiveHero.tls-hero--fade-contained .hero-image {
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin-top: calc(-1 * var(--tls-hero-pad-top));
  margin-bottom: calc(-1 * var(--tls-hero-pad-bottom));
}

#responsiveHero.tls-hero--fade-contained .hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

#responsiveHero.tls-hero--fade-contained .hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to right,
    #00202b 0%,
    rgba(0, 32, 43, 0.7) 25%,
    rgba(0, 32, 43, 0) 100%
  );
}

@media (max-width: 991px) {
  #responsiveHero:not(.tls-hero--bleed-right) .hero-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    justify-content: center;
  }

  #responsiveHero:not(.tls-hero--bleed-right) .hero-image img {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }

  /* On mobile the captured stylesheet hides the image - keep things simple. */
  #responsiveHero.tls-hero--bleed-right .hero-image {
    position: absolute;
    top: calc(-1 * var(--tls-hero-pad-top));
    bottom: calc(-1 * var(--tls-hero-pad-bottom));
    left: 0;
    right: calc(50% - 50vw - 15px);
    margin: 0;
  }

  #responsiveHero.tls-hero--bleed-right .hero-row {
    position: relative;
  }

  #responsiveHero.tls-hero--bleed-right .hero-row > div:first-child {
    position: relative;
    z-index: 2;
  }

  #responsiveHero.tls-hero--fade-contained .hero-image {
    position: absolute;
    top: calc(-1 * var(--tls-hero-pad-top));
    bottom: calc(-1 * var(--tls-hero-pad-bottom));
    left: 0;
    right: 0;
    margin: 0;
  }

  #responsiveHero.tls-hero--fade-contained .hero-row {
    position: relative;
  }

  #responsiveHero.tls-hero--fade-contained .hero-row > div:first-child {
    position: relative;
    z-index: 2;
  }
}

/* ------------------------------------------------------------------
   WordPress admin bar handling
------------------------------------------------------------------- */

/* Reduce page height so footer never overflows viewport */
body.admin-bar .tls-page {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

/* Push fixed header below admin bar */
body.admin-bar header.tls-site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* When the admin bar is visible, our JS offset already accounts for it. */
body.admin-bar .tls-content {
  padding-top: var(--tls-header-height);
}

/* Hero pages: still no extra main padding even with the admin bar. */
body.admin-bar.has-tls-hero .tls-content {
  padding-top: 0;
}

/* ------------------------------------------------------------------
   Footer structure & responsiveness
------------------------------------------------------------------- */

.footer .row {
  flex-wrap: wrap !important;
}

.footer img {
  max-width: 100%;
  height: auto;
}

.footer ul {
  margin: 0;
  padding-left: 0;
}

/* =============================
   TLS Menu Icon Sections module
   ============================= */

/* Remove the huge default padding applied to `.page-sections section` so that
   the block's margin controls can truly reach 0px top/bottom. */
.page-sections section.tls-menu-icon-sections {
  padding: 0;
}

.tls-menu-icon-sections {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* Keep the module sized to its parent container even though modules normally
   use `.tls-fullbleed` to escape their wrappers. */
.tls-menu-icon-sections.tls-fullbleed {
  margin-left: 0;
  margin-right: 0;
}

/* Use CSS Grid so items always stretch to fill the available width,
   especially when the column count is less than 3. */
.tls-menu-icon-sections .pods {
  /* Override the global `.pods` multi-column rules */
  column-count: initial;
  column-gap: normal;

  /* The global `.pods` also constrains width; remove that so 1–2 columns
     can stretch to the full container width. */
  max-width: none;
  width: 100%;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.tls-menu-icon-sections .pods .pod {
  margin-bottom: 0; /* grid gap handles spacing */
  max-width: none;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}

.tls-menu-icon-sections .pods .pod-title-wrapper {
  background-color: #ffffff;
  border: 1px solid #d6d6d6;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 2rem;
}

.tls-menu-icon-sections .pods .pod-links {
  background-color: #ffffff;
  border: 1px solid #d6d6d6;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding: 0 2rem 2rem;
}

.tls-menu-icon-sections .pods .pod-links .pod-link:last-child {
  border-bottom: 0;
}

.tls-menu-icon-sections.tls-cols-1 .pods { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tls-menu-icon-sections.tls-cols-2 .pods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tls-menu-icon-sections.tls-cols-3 .pods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tls-menu-icon-sections.tls-cols-4 .pods { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 992px) {
  .tls-menu-icon-sections:not(.tls-cols-1) .pods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .tls-menu-icon-sections .pods,
  .tls-menu-icon-sections.tls-cols-2 .pods,
  .tls-menu-icon-sections.tls-cols-3 .pods,
  .tls-menu-icon-sections.tls-cols-4 .pods {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Flat mode (closest to TLS Legal Services style)
   - left column: category title (black, NOT a link)
   - right side: links spread across remaining columns */
.tls-menu-icon-sections--flat .tls-mis-flat-row {
  align-items: flex-start;
}

.tls-menu-icon-sections--flat .tls-mis-flat-row + .tls-mis-flat-row {
  border-top: 1px solid #d6d6d6;
}

.tls-menu-icon-sections--flat h3 {
  margin: 0;
  color: #00202b;
}

.tls-menu-icon-sections--flat .tls-mis-flat-links {
  column-count: var(--tls-mis-link-cols, 3);
  column-gap: 4rem;
}

.tls-menu-icon-sections--flat .tls-mis-flat-links a {
  display: block;
  color: #41afc6;
  text-decoration: none;
  margin: 0 0 0.9rem 0;
  break-inside: avoid;
}

.tls-menu-icon-sections--flat .tls-mis-flat-links a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .tls-menu-icon-sections--flat .tls-mis-flat-links {
    column-count: 1;
  }
}

/* Inherit TLS Section colours when requested. */
.tls-section--inherit-colors .tls-menu-icon-sections .pod {
  color: inherit;
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-title-wrapper {
  background-color: transparent;
  border-color: var(--tls-section-primary-font);
  color: inherit;
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-title .pod-icon {
  background-color: var(--tls-section-tertiary-bg);
  border-color: currentColor;
  color: inherit;
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-links {
  background-color: var(--tls-section-primary-bg);
  border-color: var(--tls-section-primary-font);
  color: var(--tls-section-primary-font);
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-links .pod-link {
  border-bottom-color: var(--tls-section-primary-font);
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-links .pod-link a,
.tls-section--inherit-colors .tls-menu-icon-sections .pod-links .pod-link a i {
  color: var(--tls-section-primary-font);
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-title a {
  color: inherit;
}

.tls-section--inherit-colors .tls-menu-icon-sections .pod-link a:hover {
  background-color: transparent;
}

.tls-section--inherit-colors .tls-menu-icon-sections--flat h3,
.tls-section--inherit-colors .tls-menu-icon-sections--flat .tls-mis-flat-links a {
  color: inherit;
}

.tls-section--inherit-colors .tls-menu-icon-sections--flat .tls-mis-flat-row + .tls-mis-flat-row {
  border-top-color: currentColor;
}

/* Swap accent colours for secondary/tertiary sections. */
.tls-section--inherit-colors.tls-section-bg--secondary .tls-menu-icon-sections {
  color: var(--tls-section-tertiary-font);
}

.tls-section--inherit-colors.tls-section-bg--secondary .tls-menu-icon-sections .pod-title-wrapper {
  background-color: var(--tls-section-tertiary-bg);
}

.tls-section--inherit-colors.tls-section-bg--tertiary .tls-menu-icon-sections {
  color: var(--tls-section-secondary-font);
}

.tls-section--inherit-colors.tls-section-bg--tertiary .tls-menu-icon-sections .pod-title-wrapper {
  background-color: var(--tls-section-secondary-bg);
}

.tls-section--inherit-colors.tls-section-bg--transparent .tls-menu-icon-sections .pod-title-wrapper {
  background-color: var(--tls-section-primary-bg);
}

/* =============================
   TLS CTA module
   ============================= */

/* Remove the captured stylesheet's huge default section padding so the
   module's padding settings (inline styles) are always respected. */
.page-sections section.tls-cta {
  padding: 0;
}

.tls-cta .tls-cta-inner {
  width: 100%;
}

.tls-cta .tls-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .tls-cta .tls-cta-btn {
    width: 100%;
    max-width: 520px;
  }
}

/* =============================
   TLS Related Articles module
   ============================= */

.page-sections section.tls-related-articles {
  padding: 2rem 0;
}

.tls-related-articles h2 {
  margin-bottom: 2rem;
}

.tls-related-articles .tls-related-articles__grid {
  display: grid;
  grid-template-columns: repeat(min(var(--tls-related-cols, 3), 4), minmax(0, 1fr));
  gap: 24px;
  margin-top: 0;
}

.tls-related-articles .tls-related-articles__item .card {
  height: 100%;
  transition: background-image 0.2s ease, box-shadow 0.2s ease;
}

.tls-related-articles .tls-related-articles__item > a {
  display: block;
  text-decoration: none;
}

.tls-related-articles .tls-related-articles__item > a:hover,
.tls-related-articles .tls-related-articles__item > a:focus,
.tls-related-articles .tls-related-articles__item > a:focus-visible {
  text-decoration: none;
}

.tls-related-articles .tls-related-articles__item > a:hover .card,
.tls-related-articles .tls-related-articles__item > a:focus .card,
.tls-related-articles .tls-related-articles__item > a:focus-visible .card {
  background-image: linear-gradient(180deg, rgba(245, 166, 35, 0.08) 0%, rgba(245, 166, 35, 0.02) 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.tls-related-articles .tls-related-articles__item img {
  display: block;
  width: 100%;
  height: 220px;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

#helpadvice .card p {
  font-size: 2rem;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__grid {
  grid-template-columns: 1fr;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__taxonomy {
  margin: 0px -15px 6px;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__intro {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__mins {
  margin: 8px 0 0;
  align-self: flex-end;
  order: 3;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__item .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__item .card-body h3 {
  font-size: 2rem;
  line-height: 1.2;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__taxonomy {
  order: 2;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__intro {
  order: 1;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__mins {
  margin-top: auto;
}

.tls-related-articles.tls-related-articles--single-column .tls-related-articles__taxonomy .ktc-article-taglink {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #f5a623;
  border-radius: 999px;
  color: #f5a623;
  text-decoration: none;
  line-height: 1.2;
}

.tls-related-articles .tls-related-articles__pager {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.tls-related-articles .tls-related-articles__pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 17px;
  padding: 0 8px;
  border: 1px solid #d0d8db;
}

.tls-related-articles .tls-related-articles__pager a.is-active {
  background: #00202b;
  color: #fff;
  border-color: #00202b;
}

#responsiveHero .page__meta-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}

@media (max-width: 1200px) {
  .tls-related-articles .tls-related-articles__grid {
    grid-template-columns: repeat(min(var(--tls-related-cols, 3), 3), minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .tls-related-articles .tls-related-articles__grid {
    grid-template-columns: repeat(min(var(--tls-related-cols, 3), 2), minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .tls-related-articles .tls-related-articles__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================
   Custom HTML block - step list
   ============================= */

.step-list {
  display: grid;
  gap: 14px;
}

.step-list .step-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-list .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  background-color: #fff;
  border-radius: 10px;
  flex: 0 0 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.step-list .step-text {
  line-height: 1.3;
}

/* ---------------------------------
   Header account link alignment
---------------------------------- */
.tls-navbar-top-constraint {
  width: 100%;
  max-width: 1305px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.tls-navbar .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.tls-navbar .header__account {
  margin-right: 20px;
}

.tls-navbar .header__account__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.tls-navbar .header__account__user em {
  position: static;
  line-height: 1;
  font-style: normal;
}

.tls-navbar .header__account__user i {
  position: static;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-size: 20px;
}