/**
 * Conditional TES header brand images (homepage lockup vs internal Home button).
 * Separate enqueue so LiteSpeed CSS combine/UCSS cannot drop sizing.
 * Transparent PNG/WebP only — no box/badge behind artwork.
 *
 * v5.2.284 HARD EQUAL HEIGHT:
 * Source of truth = Connect launch OUTER height (border-box), measured:
 *   default / ≤720 / ≤390 / ≥1200 = 48px
 *   ≤430 (and >390) = 52px
 *   Connect CSS: height + padding 3px + border 2px (3px ≥1200) with
 *   box-sizing:border-box → outer == declared height (NOT 48+pad+border).
 * --tes-header-control-height locks brand wrapper, Connect, Menu to SAME px.
 */

/* Shared control height — Connect outer box (do not shrink Connect/Menu) */
:root {
  --tes-header-control-height: 48px;
}

@media (max-width: 430px) {
  :root {
    --tes-header-control-height: 52px;
  }
}

@media (max-width: 390px) {
  :root {
    --tes-header-control-height: 48px;
  }
}

/* Kill any leftover old stacked brand DOM if a cache still serves it */
.site-header .brand .brand-logo-stack,
.site-header .brand .brand-logo-wrap,
.site-header .brand .brand-logo,
.site-header .brand .brand-home,
.site-header .brand .brand-text,
.site-header .brand .brand-title,
.site-header .brand .brand-subtitle {
  display: none !important;
}

.site-header .header-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  gap: 0 !important;
  min-width: 0;
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
  height: var(--tes-header-control-height) !important;
  min-height: var(--tes-header-control-height) !important;
  max-height: var(--tes-header-control-height) !important;
  overflow: visible !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.site-header .brand picture {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  height: var(--tes-header-control-height) !important;
  min-height: var(--tes-header-control-height) !important;
  max-height: var(--tes-header-control-height) !important;
  line-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

/*
 * Brand artwork fills the equal-height wrapper.
 * Beat global `img { max-width:100%; height:auto }` and every legacy crusher.
 */
.site-header .brand .brand-mark,
.site-header .brand img.brand-mark,
.site-header a.brand img.brand-mark,
img.brand-mark.skip-lazy {
  display: block !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  zoom: normal !important;
  scale: none !important;
  box-sizing: border-box !important;
}

.site-header .header-top-actions {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
  height: var(--tes-header-control-height) !important;
  min-height: var(--tes-header-control-height) !important;
}

/*
 * Connect + Menu wrappers — SAME outer height as brand.
 * Keep Connect widths from connect-branding.css; only lock height.
 */
.site-header .header-top-actions .tes-connect-account-launch,
.site-header .header-top-actions a.tes-connect-account-launch,
.site-header .header-top-actions .menu-toggle,
.site-header .header-top-actions .btn.menu-toggle,
.site-header .header-top-actions button.btn.menu-toggle.tes-desktop-menu-trigger {
  --tes-connect-badge-h: var(--tes-header-control-height);
  box-sizing: border-box !important;
  height: var(--tes-header-control-height) !important;
  min-height: var(--tes-header-control-height) !important;
  max-height: var(--tes-header-control-height) !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Vertical padding must not fight the locked outer height */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
  zoom: normal !important;
}

@media (max-width: 720px) {
  .site-header .header-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand menu" "auth auth" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }
  .site-header .brand {
    grid-area: brand !important;
    max-width: none !important;
    align-items: center !important;
    align-self: center !important;
    height: var(--tes-header-control-height) !important;
    min-height: var(--tes-header-control-height) !important;
    max-height: var(--tes-header-control-height) !important;
  }
  .site-header .header-top-actions {
    grid-area: menu !important;
    align-self: center !important;
    justify-self: end !important;
    gap: 6px !important;
  }
}

/* Samsung S23 / narrow — height priority; tighten gaps, never shrink height */
@media (max-width: 430px) {
  .site-header .header-wrap {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }
  .site-header .brand {
    max-width: none !important;
    min-width: 0 !important;
  }
  .site-header .header-top-actions {
    gap: 4px !important;
  }
}

@media (max-width: 390px) {
  .site-header .header-wrap {
    gap: 3px !important;
  }
  .site-header .header-top-actions {
    gap: 3px !important;
  }
}

/* Desktop Menu shell keeps horizontal padding / 3px border; height stays locked */
@media (min-width: 1200px) {
  .site-header .header-top-actions .menu-toggle,
  .site-header .header-top-actions .btn.menu-toggle,
  .site-header .header-top-actions button.btn.menu-toggle.tes-desktop-menu-trigger {
    height: var(--tes-header-control-height) !important;
    min-height: var(--tes-header-control-height) !important;
    max-height: var(--tes-header-control-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}