/**
 * MAINTENANCE MODE.
 *
 * Normal use: toggle it from the CMS (Settings → Maintenance Mode). That
 * writes to settings.json, and every page checks it on load via
 * js/core/maintenance-check.js, no file editing needed.
 *
 * Emergency override, if the CMS itself is unreachable: change the value
 * below from "none" to "flex" directly in this one file, upload it, done.
 * This works even with the CMS completely down, since it needs no JS or
 * API call at all, pure CSS resolves before anything else runs.
 */
:root{
  --maintenance-display-override: none; /* emergency-only, see above */
}

.alp-maintenance-overlay{
  display:var(--maintenance-display-override);
  position:fixed; inset:0; z-index:9999;
  background:var(--surface-primary, #0A0A0A);
  color:var(--text-primary, #FAFAFA);
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
  font-family:'Inter', system-ui, sans-serif;
}
.alp-maintenance-overlay.is-active{ display:flex; }
.alp-maintenance-overlay img{ height:56px; width:auto; margin-bottom:32px; }
.alp-maintenance-overlay h1{
  font-family:'General Sans', 'Inter', system-ui, sans-serif;
  font-size:clamp(24px,4vw,36px); font-weight:600; margin:0 0 12px; max-width:600px;
}
.alp-maintenance-overlay p{ font-size:16px; color:var(--text-secondary, #B8B8B8); max-width:480px; margin:0 0 28px; line-height:1.6; }
.alp-maintenance-overlay a{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:8px;
  background:var(--accent-interactive, #FBB03B); color:#0A0A0A; font-weight:600; text-decoration:none;
}
.alp-maintenance-overlay .alp-maintenance-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent-interactive, #FBB03B);
  display:inline-block; margin-right:8px; animation:alp-maintenance-pulse 1.6s ease-in-out infinite;
}
@keyframes alp-maintenance-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }