/**
 * EVIL Platform — layer responsive globale (tutte le pagine)
 * Breakpoint principali: 992px (tablet), 768px, 480px
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.evil-theme {
  overflow-x: clip;
  max-width: 100%;
}

.evil-theme img:not(.leaflet-tile),
.evil-theme video,
.evil-theme svg:not(.leaflet-zoom-animated) {
  max-width: 100%;
  height: auto;
}

/* Leaflet: tile e layer devono mantenere dimensioni assolute (no height:auto del tema) */
.evil-theme .leaflet-container img.leaflet-tile,
.evil-theme .leaflet-container img.leaflet-marker-icon,
.evil-theme .leaflet-container img.leaflet-image-layer {
  max-width: none !important;
  max-height: none !important;
}

.evil-theme table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.evil-theme pre,
.evil-theme code,
.evil-theme .result-json,
.evil-theme .scan-log,
.evil-theme .log-output,
.evil-theme .code-block {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

.evil-theme input:not([type="checkbox"]):not([type="radio"]),
.evil-theme select,
.evil-theme textarea {
  max-width: 100%;
}

.evil-theme main,
.evil-theme .content,
.evil-theme .container-section,
.evil-theme .tutorial-main {
  width: 100%;
  min-width: 0;
}

/* Desktop: menu orizzontale, niente hamburger */
@media (min-width: 993px) {
  .hamburger-btn {
    display: none !important;
  }

  header nav {
    display: flex !important;
  }
}

/* ——— Header & navigazione mobile ——— */
@media (max-width: 992px) {
  .header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }

  .logo-section {
    flex: 0 1 auto;
    min-width: min-content;
    overflow: visible;
  }

  .logo-section .header-evil-wordmark,
  .logo-section .header-evil-title,
  .logo-section .logo {
    overflow: visible;
    text-overflow: clip;
  }

  .header-actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-actions .auth-buttons {
    display: flex;
    gap: 6px;
  }

  .header-actions .auth-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
    min-height: 44px;
  }

  .hamburger-btn {
    display: flex !important;
    flex-shrink: 0;
    margin: 0;
  }

  header nav {
    order: 3;
    flex: 1 1 100%;
    display: none !important;
    width: 100%;
    max-height: min(72vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #0b1220;
    border: 1px solid rgba(0, 255, 156, 0.22);
    border-radius: 8px;
  }

  header nav.active {
    display: block !important;
  }

  header nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  header nav > ul > li {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  header nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;
  }

  /* Disattiva hover desktop su touch */
  header nav li:hover .dropdown {
    display: none;
  }

  header nav li.dropdown-open .dropdown {
    display: block !important;
  }

  header nav li .dropdown {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.28);
  }

  header nav li .dropdown a {
    padding: 12px 16px 12px 28px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .header-actions .auth-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .user-menu {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .user-name {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* ——— Tipografia fluida ——— */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.65rem, 6vw, 2.4rem) !important;
  }

  .hero-subtitle,
  .section-description,
  .hero-sub {
    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  }

  .section-header {
    padding: 20px 16px;
  }

  .section-header h1,
  .section-title {
    font-size: clamp(1.2rem, 4.5vw, 1.75rem);
  }

  .content {
    padding: 24px 16px !important;
  }

  main {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ——— Hero & CTA ——— */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 640px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .cta-btn,
  .hero-ctas button {
    width: 100%;
    max-width: 100%;
  }

  .hero-cta-link {
    display: block;
    text-align: center;
  }
}

/* ——— Griglie & card ——— */
.card-grid,
.status-metrics,
.attacks-grid,
.stats-panel,
.stats-grid-cinematic,
.month-grid,
.profile-stats,
.achievements-grid {
  min-width: 0;
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  .status-metrics {
    grid-template-columns: 1fr !important;
  }

  .stats-grid-cinematic {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-card {
    padding: 20px 16px;
  }
}

@media (max-width: 380px) {
  .stats-grid-cinematic {
    grid-template-columns: 1fr;
  }
}

/* ——— Form & scanner (security-check, dns, ssl, ecc.) ——— */
.scanner-input-group,
.form-inline,
.input-row,
.scan-form,
.tool-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 640px) {
  .scanner-input-group,
  .form-inline,
  .input-row,
  .scan-form {
    flex-direction: column;
  }

  .scanner-input-group input,
  .scanner-input-group select,
  .form-inline input,
  .form-inline select,
  .scan-form input {
    width: 100% !important;
    flex: 1 1 100%;
  }

  .scanner-input-group button,
  .form-inline button,
  .scan-form button {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ——— Tool pages: pannelli larghi ——— */
.scanner-section,
.scan-container,
.tool-panel,
.quiz-wrapper,
.simulator-panel,
.report-panel,
.vuln-results,
.dns-results {
  max-width: 100%;
  overflow-x: auto;
}

/* ——— Malware / tabelle dati ——— */
.malware-grid,
.data-table-wrap,
.historic-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ——— Footer ——— */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    align-items: center;
  }
}

/* ——— Auth pages ——— */
@media (max-width: 480px) {
  .auth-container,
  .login-box,
  .account-form {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 16px;
  }
}

/* ——— Mappe intelligence (attacks-map / historic-attacks) ——— */
.am-page .am-map-section,
.ha-page .ha-map-section {
  max-width: 100%;
}

.am-page .am-map-frame,
.ha-page .ha-map-frame,
.attacks-page .map-frame {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .am-page .am-map-frame {
    height: clamp(260px, 38vh, 360px);
  }

  .ha-page .ha-map-frame {
    height: clamp(260px, 36vh, 340px);
  }
}

@media (max-width: 768px) {
  .am-page .am-map-frame,
  .ha-page .ha-map-frame,
  .attacks-page .map-frame {
    height: clamp(240px, 34vh, 300px);
  }
}

@media (max-width: 576px) {
  .am-page .am-map-frame,
  .ha-page .ha-map-frame,
  .attacks-page .map-frame {
    height: clamp(220px, 32vh, 260px);
  }

  .am-ticker,
  .ticker-wrap {
    height: auto;
    min-height: 42px;
  }

  .am-ticker__track,
  .ticker-track {
    white-space: normal;
    flex-wrap: wrap;
    animation: none !important;
    padding: 10px 12px;
  }
}

/* ——— Utility ——— */
.u-stack-mobile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .u-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .u-stack-mobile > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none !important;
  }
}

/* Pagine con stili inline (max-width fissi nel tag) */
@media (max-width: 992px) {
  .evil-theme main[style*="max-width"],
  .evil-theme section[style*="max-width"],
  .evil-theme div[style*="max-width"] {
    max-width: 100% !important;
  }
}

/* security-check e tool con layout larghi */
@media (max-width: 768px) {
  .scan-results,
  .results-panel,
  .vuln-card,
  .malware-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ——— iPad / tablet portrait & landscape ——— */
@media (min-width: 768px) and (max-width: 1024px) {
  .auth-page__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .profile-hero__grid,
  .trophy-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .st-hub-grid,
  .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .am-stats-grid,
  .ha-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ——— Telefoni landscape (altezza ridotta) ——— */
@media (max-height: 500px) and (orientation: landscape) {
  header nav.active {
    max-height: min(55vh, 320px);
  }

  .auth-page {
    margin-top: 2rem;
  }

  .am-map-frame,
  .ha-map-frame {
    height: clamp(180px, 55vh, 240px) !important;
  }
}

/* ——— Schermi molto larghi / VR browser ——— */
@media (min-width: 1600px) {
  .header-container,
  .evil-site-foot__grid,
  .evil-site-foot__brand,
  .am-wrap,
  .ha-wrap,
  .st-hub-wrap {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ——— Touch: niente hover-only ——— */
@media (hover: none) and (pointer: coarse) {
  header nav li:hover .dropdown,
  header nav li.dropdown-open > .dropdown {
    display: none;
  }

  .trophy-card:hover,
  .st-hub-card:hover {
    transform: none;
  }
}

/* ——— Footer link su mobile stretto ——— */
@media (max-width: 480px) {
  .evil-site-foot__copy {
    font-size: 0.82rem;
  }

  .evil-site-foot__link {
    display: inline-block;
    margin: 0.15rem 0.35rem 0.15rem 0;
    min-height: 44px;
    line-height: 44px;
  }
}

/* ——— PWA standalone ——— */
@media (display-mode: standalone) {
  body.evil-theme {
    padding-top: env(safe-area-inset-top, 0);
  }
}