/* =====================================================================
   MAINTENANCE MODE COMPONENT — STYLE
   =====================================================================
   Re-mapped from the original snippet's own separate design system
   (its own DM Sans font, its own red #C8102E, its own grays, fully
   rounded 12px corners) onto THIS theme's real, already-loaded design
   tokens (assets/css/global.css) — otherwise this one component would
   visually clash with every other component on the site. See
   component.php's file header for the full reasoning.

   TOKEN MAPPING (original -> this theme's own):
     --color-white   #FFFFFF  -> var(--white)
     --color-black   #0F0F0F  -> var(--ink)
     --color-red     #C8102E  -> var(--red)          (the real brand red)
     --color-red-dark #A00D25 -> var(--red-deep)
     --color-gray-muted #595959 -> var(--slate)       (already WCAG-checked
                                                        elsewhere on this site)
     --color-gray-50 #F8F8F8  -> var(--ivory)
     --color-gray-200 #DDDDDD -> var(--line)
     --font-primary  'DM Sans' -> var(--font-sans) / var(--font-display)
     --transition-smooth       -> var(--ease)
     --radius (12px, boxes)    -> var(--radius-lg) (2px, matching every
                                                     other panel/card on
                                                     this site's sharp-
                                                     corner design)
   Two colors have no existing equivalent in this theme's palette and
   are kept as their own locally-scoped custom properties instead of
   silently reusing an unrelated token:
     - the tag/icon's light red TINT background (no tinted-red surface
       token exists yet)
     - the status dot's amber (a semantically distinct "in progress"
       color, not a brand color)
   Small pill/badge shapes (tag, status, icon) keep a fully-rounded
   radius — NOT a redesign, this theme's own header language-switcher
   pill (".lang-toggle__label", 999px radius) already establishes that
   pills are a legitimate shape in this design system for small chip-
   like UI; only the larger boxes (progress track, icon) move to the
   site's sharp corners.
   ===================================================================== */

.maintenance-mode {
  --maintenance-red-tint: rgba(225, 27, 34, 0.08);
  --maintenance-amber: #D97706;

  width: 100%;
  min-height: 70vh; /* Prevents layout shift — same reasoning as the original. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

.maintenance-mode__hero {
  width: 100%;
  padding: 40px var(--gutter);
  background-image:
    radial-gradient(ellipse at 20% 50%, var(--maintenance-red-tint) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, var(--maintenance-red-tint) 0%, transparent 60%);
  text-align: center;
}

.maintenance-mode__content { max-width: 720px; margin: 0 auto; }

.maintenance-mode__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 90px; height: 90px;
  background: var(--maintenance-red-tint);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--red);
  margin-bottom: 24px;
}
.maintenance-mode__icon svg { width: 36px; height: 36px; }

.maintenance-mode__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--red);
  background: var(--maintenance-red-tint);
  border: 1px solid var(--line);
  padding: 6px 20px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.maintenance-mode__status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 24px;
  font-size: 13px; color: var(--slate); font-weight: 500;
}
.maintenance-mode__status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--maintenance-amber);
  flex-shrink: 0;
}

h2.maintenance-mode__heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

p.maintenance-mode__subtitle {
  color: var(--slate);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.maintenance-mode__progress { max-width: 400px; margin: 0 auto 32px; }
.maintenance-mode__progress-track {
  width: 100%; height: 6px;
  background: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.maintenance-mode__progress-fill {
  height: 100%; width: 0%;
  background: var(--red);
  transition: width 0.4s var(--ease);
}
.maintenance-mode__progress-label {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--slate);
  margin-top: 6px;
}

.maintenance-mode__actions { display: flex; justify-content: center; }
svg.maintenance-mode__btn-icon { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.maintenance-mode__actions button:hover .maintenance-mode__btn-icon { transform: rotate(180deg); }

@media (max-width: 640px) {
  .maintenance-mode__status { flex-direction: column; gap: 4px; padding: 12px 16px; }
}