/* ============================================
   Digital Horizon – Senior Architecture Theme
   Modern Cyberpunk / Dark Mode Professional
   ============================================ */

/* ---------- Background: radial gradient + subtle 1px grid ---------- */
body.dh-theme {
  background: radial-gradient(circle at center, #111827 0%, #000000 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body.dh-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

body.dh-theme > * {
  position: relative;
  z-index: 1;
}

/* ---------- Typography: Inter (body) + JetBrains Mono (titles, tags) ---------- */
body.dh-theme {
  font-family: 'Inter', sans-serif;
}

body.dh-theme h1,
body.dh-theme h2,
body.dh-theme h3,
.dh-heading,
.dh-title,
.dh-tag {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.dh-theme h1,
.dh-heading.text-4xl,
.dh-heading.text-5xl,
.dh-heading.text-6xl {
  font-weight: 800;
}

.dh-code-block,
code,
pre {
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Navbar: sticky + blur (content scrolls behind) ---------- */
.dh-glass-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dark mode: header molto scuro così le voci di menu (testo chiaro) sono leggibili */
body.dh-theme:not(.light-mode) .dh-glass-nav,
body.dh-theme:not(.light-mode) #dh-header-placeholder .dh-glass-nav {
  background-color: #0f172a !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Menu unificato: font e stili fissi su tutte le pagine (evita override da stylesPro2 / inline) */
#dh-header-placeholder .dh-glass-nav,
#dh-header-placeholder .dh-glass-nav a,
#dh-header-placeholder .dh-glass-nav button,
#dh-header-placeholder .dh-nav-panel,
#dh-header-placeholder .dh-nav-panel .nav-link {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: normal;
}
#dh-header-placeholder .dh-glass-nav {
  padding: 0;
  text-align: left;
}
body.dh-theme:not(.light-mode) #dh-header-placeholder .dh-glass-nav {
  background-color: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Mobile menu: overlay + full-height panel (modal style) ---------- */
/* z-index alti per stare sopra eventuali stili di stylesPro2 (1000/1001) */
.dh-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0a0b0f; /* Sfondo opaco come il tema, niente trasparenza */
  z-index: 9998;
}

body.dh-menu-open .dh-nav-overlay {
  display: block;
}

/* Blocca scroll pagina quando menu mobile è aperto (desktop dropdown) */
body.dh-menu-open {
  overflow: hidden;
}

/* ---------- Modal burger (solo mobile): figlio diretto di body, sempre sopra tutto ---------- */
#dh-mobile-menu-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.dh-mobile-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 15, 0.6);
  cursor: pointer;
}

/* Pannello: centrato in orizzontale, allineato in alto sotto il burger (h-16 = 4rem), slide da destra */
.dh-mobile-menu-panel {
  position: absolute;
  left: 50%;
  top: 4rem;
  width: 50vw;
  height: auto;
  min-width: 260px;
  min-height: 200px;
  max-width: 90vw;
  max-height: calc(100vh - 4rem - 1rem);
  box-sizing: border-box;
  background: rgba(226, 232, 240, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(34, 211, 238, 0.7);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 40px rgba(34, 211, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  padding: 3.25rem 1.5rem 2rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  transform: translateX(-50%) translateX(100vw);
  transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Layer decorativo interno: neon grid + blob cyan/magenta in mix-blend, stile cyberpunk */
.dh-mobile-menu-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.30), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(232, 121, 249, 0.28), transparent 55%),
    linear-gradient(120deg, rgba(148, 163, 184, 0.28) 1px, transparent 1px),
    linear-gradient(210deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
  background-size:
    160% 160%,
    180% 180%,
    32px 32px,
    64px 64px;
  opacity: 0.9;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Riflessi/luci laterali: barre neon morbide ai bordi del pannello */
.dh-mobile-menu-panel::after {
  content: '';
  position: absolute;
  inset: 10% -24px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.0), rgba(34, 211, 238, 0.55), rgba(34, 211, 238, 0.0)),
    linear-gradient(270deg, rgba(232, 121, 249, 0.0), rgba(232, 121, 249, 0.45), rgba(232, 121, 249, 0.0));
  background-repeat: no-repeat;
  background-position:
    left center,
    right center;
  background-size:
    36px 70%,
    36px 70%;
  opacity: 0.85;
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.dh-mobile-menu-panel > * {
  position: relative;
  z-index: 1;
}

#dh-mobile-menu-root.dh-mobile-menu-visible .dh-mobile-menu-panel {
  transform: translateX(-50%) translateX(0);
}

/* Stato di chiusura: slide verso sinistra */
#dh-mobile-menu-root.dh-mobile-menu-closing .dh-mobile-menu-panel {
  transform: translateX(-50%) translateX(100vw);
}

.dh-mobile-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.dh-mobile-menu-close:hover,
.dh-mobile-menu-close:focus {
  color: #111827;
  background-color: rgba(0, 0, 0, 0.08);
}
.dh-mobile-menu-close svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.dh-mobile-menu-link {
  display: block;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.2);
}

.dh-mobile-menu-link:hover,
.dh-mobile-menu-link:focus {
  background-color: rgba(0, 0, 0, 0.06);
  color: #e2e8f0;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}

.dh-mobile-menu-link--active.dh-mobile-menu-link--cyan {
  color: #22d3ee;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.25);
}
.dh-mobile-menu-link--active.dh-mobile-menu-link--magenta {
  color: #e879f9;
  text-shadow: 0 0 12px rgba(232, 121, 249, 0.5), 0 0 24px rgba(232, 121, 249, 0.25);
}
.dh-mobile-menu-link--active.dh-mobile-menu-link--lime {
  color: #a3e635;
  text-shadow: 0 0 12px rgba(163, 230, 53, 0.45), 0 0 24px rgba(163, 230, 53, 0.2);
}

.dh-mobile-menu-link[href*="partner"]:hover { color: #e879f9; text-shadow: 0 0 14px rgba(232, 121, 249, 0.4); }
.dh-mobile-menu-link[href*="contacts"]:hover { color: #a3e635; text-shadow: 0 0 14px rgba(163, 230, 53, 0.35); }
.dh-mobile-menu-link:not([href*="partner"]):not([href*="contacts"]):hover { color: #22d3ee; text-shadow: 0 0 14px rgba(34, 211, 238, 0.35); }

/* Desktop: nav sempre visibile in header */
@media (min-width: 640px) {
  .dh-nav-panel {
    display: flex !important;
    align-items: center;
    align-self: stretch;
  }
}

/* ---------- Cards: Enterprise glow (slate-800 border, cyan-500/50 on hover) ---------- */
.dh-glass-card,
.card-glow {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #1e293b; /* slate-800 */
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-glow:hover {
  border-color: rgba(6, 182, 212, 0.5); /* cyan-500/50 */
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
}

/* ---------- CTA Buttons: gradient + backlit glow on hover ---------- */
.dh-cta-btn,
.btn-glow.btn-cyan {
  background: linear-gradient(45deg, #00f2ff, #7000ff) !important;
  color: #000000 !important;
  font-weight: 700;
  border: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.dh-cta-btn:hover,
.btn-glow.btn-cyan:hover {
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.5), 0 0 40px rgba(0, 242, 255, 0.25);
}

.btn-glow.btn-outline {
  background: transparent;
  border: 1px solid rgba(0, 242, 255, 0.5);
  color: #00f2ff;
  font-weight: 700;
  transition: box-shadow 0.3s ease, border-color 0.25s ease;
}

.btn-glow.btn-outline:hover {
  border-color: #00f2ff;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.4), 0 0 36px rgba(0, 242, 255, 0.15);
}

/* Code block (partner page) */
.dh-code-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  background: rgba(13, 15, 20, 0.9);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.08);
}

.dh-code-block code {
  color: #e2e8f0;
}

.dh-code-block .key { color: #22d3ee; }
.dh-code-block .str { color: #a3e635; }
.dh-code-block .num { color: #e879f9; }

/* ---------- Carbon-style code snippet (API endpoint) ---------- */
.dh-code-carbon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  background: #161b22;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0 0;
  overflow-x: auto;
}

.dh-code-carbon .method { color: #7ee787; }
.dh-code-carbon .url { color: #79c0ff; }

/* ---------- Icon glow (service cards) ---------- */
.dh-icon-glow {
  filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.3));
}

.dh-icon-glow--purple {
  filter: drop-shadow(0 0 15px rgba(112, 0, 255, 0.35));
}

/* ---------- Card entrance: fade-in-up on scroll ---------- */
.dh-card-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.dh-card-reveal.dh-card-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Light Mode (toggle in header: body.light-mode)
   Dark = default (Terminal/IDE: #0f172a, #f8fafc, #38bdf8 in varianti).
   Light = sfondo chiaro, testo scuro, accenti Sky 400.
   ============================================ */
body.dh-theme.light-mode {
  background: #f1f5f9 !important;
  color: #0f172a;
}
body.dh-theme.light-mode::before {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}
body.dh-theme.light-mode .dh-glass-nav,
#dh-header-placeholder .dh-glass-nav {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
body.dh-theme.light-mode .dh-glass-nav a,
body.dh-theme.light-mode .dh-glass-nav .nav-link {
  color: #475569 !important;
}
body.dh-theme.light-mode .dh-glass-nav a:hover {
  color: #0ea5e9 !important;
}
body.dh-theme.light-mode .dh-theme-toggle {
  color: #64748b;
}
body.dh-theme.light-mode .dh-theme-toggle:hover {
  color: #0f172a;
}
body.dh-theme.light-mode .dh-heading,
body.dh-theme.light-mode h1,
body.dh-theme.light-mode h2,
body.dh-theme.light-mode h3 {
  color: #0f172a !important;
}
body.dh-theme.light-mode .dh-tag {
  color: #64748b !important;
}
body.dh-theme.light-mode .dh-glass-card,
body.dh-theme.light-mode .card-glow {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e2e8f0;
}
body.dh-theme.light-mode .dh-glass-card .text-gray-500,
body.dh-theme.light-mode .dh-glass-card .text-gray-400 {
  color: #475569 !important;
}
body.dh-theme.light-mode .dh-code-block,
body.dh-theme.light-mode code {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.dh-theme.light-mode footer {
  border-top-color: rgba(15, 23, 42, 0.08);
}
body.dh-theme.light-mode footer p,
body.dh-theme.light-mode footer a {
  color: #64748b !important;
}
body.dh-theme.light-mode footer a:hover {
  color: #0ea5e9 !important;
}
body.dh-theme.light-mode .btn-glow.btn-outline {
  border-color: #0ea5e9;
  color: #0284c7;
}
body.dh-theme.light-mode .btn-glow.btn-outline:hover {
  border-color: #0284c7;
  color: #0369a1;
}
/* Termini evidenziati (Hardening, Superficie d'attacco, Infrastruttura) in light mode */
body.dh-theme.light-mode strong.text-gray-300 {
  color: #334155 !important;
}
/* Toggle: nascondi l'icona non attiva (Tailwind .hidden può non essere disponibile prima del JS) */
.theme-icon.hidden {
  display: none !important;
}