/**
 * TransferJet — masthead (M5).
 *
 * Two jobs:
 *   1. Promote the desktop navigation to its own full-width row, and carry the
 *      2px divider on #header itself so it spans the viewport rather than
 *      stopping at the container.
 *   2. Style the search field, which header.phtml renders as an inline pill at
 *      lg and as the contents of the #search-content panel below lg.
 *
 * The row split is done here rather than in the header.phtml override because
 * html/header/topmenu.phtml echoes its children with no element of its own:
 * topmenu_mobile and topmenu_desktop are siblings inside the header's flex row,
 * so moving the `topmenu` block in markup would carry the mobile menu trigger
 * down into the second row with the desktop nav. Reordering `.navigation`
 * alone leaves the mobile trigger where it is.
 *
 * Structure this relies on (see the TJ notes in header.phtml):
 *
 *   #header
 *     > div.container            flex flex-wrap lg:flex-nowrap ...
 *         > div                  logo
 *         > (topmenu)            mobile trigger + dialog, then nav.navigation
 *         > div#search-content   panel below lg, inline field at lg
 *         > div                  search toggle / customer / cart
 *
 * #header's border is the divider at every width. Below lg the navigation is
 * display:none and it is the only separator between the masthead and the
 * breadcrumbs; at lg it is also the line the nav labels' underline sits on.
 * Only the shadow is dropped at lg.
 */

/* ---------------------------------------------------------------------------
   Row layout.

   Plain CSS on semantic classes rather than Tailwind utilities in the
   template: this file is layout-loaded, so it applies on a cache flush with no
   rebuild and cannot be defeated by a class failing to reach the compiled
   stylesheet — which is what put the logo at full width, the search field
   below it and the mobile logo at 400px.
   --------------------------------------------------------------------------- */

/* Below lg the logo owns a band of its own, closed by a divider, with the menu
   and icon row beneath it. The negative inline margin cancels the container's
   24px padding so the divider reaches the viewport edges; the padding puts the
   logo back where it was. */
.tj-masthead__logo {
    border-bottom: 1px solid #eceae9;
    display: flex;
    /* Wider than the line it sits on, so it always wraps to a row of its own.
       width:100% would not: at exactly 100% the box sits 24px short on the
       right while still leaving room beside it. */
    flex: 0 0 auto;
    justify-content: center;
    /* Enough that the menu trigger below clears the divider. */
    margin-bottom: 0.875rem;
    margin-inline: -1.5rem;
    padding: 0.875rem 1.5rem;
    width: calc(100% + 3rem);
}

/* The container's own vertical padding is handed to the two rows: the logo
   band owns its 14px, the menu row 8px above and below. 8, not 12, because the
   menu row's controls already carry padding of their own, so its measured gap
   and its optical gap are not the same number. */
#header > .container {
    padding-top: 0.125rem;
    padding-bottom: 0.75rem;
}

/* One outlined button holding both the glyph and the label, on the same
   white-and-#cfcdcb as the filter trigger, the category tiles, the pagination
   roundels and the add-to-cart modal's secondary. */
.tj-mobile-menu > button {
    align-items: center;
    background: #fff;
    border: 1px solid #cfcdcb;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    gap: 0.625rem;
    height: 42px;
    padding-inline: 0.875rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tj-mobile-menu > button:hover {
    background: #f7f7f7;
    border-color: #a8a5a3;
}

.tj-mobile-menu > button > svg {
    height: 22px;
    width: 22px;
}

/* The design asks for semibold; Roboto has no 600, so this is 700. */
.tj-mobile-menu > button > span {
    font-size: 15px;
    font-weight: 700;
}

/* The action glyphs below lg. Set here rather than on the icons for the same
   reason as the lg rule: the account glyph comes from a block this theme does
   not override. 26 lifts search and account without shrinking the cart enough
   to notice. */
.tj-masthead__actions svg {
    height: 26px;
    width: 26px;
}

.tj-masthead__actions {
    gap: 1rem;
}

.tj-masthead__search {
    display: none;
}

.tj-logo {
    height: 35px;
    width: 220px;
}

@media (min-width: 1024px) {
    /* Hyvä's 1px border becomes the navigation's divider: 2px in the theme's
       border colour, on #header so it reaches the viewport edges while the nav
       labels above it stop at the container. The shadow goes — the line is the
       edge, and a shadow under it reads as a second one.

       margin-bottom is the air under the divider. It cannot be container
       padding: padding inside the container pushes the line away from the
       labels it belongs to, leaving nothing between it and the breadcrumbs. */
    #header {
        border-bottom: 2px solid var(--color-border);
        box-shadow: none;
        margin-bottom: 1.375rem;
    }

    /* header.phtml sets lg:flex-nowrap, which pins the children to one line.
       Wrapping is what lets the nav take a row of its own. */
    #header > .container {
        flex-wrap: wrap;
    }

    /* order:1 puts the nav after the logo, the search field and the icon
       cluster, all at the default order:0, regardless of where it sits in the
       DOM. The margin is the whole gap between the masthead and the labels. */
    #header > .container > .navigation {
        margin-top: 5px;
        order: 1;
        width: 100%;
    }

    /* The logo stops owning a row and becomes the leftmost item. The
       container's align-items:center then puts the search field and the icons
       on the logo's vertical centre. */
    .tj-masthead__logo {
        border-bottom: 0;
        flex: 0 0 auto;
        justify-content: flex-start;
        margin-bottom: 0;
        margin-inline: 0;
        padding: 0;
        width: auto;
    }

    /* margin-inline-start:auto pushes the field off the logo and hard against
       the icon cluster, so it sits opposite the logo rather than beside it. */
    .tj-masthead__search {
        display: block;
        margin-inline-end: 1rem;
        margin-inline-start: auto;
    }

    .tj-masthead__search .tj-search {
        width: 384px;
    }

    /* 380 / 6.2857 is 60.45; 60 is a 0.7% squash on an SVG and keeps the
       number whole. */
    .tj-logo {
        height: 60px;
        width: 380px;
    }

    /* No bottom padding at lg: the triggers' own 24px is the space under the
       labels, and the divider is #header's border immediately beneath them. */
    #header > .container {
        padding-bottom: 0;
        padding-top: 2rem;
    }

    /* Sized here rather than on the icons: the cart glyph is written in
       header.phtml, but the account glyph comes from Hyvä's customer block,
       which this theme does not override. CSS reaches both. */
    .tj-masthead__actions svg {
        height: 30px;
        width: 30px;
    }

    /* Two jobs, two properties. gap is visual — Hyvä's gap-1 leaves 30px
       glyphs crowded. padding grows each target to 44px square (WCAG 2.5.8)
       without moving the glyph.

       Targeted by id because the two are not siblings: the cart button is a
       direct child of the cluster, the account button sits inside a wrapper
       div from Hyvä's customer block. Both ids are stable. */
    .tj-masthead__actions {
        gap: 0.5rem;
    }

    #customer-menu,
    #menu-cart-icon {
        padding: 0.4375rem;
    }

    /* Taller to balance the 30px glyphs. Height only, so the text does not
       move. */
    .tj-search .form-input {
        height: 48px;
    }

    /* Pinned rather than stretched, so the glyph stays on the type's centre
       line while the hit area is a full 48 square. */
    .tj-search__submit {
        height: 48px;
        inset-inline-start: 16px;
        width: 48px;
    }

    .tj-search .form-input {
        padding-inline-start: 64px;
    }
}

/* ---------------------------------------------------------------------------
   Search field.

   Measured from speedoptions.no — 393 x 38, fully rounded, filled, no border,
   placeholder in mid grey, magnifier inset on the leading edge — and taken to
   48 tall at every width, since 38 is small for a touch target.

   .form-input is Hyvä's own input component, so everything below is an
   override of it. Scoped to .tj-search rather than #search-content, because
   there are two fields from two templates and only the panel one sits inside
   #search-content.
   --------------------------------------------------------------------------- */

.tj-search .form-input {
    /* --color-bg-alt, shared with the megamenu tiles and the finder bar: one
       surface grey for every filled control in the header. */
    background-color: var(--color-bg-alt);
    border-color: transparent;
    border-radius: 9999px;
    box-shadow: none;
    height: 48px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tj-search .form-input::placeholder {
    color: #8d8b89;
    opacity: 1;
}

/* The leading button is a square the size of the pill's end cap, so the
   magnifier's centre lands on the centre of the rounded end.

   Padding and border are reset here deliberately: sizing alone is not enough,
   because the button inherits horizontal padding and with border-box that
   shrinks the content area, so justify-content:center would centre the glyph
   inside an already-offset box.

   The 14px inset departs from the geometric centre on purpose — the rounded
   edge curves in toward the glyph, so a centred glyph reads as crowded. It is
   16px at lg. The input's leading padding moves with it in both cases, keeping
   the gap between glyph and placeholder unchanged; change one without the
   other and the placeholder shifts. */
.tj-search__submit {
    align-items: center;
    background: transparent;
    border: 0;
    color: #8d8b89;
    display: flex;
    height: 48px;
    inset-block-start: 0;
    inset-inline-start: 14px;
    justify-content: center;
    padding: 0;
    position: absolute;
    width: 38px;
}

.tj-search .form-input {
    padding-inline-start: 62px;
}

/* The focus lift, measured from the reference: the fill lightens toward white
   and the pill picks up a soft shadow, slightly heavier below so it reads as
   elevation. Geometry does not change — the apparent height increase on the
   reference is shadow bleed, not a taller field. */
.tj-search .form-input:focus {
    background-color: #fbfbfb;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 4px 12px rgb(0 0 0 / 0.10);
    outline: none;
}

/* Deliberate deviation: live has no focus ring, and a shadow alone is a weak
   focus indicator against a white masthead. Primary red rather than secondary
   blue, because the search button's activated state already tints red. */
.tj-search .form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    /* Negative, so the ring sits inside the pill's edge; on a fully rounded
       field an outset ring reads as a second, detached shape. */
    outline-offset: -2px;
}

/* Chrome and Safari draw their own clear affordance on type="search", which
   collides with the pill's trailing radius. */
.tj-search .form-input::-webkit-search-decoration,
.tj-search .form-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}