/* =====================================================================
   MWI top bar - the thin antique-gold strip that sits ABOVE #mwi-header.
   Client request, 2026-09-05. NEW FILE: nothing existing is edited.

   WHY IT IS BUILT THIS WAY (mwi-motion-layer standing rules)

   - The strip is a SIBLING of #mwi-header, never a child, and it never
     writes filter / transform / will-change / contain / perspective /
     backdrop-filter onto #mwi-header. Xpro's fixed off-canvas mobile panel
     is a DESCENDANT of that element, and any of those properties would turn
     it into a containing block and trap the panel - the burger menu opens
     broken with no error.
   - The only thing this touches on the header is `top`, which cannot create
     a containing block.
   - z-index 90 is deliberate, and 999 would have been WRONG. #mwi-header
     reports z-index:999, but it is nested inside
     NAV.xpro-theme-builder-header-nav, which is `position:relative;
     z-index:99` and therefore opens its own stacking context. The whole
     header subtree - including the off-canvas drawer and its overlay -
     really competes at 99. Measured 2026-09-05: at z-index 998 this strip
     painted OVER the open mobile drawer and cut across its top edge.
     Anything below 99 puts the drawer back on top. The strip and the header
     bar never overlap (0-34px vs 34-133px), so nothing else is affected.
   - Every override is one step more specific than what it replaces
     (`html body #mwi-header`) because source order cannot be relied on once
     LiteSpeed combines the stylesheets.
   - The header is `position:fixed` and its wrapper measures 0px tall, so
     moving it down takes nothing out of document flow: the page below does
     not shift by a single pixel.
   ===================================================================== */

:root{
  /* One number owns the whole layout: the strip's height and the header's
     offset both read it, so they can never disagree. */
  --mwi-tb-h: 34px;
}

#mwi-topbar{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--mwi-tb-h);
  z-index: 90;   /* below the header NAV's 99 - see the note above */

  display: flex;
  align-items: center;
  /* Centred at every width - client, 2026-09-05. The pair reads as one
     considered cluster rather than two things pushed to opposite corners,
     which also stops the phone number sitting under the logo and the handle
     under the burger. The gap does the separating, so it is generous on
     desktop and shrinks with the viewport. */
  justify-content: center;
  gap: clamp(12px, 4vw, 52px);
  padding: 0 clamp(14px, 4vw, 48px);
  box-sizing: border-box;
  overflow: hidden;

  font-family: 'Frank Ruhl Libre', Georgia, 'Iowan Old Style', serif;
  color: #241A12;

  /* Two layers: the antique-gold ground the client asked for, and an ivory
     highlight that travels across it. The travelling sweep is the header's
     own signature motif (mwiBarGild, section 60 of mwi-motion.css) reused
     here rather than a new idea, so the strip reads as part of this site. */
  background:
    linear-gradient(90deg,
      rgba(255,252,246,0)   0%,
      rgba(255,252,246,.50) 50%,
      rgba(255,252,246,0)   100%),
    linear-gradient(90deg,
      #A8823F 0%,
      #B9924E 22%,
      #DCC48F 50%,
      #B9924E 78%,
      #A8823F 100%);
  background-size: 34% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -45% 0, 0 0;

  /* Seats the strip against the header. Espresso-tinted, never pure black. */
  box-shadow:
    inset 0 -1px 0 rgba(36,26,18,.20),
    0 6px 18px -14px rgba(36,26,18,.50);

  animation: mwiTopbarGild 11s cubic-bezier(.45,0,.25,1) infinite;
}

/* The sweep only travels; it never fades the type, and because it lightens
   the ground the espresso text can only gain contrast as it passes. */
@keyframes mwiTopbarGild{
  0%   { background-position: -45% 0, 0 0; }
  56%  { background-position: 145% 0, 0 0; }
  100% { background-position: 145% 0, 0 0; }
}

/* The header moves down by exactly the strip's height. `top` is the ONLY
   property written here - see the header note at the top of this file. */
html body #mwi-header{
  top: var(--mwi-tb-h) !important;
}

/* ---------------------------------------------------------------------
   Items
   --------------------------------------------------------------------- */

#mwi-topbar a.mwi-tb-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #241A12;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition:
    color     .22s cubic-bezier(.22,.61,.22,1),
    transform .22s cubic-bezier(.22,.61,.22,1),
    opacity   .22s cubic-bezier(.22,.61,.22,1);
}

/* A phone number is not a label: tracking it like an eyebrow makes it harder
   to read back, and tabular figures stop it shifting as the sweep passes. */
#mwi-topbar .mwi-tb-num{
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

#mwi-topbar a.mwi-tb-item svg{
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: block;
  transition: transform .22s cubic-bezier(.22,.61,.22,1);
}

#mwi-topbar a.mwi-tb-item:hover,
#mwi-topbar a.mwi-tb-item:focus-visible{
  color: #2E2318;
  transform: translateY(-1px);
}

#mwi-topbar a.mwi-tb-item:hover svg{
  transform: scale(1.08);
}

/* The one cool colour in this palette is reserved for focus rings. */
#mwi-topbar a.mwi-tb-item:focus-visible{
  outline: 2px solid #4A6FA5;
  outline-offset: 3px;
  border-radius: 2px;
}

/* NOTE: the PHP still adds .is-solo when only one item is present. It no
   longer needs a rule of its own - the base centres every arrangement - but
   the class is kept in the markup as a hook if a solo layout ever needs to
   differ again. */

/* ---------------------------------------------------------------------
   Phones. Elementor's mobile breakpoint on this install is 689px
   (elementor_viewport_md = 690) - not 767 and not 1024. The header,
   the login pill and the hero carousel all switch on that same number.
   --------------------------------------------------------------------- */
@media (max-width: 689px){
  :root{ --mwi-tb-h: 30px; }

  #mwi-topbar{
    /* Only the padding changes here now; centring and the gap are inherited
       from the base rule, so there is one clamp to reason about, not two. */
    padding: 0 12px;
  }

  #mwi-topbar a.mwi-tb-item{
    font-size: 10px;
    letter-spacing: .10em;
    gap: 6px;
  }

  #mwi-topbar a.mwi-tb-item svg{ width: 12px; height: 12px; }
}

/* Very narrow phones. Measured 2026-09-05 with the real handle in place:
   the two items need ~294px of content, so 320px still fits with slack but
   280px (a Galaxy Fold cover screen) clips 7px off the end of the handle.
   The strip's overflow:hidden means that shows as a cut word, not as a
   horizontal scrollbar - which is worse, because it is silent.
   Below 320px the handle TEXT goes and the Instagram glyph carries the link
   on its own; the phone number, which people actually read back, stays. */
@media (max-width: 319px){
  #mwi-topbar a[href*="instagram"] .mwi-tb-num{ display: none; }
  #mwi-topbar a[href*="instagram"]{ gap: 0; }
}

/* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #mwi-topbar{
    animation: none;
    background-position: 145% 0, 0 0;
  }
  #mwi-topbar a.mwi-tb-item,
  #mwi-topbar a.mwi-tb-item svg{
    transition: none;
  }
  #mwi-topbar a.mwi-tb-item:hover{ transform: none; }
}

/* Printing a fixed gold band across the top of every sheet helps nobody. */
@media print{
  #mwi-topbar{ display: none; }
  html body #mwi-header{ top: 0 !important; }
}