/* ==========================================================================
   Infocus — Elementor header bridge

   Reproduces the header from main.css (topbar 309-333, header/nav 337-517)
   on the markup Elementor's widgets actually render.

   Loads after main.css and elementor-bridge.css.

   THE ONE RULE
   --------------------------------------------------------------------------
   Leave the STYLE tab untouched on every header widget. Elementor emits its
   own per-element CSS at very high specificity, and anything you set there
   will beat this file. Use Elementor for STRUCTURE (containers, direction,
   order) and ADVANCED (CSS classes, responsive visibility, sticky) only.

   Reference values, from the :root block in main.css:
     --crimson    #9A0130      --line       #E7E0DA     --header-h   76px
     --crimson-800#7A0126      --line-soft  #F0EAE4     --radius-sm  6px
     --ink        #1B1416      --paper      #FFFFFF     --radius     12px
     --ink-700    #2F2F30      --sand       #FAF7F3     --container  1200px
     --ink-500    #574E51      --sand-200   #F4EEE7
     --muted      #6E6569      --bronze-400 #C9A96E
     --ease       cubic-bezier(.22, .61, .36, 1)
   ========================================================================== */


/* ==========================================================================
   1. UTILITY BAR (.topbar)
   --------------------------------------------------------------------------
   Build: Container[topbar] > Container[container topbar__inner]
            > Icon List[topbar__note]  +  Icon List[topbar__links]

   main.css already styles .topbar and .topbar__inner — they are plain divs,
   so the classes work as-is on Elementor containers. Only the Icon List
   widget's internal markup needs bridging.
   ========================================================================== */

.topbar .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.topbar .elementor-icon-list-item,
.topbar .elementor-icon-list-item > a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .18s var(--ease);
}

.topbar .elementor-icon-list-item > a:hover { color: #fff; }

.topbar .elementor-icon-list-icon svg,
.topbar .elementor-icon-list-icon i {
  width: 1rem;
  height: 1rem;
  color: var(--bronze-400);
}

/* Student Login keeps the bronze tint in both states (main.css:328).

   NOTE: Elementor's Icon List has NO per-item CSS class field — repeater
   items only expose Text, Link and Icon. So target the link by its href
   instead. This survives reordering the items, unlike :nth-child.

   Portal URL: https://infocusfood.app.axcelerate.com (components.js:25) */
.topbar .elementor-icon-list-item > a[href*="axcelerate"],
.topbar .elementor-icon-list-item > a[href*="axcelerate"]:hover {
  color: var(--bronze-400);
}

.topbar .elementor-icon-list-item > a[href*="axcelerate"] svg,
.topbar .elementor-icon-list-item > a[href*="axcelerate"] i {
  color: var(--bronze-400);
}

/* If you instead split the topbar links into TWO Icon List widgets, put the
   class `topbar__login` on the second widget and this rule covers it. */
.topbar__login .elementor-icon-list-item > a,
.topbar__login .elementor-icon-list-item > a:hover { color: var(--bronze-400); }

/* .topbar__note already hides at <=860px via main.css:330.
   Do NOT also hide it with Advanced > Responsive — two systems will fight. */


/* ==========================================================================
   2. DESKTOP NAV (WordPress Menu widget, >= 1201px)
   --------------------------------------------------------------------------
   Reproduces .nav__list / .nav__link / .nav__panel — main.css:368-437.
   ========================================================================== */

/* --- the <ul> = .nav__list --------------------------------------------- */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;

  /* ISSUE 1 — Elementor sets flex-wrap:wrap here; .nav__list in main.css
     does not, so it defaults to nowrap. Measured at 1440px: the items need
     728.1px and the flex slot gives 718.2px, so "Contact" wrapped onto a
     second row. Matching the original prevents the wrap; the JS fallback in
     infocus-elementor.js then switches to the hamburger if it truly cannot
     fit at some narrower width. */
  flex-wrap: nowrap;
}

/* ISSUE 1 (cont.) — overflow fallback.
   infocus-elementor.js adds .nav-collapsed to the header when the menu no
   longer fits, which swaps the desktop nav + CTA for the hamburger at ANY
   width, not just below the 1200px breakpoint.

   REQUIRES: add the CSS class `nav-desktop` to the desktop WordPress Menu
   widget (Advanced > CSS Classes). */
.e-con.header.nav-collapsed .nav-desktop,
.e-con.header.nav-collapsed .header__cta {
  display: none !important;
}

.e-con.header.nav-collapsed .nav-toggle-btn {
  display: flex !important;
}

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li {
  position: relative;
  margin: 0;
}

/* --- top-level links = .nav__link -------------------------------------- */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem .55rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  fill: currentColor;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

/* --- PIN THE PADDING IN EVERY STATE ------------------------------------
   THE HOVER-JUMP BUG.

   SmartMenus adds the class `.highlighted` to a top-level link on hover.
   That makes Elementor's own default item padding (13px 20px) win over the
   design-system value (.6rem .55rem = 9.6px 8.8px), so the link grows by
   22.4px mid-hover and shoves every item to its right along with it.

   Measured on the live site:
       rest          padding 9.6px 8.8px   ->  width 101.0
       .highlighted  padding 13px  20px    ->  width 123.4   (+22.4)

   Padding is not in the transition list either, so the jump is instant —
   which is why it reads as a glitch rather than an animation.

   Pinning the value across rest / hover / focus / highlighted / active
   fixes it. !important is needed because Elementor's rule outranks the
   plain selector once .highlighted is present. */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
  padding: .6rem .55rem !important;
}

/* HOVER: crimson text on sand-200 background */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main li:focus-within > .elementor-item {
  color: var(--crimson);
  background: var(--sand-200);
}

/* CURRENT PAGE + parent of the current section: crimson, weight 600, no bg */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .current-menu-ancestor > .elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu--main .current-menu-parent > .elementor-item {
  color: var(--crimson);
  font-weight: 600;
  background: transparent;
}

/* Kill Elementor's pointer effects (underline / framed / background bars).
   Also set Pointer = None in the widget; this is belt and braces. */
.elementor-widget-nav-menu .e--pointer-underline .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-underline .elementor-item:after,
.elementor-widget-nav-menu .e--pointer-double-line .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-double-line .elementor-item:after,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after,
.elementor-widget-nav-menu .e--pointer-background .elementor-item:before {
  display: none !important;
}

/* --- chevron = .nav__link .icon, rotates 180deg on hover ---------------- */
.elementor-widget-nav-menu .elementor-nav-menu--main .sub-arrow,
.elementor-widget-nav-menu .elementor-nav-menu--main .sub-arrow i,
.elementor-widget-nav-menu .elementor-nav-menu--main .sub-arrow svg {
  width: .85rem;
  height: .85rem;
  font-size: .85rem;
  margin: 0;
  padding: 0;
  transition: transform .2s var(--ease);
}

.elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > .elementor-item .sub-arrow,
.elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > .elementor-item .sub-arrow {
  transform: rotate(180deg);
}

/* --- dropdown panel = .nav__panel --------------------------------------
   !important is REQUIRED here, not laziness.

   Elementor's nav menu is driven by the SmartMenus jQuery library, which
   positions and sizes each submenu by writing INLINE styles when it opens
   (left, top, width, min-width, display). Inline styles beat any normal
   stylesheet rule, so without !important the panel snaps back to
   SmartMenus' own left-aligned, auto-width position the moment you hover.

   An author-stylesheet !important DOES beat a non-important inline style,
   which is why this works. Only the properties SmartMenus touches are
   marked; everything else is left normal. */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  position: absolute !important;
  top: calc(100% + .35rem) !important;
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
  width: max-content !important;
  min-width: 300px !important;
  max-width: min(420px, 92vw) !important;
  padding: .55rem;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown li {
  margin: 0;
}

/* --- DROPDOWN FADE-IN ---------------------------------------------------
   The original fades and rises over .2s (main.css:426) using opacity +
   visibility + transform. SmartMenus instead toggles display:none/block,
   and display is not animatable — so a transition can never fire, and the
   WordPress Menu widget has no animation option to fall back on.

   A CSS ANIMATION does work: animations restart every time an element goes
   from display:none to displayed. That reproduces the original timing with
   no JS at all.

   `translate` and `transform` are separate properties, so the -50% centring
   above is untouched by the translateY here — they compose. */
@keyframes infocus-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ISSUE 3 — .14s, not .2s.
   The perceived lag is mostly NOT this animation: SmartMenus waits
   showTimeout (250ms by default) before it even reveals the submenu, so the
   total was ~450ms. infocus-elementor.js drops that delay to 0; shortening
   the animation slightly finishes the job. */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  /* `backwards`, NOT `both`.
     With `both` the animation's end state (opacity: 1) persists and outranks
     the inline opacity jQuery writes while fading out — so the exit fade in
     infocus-elementor.js would never be visible. `backwards` applies only the
     start frame, then hands control back. */
  animation: infocus-dropdown-in .14s var(--ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown {
    animation: none;
  }
}

/* --- dropdown links = .nav__panel a ------------------------------------
   PIN THE PADDING, same reason as the top-level items above. SmartMenus adds
   .highlighted to a sub-item on hover, which lets Elementor's default padding
   win. Measured live:
       rest          padding 10px 14px  ->  height 40.5
       .highlighted  padding 13px 20px  ->  height 46.5   (+6px each)
   Three rows x 6px grew the whole panel by 18px mid-hover, which is why the
   dropdown appeared to swell when you moved onto it. */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item:focus,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item.elementor-item-active {
  padding: .625rem .875rem !important;
}

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item {
  display: block;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

/* HOVER: crimson on sand */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item:focus,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-sub-item.elementor-item-active {
  background: var(--sand);
  color: var(--crimson);
}


/* ==========================================================================
   3. MOBILE DRAWER (Off-Canvas widget, <= 1200px)
   --------------------------------------------------------------------------
   Reproduces the .nav drawer — main.css:469-517.
   Give the Off-Canvas widget the CSS class `nav-drawer`.

   Elementor's own controls handle width (400) / position (right) / slide
   animation. This fills in what those controls cannot express.
   ========================================================================== */

/* --- PANEL CHROME ------------------------------------------------------
   The Off-Canvas widget has NO Advanced tab (so no CSS Classes field) and
   NO padding control. It is a shell, not a container.

   THE FIX: put a CONTAINER inside the Off-Canvas and give it the class
   `nav-drawer__inner`. A Container has both Layout and Advanced tabs, which
   restores the padding control AND gives back the CSS hook this widget
   lacks. Menu and CTA go inside that container, not loose in the shell.

       Off-Canvas                          [no Advanced, no padding]
         └ Container [nav-drawer__inner]   <- hook + padding live here
             ├ WordPress Menu (vertical)
             └ Button [btn--primary]

   Set on the Off-Canvas STYLE tab (the one sanctioned exception to Rule 0,
   because there is genuinely no other hook):

     Background            #FFFFFF
     Border  > Left        1px solid #E7E0DA
     Box Shadow            0 24px 56px rgba(27, 20, 22, .12)
     Overlay / Backdrop    rgba(27, 20, 22, .45)

   Padding comes from the rule below — nothing to type.
   (Values from main.css:474-486 — .nav at <=1200px.) */

.nav-drawer__inner {
  padding: 1.25rem var(--gutter) 3rem;   /* 20px / 20-40px fluid / 48px */
  width: 100%;
  max-width: none;
}

/* --- DRAWER WIDTH ON SMALL SCREENS -------------------------------------
   The original is `width: min(400px, 88vw)` (main.css:477). Elementor's
   Off-Canvas width control emits a single fixed value:

       --e-off-canvas-width: 400px;

   On a 375px phone that is wider than the viewport, so the panel covers the
   entire screen — including the overlay, leaving nothing to tap to dismiss
   it. Combined with the Close Button being off by default, the drawer
   becomes a trap with no way out.

   Overriding the custom property reproduces the min() behaviour. !important
   is needed because Elementor emits the variable at
   `.elementor-115 .elementor-element.elementor-element-xxxxxxx` (0,3,0).

   ALSO REQUIRED, in the widget's Content > Settings > Interactions.
   NOTE these are INVERTED toggles — "Prevent Closing on ..." — and both
   default to Yes, which is what makes the drawer inescapable:

     Prevent Closing on Overlay      -> No    (tap backdrop to close)
     Prevent Closing on ESC Overlay  -> No    (ESC to close)
     Disable Page Scrolling          -> Yes   (scroll-lock behind drawer)
     Animation Duration              -> 320   (ms, matches main.css:486)  */
@media (max-width: 860px) {
  .elementor-widget-off-canvas {
    --e-off-canvas-width: 88vw !important;
  }
}

/* --- KEEP THE HEADER VISIBLE ABOVE THE DRAWER --------------------------
   In the original, the drawer opens BELOW the header and the header stays
   fully visible and usable:

       .nav-backdrop  z-index: 99      (main.css:520)
       .header        z-index: 100     (main.css:340)
       .nav           inset: var(--drawer-top) 0 0 auto   -- top = header bottom

   Elementor instead gives .e-off-canvas `z-index: 2147483630` (near max int)
   and `inset: 0`, so both the panel and its overlay paint over the header.
   You cannot out-stack that number sensibly — so lower it instead, which is
   what the original does anyway.

   Measured live: topbar 40px + header 77px = 117px unscrolled; once the
   topbar scrolls away the header bottom is 77px. That is why the offset is
   a variable, set by assets/js/infocus-elementor.js on scroll and on open,
   mirroring syncDrawerTop() in main.js:21. The fallback covers no-JS. */

/* The Off-Canvas widget lives INSIDE the header container:

       .e-con.header            z-index 100, sticky -> stacking context
         .e-con-inner
           .header__inner
             .elementor-widget-off-canvas
               .e-off-canvas    z-index 90

   A descendant can never paint below its own ancestor, so lowering z-index
   does nothing — the overlay still covers the logo and hamburger, which is
   why the header looked dimmed.

   Fix: start the whole dialog at the header's bottom edge instead. The
   header is then never covered, stays crisp, and the hamburger remains
   clickable (so it can close the drawer). Visually identical to the
   original, where .nav is inset from --drawer-top and .nav-backdrop simply
   sits under the header in z-order. */
.e-off-canvas {
  z-index: 90 !important;
  top: var(--infocus-drawer-top, 117px) !important;
}

.elementor-widget-off-canvas .e-off-canvas__main {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;

  /* ISSUE 4 — the white sheet behind the drawer.
     Measured live: __main had background #FFFFFF and spans the FULL viewport
     width (1440px), so it painted white over everything and hid the .45
     overlay entirely. The Style-tab background landed here rather than on
     __content. __main is only a positioning wrapper — keep it bare.

     Border and shadow must go too: __main is full-viewport width, so a left
     border on it draws a pale line down the LEFT EDGE OF THE SCREEN that
     rides in with the slide animation and then parks there. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The actual panel. Now that the real class names are confirmed, drive the
   chrome from CSS rather than the Style tab.
   ALSO DO THIS in Elementor: Off-Canvas > Style > clear Background, Border
   and Box Shadow — leaving them set re-applies white to __main. */
.elementor-widget-off-canvas .e-off-canvas__content {
  background: var(--paper) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* The panel fills the box we just defined, rather than a hard 100vh. */
.elementor-widget-off-canvas {
  --e-off-canvas-height: 100% !important;
}

/* The overlay stays full-screen (inset: 0), exactly as .nav-backdrop does.
   The header simply paints on top of it, so it is never dimmed. */


/* Style the close button to match .nav-toggle (main.css:451) */
.elementor-widget-off-canvas .e-off-canvas__close-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}

.elementor-widget-off-canvas .e-off-canvas__close-button:hover {
  background: var(--sand-200);
  color: var(--crimson);
}

/* (The speculative fallback that used to live here targeted .e-off-canvas__main
   and gave it a white background, a left border and a shadow. __main spans the
   FULL viewport, so that border rendered as a pale line down the left edge of
   the screen and the shadow leaked with it. Deleted — the real class names are
   confirmed now and handled above.) */

/* Vertical menu inside the drawer */
.elementor-widget-off-canvas .elementor-nav-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.elementor-widget-off-canvas .elementor-nav-menu > li {
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}

.elementor-widget-off-canvas .elementor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;                /* tap target */
  padding: .95rem .25rem;
  border-radius: 0;
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Kill Elementor's dark "highlighted" state.
   custom-pro-widget-nav-menu.min.css ships:
       .elementor-nav-menu--dropdown .elementor-item.highlighted {
         background-color: #3F444B; color: #fff }
   SmartMenus adds .highlighted to a parent whenever its submenu is open, so
   every expanded row turned dark grey. The original keeps the row
   transparent and only rotates the chevron (main.css:498, 508). */
.elementor-widget-off-canvas .elementor-item:hover,
.elementor-widget-off-canvas .elementor-item.highlighted,
.elementor-widget-off-canvas .elementor-item.elementor-item-active,
nav.elementor-nav-menu--dropdown .elementor-item.highlighted {
  background: transparent !important;
  color: var(--crimson) !important;
}

.elementor-widget-off-canvas .elementor-item.elementor-item-active {
  font-weight: 600;
}

/* Chevron rotates when the row is expanded — .nav__item.is-open (main.css:508) */
.elementor-widget-off-canvas .sub-arrow,
nav.elementor-nav-menu--dropdown .sub-arrow {
  transition: transform .2s var(--ease);
}

.elementor-widget-off-canvas .elementor-item.highlighted .sub-arrow,
nav.elementor-nav-menu--dropdown .elementor-item.highlighted .sub-arrow {
  transform: rotate(180deg);
}

/* Parent rows toggle instead of navigating (see infocus-elementor.js), so
   they should not look like destinations. */
.elementor-widget-off-canvas .elementor-item.has-submenu {
  cursor: pointer;
}

/* Submenu becomes a static accordion, not a floating panel */
.elementor-widget-off-canvas .elementor-nav-menu--dropdown {
  position: static;
  translate: none;
  transform: none;
  min-width: 0;
  padding: 0 0 .75rem .25rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* ISSUE 5 — drawer sub-items rendered at 11.05px / weight 400 because
   Elementor's dropdown-layout rules outrank the plain selector. The original
   (.nav__panel a, main.css:432) is .95rem / weight 500 / --ink-700.
   Pinned with !important; padding and border already matched. */
.elementor-widget-off-canvas .elementor-sub-item,
nav.elementor-nav-menu--dropdown .elementor-sub-item {
  display: block;
  padding: .55rem .75rem !important;
  border-left: 2px solid var(--line);
  border-radius: 0;
  color: var(--ink-700) !important;
  font-family: var(--font-sans) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.elementor-widget-off-canvas .elementor-sub-item:hover {
  color: var(--crimson);
  background: var(--sand);
}

/* Drawer CTA = .nav__mobile-cta — full width, 1.5rem above */
.elementor-widget-off-canvas .elementor-widget-button { margin-top: 1.5rem; }
.elementor-widget-off-canvas .elementor-widget-button .elementor-button { width: 100%; }

/* Backdrop = .nav-backdrop */
.elementor-widget-off-canvas .elementor-off-canvas__overlay {
  background: rgba(27, 20, 22, .45);
  z-index: 99;
}


/* ==========================================================================
   3b. ROUTE B — WordPress Menu's BUILT-IN mobile toggle + panel
   --------------------------------------------------------------------------
   Use this instead of sections 3 and 4 if you do NOT have the Off-Canvas
   widget, or you prefer one widget over three.

   The WordPress Menu widget renders its own hamburger (.elementor-menu-toggle)
   and its own mobile panel (nav.elementor-nav-menu--dropdown) once its
   Breakpoint setting is anything other than None.

   Fidelity note: the panel drops DOWN below the header, full width, rather
   than sliding in from the right. That is the one accepted difference.
   ========================================================================== */

/* --- the hamburger = .nav-toggle (main.css:451) ------------------------- */
.elementor-widget-nav-menu .elementor-menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}

.elementor-widget-nav-menu .elementor-menu-toggle:hover,
.elementor-widget-nav-menu .elementor-menu-toggle:focus {
  background: var(--sand-200);
  color: var(--crimson);
}

.elementor-widget-nav-menu .elementor-menu-toggle svg,
.elementor-widget-nav-menu .elementor-menu-toggle i {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1.35rem;
  fill: currentColor;
}

/* --- the mobile panel ---------------------------------------------------
   Scoped to nav.elementor-nav-menu--dropdown: the mobile container is a
   <nav>, while desktop submenus are <ul class="sub-menu ...">. That one
   selector cleanly separates the two. */
nav.elementor-nav-menu--dropdown {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  padding: .5rem var(--gutter) 1.5rem;
}

nav.elementor-nav-menu--dropdown .elementor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;                /* tap target */
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
}

nav.elementor-nav-menu--dropdown .elementor-item:hover,
nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background: transparent;
  color: var(--crimson);
}

nav.elementor-nav-menu--dropdown .elementor-sub-item {
  display: block;
  padding: .55rem .75rem;
  border-left: 2px solid var(--line);
  border-radius: 0;
  color: var(--ink-700);
  font-size: .95rem;
}

nav.elementor-nav-menu--dropdown .elementor-sub-item:hover {
  color: var(--crimson);
  background: var(--sand);
}


/* ==========================================================================
   4. HAMBURGER TOGGLE — Route A only (separate trigger widget, <= 1200px)
   --------------------------------------------------------------------------
   Reproduces .nav-toggle — main.css:451-465.
   Give the trigger widget the CSS class `nav-toggle-btn`.
   44x44, 1px line border, 6px radius, white background.
   ========================================================================== */

.nav-toggle-btn .elementor-button,
.nav-toggle-btn .elementor-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}

.nav-toggle-btn .elementor-button:hover,
.nav-toggle-btn .elementor-icon:hover {
  background: var(--sand-200);
  color: var(--crimson);
  border-color: var(--line);
  transform: none;                 /* cancel the .btn lift from the bridge */
  box-shadow: none;
}

/* --- HAMBURGER -> X, ANIMATED ------------------------------------------
   Elementor toggles aria-expanded on the trigger anchor, so this needs no
   JavaScript at all — the attribute IS the state hook.

   An SVG can't morph into an X with CSS, so the icon is hidden and three
   bars are drawn instead: .elementor-button-icon is the middle bar, its
   ::before and ::after are the top and bottom. On open the middle fades out
   and the outer two rotate into a cross.

   Mirrors .nav-toggle__open / .nav-toggle__close (main.css:462), which swap
   on [aria-expanded="true"] — same hook, animated. */

.nav-toggle-btn .elementor-button-icon svg,
.nav-toggle-btn .elementor-button-icon i {
  display: none !important;
}

.nav-toggle-btn .elementor-button-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color .18s var(--ease);
}

.nav-toggle-btn .elementor-button-icon::before,
.nav-toggle-btn .elementor-button-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: top .25s var(--ease), transform .25s var(--ease);
}

.nav-toggle-btn .elementor-button-icon::before { top: -6px; }
.nav-toggle-btn .elementor-button-icon::after  { top:  6px; }

/* Open state */
.nav-toggle-btn .elementor-button[aria-expanded="true"] .elementor-button-icon {
  background: transparent;
}
.nav-toggle-btn .elementor-button[aria-expanded="true"] .elementor-button-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle-btn .elementor-button[aria-expanded="true"] .elementor-button-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-btn .elementor-button-icon,
  .nav-toggle-btn .elementor-button-icon::before,
  .nav-toggle-btn .elementor-button-icon::after {
    transition: none;
  }
}


/* ==========================================================================
   5. HEADER SHELL + STICKY
   --------------------------------------------------------------------------
   Give the sticky header container the CSS class `header`, and the attribute
   data-header|true under Advanced > Attributes, so main.js adds .is-stuck on
   scroll (initHeader, main.js:82).
   ========================================================================== */

/* Elementor's sticky adds .elementor-sticky--effects. Map it to the same
   result as .is-stuck so the shadow works with or without the JS. */
.e-con.header.elementor-sticky--effects,
.e-con.header.is-stuck {
  box-shadow: 0 4px 24px rgba(27, 20, 22, .08);
  border-bottom-color: transparent;
}

/* Frosted glass ONLY at desktop.
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, which collapses the drawer. See main.css:345.
   If your drawer opens as a small box glued to the header, this is why. */
@media (max-width: 1200px) {
  .e-con.header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}