/* Layering: page overlay < header < menu */
:root { --cnh-z-overlay: 9997; --cnh-z-header: 9999; --cnh-z-menu: 10001; }

.cnh {
  position: fixed; top: 12px; left: 12px;
  z-index: var(--cnh-z-menu);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Trigger */
.cnh-trigger {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; background:#fff; color:#273E74;
  border:1px solid rgba(0,0,0,.08); border-radius:10px;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.cnh-trigger:focus { outline:2px solid #273E74; outline-offset:2px; }
.cnh-text { font-weight:600; }

/* PAGE LOCK OVERLAY (blocks site except header/menu) */
.cnh-page-overlay{
  position:fixed; inset:0; width:100vw; height:100vh;
  background: rgba(255,255,255,0);           /* transparent by default */
  z-index: var(--cnh-z-overlay);
  opacity:0; pointer-events:none; transition: opacity .15s ease;
}
/* show and enable click-catch when menu open */
body.cnh-open .cnh-page-overlay{ opacity:1; pointer-events:auto; }

/* Try to keep common headers above overlay */
body.cnh-open header,
body.cnh-open .site-header,
body.cnh-open .elementor-location-header,
body.cnh-open #header,
body.cnh-open .ast-primary-header,
body.cnh-open .generatepress-header {
  position:relative; z-index: var(--cnh-z-header);
}

/* MENU OVERLAY (visual blur behind dropdown area) */
/* Overlay = transparent alignment container (no blur, no click capture) */
.cnh-overlay{
  position:fixed; inset:0;
  display:flex; align-items:flex-start; justify-content:center;
  padding:72px 16px 32px;
  background: transparent;        /* no background → panel blur shows the page */
  opacity:0; pointer-events:none; transition: opacity 1s ease;
  z-index: 10001;
}
.cnh-overlay.is-open{ opacity:1; pointer-events:auto; }

/* Panel gets the blur */
.cnh-panel{
  width:min(980px,92vw);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-clip: padding-box;              /* cleaner edges on Safari */
  border:1px solid rgba(255,255,255,.4);
  border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
  padding:0; overflow:hidden;
  max-height:0;                               /* animate height */
  transition:max-height 1s ease;
  will-change: backdrop-filter, max-height;    /* iOS rendering hint */
}
.cnh-panel > .cnh-contents{ padding:20px; display:grid; gap:8px; }

/* Links */
.cnh-item{ display:block; padding:12px 14px; text-decoration:none; color:#1a1a1a; border-radius:10px; }
.cnh-item:hover, .cnh-item:focus{ background:#eef3ff; color:#0f2b6a; }

/* Close button */
.cnh-close{
  position:absolute; top:16px; right:16px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; width:36px; height:36px;
  font-size:24px; line-height:32px; cursor:pointer; color:#273E74;
}

/* Reduce motion */
@media (prefers-reduced-motion:no-preference){
  .cnh-overlay{ transition: opacity 1s ease; }
}