/* =====================================================================
   editor-modal.css
   - Admin "New Page" modal used from the nav
   - Backdrop + layering guard so it sits above the nav
====================================================================== */

/* Ensure any [hidden] elements inside the modal are truly hidden,
   without impacting nav dropdown overrides that also use [hidden]. */
.nav-modal [hidden] { display: none !important; }

/* Backdrop toggled via body.modal-open */
body.modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1999;
}

/* Modal container */
.nav-modal[hidden] { display: none !important; }
.nav-modal[data-modal],
.nav-modal[data-modal-top],
.nav-modal[data-modal-top-rename],
.nav-modal[data-modal-dir-rename] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;                 /* above nav/dropdowns */
  width: min(640px, 92vw);
  background: var(--site-bg, #0d2035);
  color: var(--site-text, #eaf1ff);
  border: 1px solid #204268;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,.45);
}

/* Modal structure */
.new-page-form,
.new-top-menu-form,
.rename-top-menu-form,
.rename-directory-form { display: flex; flex-direction: column; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #204268;
}
.modal-title { margin:0; font-size:18px; }
.modal-close { background:transparent; border:0; color:inherit; font-size:20px; cursor:pointer; }
.modal-body {
  padding:14px 16px; display:grid; grid-template-columns: 1fr; gap: 12px;
}
.modal-body .field { display:flex; flex-direction:column; gap:6px; }
.modal-body .field:nth-child(1) { grid-column: 1 / -1; }
.modal-body label { font-weight:600; }
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body select {
  background:#0b1a2a; color:#eaf1ff; border:1px solid #204268; border-radius:8px; padding:8px 10px;
}
.modal-body input[type="checkbox"] { width:18px; height:18px; }

/* Actions */
.modal-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-top: 1px solid #204268;
}
.modal-actions .actions-right { display: inline-flex; gap: 8px; }
.modal-actions .btn-primary   { background:#2fa46f; border:1px solid #1d6f4b; color:#062018; padding:8px 14px; border-radius:8px; }
.modal-actions .btn-secondary { background:#0b1a2a; border:1px solid #204268; color:#eaf1ff; padding:8px 14px; border-radius:8px; }

@media (max-width: 560px) {
  .modal-actions { flex-wrap: wrap; gap: 10px; }
  .modal-actions .actions-right { width: 100%; justify-content: flex-end; }
}

/* Layering guard so dropdown stays beneath modal */
.primary-nav .nav-menu { position: relative; z-index: 1000; }

/* Make "+ Add Page" look like other submenu links */
.nav-subitem--add .nav-sublink.nav-add {
  display:block; padding:.5rem .75rem; text-decoration:none;
  color: var(--nav-text, #ffffff); border-radius:6px;
}
.nav-subitem--add .nav-sublink.nav-add:hover,
.nav-subitem--add .nav-sublink.nav-add:focus {
  background: var(--nav-hover, rgba(255,255,255,0.08));
  outline:0;
}