/* ============================================================
   Millennium Fence and Deck — mobile navigation drawer
   Scoped with the mfdnav- prefix. Desktop nav is untouched.
   ============================================================ */

.mfdnav{position:fixed;inset:0;z-index:100000;display:none}
.mfdnav[data-open="true"]{display:block}
@media (min-width:1025px){ .mfdnav{display:none !important} }

.mfdnav__scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);border:0}

.mfdnav__panel{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:#121212;color:#fff;
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.4;
}
.mfdnav__panel *,.mfdnav__panel *::before,.mfdnav__panel *::after{box-sizing:border-box}

/* ---------- zone 1: fixed top ---------- */
.mfdnav__top{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.13);background:#121212;
}
.mfdnav__search{flex:1 1 auto;position:relative;display:block}
.mfdnav__search input{
  width:100%;min-height:48px;padding:12px 14px 12px 42px;
  font:inherit;font-size:16px;color:#fff;                /* 16px stops iOS zoom-on-focus */
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;
  -webkit-appearance:none;appearance:none;
}
.mfdnav__search input::placeholder{color:rgba(255,255,255,.5)}
.mfdnav__search input:focus{outline:none;border-color:var(--e-global-color-primary,#BB9362);
  box-shadow:0 0 0 3px rgba(187,147,98,.32)}
.mfdnav__search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:rgba(255,255,255,.5);pointer-events:none}
.mfdnav__close{
  flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
.mfdnav__close:hover{background:rgba(255,255,255,.07)}

/* ---------- zone 2: scrolling middle ---------- */
.mfdnav__mid{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:8px;
}

/* group header (home state) — a span, never a heading */
.mfdnav__group{
  display:block;padding:20px 18px 8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--e-global-color-primary,#BB9362);
}
/* collapsible section header (panel state) — sticks while its group is open */
.mfdnav__sticky{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:2;width:100%;
  min-height:48px;padding:14px 18px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-align:left;
  color:var(--e-global-color-primary,#BB9362) !important;
  background:#121212;border:0;border-bottom:1px solid rgba(255,255,255,.09);
  cursor:pointer;
}
.mfdnav__sticky:hover{background:#181818}
.mfdnav__sticky svg{
  flex:0 0 auto;width:13px;height:13px;fill:currentColor;
  transform:rotate(0deg);transition:transform .15s ease;
}
.mfdnav__sticky[aria-expanded="true"] svg{transform:rotate(90deg)}

.mfdnav__list{list-style:none;margin:0;padding:0}

.mfdnav__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:48px;padding:13px 18px;
  text-decoration:none;text-align:left;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.07);
  font:inherit;font-size:16px;cursor:pointer;
}
/* the theme colours every <a> gold; these win it back inside the drawer only */
.mfdnav a.mfdnav__row,
.mfdnav button.mfdnav__row{color:#fff !important;text-decoration:none !important}
.mfdnav__row:hover{background:rgba(255,255,255,.05)}
.mfdnav a.mfdnav__row[aria-current="page"]{color:var(--e-global-color-primary,#BB9362) !important}
.mfdnav__row svg{flex:0 0 auto;width:16px;height:16px;fill:rgba(255,255,255,.45)}

/* muted right-aligned section tag on search results */
.mfdnav__tag{
  flex:0 0 auto;font-size:.72rem;letter-spacing:.04em;
  color:rgba(255,255,255,.42);white-space:nowrap;
}

/* back row */
.mfdnav__back{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:13px 18px;
  background:rgba(255,255,255,.04);border:0;border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-align:left;
}
.mfdnav__back svg{width:16px;height:16px;fill:currentColor;transform:rotate(180deg)}
.mfdnav__back:hover{background:rgba(255,255,255,.08)}

/* small muted legal links */
.mfdnav__legal{list-style:none;margin:0;padding:18px 18px 26px;display:flex;flex-wrap:wrap;gap:6px 18px}
.mfdnav .mfdnav__legal a{color:rgba(255,255,255,.5) !important;font-size:.85rem;
  text-decoration:none !important;padding:6px 0}
.mfdnav .mfdnav__legal a:hover{color:rgba(255,255,255,.8) !important;text-decoration:underline !important}

.mfdnav__empty{padding:34px 20px;color:rgba(255,255,255,.6);font-size:.95rem;text-align:center}

/* ---------- zone 3: fixed bottom ---------- */
.mfdnav__bot{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1.35fr;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.13);background:#121212;
}
.mfdnav__cta{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:14px 12px;
  border-radius:8px;text-decoration:none;text-align:center;
  font-family:"Archivo","Public Sans",system-ui,sans-serif;font-weight:800;font-size:1rem;
}
.mfdnav a.mfdnav__cta--call{background:transparent;color:#fff !important;
  border:1.5px solid rgba(255,255,255,.35);text-decoration:none !important}
.mfdnav a.mfdnav__cta--call:hover{background:rgba(255,255,255,.08)}
.mfdnav a.mfdnav__cta--quote{background:#E2B172;color:#000 !important;
  box-shadow:0 3px 0 #93744d;text-decoration:none !important}

/* ---------- views ---------- */
.mfdnav__view[hidden]{display:none}


/* ------------------------------------------------------------------
   The theme paints EVERY <button> pink (rgb(204,51,102)) on :hover and
   :focus. Inside the drawer that turned a tapped group header solid pink
   and kept it that way while focused. Neutralise it, then restate our own
   hover/focus tints.
   ------------------------------------------------------------------ */
.mfdnav button:hover,
.mfdnav button:focus,
.mfdnav button:focus-visible,
.mfdnav button:active{background-color:transparent;color:inherit}

.mfdnav .mfdnav__scrim,
.mfdnav .mfdnav__scrim:hover,
.mfdnav .mfdnav__scrim:focus{background:rgba(0,0,0,.62) !important}

.mfdnav .mfdnav__sticky:hover,
.mfdnav .mfdnav__sticky:focus{background:#181818 !important;
  color:var(--e-global-color-primary,#BB9362) !important}

.mfdnav .mfdnav__row:hover,
.mfdnav .mfdnav__row:focus{background:rgba(255,255,255,.05) !important}

.mfdnav .mfdnav__back:hover,
.mfdnav .mfdnav__back:focus{background:rgba(255,255,255,.08) !important;color:#fff !important}

.mfdnav .mfdnav__close:hover,
.mfdnav .mfdnav__close:focus{background:rgba(255,255,255,.07) !important;color:#fff !important}

/* ---------- focus visibility ---------- */
.mfdnav :focus-visible{outline:3px solid var(--e-global-color-primary,#BB9362);outline-offset:-3px;border-radius:4px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .mfdnav[data-open="true"] .mfdnav__panel{animation:mfdnav-in .18s ease-out}
  .mfdnav[data-open="true"] .mfdnav__view:not([hidden]) .mfdnav__row{
    animation:mfdnav-row .18s ease-out backwards;
  }
  .mfdnav__view:not([hidden]) li:nth-child(1) .mfdnav__row{animation-delay:.01s}
  .mfdnav__view:not([hidden]) li:nth-child(2) .mfdnav__row{animation-delay:.02s}
  .mfdnav__view:not([hidden]) li:nth-child(3) .mfdnav__row{animation-delay:.03s}
  .mfdnav__view:not([hidden]) li:nth-child(4) .mfdnav__row{animation-delay:.04s}
  .mfdnav__view:not([hidden]) li:nth-child(5) .mfdnav__row{animation-delay:.05s}
}
@keyframes mfdnav-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes mfdnav-row{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .mfdnav *,.mfdnav *::before,.mfdnav *::after{animation:none !important;transition:none !important}
}

/* body scroll lock while open */
body.mfdnav-open{overflow:hidden !important;touch-action:none}

/* screen-reader-only text */
.mfdnav__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------
   Keep the hamburger pinned to the left edge in every below-desktop
   state, including Elementor's sticky/scrolled header. Scoped to
   max-width:1024px so the desktop navigation is untouched.
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  .elementor-element-13b191b .elementor-element-ca9648c,
  .elementor-element-13b191b .elementor-element-b428b20,
  .elementor-element-13b191b .elementor-element-89f5aa0,
  .elementor-sticky--active .elementor-element-ca9648c,
  .elementor-sticky--active .elementor-element-b428b20,
  .elementor-sticky--active .elementor-element-89f5aa0{
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:left !important;
    margin-left:0 !important;
  }
  .elementor-element-89f5aa0 .elementor-menu-toggle{
    margin-left:0 !important;
    margin-right:auto !important;
  }
}