/* =========================================================
   TOP LINES — Footer
   Addresses client comment 12 (22 Jul 2026):
     • "Change the logo as directed from the beginning"
     • "Correct the company name at the very bottom to
        'Top Lines' and make it appear same as the logo design.
        Where is the company name? Why has it been removed??"

   The name was never removed. main.css sets it at a fixed 400px
   with `bottom: -72px`, so at 1440px it was ~1618px wide and hung
   89px below the footer — and the footer clips its overflow. The
   client only ever saw fragments of it.
   ========================================================= */

.footer-section .footer-logo img {
  max-width: 200px;
  width: auto;
  height: auto;
}

/* ---------------------------------------------------------
   The company name across the base of the footer.
   --------------------------------------------------------- */
.footer-section .footer-text {
  /* Flush with the base of the footer. The section clips its overflow,
     so any negative offset would shave the bottom off the letters. */
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer-section .footer-text span {
  display: inline-block;
  /* Sized in vw so the whole name always fits. */
  font-size: 15.2vw;
  /* Logo letterform: light strokes, open tracking. */
  font-weight: 200;
  letter-spacing: 0.05em;
  line-height: 1;
  opacity: 0.5;
}

@media (max-width: 1199.98px) {
  .footer-section .footer-text span {
    font-size: 15.2vw !important;
  }
}

@media (min-width: 1921px) {
  .footer-section .footer-text span {
    font-size: 292px;
  }
}

/* ---------------------------------------------------------
   "Top Lines" in the copyright line, set to match the logo.
   --------------------------------------------------------- */
/* main.css paints any span in the copyright line theme-teal, which turned
   the company name into what looked like a link. */
.copyright-content p .tl-wordmark-inline {
  font-weight: 300;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
}

/* The theme draws a 5x1px rule between the social icons. At this size it
   reads as a stray hyphen rather than a separator. */
.footer-widget .social-list li:not(:last-of-type)::before {
  content: none;
}

.footer-widget .social-list li:not(:last-of-type) {
  margin-right: 18px;
  padding-right: 0;
}

.copyright-content p {
  letter-spacing: 0.01em;
}