/* ==========================================================================
   tp-fixes.css — v1.7.0 (2026-07-21). Loaded AFTER global.css.
   Small targeted overrides that must win over everything else.
   ========================================================================== */

/* ── 1. STICKY HEADER GUARD ────────────────────────────────────────────────
   Legacy (Elementor-era) code snippets inject `overflow-x:hidden` on
   html/body, which silently turns body into a scroll container and breaks
   position:sticky on #site-header (header animates but scrolls away).

   `overflow-x: clip` keeps the same horizontal-overflow protection but does
   NOT create a scroll container — so the header sticks again. Browsers
   without `clip` support simply ignore the declaration (no harm; JS guard
   in theme.js covers late-injected footer CSS with !important). */
html,
body {
  overflow-x: clip !important;
}

/* ── 2. NAV MENU CLEANUP ───────────────────────────────────────────────────
   Hide Snabbstugor, Utemöbler (handgjorda-utemobler) and Fönster from the
   Produkter submenu so mobile matches the desktop selection.
   Items stay in wp-admin's menu (nothing deleted) — CSS-only, same pattern
   as the existing blocketbutik rules in header.php.

   :has() rules hide the whole <li>; the plain a[href] rules are a fallback
   for older browsers without :has() support. */
.tp-mobile-nav__menu li:has(> a[href*="snabbstugor"]),
.tp-mobile-nav__menu li:has(> a[href*="utemobler"]),
.tp-mobile-nav__menu li:has(> a[href*="fonster"]),
.tp-nav-menu li:has(> a[href*="snabbstugor"]),
.tp-nav-menu li:has(> a[href*="utemobler"]),
.tp-nav-menu li:has(> a[href*="fonster"]) {
  display: none !important;
}
.tp-mobile-nav__menu a[href*="snabbstugor"],
.tp-mobile-nav__menu a[href*="utemobler"],
.tp-mobile-nav__menu a[href*="fonster"],
.tp-nav-menu .sub-menu a[href*="snabbstugor"],
.tp-nav-menu .sub-menu a[href*="fonster"],
.tp-nav-menu .sub-menu a[href*="utemobler"] {
  display: none !important;
}

/* ── 3. MOBILE HEADER LOGO ─────────────────────────────────────────────────
   On mobile (≤960px) always show the T-1 wordmark logo
   (T-1-e1741001089272-2.webp) — no scroll transition between T-2 and T-1.
   The T-1 wrap is normally absolute + opacity:0 until .is-scrolled; here we
   put it in normal flow, always visible, transitions off, and slightly
   larger than the old desktop 30px. max-height must be overridden because
   footer.php's logo size guard sets an inline max-height (42px). */
@media (max-width: 960px) {
  .tp-logo-t2-wrap {
    display: none !important;
  }
  .tp-logo-t1-wrap,
  .tp-header.is-scrolled .tp-logo-t1-wrap {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .tp-logo-t1 {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
  }
}

/* ── 4. MOBILE LANGUAGE SWITCHER ───────────────────────────────────────────
   Show the TranslatePress language dropdown (same one as desktop) in the
   mobile header, next to the search/cart icons. header-extras.php injects
   `.tp-hd-lang{display:none!important}` at ≤960px in the footer; the
   two-class selector below outranks it on specificity, so it wins even
   though it loads earlier. Compact on mobile: flag + chevron only (the
   "SEK / Swedish" text is hidden to save space). The dropdown list itself
   is unchanged and still shows the full language names. */
@media (max-width: 960px) {
  .tp-header__right .tp-hd-lang {
    display: block !important;
  }
  .tp-header__right .tp-hd-lang__btn {
    padding: 6px;
    gap: 4px;
    min-height: 34px;
  }
  /* Hide only the text label — keep the flag <img> and the chevron <svg>. */
  .tp-header__right .tp-hd-lang__btn > span {
    display: none !important;
  }
  .tp-header__right .tp-hd-lang__btn img {
    width: 22px;
    height: auto;
  }
}

/* ── 5. TOPBAR: TRUE-CENTER THE ROTATING BADGE ─────────────────────────────
   The topbar was flex with the badge area as flex:1 filler between the left
   (Köpvillkor) and right (status/email/phone) sections — since those have
   different widths, "LAGA PRISER" ended up left of the visual centre.
   A 1fr | auto | 1fr grid makes the side columns symmetric, so the badge
   column sits at the true centre of the bar at every viewport width.
   The rotating badges keep their absolute overlay behaviour inside the
   (now fixed-width, centred) badge track. Topbar is hidden ≤960px anyway. */
.tp-topbar__inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}
.tp-topbar__left {
  grid-column: 1;
  justify-self: start;
}
.tp-topbar__badges {
  grid-column: 2;
  justify-self: center;
  flex: none !important;
  min-width: 200px;
}
.tp-topbar__right {
  grid-column: 3;
  justify-self: end;
  margin-left: 0 !important;
}

/* ── 6. DESKTOP DROPDOWN: HOVER BRIDGE ─────────────────────────────────────
   header.css positions .sub-menu at top:calc(100% + 8px) — an 8px dead
   zone between the nav link and the dropdown. Crossing it drops li:hover,
   so the menu closes before the cursor can reach it.
   Fix: an invisible ::before strip on the sub-menu spanning the gap (and a
   little extra on all sides). The sub-menu is a CHILD of the li, so
   hovering the bridge keeps li:hover true and the dropdown open. Purely a
   hit-area — nothing visible, no layout change, visual 8px gap stays. */
.tp-nav-menu .sub-menu::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: -14px;
  height: 16px;
}

/* ── 7. DESKTOP STICKY LOGO SIZE ───────────────────────────────────────────
   The compact T-1 wordmark shown in the scrolled (sticky) header was 30px
   tall — too small in the 54px bar. Bump to 42px. !important on max-height
   belt-and-braces against any inline logo caps (footer.php guard now also
   writes 42px). Scoped to ≥961px; mobile keeps its 40px rule in section 3. */
@media (min-width: 961px) {
  .tp-logo-t1 {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
  }
}

/* ── 8. CONTACT FORM: SUCCESS BOX HIDDEN UNTIL SUCCESS ─────────────────────
   .nt-cp__success has the `hidden` attribute until the AJAX submit
   succeeds, but the contact block's CSS sets an explicit display on it,
   which overrides the browser's built-in [hidden]{display:none}. Restore
   the expected behaviour: with the attribute present, it stays invisible;
   the form JS removes the attribute on success and it appears as before. */
.nt-cp__success[hidden] {
  display: none !important;
}

/* ── 9. TRUST STRIP: MOBILE MARQUEE / DESKTOP UNCHANGED ────────────────────
   Markup (helpers.php): .trust-grid > .trust-track > 5 spans + 5
   .trust-clone spans (aria-hidden duplicates for the seamless loop).

   Desktop (≥961px): .trust-track is display:contents so the original
   spans lay out as direct children of .trust-grid exactly like before the
   markup change; clones are display:none. Zero visual difference.

   Mobile (≤960px): single-row infinite marquee, same performance recipe
   as the category slider — transform-only keyframes on the compositor,
   translateZ(0) promotion, uniform margin-right so the two halves are
   identical widths and translateX(-50%) wraps seamlessly, pause on touch,
   plain swipeable strip for prefers-reduced-motion. */
@media (min-width: 961px) {
  .trust-strip .trust-track {
    display: contents;
  }
  .trust-strip .trust-clone {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .trust-strip .trust-grid {
    display: block !important;
    overflow: hidden !important;
  }
  .trust-strip .trust-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: tpTrustScroll 28s linear infinite;
    transform: translateZ(0);
    will-change: transform;
  }
  .trust-strip .trust-track:active,
  .trust-strip .trust-grid:active .trust-track {
    animation-play-state: paused;
  }
  .trust-strip .trust-track > span {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 30px 0 0 !important;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .trust-strip .trust-track > span svg {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .trust-strip .trust-track {
      animation: none;
      width: auto;
      will-change: auto;
    }
    .trust-strip .trust-grid {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .trust-strip .trust-grid::-webkit-scrollbar {
      display: none;
    }
    .trust-strip .trust-clone {
      display: none !important;
    }
  }
}
@keyframes tpTrustScroll {
  from { transform: translateZ(0) translateX(0); }
  to   { transform: translateZ(0) translateX(-50%); }
}