/* Maintenance notice (owner direction 2026-10-14; behaviour in maintenance.js).
   Two parts:
   - .maintenance-notice: static markup on every public page. Without
     JavaScript (or if maintenance.js fails) it carries the whole message and
     never blocks anything. Once the dialog has been dismissed it shrinks to a
     small indicator.
   - .mn-dialog: built by maintenance.js, shown once per browser session.
   Nothing here hides content or locks scrolling on its own: only the script
   does that, and only while its dialog is open. */

.maintenance-notice {
  position: relative;
  /* Under the sticky headers (30, 80) and the menu drawers (90, 95). */
  z-index: 25;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 2px 8px;
  min-height: 28px;
  padding: 6px 20px;
  background: #0a0612;
  color: #d4a04a;
  font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  text-align: right;
}
.maintenance-notice strong { font-weight: 600; }
.maintenance-notice .mn-more { color: rgba(232, 223, 208, .78); }
.maintenance-notice a { color: #e8c58a; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.maintenance-notice a:focus-visible { outline: 2px solid #d4a04a; outline-offset: 2px; }

/* Script running and the dialog dismissed (or about to show): only the
   indicator remains. The full text stays in the dialog. */
html.mn-js .maintenance-notice .mn-more { display: none; }
html.mn-js .maintenance-notice { padding: 4px 20px; min-height: 0; font-size: 11px; }
html.mn-open .maintenance-notice { visibility: hidden; }

html.mode-immersive .maintenance-notice {
  position: fixed;
  z-index: 10001;
  top: 0;
  right: 16px;
  left: auto;
  max-width: min(520px, calc(100vw - 32px));
  min-height: 0;
  padding: 3px 8px;
  background: rgba(10, 6, 18, .9);
  border-bottom: 1px solid rgba(212, 160, 74, .3);
}

/* ── Entry dialog ───────────────────────────────────────────────────── */
.mn-dialog {
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid rgba(212, 160, 74, .55);
  border-radius: 6px;
  background: linear-gradient(180deg, #0d0a18, #07050f);
  color: #e8dfd0;
  font: 1rem/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}
.mn-dialog::backdrop { background: rgba(2, 3, 9, .72); }
.mn-dialog .mn-eyebrow {
  margin: 0 2.5rem .5rem 0;
  font: 600 .75rem/1.3 Cinzel, "Times New Roman", serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #d4a04a;
}
.mn-dialog .mn-title {
  margin: 0 2.5rem .6rem 0;
  font: 700 1.5rem/1.2 Cinzel, "Times New Roman", serif;
  letter-spacing: .02em;
  color: #f2ead9;
  overflow-wrap: break-word;
}
.mn-dialog .mn-body { margin: 0 0 .9rem; color: rgba(232, 223, 208, .9); }
.mn-dialog .mn-contact { margin: 0 0 1.25rem; font-size: .9rem; color: rgba(232, 223, 208, .72); }
.mn-dialog .mn-contact a { color: #e8c58a; overflow-wrap: anywhere; }
.mn-dialog .mn-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mn-dialog .mn-proceed {
  min-height: 44px;
  padding: .7rem 1.4rem;
  border: 1px solid #d4a04a;
  border-radius: 3px;
  background: rgba(212, 160, 74, .16);
  color: #f2ead9;
  font: 600 .95rem/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.mn-dialog .mn-proceed:hover { background: rgba(212, 160, 74, .3); }
.mn-dialog .mn-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: rgba(232, 223, 208, .8);
  font: 400 1.75rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.mn-dialog .mn-close:hover { color: #fff; border-color: rgba(232, 223, 208, .3); }
.mn-dialog :is(button, a):focus-visible { outline: 2px solid #d4a04a; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .mn-dialog[open] { animation: mn-in .18s ease-out; }
  @keyframes mn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 420px) {
  .mn-dialog { padding: 1.5rem 1.1rem 1.1rem; }
  .mn-dialog .mn-title { font-size: 1.3rem; }
  .mn-dialog .mn-proceed { width: 100%; }
}
@media (max-height: 420px) {
  .mn-dialog { padding-top: 1rem; padding-bottom: 1rem; }
  .mn-dialog .mn-eyebrow { display: none; }
}

@media print {
  .maintenance-notice, .mn-dialog { display: none !important; }
}