/*!
 * True Makeup Theme — masthead.css
 *
 * Fixed top navigation bar: logo, primary links, search icon,
 * account icon, cart icon, and the checkout/view CTA. Owns the
 * three-column grid layout and the hover/active states on the
 * primary link row.
 *
 * The off-canvas mobile drawer is a different animal — it lives
 * in nav-responsive.css and uses its own class scheme.
 */


/* ─── Opaque background (override backdrop-filter elsewhere) ── */

#tmt-main-nav {
    background-color: #fff !important;
    backdrop-filter: none         !important;
    -webkit-backdrop-filter: none !important;
}

#tmt-main-nav .tmt-nav-link:hover,
#tmt-search-dropdown a:hover    { opacity: 1; }


/* ─── Three-column grid shell ─────────────────────────────── */

.tmt-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--layout-max-width, 1700px);
    margin: 0 auto;
    padding: 16px 0;
}

.tmt-nav-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.tmt-nav-center {
    display: flex;
    justify-content: center;
}

.tmt-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}


/* ─── Primary nav links ───────────────────────────────────── */

.tmt-nav-link {
    padding: 6px 12px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}

.tmt-nav-link:hover,
.tmt-nav-link:focus {
    background: none   !important;
    color: #000        !important;
    font-weight: 900   !important;
}

/* Active (current) page */
.tmt-nav-link-wrap.current-menu-item    .tmt-nav-link,
.tmt-nav-link-wrap.current-menu-parent  .tmt-nav-link,
.tmt-nav-link-wrap.current_page_parent  .tmt-nav-link,
.tmt-nav-link.is-active {
    background:           none !important;
    color:                #000 !important;
    font-weight:          900;
    text-decoration:      none;
    text-underline-offset: 4px;
}

/* Neutralise any leftover Tailwind `group-hover:block` from the
 * scaffolded nav that used to drop megamenus this way. */
.tmt-nav-link-wrap .group-hover\:block { display: none !important; }


/* ─── Icon buttons (search / account / cart) ──────────────── */

.tmt-icon-btn {
    display: flex;
    width: auto;
    height: auto;
    min-width: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.tmt-icon-btn:hover {
    transform: scale(1.2);
    align-items: center;
    text-decoration: none;
}


/* ─── Checkout CTA ──────────────────────────────────────────
   Structural rules only — background / colour / border / hover
   state come from the plugin's primary-button tokens (Site Wide
   → Buttons → Primary). The selector is in the primary list in
   easy-makeup-plugin/includes/token-output.php, so this masthead
   CTA stays in sync with the Proceed-to-Checkout button on the
   basket page and every other primary-tagged button on the
   site. */

.tmt-checkout-btn {
    display: inline-block;
    padding: 14px 36px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}


/* ─── Hamburger (mobile drawer trigger) ───────────────────── */

.tmt-hamburger {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}


/* ─── WP admin-bar clearance ──────────────────────────────── */

.admin-bar nav.fixed                              { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar nav.fixed                          { top: 46px; }
}


/* ─── Search dropdown — input ring with animated gradient ────
 * The header search input lives inside `#tmt-search-input-wrap`,
 * a div the header twig styles inline as `padding: 1px;
 * background: #e0e0e0` to fake a 1px grey "border" around the
 * field. Replace that with the same animated rainbow ring used
 * by the blog page search bar:
 *
 *   • At rest: 1px black ring drawn via inset box-shadow (zero
 *     layout impact, transitions cleanly).
 *   • On focus-within: ring fades to transparent and a 2px
 *     gradient pseudo-element (masked to a ring shape) flows
 *     across the wrap edge.
 *
 * The inline `padding: 1px; background: #e0e0e0` are overridden
 * with !important so the gradient ring isn't covered by the
 * grey fake-border.
 * ───────────────────────────────────────────────────────────── */

#tmt-search-input-wrap {
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
    /* Outset 1px ring (no `inset` keyword) — sits OUTSIDE the wrap
       edge so the input's own light-grey bg can't paint over it.
       Inset shadows render below child backgrounds, which is why
       the .tmt-blog-search pattern only works there: that input
       has `background: transparent`. The header input is a fixed
       light grey (#F4F4F5 set inline), so we draw the ring outside
       and pair it with a pseudo-element that lines up with -1px
       inset to take over on focus. */
    box-shadow: 0 0 0 1px #000;
    transition: box-shadow 0.25s ease;
}
#tmt-search-input-wrap:focus-within {
    box-shadow: 0 0 0 1px transparent !important;
}
#tmt-search-input-wrap::after {
    content: '';
    position: absolute;
    /* `inset: -1px` extends the pseudo-element by 1px on every side
       so its 2px border ring lands exactly where the resting black
       ring was, with no visible jump on focus. */
    inset: -1px;
    border: 2px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: linear-gradient(90deg, #554350, #B07B5F, #CC9E80, #E0BAB2, #FAE8DD, #E0BAB2, #CC9E80, #B07B5F, #554350) border-box;
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: tmt-gradient-flow 4s ease infinite;
    z-index: 2;
}
#tmt-search-input-wrap:focus-within::after { opacity: 1; }

/* Wipe the browser's native focus outline on the search input
   itself so it doesn't paint a second black ring on top of the
   gradient pseudo. Same pattern as .tmt-blog-search__input. */
#tmt-search-input,
#tmt-search-input:focus,
#tmt-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ─── Search dropdown — result cards ─────────────────────────
 * The header search popover now renders each match as a horizontal
 * card: 56px square thumbnail | title + first category chip | price
 * on the right. A "View all results" footer link sits below.
 *
 * Markup is generated client-side by the inline JS in header.twig
 * (the .tmt-search-result class chain) so this stylesheet is the
 * sole source of layout for the popover results.
 * ───────────────────────────────────────────────────────────── */

#tmt-search-results { padding: 0 !important; }

/* Open up some breathing room above the list — separates the
   results from the search input visually. */
.tmt-search-results__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid #ececee;
}

.tmt-search-result {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #ececee;
    background: #fff;
    color: #000;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.tmt-search-result:hover,
.tmt-search-result:focus { background: #F4F4F5; }
.tmt-search-result:last-child { border-bottom: 0; }

.tmt-search-result__media {
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: #F4F4F5;
}
.tmt-search-result__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmt-search-result__body {
    min-width: 0; /* lets the title truncate inside a 1fr grid cell */
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tmt-search-result__title {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: #000;
    /* Clamp to two lines so a long product name doesn't blow out
       the row height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tmt-search-result__tag {
    align-self: flex-start;
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #000;
    opacity: 0.55;
}

.tmt-search-result__price {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}
/* WC's get_price_html() emits prices wrapped in <span class="woocommerce-Price-amount">
   etc.; reset their inherited styling so the popover stays consistent. */
.tmt-search-result__price .woocommerce-Price-amount,
.tmt-search-result__price ins,
.tmt-search-result__price del {
    font-family: var(--font-primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000 !important;
}
.tmt-search-result__price del {
    opacity: 0.4;
    text-decoration: line-through;
    margin-right: 4px;
}
.tmt-search-result__price ins {
    text-decoration: none;
}

/* Footer "View all results" — full-width inverted CTA so it reads
   as the primary action when the user wants to see more. */
.tmt-search-results__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: #000 !important;
    color: #fff !important;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.tmt-search-results__more:hover { background: #1a1a1a !important; }

/* Empty / error state */
.tmt-search-results__empty {
    margin: 0;
    padding: 32px 20px;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 13px;
    color: #000;
    opacity: 0.55;
}

@media (max-width: 1023px) {
    .tmt-search-result          { padding: 12px 16px; gap: 12px; grid-template-columns: 52px 1fr auto; }
    .tmt-search-result__media   { width: 52px; height: 52px; }
    .tmt-search-result__title   { font-size: 13px; }
    .tmt-search-results__more   { padding: 16px 20px; font-size: 11px; }
}