/* ─── mega menu, taken from the design file with a CSS parser ─── */
.pc-nav .nav{display:flex;align-items:center;gap:clamp(9px,1.4vw,19px);flex:1}
.pc-nav .nav>a,.pc-nav .nav__item>button{display:inline-flex;align-items:center;gap:5px;padding:9px 2px;font-size:var(--pc-fs-base);font-weight:500;color:var(--pc-ink);position:relative}
.pc-nav .nav>a::after,.pc-nav .nav__item>button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--pc-sprout);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1);border-radius:2px}
.pc-nav .nav>a:hover::after,.pc-nav .nav__item:hover>button::after,.pc-nav .nav>a.on::after{transform:scaleX(1)}
.pc-nav .nav__item{position:relative}
.pc-nav .mega{position:absolute;top:calc(100% + 12px);left:-18px;width:640px;background:var(--pc-white);border:1px solid var(--pc-line);border-radius:18px;box-shadow:0 24px 60px -24px rgba(22,53,31,.30);padding:22px;display:none;grid-template-columns:1fr 1fr;gap:6px 22px}
.pc-nav .nav__item:hover .mega,.pc-nav .nav__item:focus-within .mega{display:grid}
.pc-nav .mega a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px}
/* the design paints a pale box behind the whole row here; it reads as a
   selected state rather than a hover, so the name turns instead */
.pc-nav .mega a:hover{background:transparent}
.pc-nav .mega a:hover,.pc-nav .mega a:focus,.pc-nav .mega a:active,
.pc-nav .nav__item .mega a:hover,.pc-nav .nav__item .mega a:focus{
  background:none;background-color:transparent;box-shadow:none}
.pc-nav .mega__ic{width:40px;height:40px;border-radius:9px;background:var(--pc-glass-2);display:grid;place-items:center;flex:none;font-size:var(--pc-fs-lg)}
.pc-nav .mega b{display:block;font-size:var(--pc-fs-base);font-weight:600}
.pc-nav .mega em{font-style:normal;font-size:var(--pc-fs-sm);color:var(--pc-ink-60)}
.pc-nav .drawer{position:fixed;inset:0;z-index:90;display:none}
.pc-nav .drawer.on{display:block}
.pc-nav .drawer__bg{position:absolute;inset:0;background:rgba(10,25,14,.5)}
.pc-nav .drawer__p{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--pc-white);padding:22px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.pc-nav .drawer__p a{padding:13px 6px;border-bottom:1px solid var(--pc-line-2);font-weight:500}
.pc-nav .drawer__x{align-self:flex-end;width:40px;height:40px;border-radius:100px;background:var(--pc-glass-2);display:grid;place-items:center;margin-bottom:8px}

/* The breakpoint that swaps the menu for a burger is printed by
   Plantcraft_Responsive so it follows Elementor's own, not a number guessed
   here. See class-responsive.php. */

/* the burger and the flattened panel, which the design draws in its own markup */
.pc-nav{position:relative;display:flex;align-items:center}
/* the button needs resetting, but font and colour come from the design rule
   above; inherit here would hand them back to the theme */
.pc-nav .nav__item>button{background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--pc-fs-base);font-weight:500;gap:5px}
.pc-nav__chev{transition:transform .18s;flex:none}
.pc-nav .nav__item:hover .pc-nav__chev,
.pc-nav .nav__item.is-open .pc-nav__chev{transform:rotate(180deg)}
.pc-nav__burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  border-radius:100px;color:var(--pc-ink);place-items:center}
.pc-nav__burger:hover{background:var(--pc-glass-2)}
.pc-nav .drawer__sub{display:grid;padding-left:14px;border-left:2px solid var(--pc-line-2);margin:2px 0 10px}
.pc-nav .drawer__h{display:block;font-size:var(--pc-fs-xs);text-transform:uppercase;
  letter-spacing:var(--pc-ls-wide);color:var(--pc-ink-40);margin:16px 0 4px}
.pc-nav .drawer[hidden]{display:none}
.pc-locked{overflow:hidden}

/* a dropdown opened by the button, for keyboards and touch screens where
   there is no hover to rely on */
.pc-nav .nav__item.is-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}

.pc-nav .drawer.is-open{display:block}

/* editor-only notes; they never reach the front end */
.pc-nav__hint{font-size:13px;line-height:1.5;color:#8A968D;border:1px dashed #D6DECB;
  border-radius:8px;padding:10px 12px;background:#F8FAF5}
.pc-nav__hint a{color:var(--pc-leaf);text-decoration:underline}

/* The design lets these inherit the page colour. In WordPress that means
   inheriting the theme's link colour, which is why the names came out maroon.
   State them, at a specificity that clears Elementor's kit. */
.pc-nav .nav>a,.pc-nav .nav__item>button{color:var(--pc-ink)}
.pc-nav .nav>a:hover,.pc-nav .nav__item>button:hover{color:var(--pc-leaf)}
.pc-nav .mega a,.pc-nav .mega a:hover,.pc-nav .mega a:focus{text-decoration:none}
.pc-nav .mega a b{color:var(--pc-ink);transition:color .16s}
.pc-nav .mega a:hover b,.pc-nav .mega a:focus-visible b{color:var(--pc-leaf)}
.pc-nav .mega a em{color:var(--pc-ink-60)}
.pc-nav .mega__ic{color:var(--pc-leaf)}
.pc-nav .mega__ic svg{width:18px;height:18px}

/* ── the gap between the button and the panel ──
   The panel sits 12px below the button. Crossing that gap takes the pointer
   off .nav__item, :hover ends and the panel vanishes mid-reach. A transparent
   strip over the gap keeps the pointer inside the item the whole way down. */
.pc-nav .mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}

/* and a little tolerance either side, so a diagonal move does not clip a corner */
.pc-nav .nav__item{padding-bottom:2px}