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

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

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

/* 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: 600;
  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: 50%;
  pointer-events: none;
  z-index: 1;
  /* Match the captured hero background colour */
  background: linear-gradient(to right, #00202b 0%, rgba(0, 32, 43, 0) 100%);
}

@media (max-width: 768px) {
  /* 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;
  }
}

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

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