/* ============================================================
   Topbar (templates/header-top-row.php): dark-blue bar replacing
   Antek's header top row, with rotating USPs, review score, phone
   number and login links. Also the floating call button on mobile
   (footer.php), and the sticky header the topbar sits in.

   Ported from the old "MV — Topbar styling + verberg oude
   balken" WPCode snippet. The snippet had grown by appending
   overrides, so it set the same properties several times. This
   file keeps only the value that actually won for each one.

   Rules for markup that doesn't exist here were dropped: the
   old AMS plugin's .ams-usp-bar, .ams-account-bar and
   .ams-mobile-logo, plus .c-header__top-row-menu, .mv-trust and
   the is-hidden/scroll-hidden header classes.

   The USP rules are scoped to .mv-topbar because footer.php has
   its own .mv-usps list. Unscoped, these rules would apply to
   that list as well.
   ============================================================ */

:root { --mv-adminbar-h: 0px; }
body.admin-bar { --mv-adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --mv-adminbar-h: 46px; }
}

/* --- Bar ------------------------------------------------------------------ */
.mv-topbar {
  background: #142a5c;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.mv-topbar a { color: #fff; text-decoration: none; }
.mv-topbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* --- USP rotator (topbar.js cycles .is-active) ---------------------------- */
.mv-topbar .mv-usps {
  flex: 1;
  position: relative;
  min-height: 22px;
  overflow: hidden;
}
.mv-topbar .mv-usp {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-topbar .mv-usp.is-active { opacity: 1; transform: translateY(0); }
.mv-topbar .mv-usp strong { font-weight: 600; }

/* --- Trust cluster (rating + phone) --------------------------------------- */
.mv-topbar__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.mv-topbar__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mv-topbar__rating:hover {
  background: rgba(251, 191, 36, 0.28);
  border-color: rgba(251, 191, 36, 0.8);
  transform: translateY(-1px);
}
.mv-topbar__stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  line-height: 1;
}
.mv-topbar__rating strong {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}
.mv-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .2s ease;
}
.mv-topbar__phone:hover { background: rgba(255,255,255,.22); }

/* --- Login / registration links ------------------------------------------- */
.mv-topbar__links {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
.mv-topbar__links a { opacity: .9; }
.mv-topbar__links a:hover { opacity: 1; text-decoration: underline; }
.mv-topbar__links span { opacity: .4; }
/* A signed-in customer's name is as long as AMS says it is; don't let a long
   company name push the bar wider than the screen. */
.mv-topbar__account {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .mv-topbar__links { gap: 8px; font-size: 12px; }
}

/* Mobile: no trust cluster. Each USP shows only its <strong>; the text after it
   is a bare text node, hidden by font-size: 0 on the span. */
@media (max-width: 768px) {
  .mv-topbar { font-size: 13px; }
  .mv-topbar__inner { padding: 6px 12px; gap: 10px; }
  .mv-topbar__trust { display: none; }
  .mv-topbar .mv-usp { text-align: center; font-size: 0 !important; }
  .mv-topbar .mv-usp strong { font-size: 13px !important; font-weight: 600 !important; }
}
@media (max-width: 380px) {
  .mv-topbar .mv-usp strong { font-size: 12px !important; }
}

/* Narrow phones: the links wrap onto a second, full-width row. */
@media (max-width: 600px) {
  .mv-topbar__inner { flex-wrap: wrap; row-gap: 4px; }
  .mv-topbar__links {
    width: 100%;
    justify-content: center;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 4px;
    gap: 6px;
    font-size: 11px;
  }
  .mv-topbar__links span { opacity: .3; }
}

/* --- Sticky header, topbar included --------------------------------------
   The topbar renders inside header.l-section, so making that one element
   sticky keeps the bar and the header together. Antek's own JS sticky is
   switched off in functions.php so it doesn't pin the header separately.
   The !important is from the snippet, which added it so the header keeps
   sticking whatever theme JS or plugin transforms do.

   Antek's .l-wrap has overflow: hidden, which breaks position: sticky for
   everything inside it. overflow: clip still clips but doesn't create a
   scroll container. */
.l-wrap { overflow: clip !important; }
@media (max-width: 1024px) {
  .l-wrap { overflow: visible !important; }
}

header.l-section {
  position: sticky !important;
  top: var(--mv-adminbar-h) !important;
  z-index: 1000 !important;
  transform: none !important;
  will-change: auto !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Below 1170px (Antek's mobile breakpoint) Antek hides .c-header--desktop,
   and the topbar with it. Show that block again: .c-header__outer--desktop,
   the actual desktop header, stays hidden by Antek's own rule, so only the
   topbar shows. The mobile header comes first in the DOM, so order: -1 puts
   the topbar above it. Antek also gives every .c-header absolute positioning
   and a background on mobile, and that's reset here. */
@media (width < 1170px) {
  header.l-section { display: flex; flex-direction: column; }
  header.l-section .c-header--desktop {
    display: block;
    order: -1;
    position: static;
    background: none;
  }
}

/* Login is already in the topbar, so the mobile header's account icon goes. */
@media (max-width: 1024px) {
  .c-header--mobile .c-header__button-link--account { display: none !important; }
}

/* --- Floating call button (mobile) ---------------------------------------- */
.mv-mobile-call {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  text-decoration: none;
}
@media (max-width: 1024px) {
  .mv-mobile-call { display: inline-flex; }
}