/* =========================================================
   TOP LINES — Header layer
   Addresses client comment 1 (22 Jul 2026):
     • "Logo is not visible at all!!!"
     • "Logo and header buttons are very small. Need to be larger"
     • "should be getting smaller (slimmer) smoothly while scrolling down"

   Loaded LAST in index.html so it wins over main.css / polish.css.
   ========================================================= */

/* ---------------------------------------------------------
   1. Make the header actually stick.
   main.css sets `position: absolute`, so the header scrolled
   away with the page and could never "slim down". Fixed is
   required for the shrink-on-scroll behaviour.
   --------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
  will-change: background-color;
}

/* Solid state once the user scrolls past the hero lip. */
.header.header-scrolled {
  background-color: #ffffff;
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.45);
}

/* Bootstrap gives `.container` only a 12px gutter, and the theme widens it to
   max-width: 1795px — so on a 1440 laptop the logo sat almost against the left
   edge and "Contact" against the right. Give the header a real inset.
   hero.css uses the same value so the hero title lines up with the logo. */
.header .container {
  padding-left: clamp(16px, 3.2vw, 64px);
  padding-right: clamp(16px, 3.2vw, 64px);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   2. Logo visibility — knockout swap.
   The wordmark is black on transparent, so over the dark hero
   it read as nothing at all. Show the white variant while the
   header is transparent, the black one once it turns white.
   --------------------------------------------------------- */
.header .header-logo .tl-logo-link {
  display: inline-block;
  position: relative;
  line-height: 0;
}

.header .header-logo .tl-logo {
  display: block;
  width: auto;
  transition:
    max-width 0.35s ease,
    opacity 0.3s ease;
}

/* Dark variant is stacked on top of the light one and cross-faded,
   so the swap has no layout shift and no flash of a missing image. */
.header .header-logo .tl-logo--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.header.header-scrolled .header-logo .tl-logo--light {
  opacity: 0;
}

.header.header-scrolled .header-logo .tl-logo--dark {
  opacity: 1;
}

/* Pages whose first screen is LIGHT (Home, since client comment 2 removed
   the hero photo) need the dark logo even while the header is transparent. */
.header.header--on-light:not(.header-scrolled) .header-logo .tl-logo--light {
  opacity: 0;
}

.header.header--on-light:not(.header-scrolled) .header-logo .tl-logo--dark {
  opacity: 1;
}

/* ---------------------------------------------------------
   3. Desktop sizing — larger at rest, slimmer on scroll.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Logo: 170px (theme default) -> 215px at rest -> 150px scrolled */
  .header .primary-header-inner .header-logo .tl-logo {
    max-width: 215px;
  }

  .header.header-scrolled .primary-header-inner .header-logo .tl-logo {
    max-width: 150px;
  }

  /* Nav: 16px -> 18px at rest -> 16px scrolled.
     The vertical padding on the <a> is what sets header height,
     so animating it is what produces the smooth slim-down. */
  .header .primary-header-inner .header-menu-wrap ul li {
    margin: 0 20px;
  }

  .header .primary-header-inner .header-menu-wrap ul li a {
    font-size: 18px;
    font-weight: 500;
    padding: 36px 0;
    letter-spacing: 0.005em;
    transition:
      padding 0.35s ease,
      font-size 0.35s ease,
      color 0.3s ease;
  }

  .header.header-scrolled .primary-header-inner .header-menu-wrap ul li a {
    font-size: 16px;
    padding: 22px 0;
    color: #111111;
  }

  .header.header--on-light:not(.header-scrolled)
    .primary-header-inner
    .header-menu-wrap
    ul
    li
    a {
    color: #141416;
  }

  .header.header-scrolled .primary-header-inner .header-menu-wrap ul li a:hover,
  .header.header-scrolled .primary-header-inner .header-menu-wrap ul li.active a,
  .header.header--on-light:not(.header-scrolled)
    .primary-header-inner
    .header-menu-wrap
    ul
    li
    a:hover,
  .header.header--on-light:not(.header-scrolled)
    .primary-header-inner
    .header-menu-wrap
    ul
    li.active
    a {
    color: var(--tl-color-theme-primary, #14b8a6);
  }

  /* Keep the right group hard against the container edge now that
     the icon cluster has been removed (client comment 1.4/1.5). */
  .header .primary-header-inner .header-right-wrap {
    padding-right: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .header .primary-header-inner .header-logo .tl-logo {
    max-width: 190px;
  }
  .header.header-scrolled .primary-header-inner .header-logo .tl-logo {
    max-width: 140px;
  }
  .header .primary-header-inner .header-menu-wrap ul li {
    margin: 0 14px;
  }
  .header .primary-header-inner .header-menu-wrap ul li a {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------
   4. Underline indicator for the current page.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .header .primary-header-inner .header-menu-wrap ul li a {
    position: relative;
  }

  .header .primary-header-inner .header-menu-wrap ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 28%;
    width: 0;
    height: 2px;
    background-color: var(--tl-color-theme-primary, #14b8a6);
    transition: width 0.3s ease;
  }

  .header .primary-header-inner .header-menu-wrap ul li a:hover::after,
  .header .primary-header-inner .header-menu-wrap ul li.active a::after {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   5. Mobile — the bar is already white, so the dark logo is
   correct there. It only needs to stop scrolling away.
   --------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .header {
    height: auto !important;
  }
}

/* ---------------------------------------------------------
   6. Keyboard focus — the theme strips outlines, which left
   the nav unusable for keyboard users.
   --------------------------------------------------------- */
.header .header-menu-wrap ul li a:focus-visible,
.header .header-logo .tl-logo-link:focus-visible {
  outline: 2px solid var(--tl-color-theme-primary, #14b8a6);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------------------------------------------------------
   8. Anchor offset. The header is fixed, so anything scrolled
   to by an in-page link would otherwise land underneath it.
   --------------------------------------------------------- */
section[id],
div[id],
main section {
  scroll-margin-top: 110px;
}

@media (max-width: 1023.98px) {
  section[id],
  div[id],
  main section {
    scroll-margin-top: 72px;
  }
}

/* ---------------------------------------------------------
   7. Respect reduced-motion preferences.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .header,
  .header .header-logo .tl-logo,
  .header .primary-header-inner .header-menu-wrap ul li a,
  .header .primary-header-inner .header-menu-wrap ul li a::after {
    transition-duration: 0.01ms !important;
  }
}