/* ==========================================================================
   Edit mode. Only ever loads when the site is opened from your own computer,
   so nothing here is visible to visitors on the live site.
   ========================================================================== */

/* Sits bottom-right rather than centred, so it covers as little of the page
   as possible while you are reading. */
.nm-bar {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem;
  background: #0A2342;
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(10,35,66,.35);
  font-family: 'Poppins', system-ui, sans-serif;
}

.nm-bar button {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background .15s ease, color .15s ease;
}
.nm-bar button:hover { background: rgba(255,255,255,.24); }
.nm-bar button:disabled { opacity: .35; cursor: not-allowed; }
.nm-bar button svg { width: 16px; height: 16px; }

.nm-bar .nm-go     { background: #74A9DE; color: #0A2342; }
.nm-bar .nm-go:hover { background: #fff; }
.nm-bar .nm-save   { background: #2E7C88; color: #fff; }
.nm-bar .nm-save:hover { background: #3E9AA8; }
.nm-bar .nm-sep { width: 1px; height: 26px; background: rgba(255,255,255,.2); margin: 0 .2rem; }

.nm-bar .nm-status {
  color: #CEE2F4;
  font-size: .8rem;
  padding: 0 .7rem 0 .3rem;
  white-space: nowrap;
}

/* Collapsed state: just the pencil */
.nm-bar.is-idle .nm-editing-only { display: none; }

/* ------------------------------------------------------- editing state -- */

body.nm-on [data-nm] {
  outline: 1.5px dashed rgba(42,91,154,.4);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-color .15s ease, background .15s ease;
}
body.nm-on [data-nm]:hover { outline-color: rgba(42,91,154,.9); }
body.nm-on [data-nm]:focus {
  outline: 2px solid #2A5B9A;
  background: rgba(116,169,222,.1);
}

/* Elements sitting on the dark hero and footer need a light outline */
body.nm-on .hero [data-nm],
body.nm-on .band [data-nm],
body.nm-on .footer [data-nm],
body.nm-on .card--dark [data-nm] { outline-color: rgba(255,255,255,.45); }
body.nm-on .hero [data-nm]:hover,
body.nm-on .band [data-nm]:hover,
body.nm-on .footer [data-nm]:hover,
body.nm-on .card--dark [data-nm]:hover { outline-color: rgba(255,255,255,.9); }

body.nm-on svg { pointer-events: none; }
body.nm-on a { cursor: text; }
body.nm-on .photo-slot,
body.nm-on .nm-figure { cursor: pointer; }

/* Photo placeholders invite a click while editing */
body.nm-on .photo-slot {
  border-color: #2A5B9A;
  border-style: solid;
  background: linear-gradient(135deg, #EAF1FA, #D8E4F3);
}
body.nm-on .photo-slot:hover { background: #D8E4F3; }
body.nm-on .photo-slot::after {
  content: "Click to add a photograph";
  display: block;
  margin-top: .6rem;
  font-weight: 600;
  color: #2A5B9A;
}

body.nm-on .nm-figure { position: relative; }
body.nm-on .nm-figure::after {
  content: "Click to replace";
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(10,35,66,.85);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 999px;
}

/* The alt-text row under an added photograph */
.nm-alt {
  display: none;
  margin-top: .5rem;
  font-size: .82rem;
  color: #5A6B87;
  background: #F5F8FD;
  border: 1px solid #D8E4F3;
  border-radius: 10px;
  padding: .55rem .8rem;
}
body.nm-on .nm-alt { display: block; }
.nm-alt strong { color: #0A2342; display: block; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.nm-alt span { outline: none; display: block; }
.nm-alt span:empty::before { content: "Describe the photo for screen readers"; color: #9AA8BE; }

/* ------------------------------------------------------------- toasts -- */

.nm-toast {
  position: fixed;
  right: 22px; bottom: 96px;
  z-index: 10000;
  background: #0A2342;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .9rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(10,35,66,.35);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  max-width: min(90vw, 420px);
  text-align: right;
}
.nm-toast.is-up { opacity: 1; transform: translateY(-8px); }

@media print { .nm-bar, .nm-toast, .nm-alt { display: none !important; } }