/* ==========================================================================
   header.css — Cociniña header  (Phase 1.5, second cut)
   --------------------------------------------------------------------------
   WHAT THIS FILE CONTROLS
     1. Neutralising Elementor's JS sticky (the source of the old gap)
     2. Our own sticky, via position:sticky on the header wrapper
     3. The utility strip
     4. The main bar shell
     5. Logo
     6. Nav links
     7. The Order Now CTA
     8. Mobile — burger and dropdown
     9. Hiding the empty Contact Us button
    10. Reduced motion
    11. Scroll effect: light frosted glass once past the utility strip

   SCOPE
     Every selector is prefixed with .cn-header, a body class the theme adds
     only when CN_REDESIGN_HEADER is on, the page is not the front page, and
     (while previewing) the preview token is present. The homepage never
     matches a single rule here.

   WHY THE FIRST CUT FAILED, AND WHAT CHANGED
     v1 left Elementor's JS sticky in place. That sticky sets the bar to
     position:fixed and injects its own spacer element — then v1 added body
     padding on top, so the two stacked and left a ~70px dead band.
     v1 also set display:flex on the burger unconditionally, which beat
     Elementor's display:none and showed it at desktop width.

     This version switches Elementor's sticky off on our pages, hides its
     spacer, and uses position:sticky on the header wrapper instead. A
     sticky element stays in the document flow, so nothing needs a spacer
     or padding and the two can never fall out of step. The burger rules
     are now confined to the dropdown breakpoint.

   All values come from tokens.css. Do not hardcode colours or sizes here.
   ========================================================================== */


/* ==========================================================================
   1. NEUTRALISE ELEMENTOR'S JS STICKY
   --------------------------------------------------------------------------
   Elementor writes position:fixed as an inline style. An !important
   declaration in a stylesheet beats a non-important inline style, so these
   win without touching the template.
   ========================================================================== */

.cn-header #header-bar,
.cn-header #header-bar.elementor-sticky--active,
.cn-header #header-bar.elementor-sticky--effects {
  /* relative, not static: it still undoes Elementor position:fixed and keeps
     the bar in flow, but also gives the mobile dropdown something to anchor
     to. With static the dropdown resolved against a far-off ancestor and
     rendered half off-screen. */
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: none !important;
}

/* Elementor injects this to reserve the fixed bar's height. With our own
   sticky the bar never leaves the flow, so the spacer is pure dead space. */
.cn-header .elementor-sticky__spacer {
  display: none !important;
}

/* Snippet #762 adds body padding for the old fixed bar. Not needed now, and
   it would reintroduce the gap. Ours is more specific, so it wins.
   The snippet itself is not edited — see the note in section 2. */
.cn-header,
.cn-header:has(#header-bar.elementor-sticky--active) {
  padding-top: 0 !important;
}


/* ==========================================================================
   2. OUR STICKY
   --------------------------------------------------------------------------
   position:sticky on the header wrapper. The wrapper is the first child of
   #page, and the utility strip is rendered immediately before it, so the
   strip scrolls away and the main bar pins — the behaviour asked for.

   Snippet #765 (transparent background when not sticky) targets #header-bar
   and is outgunned in section 4, not edited.
   ========================================================================== */

.cn-header .elementor-location-header {
  position: sticky;
  top: 0;
  z-index: var(--cn-header-z);   /* 500 — far below the chat widget */
}

/* --- Logged-in admins: clear the WordPress admin bar ---------------------
   The admin bar is fixed to the top of the viewport for logged-in users, so
   a sticky header pinned to top:0 slides underneath it and loses its logo
   and menu. WordPress publishes the bar height as a custom property (32px,
   46px at <=782px), so we follow that rather than hardcoding a number.

   Below 600px WordPress makes the admin bar position:absolute, so it scrolls
   away with the page and the header goes back to the very top.

   Logged-out visitors never get the .admin-bar body class, so none of this
   applies to them. */
.cn-header.admin-bar .elementor-location-header {
  top: var(--wp-admin--admin-bar--height, var(--cn-admin-bar-h));
}

@media (max-width: 600px) {
  .cn-header.admin-bar .elementor-location-header {
    top: 0;
  }
}


/* ==========================================================================
   3. UTILITY STRIP
   --------------------------------------------------------------------------
   Rendered by cn_render_header_utility_bar() in functions.php. All wording
   lives in cn_header_copy() in that file — there is one clearly marked
   place to edit it.
   ========================================================================== */

.cn-header .cn-utility {
  background-color: var(--cn-header-footer-bg);
  border-bottom: 1px solid var(--cn-header-divider);
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  min-height: var(--cn-util-h);
  display: flex;
  align-items: center;
}

.cn-header .cn-utility__inner {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--cn-header-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-sm);
}

.cn-header .cn-utility__promo,
.cn-header .cn-utility__contact {
  font-size: var(--cn-util-size);
  font-weight: var(--cn-weight-medium);
  letter-spacing: var(--cn-util-tracking);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

.cn-header .cn-utility__promo {
  color: var(--cn-text-muted);
}

.cn-header .cn-utility__contact {
  display: flex;
  align-items: center;
  gap: var(--cn-space-xs);
  white-space: nowrap;
}

.cn-header .cn-utility__link {
  color: var(--cn-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--cn-dur-fast) var(--cn-ease);
}
.cn-header .cn-utility__link:hover,
.cn-header .cn-utility__link:focus-visible {
  border-bottom-color: var(--cn-accent);
}

@media (max-width: 767px) {
  .cn-header .cn-utility {
    min-height: var(--cn-util-h-mobile);
  }
  .cn-header .cn-utility__inner {
    justify-content: center;
    padding-inline: var(--cn-space-2xs);
  }
  /* The promise is the message worth keeping at phone width, and the full
     line has to fit 390px without clipping. */
  .cn-header .cn-utility__promo {
    font-size: var(--cn-util-size-mobile);
    letter-spacing: 0.05em;
    text-align: center;
  }
}


/* ==========================================================================
   4. MAIN BAR SHELL
   ========================================================================== */

.cn-header #header-bar {
  background-color: var(--cn-header-footer-bg);
  background-image: none;
  border-bottom: 1px solid var(--cn-header-border);
  min-height: var(--cn-main-h);
  /* The template pulls content up under the bar with a large negative
     bottom margin. That is the homepage hero effect; here it just breaks
     the layout. */
  --margin-top: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
}

/* Outguns snippet #765, which forces transparency when not sticky. */
.cn-header #header-bar:not(.elementor-sticky--active) {
  background-color: var(--cn-header-footer-bg) !important;
  background-image: none !important;
}

/* Elementor also sets a background image on the bar at <=1024px — a leftover
   kitchen photo. It has to be cleared inside a media query too, or it wins
   at that width. */
@media (max-width: 1024px) {
  .cn-header #header-bar,
  .cn-header #header-bar:not(.elementor-sticky--active) {
    background-image: none !important;
  }
  .cn-header #header-bar { --margin-bottom: 0px; }
}
@media (max-width: 767px) {
  .cn-header #header-bar {
    min-height: var(--cn-main-h-mobile);
    --margin-bottom: 0px;
  }
}

/* Something outside the template — not post-29.css and not Elementor's own
   frontend CSS — puts a 100px border-radius on the inner row, and adds
   ~20px of height once Elementor marks the bar sticky. Both are wrong for a
   flat edge-to-edge bar, so they are pinned here rather than chased to
   source. If the bar ever looks the wrong height when pinned, this block is
   what is holding it. */
.cn-header #header-bar,
.cn-header #header-bar.elementor-sticky,
.cn-header #header-bar.elementor-sticky--active,
.cn-header #header-bar.elementor-sticky--effects {
  border-radius: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --padding-top: 0px;
  --padding-bottom: 0px;
  align-content: center;
  /* Pinned rather than left to min-height: once Elementor marks the bar
     sticky, something adds ~20px that survives padding:0 and height:auto.
     overflow stays visible so the mobile dropdown, which is absolutely
     positioned, still escapes the bar. */
  height: var(--cn-main-h) !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .cn-header #header-bar,
  .cn-header #header-bar.elementor-sticky,
  .cn-header #header-bar.elementor-sticky--active,
  .cn-header #header-bar.elementor-sticky--effects {
    height: var(--cn-main-h-mobile) !important;
  }
}

.cn-header #header-bar > .e-con-inner,
.cn-header #header-bar .elementor-element.e-con,
.cn-header #header-bar .header-internal {
  border-radius: 0 !important;
}

/* Elementor sticky effects are configured on the inner row: once the bar
   pins it gains a 40% black overlay, a near-black 1px border and a 20px
   inset each side, which drew a dark rectangle inside the bar (and was the
   20px of extra height). The bar is meant to look identical pinned or not. */
.cn-header #header-bar.elementor-sticky--effects > .e-con-inner,
.cn-header #header-bar.elementor-sticky--effects .header-internal,
.cn-header #header-bar.elementor-sticky--active > .e-con-inner,
.cn-header #header-bar.elementor-sticky--active .header-internal {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* The inner row: logo left, everything else right. */
.cn-header #header-bar > .e-con-inner,
.cn-header #header-bar .elementor-element.e-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: var(--cn-header-pad-x);
  --padding-right: var(--cn-header-pad-x);
  --align-items: center;
  --justify-content: space-between;
  --gap: var(--cn-space-sm);
  min-height: inherit;
}

/* Elementor pads the menu widget by 116px each side. */
.cn-header #header-bar .elementor-widget-nav-menu > .elementor-widget-container {
  margin: 0;
  padding: 0;
}
.cn-header #header-bar .elementor-widget-nav-menu {
  margin-left: auto;   /* pushes the nav + CTA to the right of the logo */
}


/* ==========================================================================
   5. LOGO
   ========================================================================== */

/* Sized by HEIGHT, not width, so the mark fills the bar whatever its aspect
   ratio - a wordmark swapped in later still fits. */
.cn-header #header-bar .elementor-widget-theme-site-logo img,
.cn-header #header-bar .elementor-widget-image img {
  height: var(--cn-logo-h);
  width: auto;
  max-width: none;
  display: block;
}

@media (max-width: 767px) {
  .cn-header #header-bar .elementor-widget-theme-site-logo img,
  .cn-header #header-bar .elementor-widget-image img {
    height: var(--cn-logo-h-mobile);
  }
}


/* ==========================================================================
   6. NAV LINKS
   --------------------------------------------------------------------------
   Small, semibold and letter-spaced rather than large — it reads as more
   considered and leaves room for the CTA to be the one loud element.
   Elementor ships these at 29px with a 52px line-height.
   ========================================================================== */

.cn-header #header-bar .elementor-nav-menu--main {
  align-items: center;
}

.cn-header #header-bar .elementor-nav-menu--main .elementor-item {
  font-family: var(--cn-font-body);
  font-size: var(--cn-nav-size);
  font-weight: var(--cn-nav-weight);
  line-height: 1.2;
  letter-spacing: var(--cn-nav-tracking);
  text-transform: uppercase;
  color: var(--cn-text);
  fill: var(--cn-text);
  padding: 0 var(--cn-space-2xs);
  min-height: var(--cn-nav-tap-min);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: color var(--cn-dur-fast) var(--cn-ease);
}

.cn-header #header-bar .elementor-widget-nav-menu {
  --e-nav-menu-horizontal-menu-item-margin: calc(var(--cn-nav-gap) / 2);
}
@media (max-width: 1366px) {
  .cn-header #header-bar .elementor-widget-nav-menu {
    --e-nav-menu-horizontal-menu-item-margin: calc(var(--cn-nav-gap-narrow) / 2);
  }
}

/* Current page */
.cn-header #header-bar .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--cn-accent);
  fill: var(--cn-accent);
}

/* Hover: a green underline, so the label keeps full white contrast. */
.cn-header #header-bar .elementor-nav-menu--main .elementor-item:hover,
.cn-header #header-bar .elementor-nav-menu--main .elementor-item:focus,
.cn-header #header-bar .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--cn-text);
  fill: var(--cn-text);
  text-decoration: underline;
  text-decoration-color: var(--cn-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.cn-header #header-bar .elementor-nav-menu--main .elementor-item.elementor-item-active:hover {
  color: var(--cn-accent);
}

/* Elementor's own pointer effects compete with that underline. */
.cn-header #header-bar .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.cn-header #header-bar .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
  display: none;
}

.cn-header #header-bar .elementor-nav-menu--main .elementor-item:focus-visible {
  outline: var(--cn-focus-ring);
  outline-offset: 2px;
  border-radius: var(--cn-radius-sm);
}


/* ==========================================================================
   7. ORDER NOW CTA
   --------------------------------------------------------------------------
   Appended to the menu by cn_header_cta_item() in functions.php, as a real
   <li> so it inherits the menu's layout and appears in the mobile dropdown
   automatically. The site menu itself is never modified.

   Bright green fill with deep green text (5.28:1). White on bright green is
   2.70:1 and is never used.
   ========================================================================== */

.cn-header #header-bar .cn-nav-cta {
  display: flex;
  align-items: center;
  margin-left: var(--cn-space-sm);
}

.cn-header #header-bar .cn-nav-cta > .elementor-item,
.cn-header #header-bar .cn-nav-cta > a {
  position: relative;
  background: var(--cn-gradient-accent);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  color: var(--cn-header-footer-bg);
  fill: var(--cn-header-footer-bg);
  font-family: var(--cn-font-body);
  font-size: var(--cn-cta-size);
  font-weight: var(--cn-weight-bold);
  letter-spacing: var(--cn-nav-tracking);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: var(--cn-cta-pad-y) var(--cn-cta-pad-x);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--cn-shadow-button);
  transition: transform var(--cn-dur-fast) var(--cn-ease),
              box-shadow var(--cn-dur) var(--cn-ease),
              background var(--cn-dur) var(--cn-ease);
}

.cn-header #header-bar .cn-nav-cta > .elementor-item:hover,
.cn-header #header-bar .cn-nav-cta > .elementor-item:focus-visible {
  background: var(--cn-accent);
  color: var(--cn-header-footer-bg);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--cn-shadow-button-hover);
}
.cn-header #header-bar .cn-nav-cta > .elementor-item:active {
  transform: translateY(0);
}

/* Shimmer sweep, matching the Place Order button on checkout. */
.cn-header #header-bar .cn-nav-cta > .elementor-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    var(--cn-shimmer) 46%,
    var(--cn-shimmer) 54%,
    transparent 100%
  );
  transform: translateX(-130%);
  transition: transform var(--cn-dur-slow) var(--cn-ease);
  pointer-events: none;
}
.cn-header #header-bar .cn-nav-cta > .elementor-item:hover::after,
.cn-header #header-bar .cn-nav-cta > .elementor-item:focus-visible::after {
  transform: translateX(130%);
}

/* The CTA never takes the plain active-link colour. */
.cn-header #header-bar .cn-nav-cta > .elementor-item.elementor-item-active {
  color: var(--cn-header-footer-bg);
}


/* ==========================================================================
   8. MOBILE — BURGER AND DROPDOWN
   --------------------------------------------------------------------------
   Every rule here is inside the dropdown breakpoint. v1 styled the toggle
   unconditionally, which overrode Elementor's display:none and showed the
   burger at desktop width — do not lift these out of the media query.
   ========================================================================== */

@media (max-width: 1024px) {

  .cn-header #header-bar .elementor-menu-toggle {
    color: var(--cn-text);
    background-color: transparent;
    border: 0;
    width: var(--cn-nav-tap-min);
    height: var(--cn-nav-tap-min);
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .cn-header #header-bar .elementor-menu-toggle svg,
  .cn-header #header-bar .elementor-menu-toggle i {
    fill: var(--cn-text);
    color: var(--cn-text);
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
  .cn-header #header-bar .elementor-menu-toggle:focus-visible {
    outline: var(--cn-focus-ring);
    outline-offset: 2px;
  }

  /* The nav widget must not be the positioning context, or the panel
     anchors to the widget box instead of the bar. */
  .cn-header #header-bar .elementor-widget-nav-menu {
    position: static;
  }

  /* The opened panel: full width, directly under the bar. */
  .cn-header #header-bar .elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background-color: var(--cn-header-footer-bg);
    border-top: 1px solid var(--cn-header-divider);
    box-shadow: var(--cn-shadow-card);
  }
  .cn-header #header-bar .elementor-nav-menu--dropdown a.elementor-item,
  .cn-header #header-bar .elementor-nav-menu--dropdown a.elementor-sub-item {
    font-family: var(--cn-font-body);
    font-size: var(--cn-nav-size-mobile);
    font-weight: var(--cn-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--cn-text);
    fill: var(--cn-text);
    background-color: transparent;
    min-height: var(--cn-nav-tap-min);
    display: flex;
    align-items: center;
    padding: var(--cn-space-xs) var(--cn-space-md);
    border-bottom: 1px solid var(--cn-hairline);
    text-decoration: none;
  }
  .cn-header #header-bar .elementor-nav-menu--dropdown a.elementor-item:hover,
  .cn-header #header-bar .elementor-nav-menu--dropdown a.elementor-item:focus {
    background-color: var(--cn-surface-raised);
    color: var(--cn-text);
    text-decoration: none;
  }
  .cn-header #header-bar .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    color: var(--cn-accent);
    fill: var(--cn-accent);
  }

  /* The CTA becomes a full-width block at the foot of the dropdown. */
  .cn-header #header-bar .elementor-nav-menu--dropdown .cn-nav-cta {
    display: block;
    margin: var(--cn-space-sm) var(--cn-space-md) var(--cn-space-md);
  }
  .cn-header #header-bar .elementor-nav-menu--dropdown .cn-nav-cta > a.elementor-item {
    justify-content: center;
    border-bottom: 1px solid var(--cn-accent-dark);
    border-radius: var(--cn-radius-pill);
    padding: var(--cn-space-xs) var(--cn-space-md);
    color: var(--cn-header-footer-bg);
  }
}


/* ==========================================================================
   9. THE EMPTY CONTACT US BUTTON
   --------------------------------------------------------------------------
   The template carries an Elementor button widget reading "Contact Us" with
   no link set, so it goes nowhere. It is also white-on-green (~2:1), which
   the brand rules forbid.

   Hidden on redesigned pages only — the homepage still shows it. Contact
   moves to the utility strip until the Contact page exists in Phase 6.

   Hidden, not removed: the widget stays in the template untouched, so
   switching the kill switch off brings it straight back.
   ========================================================================== */

.cn-header #header-bar .elementor-widget-button {
  display: none;
}


/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cn-header .cn-utility__link,
  .cn-header #header-bar .elementor-item,
  .cn-header #header-bar .cn-nav-cta > .elementor-item {
    transition-duration: 0.001ms !important;
  }
  .cn-header #header-bar .cn-nav-cta > .elementor-item::after {
    display: none;
  }
  .cn-header #header-bar .cn-nav-cta > .elementor-item:hover {
    transform: none;
  }
}


/* ==========================================================================
   11. SCROLL EFFECT
   --------------------------------------------------------------------------
   At the top of the page the bar is solid #202E20, exactly as it renders at
   rest. Once the page has scrolled past the utility strip, cn-header.js adds
   `cn-scrolled` to <body> and the bar becomes light frosted glass: half-
   opacity green over a backdrop blur, with a faint text shadow carrying the
   menu against whatever is passing underneath.

   Three treatments were built and compared over the brick page background, a
   dark green checkout card, a white input field and a food photo. This is
   the one that was chosen; the other two were removed rather than left as
   dead code.

   Nothing here applies unless .cn-fx is on <body>, which the theme adds only
   where the header redesign itself is active — so never on the homepage.

   The rounded "pill" shape Elementor's sticky effects used to apply is still
   neutralised in section 4, and nothing here brings it back.
   ========================================================================== */

/* The bar always transitions, so returning to the top fades back smoothly. */
.cn-header.cn-fx #header-bar {
  transition:
    background-color var(--cn-fx-dur) var(--cn-ease),
    box-shadow       var(--cn-fx-dur) var(--cn-ease),
    border-color     var(--cn-fx-dur) var(--cn-ease),
    backdrop-filter  var(--cn-fx-dur) var(--cn-ease);
}

.cn-header.cn-fx #header-bar .elementor-item,
.cn-header.cn-fx #header-bar .elementor-menu-toggle {
  transition:
    color       var(--cn-fx-dur) var(--cn-ease),
    text-shadow var(--cn-fx-dur) var(--cn-ease);
}

/* The utility strip scrolls away with the page; fading it stops it flashing
   behind the blur as it goes. */
.cn-header.cn-fx .cn-utility {
  transition: opacity var(--cn-fx-dur) var(--cn-ease);
}


/* --------------------------------------------------------------------------
   Scrolled state — light frosted glass
   --------------------------------------------------------------------------
   Section 4 sets the solid background with !important, to outgun WPCode
   snippet #765. These have to match that weight to override it.
   -------------------------------------------------------------------------- */

.cn-header.cn-fx.cn-scrolled #header-bar,
.cn-header.cn-fx.cn-scrolled #header-bar:not(.elementor-sticky--active),
.cn-header.cn-fx.cn-scrolled #header-bar.elementor-sticky--active {
  background-color: var(--cn-fx-bg) !important;
  backdrop-filter: blur(var(--cn-fx-blur));
  -webkit-backdrop-filter: blur(var(--cn-fx-blur));
  border-bottom-color: var(--cn-fx-border);
  box-shadow: var(--cn-fx-shadow);
}

/* At half opacity the menu sits over whatever is scrolling past, so it gets
   a faint shadow to hold its edge. */
.cn-header.cn-fx.cn-scrolled #header-bar .elementor-nav-menu--main .elementor-item,
.cn-header.cn-fx.cn-scrolled #header-bar .elementor-menu-toggle {
  text-shadow: var(--cn-fx-text-shadow);
}

/* Transparency must not stop the bar being clickable, and it has to stay
   above the content it now floats over. */
.cn-header.cn-fx.cn-scrolled .elementor-location-header {
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   Fallback: no backdrop-filter support
   --------------------------------------------------------------------------
   Without the blur, a 50% bar is just a weak tint over arbitrary content.
   Those browsers get a much more opaque bar instead.
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cn-header.cn-fx.cn-scrolled #header-bar,
  .cn-header.cn-fx.cn-scrolled #header-bar:not(.elementor-sticky--active),
  .cn-header.cn-fx.cn-scrolled #header-bar.elementor-sticky--active {
    background-color: var(--cn-fx-bg-fallback) !important;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion: change state instantly, no fade
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cn-header.cn-fx #header-bar,
  .cn-header.cn-fx #header-bar .elementor-item,
  .cn-header.cn-fx #header-bar .elementor-menu-toggle,
  .cn-header.cn-fx .cn-utility {
    transition: none !important;
  }
}