/*
 * tl-header.css
 * Global site header, option B "utility strip". Enqueued unconditionally from
 * functions.php at priority 99 so it lands after css/theme.css.
 *
 * 2026-09-09. Supersedes tl-shop-chrome.css / tl-pdp.css, which were scoped to
 * shop templates; the header is now one design on every page.
 *
 * 34px tinted utility strip (language + search + CONTACT US!) over a 64px
 * logo/nav row = 98px, down from 134px.
 *
 * Two theme mechanics this has to respect:
 *  - .wrapper carries border-top:108px inside @media(min-width:1024px) as the
 *    spacer for the fixed header. It has to track the header height or content
 *    slides underneath. Below 1024px the theme makes .header static, no spacer.
 *  - .header-bar's height comes from the .logo anchor (58px, it carries both the
 *    static and fixed logo images), not the 40px mega-menu nav.
 *
 * The strip tint is painted as layered gradients on .header itself: .header-content
 * sits inside .shell (max-width 1200px) and cannot reach the viewport edges
 * without a 100vw hack that risks horizontal overflow.
 */

/* Page-level breadcrumb band. Scoped with the child combinator on purpose:
   .product-cat-main .shell .breadcrumbs and the one inside .article-entry are
   content elements with their own padding and background, and must not be hit.
   The theme left ~46px above this band and let the text sit high inside it. */
.wrapper > .breadcrumbs {
  margin-top: 12px;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

.wrapper > .breadcrumbs > .shell {
  flex: 1 1 auto;
}

/* The shop banner is empty on every template now that the Products burger and
   the CTA have both moved out, so it collapses at all widths. Left unscoped on
   purpose: theme.css gives it min-height:110px, which showed as a blank band
   below the header on tablet and phone. */
.shop-header > .shell {
  min-height: 0;
}

/* ==========================================================================
   DESKTOP (>=1024px) - the theme keeps .header position:fixed here and offsets
   content with .wrapper's border-top. Everything below is scoped to this range
   on purpose: between 601 and 1023 the theme floats .header-content right and
   swaps the nav for a toggle, and at <=600 it hides .header-content outright,
   so an unscoped rule here wrecks both. See the two blocks after this one.
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---- 1. header box ---- */
  header.header#default-header {
    /* beats header#default-header{padding-top:20px !important} in theme.css */
    padding-top: 0 !important;
    padding-bottom: 0;
    height: 98px;
    background-image:
      linear-gradient(#E9E5E3, #E9E5E3),
      linear-gradient(#F6F4F3, #F6F4F3);
    background-size: 100% 1px, 100% 34px;
    background-position: 0 34px, 0 0;
    background-repeat: no-repeat, no-repeat;
  }

  /* ---- 2. utility strip ---- */
  .header-content {
    height: 34px;
  }

  .header-content-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 34px;
  }

  /* theme.css pulls the search form 5px off the flex centre line */
  /* theme.css gives .search-form margin:0 auto at some breakpoints and
     margin-bottom:-5px at others. Auto margins absorb all free space in a flex
     row, which spread the three controls instead of grouping them right. */
  .header-content-inner .search-form {
    margin: 0;
  }

  .header-content-inner .search-form .search-field {
    width: 150px;
    height: 24px;
    border-width: 1px;
    border-radius: 12px;
    font-size: 12px;
    padding: 0 10px 0 27px;
    background-position: 9px 5px;
    background-size: 12px auto;
  }

  .header-content-inner .search-form .search-field:focus {
    width: 200px;
  }

  /* ---- 3. language switcher, moved off the nav onto the strip ---- */
  .header-content-inner .lang-selector {
    margin: 0;
    order: -1;
  }

  .tl-lang {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .tl-lang-current,
  .tl-lang a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .tl-lang-current {
    color: #4A4A4A;
    font-weight: 700;
  }

  .tl-lang a {
    color: #8A8A8A;
    font-weight: 600;
    text-decoration: none;
  }

  .tl-lang a:hover,
  .tl-lang a:focus {
    color: #D90000;
  }

  .tl-lang-flag {
    display: block;
    width: 16px;
    height: auto;
    border-radius: 1px;
  }

  .tl-lang-sep {
    flex: none;
    width: 1px;
    height: 12px;
    background: #D8D3D1;
  }

  /* WPML's own copy in the nav is removed in functions.php; this is the belt-and
     braces for any menu Max Mega Menu renders outside that filter. */
  .mega-menu-item-language {
    display: none !important;
  }

  /* ---- 4. CONTACT US!, matched to the search control ---- */
  .header-content-inner .contact-widget {
    float: none;
    margin: 0;
    padding: 0;
  }

  .header-content-inner .contact-widget li {
    margin-left: 0;
  }

  .header-content-inner .contact-widget li a.email {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    background-color: #D90000;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.4px;
    border-radius: 3px;
    white-space: nowrap;
  }

  .header-content-inner .contact-widget li a.email:hover {
    background-color: #B91109;
  }

  /* the sprite envelope is drawn for the old grey text treatment */
  .header-content-inner .contact-widget li a.email::before {
    display: none;
  }

  /* ---- 5. logo / nav row ----
     The theme floats the logo left and the mega-menu right, leaving both at the
     top of the row. Flex centres them, but Max Mega Menu's wrap has no intrinsic
     height and collapses to 0 as a flex item, which also stopped it sitting flush
     right, so it is given its bar height explicitly. */
  .header-bar {
    margin-top: 0;
    padding: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .header-bar .logo {
    flex: 0 0 auto;
    margin-top: 0;
  }

  /* fill the space left of the logo and right-align the bar's inline-block items,
     so the nav stays flush with the strip above it. Before the language item moved
     to the strip the menu happened to reach the edge on its own; without it the
     bar would otherwise stop ~245px short. */
  .header-bar .mega-menu-wrap {
    flex: 1 1 auto;
    height: 40px;
    margin-top: 0;
    text-align: right;
  }

  .header-bar ul.mega-menu.mega-menu-horizontal {
    text-align: right;
  }

  /* Max Mega Menu fills its bar with a near-white #F5F5F5 and pads it. Both are
     styled by ID (#mega-menu-wrap-main-menu), which outranks any class selector
     here, hence !important. Only the wrap and the top-level ul are targeted;
     sub-menus use the mega-sub-menu- prefix and keep their own background. */
  .header-bar [id^="mega-menu-wrap-"],
  .header-bar ul[id^="mega-menu-"] {
    background: transparent !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* the last link's own right padding left its text 36px inside the column edge,
     out of line with CONTACT US! on the strip above */
  .header-bar ul[id^="mega-menu-"] > li:last-child > a.mega-menu-link {
    padding-right: 0 !important;
  }

  /* ---- 6. fixed-header spacer tracks the header height ---- */
  @media (min-width: 1024px) {
    .wrapper {
      border-top-width: 98px;
    }
  }

  .single-product .content {
    padding-top: 24px;
  }

}

/* ==========================================================================
   TABLET (601-1023px) - the theme floats .header-content right, clears 55px for
   the menu toggle, and hides .lang-selector. The strip now carries the only
   language switcher and the primary CTA, so the switcher is put back and the
   controls are sized down. The theme's float is left intact.
   ========================================================================== */
@media (max-width: 1023px) {
  /* The theme floats .header-content right with margin-right:55px, which crams
     the language, search and CTA onto one line beside the nav. Un-float it so it
     stacks as the same strip the desktop design uses, tint included. */
  header.header#default-header {
    padding-top: 0 !important;
    padding-bottom: 0;
    /* something outside css/theme.css floors this header at min-height:186px,
       while its content (34px strip + 78px logo/nav row) only needs 112px. That
       surplus was the large empty gap between the logo and the breadcrumb bar. */
    min-height: 0;
    height: auto;
    background-image:
      linear-gradient(#E9E5E3, #E9E5E3),
      linear-gradient(#F6F4F3, #F6F4F3);
    background-size: 100% 1px, 100% 34px;
    background-position: 0 34px, 0 0;
    background-repeat: no-repeat, no-repeat;
  }

  .header .header-content {
    float: none;
    margin: 0;
    padding: 0;
    height: 34px;
  }

  /* The .logo anchor measures 79px for a 22px wordmark - it also carries the
     hidden mobile-logo variant, a <noscript> copy and a zero-size text node.
     Left to size itself the row ran to 95px, which is what showed as the blank
     band between the logo and the breadcrumb. Fixing the row height and letting
     flex centre the contents is what the desktop block already does. */
  .header .header-bar {
    margin-top: 0;
    padding: 0;
    height: 56px;
  }

  .header .header-content .lang-selector {
    display: block;
    order: -1;
  }

  .header-content-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: 34px;
  }

  /* theme.css gives .search-form margin:0 auto at some breakpoints and
     margin-bottom:-5px at others. Auto margins absorb all free space in a flex
     row, which spread the three controls instead of grouping them right. */
  .header-content-inner .search-form {
    margin: 0;
  }

  .header-content-inner .search-form .search-field {
    width: 118px;
    height: 24px;
    border-width: 1px;
    border-radius: 12px;
    font-size: 12px;
    padding: 0 8px 0 25px;
    background-position: 8px 5px;
    background-size: 11px auto;
  }

  .header-content-inner .search-form .search-field:focus {
    width: 150px;
  }

  .header-content-inner .contact-widget {
    float: none;
    margin: 0;
    padding: 0;
  }

  .header-content-inner .contact-widget li {
    margin-left: 0;
  }

  .header-content-inner .contact-widget li a.email {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    background-color: #D90000;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    border-radius: 3px;
    white-space: nowrap;
  }

  .header-content-inner .contact-widget li a.email::before {
    display: none;
  }

  .tl-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  .tl-lang-current,
  .tl-lang a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .tl-lang-current { color: #4A4A4A; font-weight: 700; }
  .tl-lang a { color: #8A8A8A; font-weight: 600; text-decoration: none; }
  .tl-lang a:hover, .tl-lang a:focus { color: #D90000; }
  .tl-lang-flag { display: block; width: 14px; height: auto; border-radius: 1px; }
  .tl-lang-sep { flex: none; width: 1px; height: 11px; background: #D8D3D1; }
  .tl-lang-current, .tl-lang a { flex: none; }

  /* WPML's nav copy is filtered out in functions.php; belt and braces */
  .mega-menu-item-language { display: none !important; }
}

/* ==========================================================================
   PHONE (<=600px) - the theme sets .header-content{display:none} and moves the
   nav into .mobile__menu__block. That would take the language switcher, search
   and the CONTACT US! button off small screens entirely, which is a regression:
   before this work the CTA lived in the shop banner and was visible here.
   The strip is put back as its own compact row above the logo.
   ========================================================================== */
@media (max-width: 600px) {
  /* The theme's toggle bar spans the full width at y10-50 with the hamburger
     right-aligned, which is exactly where a strip above the logo would sit, so
     the CTA landed underneath the hamburger. Ordering the strip below the logo
     row clears it and uses the ~62px of dead space the mobile header already
     had. .mobile__menu__block is absolute against .header-bar, so the toggle
     travels with the logo row and stays at the top. */
  .header > .shell {
    display: flex;
    flex-direction: column;
  }

  .header .header-bar {
    order: 1;
  }

  .header .header-content {
    display: block;
    float: none;
    order: 2;
    margin: 10px 0 0;
    padding: 0;
  }

  .header-content-inner {
    justify-content: space-between;
    gap: 12px;
  }

  .header-content-inner .search-form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-content-inner .search-form .search-field {
    width: 100%;
    max-width: 150px;
  }

  .header-content-inner .contact-widget li a.email {
    font-size: 10px;
    padding: 0 9px;
  }

  .tl-lang { font-size: 10px; gap: 7px; }
  .tl-lang-flag { width: 13px; }
}

/* ==========================================================================
   820-1023px - the full mega nav still fits here (it measures ~517px against a
   ~790px shell at 820), yet the theme also shows a.btn-menu, so the page
   carried a hamburger and a complete nav at the same time. Drop the hamburger
   where the nav is genuinely visible; below 820 it is left alone because the
   nav no longer fits.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Two menu buttons rendered here: the theme's own a.btn-menu and Max Mega
     Menu's toggle. Above ~820 the full nav is visible and neither is needed;
     below it the mega toggle is the one that actually opens the nav (the mega
     ul goes display:none), so a.btn-menu is redundant at every width here. */
  .header a.btn-menu {
    display: none;
  }

  /* the toggle paints a full-width #222 band, which is heavy on a light header.
     theme.css already makes it transparent at <=600 but never covered 601-767. */
  .header .mega-menu-toggle {
    background: transparent !important;
    justify-content: flex-end;
  }

  .header .mega-menu-toggle .mega-toggle-animated-inner,
  .header .mega-menu-toggle .mega-toggle-animated-inner::before,
  .header .mega-menu-toggle .mega-toggle-animated-inner::after {
    background: #222 !important;
  }
}

/* ==========================================================================
   1024-1199px - theme.css drops .shell to 10px side padding here, which left
   the logo almost touching the viewport edge. The header keeps a comfortable
   gutter; the content shell is left as the theme has it.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
  header.header#default-header > .shell {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ==========================================================================
   Phones - .mobile__menu__block is absolute against .header-bar at bottom:28px,
   which pushed the toggle above the header's top edge (measured top -15).
   Centre it on the logo row instead.
   ========================================================================== */
@media (max-width: 600px) {
  .header .mobile__menu__block {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   <=819px - Max Mega Menu has swapped the nav for its toggle here, so the row
   only holds the logo and that toggle. They were stacking on separate lines,
   leaving ~100px of empty header. Put them on one line and pull the breadcrumb
   band up; the desktop breadcrumb rule is scoped to >=1024 and does not reach
   this range.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Max Mega Menu swaps the nav for its toggle somewhere in this range. Its
     wrap has no intrinsic height, so with the theme's float it collapsed to 0x0
     and the toggle became invisible - between ~820 and ~950 that left the page
     with no navigation control at all once a.btn-menu was hidden. Flex plus a
     min-height keeps whichever of the two is displayed at a real size. */
  .header .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .header .header-bar .logo {
    flex: 0 0 auto;
  }

  .header .header-bar .mega-menu-wrap {
    flex: 0 0 auto;
    width: auto;
    min-width: 46px;
    min-height: 40px;
  }

  /* a.btn-menu is dead markup from before Max Mega Menu (clicking it does
     nothing), so the toggle is the only working control once the nav collapses.
     It renders at 0x0 in part of this range, which left no way to navigate. */
  .header .mega-menu-toggle {
    min-width: 46px;
    min-height: 40px;
  }

}