/* ============================================
 * Footer — site footer module
 *
 * Two parts:
 *   1. CTA row on a dark surface with a pink/orange
 *      radial-gradient glow (echoes the approach
 *      section). Heading on the left, "Let's talk"
 *      button on the right.
 *   2. White rounded card containing brand (logo +
 *      tagline + social) on the left and two link
 *      columns (Navigate / Our services) on the right,
 *      plus a copyright + legal-links row at the bottom.
 *
 * Horizontal padding + max-width cap live in layout.css
 * via the `.tlm-section` and `.tlm-container` classes
 * on the HTML. Buttons live in buttons.css. This file
 * owns only footer-unique layout.
 *
 * RESOLVED 2026-05-19: section background swapped from
 * hardcoded #191315 to var(--color-bg-darker), promoted
 * to tokens after 3 modules adopted the same value
 * (approach + footer + mega menu).
 * ============================================ */

.tlm-footer {
  position: relative;
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-bg-darker);
  color: var(--color-text-on-dark);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The CTA row and the legal row stay capped at `--container-max`
   (via the `.tlm-container` wrappers in the HTML) — same width as
   every other section's content. The inner card sits OUTSIDE those
   container wrappers, so it stretches all the way to the section's
   padding boundary, wider than the container above and below. No
   override of `.tlm-section` padding needed. */

/* ----- Decorative film-grain gradient backdrop -----
 *
 * Raster image (`footer-bg.webp`) sourced from Paul's library —
 * the same texture Figma uses, with the gradient + grain baked in.
 * Sized to cover the full section via object-fit. Matches the
 * hero's `__bg` pattern.
 * ----- */

.tlm-footer__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.tlm-footer__glow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* 50% dark tint over the texture so the footer content sits cleanly
   on top. Uses the section's base near-black `#191315` at 0.5 alpha
   so the tint visually melts into the bg colour underneath. */
.tlm-footer__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(25, 19, 21, 0.5);
}

.tlm-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* ----- Top CTA row ----- */

.tlm-footer__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
}

/* Mobile: CTA full-width per mobile-standards. Tablet+ reverts to
   natural width (pinned-left under the heading). Desktop flips
   the row to flex-row at 1024+. */
.tlm-footer__cta {
  width: 100%;
}

.tlm-footer__cta-title {
  margin: 0;
  max-width: 778px;
  font-family: var(--font-serif);
  /* Mobile: 32px per section h2 standard. Desktop bumps to 40px
     (--text-h3) intentionally smaller than other body-section h2s
     so the footer reads as a footer, not another full section. */
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-dark);
}

/* ----- White card ----- */

.tlm-footer__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  /* White card removed — content sits directly on the dark section
     bg. Wrapper kept for structural symmetry. No horizontal padding
     so the card content aligns flush with the CTA + legal rows
     above and below at the same container-max width. */
  background-color: transparent;
  color: var(--color-text-on-dark);
  border-radius: 0;
  padding: 0;
}

/* Breadcrumbs (top of footer, above CTA row).
   Markup is Yoast's own output (yoast_breadcrumb() in footer.php),
   wrapped in .tlm-footer__breadcrumbs. Yoast emits a flat structure:
     <nav class="tlm-footer__breadcrumbs">
       <span>
         <span><a href>Home</a></span> » <span><a href>Insights</a></span>
         » <span class="breadcrumb_last" aria-current="page">Title</span>
       </span>
     </nav>
   The separator (»/Yoast char) sits as plain text between the spans, so
   we style the spans + links + breadcrumb_last directly. The "Home" text
   link is hidden and replaced with the home-icon SVG as a ::before. */

.tlm-footer__breadcrumbs {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
}

/* Links + non-current crumbs. */
.tlm-footer__breadcrumbs a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}

.tlm-footer__breadcrumbs a:hover,
.tlm-footer__breadcrumbs a:focus-visible {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Current page (last crumb) — solid white, no link. */
.tlm-footer__breadcrumbs .breadcrumb_last {
  color: var(--color-text-on-dark);
}

/* Chevron separator (wrapped via wpseo_breadcrumb_separator filter). */
.tlm-breadcrumb-sep {
  display: inline-block;
  margin-inline: var(--space-sm);
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile: on DEEP trails only (3+ crumbs — insights articles, child
   pages, CPT entries; flagged with .tlm-breadcrumbs-deep on <body> in
   inc/blog.php) drop the current page + its leading separator so a long
   title can't wrap. Shows Home > Parent, which is the useful nav anyway.
   Shallow 2-crumb pages (Home > Page) keep the current crumb — hiding it
   there would collapse the trail to a lone Home icon (the old bug). The
   media query + depth class are the guard: never a blanket display:none. */
@media (max-width: 767px) {
  .tlm-breadcrumbs-deep .tlm-footer__breadcrumbs .breadcrumb_last {
    display: none;
  }

  .tlm-breadcrumbs-deep .tlm-footer__breadcrumbs .tlm-breadcrumb-sep:has(+ .breadcrumb_last) {
    display: none;
  }
}

/* Swap Yoast's first "Home" text link for the home-icon SVG.
   The first crumb is always Home; hide its text, paint the icon
   as a ::before on the link. SVG is filled navy → invert to white. */
.tlm-footer__breadcrumbs > span > span:first-child > a,
.tlm-footer__breadcrumbs > span > a:first-child {
  font-size: 0; /* hide the word "Home" */
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.tlm-footer__breadcrumbs > span > span:first-child > a::before,
.tlm-footer__breadcrumbs > span > a:first-child::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("../../images/icon-home.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(1) brightness(2);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.tlm-footer__breadcrumbs > span > span:first-child > a:hover::before,
.tlm-footer__breadcrumbs > span > a:first-child:hover::before {
  opacity: 1;
}

/* Main content: brand on left, link columns on right */

.tlm-footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ----- Brand block ----- */

.tlm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 486px;
}

/* Mobile: whole brand block hidden (not just the logo) so the
   empty flex slot doesn't add 48px of dead space between the CTA
   row and the link columns. Tablet+ restores the brand block. */
.tlm-footer__brand {
  display: none;
}

.tlm-footer__logo {
  display: block;
  height: 64px;
  width: auto;
}

/* Social icons: white-outline circles below the logo. */
.tlm-footer__social {
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlm-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-dark);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tlm-footer__social-link svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .tlm-footer__social-link:hover,
  .tlm-footer__social-link:focus-visible {
    border-color: rgba(255, 255, 255, 0.65);
  }
}

/* Mobile social set: sits below the link columns, above the legal row.
   The desktop set (in the brand block) is hidden on mobile, so this is
   the only one shown <768px. Hidden from 768px up.
   No own margins — the parent .tlm-footer__inner flex gap already
   spaces it; negative margins pull it tighter to the columns/legal
   so it doesn't get the full --space-3xl gap on both sides. */
.tlm-footer__social--mobile {
  margin-top: calc(-1 * var(--space-xl));
  margin-bottom: calc(-1 * var(--space-md));
}

/* ----- Link columns ----- */

.tlm-footer__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tlm-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-footer__column-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
}

.tlm-footer__column-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Split column: two even link sub-columns under one heading
   (Capabilities holds 13 items). Stacks on mobile, side-by-side
   from the desktop breakpoint below. */
.tlm-footer__column-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-footer__column-list a {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.tlm-footer__column-list a:hover,
.tlm-footer__column-list a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* ----- Legal row (sits below the white card, on the dark surface) ----- */

.tlm-footer__legal-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
}

.tlm-footer__copyright {
  margin: 0;
}

.tlm-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  /* Mobile: tight gap + 14px links so all 3 legal items sit on one
     line in the typical mobile container (~390px). Tablet+ reverts
     to the heavier 32px gap and 16px text. */
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlm-footer__legal-links a {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.tlm-footer__legal-links a:hover,
.tlm-footer__legal-links a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* iubenda embed links: the loader injects inline button styling + a green-key
   background icon. Override with !important so they render as plain footer text
   links matching the others. */
.tlm-footer__legal-links a.iubenda-embed,
.tlm-footer__legal-links a.iubenda-white,
.tlm-footer__legal-links a.no-brand {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--text-sm) !important; /* desktop bumps to --text-base in the 768px block */
  font-weight: inherit !important;
  line-height: inherit !important;
  color: var(--color-text-on-dark) !important;
  box-shadow: none !important;
  text-indent: 0 !important;
}

.tlm-footer__legal-links a.iubenda-embed::before,
.tlm-footer__legal-links a.iubenda-embed::after {
  content: none !important;
  display: none !important;
}

/* Drop the injected iubenda brand key (img/svg) if no-brand doesn't suppress it. */
.tlm-footer__legal-links a.iubenda-embed img,
.tlm-footer__legal-links a.iubenda-embed svg {
  display: none !important;
}

/* ============================================
 * TABLET (≥768px)
 * ============================================ */

@media (min-width: 768px) {
  .tlm-footer__cta {
    width: auto;
  }

  /* Restore brand block and revert legal links to default rhythm. */
  .tlm-footer__brand {
    display: flex;
  }

  /* Desktop has the social set in the brand block; drop the mobile one. */
  .tlm-footer__social--mobile {
    display: none;
  }

  .tlm-footer__legal-links {
    gap: var(--space-lg);
  }

  .tlm-footer__legal-links a {
    font-size: var(--text-base);
  }

  /* iubenda links carry an !important reset, so match the desktop bump here too. */
  .tlm-footer__legal-links a.iubenda-embed {
    font-size: var(--text-base) !important;
  }
}

/* ============================================
 * DESKTOP (≥1024px)
 * ============================================ */

@media (min-width: 1024px) {
  /* CTA row spreads horizontally — heading left, button right. */
  .tlm-footer__cta-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .tlm-footer__cta-title {
    font-size: var(--text-h3);
  }

  /* Brand on left, columns on right — same row. */
  .tlm-footer__main {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-3xl);
  }

  .tlm-footer__brand {
    flex: 0 1 486px;
  }

  /* Link columns side-by-side. Tablet-band gap (60px) opens to 72px only
     when there's room (≥1400px block below); columns may wrap if the row
     runs tight so the last column never clips off-frame. */
  .tlm-footer__columns {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2xl);
  }

  /* Engagements + Capabilities hold longer, multi-word link
     labels — give them width so labels stop wrapping, but allow shrink
     in the tablet band (min 180) so the row fits under ~1300px. */
  .tlm-footer__column--wide {
    flex: 1 1 auto;
    min-width: 180px;
  }

  /* Capabilities splits into two even sub-columns at desktop. */
  .tlm-footer__column--split .tlm-footer__column-cols {
    flex-direction: row;
    gap: var(--space-2xl);
  }

  .tlm-footer__column--split .tlm-footer__column-cols .tlm-footer__column-list {
    flex: 1 1 auto;
    min-width: 160px;
  }

  /* Legal row: copyright left, links right, same line. */
  .tlm-footer__legal-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3xl);
  }
}

/* ============================================
 * WIDE DESKTOP (≥1400px)
 * Restore the roomier Figma gaps once there's width to spare. Below this
 * the 60px tablet-band gaps keep the 5-column row from clipping.
 * ============================================ */

@media (min-width: 1400px) {
  .tlm-footer__columns {
    flex-wrap: nowrap;
    gap: var(--space-3xl);
  }

  .tlm-footer__column--split .tlm-footer__column-cols {
    gap: var(--space-3xl);
  }
}