/*
 * Transporter — global header chrome
 *
 * Spec: row 1 = 80px #000, row 2 = 60px #222, row 2 hidden below lg.
 * Tokens come from base.css; nothing here invents a value.
 *
 * lg = 1025px. Taken from transporter-core's menu CSS, which is the authority
 * here: mobile-menu.css hides .trmob at min-width:1025px and mega-menu.css
 * reflows the panel at max-width:1024px. A framework default (992px) would
 * desynchronise the theme from the plugin by 33px of viewport.
 */

/* ──────────────────────────────────────────────────────────────
   Integration contract with transporter-core
   ──────────────────────────────────────────────────────────────
   mega-menu.css positions the panel and overlay at
   `top: var(--tr-header-h, 0px)`. The plugin never defines that variable —
   the theme owns it. If it is missing, the fallback 0px makes the mega panel
   open at viewport top and cover the header, including its own close button.
   These two rules are load-bearing. */

:root {
    --tr-header-h: var(--tr-header-1);            /* 80px — row 2 is hidden */
}

@media (min-width: 1025px) {
    :root {
        --tr-header-h: calc(var(--tr-header-1) + var(--tr-header-2));  /* 140px */
    }
}

/* ── Shell ── */

.tr-header {
    position: sticky;
    top: 0;
    /* Above the mega panel (9999) and overlay (9998) so the header — and the
       trigger's close state — stay reachable while the panel is open. */
    z-index: var(--tr-z-trigger);
    background: var(--tr-black);
    color: var(--tr-text-invert);
}

/* No transform/filter/perspective on .tr-header or its ancestors: any of them
   would make it a containing block for the plugin's position:fixed panel and
   break the overlay. */

.tr-header__row {
    width: 100%;
}

.tr-header__row--1 {
    height: var(--tr-header-1);
    background: var(--tr-black);
}

.tr-header__row--2 {
    height: var(--tr-header-2);
    background: var(--tr-dark);
    display: none;
}

@media (min-width: 1025px) {
    .tr-header__row--2 { display: block; }
}

.tr-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

/* ── Row 1 regions ── */

.tr-header__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.tr-header__branding {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.tr-logo,
.tr-logo__img {
    display: block;
    max-height: 44px;
    width: auto;
}

.tr-logo--text {
    font-family: var(--tr-font-display);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--tr-text-invert);
}

.tr-header__search {
    flex: 1 1 auto;
    min-width: 0;                 /* lets the input shrink instead of overflowing */
    display: flex;
    justify-content: center;
}

.tr-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-inline-start: auto;
}

/* ── Search ── */

.tr-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 520px;
}

.tr-search__input {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tr-text-invert);
    font-size: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tr-search__input::placeholder {
    color: var(--tr-text-muted);
    opacity: 1;
}

.tr-search__input:focus {
    outline: none;
    border-color: var(--tr-brand);
    background: rgba(255, 255, 255, 0.1);
}

.tr-search__submit {
    position: absolute;
    inset-inline-end: 4px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 3px;
    color: var(--tr-text-invert);
    transition: background 0.2s ease, color 0.2s ease;
}

.tr-search__submit:hover {
    background: var(--tr-brand);
    color: var(--tr-white);
}

/* ── Actions ── */

.tr-header__phone {
    display: none;
    font-size: 14px;
    white-space: nowrap;
    color: var(--tr-text-invert);
}

@media (min-width: 1025px) {
    .tr-header__phone { display: block; }
}

.tr-header__action {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    color: var(--tr-text-invert);
    transition: color 0.2s ease;
}

.tr-header__action:hover { color: var(--tr-brand); }

.tr-header__cart-count {
    position: absolute;
    top: -2px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--tr-brand);
    color: var(--tr-white);
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
}

.tr-header__cart-count.is-empty { display: none; }

/* ── Row 2 navigation ── */

.tr-nav__list {
    display: flex;
    align-items: center;
    gap: 26px;
    height: var(--tr-header-2);
}

.tr-nav__list > li { position: relative; }

.tr-nav__list > li > a {
    display: flex;
    align-items: center;
    height: var(--tr-header-2);
    font-size: 14px;
    line-height: 1;
    color: var(--tr-text-invert);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tr-nav__list > li > a:hover,
.tr-nav__list > li.current-menu-item > a {
    color: var(--tr-brand);
}

/* Second level */

.tr-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 210px;
    padding: 8px 0;
    background: var(--tr-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.tr-nav__list > li:hover > .sub-menu,
.tr-nav__list > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.tr-nav__list .sub-menu a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--tr-text-muted);
}

.tr-nav__list .sub-menu a:hover {
    color: var(--tr-white);
    background: rgba(255, 255, 255, 0.06);
}

.tr-nav__empty {
    display: flex;
    align-items: center;
    height: var(--tr-header-2);
    margin: 0;
    font-size: 13px;
    color: var(--tr-text-muted);
}

.tr-nav__empty a { color: var(--tr-white); text-decoration: underline; }

/* ── Small screens ── */

/*
 * Row 1 keeps its 80px height at every width. Wrapping the search onto a
 * second line would make the header height dynamic, and --tr-header-h is
 * consumed by the plugin's position:fixed mega panel — a height the CSS cannot
 * measure would desynchronise the two. The search shrinks instead (it already
 * has flex:1 1 auto and min-width:0).
 */
@media (max-width: 767px) {
    .tr-header__inner   { gap: 12px; }
    .tr-header__actions { gap: 10px; }
    .tr-search          { max-width: none; }
    .tr-search__input   { height: 38px; padding-inline: 12px 40px; }
    .tr-logo,
    .tr-logo__img       { max-height: 34px; }
    .tr-logo--text      { font-size: 20px; }
}

@media (max-width: 479px) {
    /* Below this the search box cannot hold a usable query alongside the
       logo and two action icons. Revisit as a search-toggle component rather
       than by making the header taller. */
    .tr-header__search { display: none; }
}