/* Standalone Threats page — isolated from the app router.
   Works with style.css but removes the 2-column layout.
*/

.threats-page{
  width: 100%;
}

.threats-h1{
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--black);
  margin: 0 0 10px;
}

.threats-intro{
  max-width: 980px;
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 18px;
}

.threats-controls{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  align-items:flex-end;
  margin: 12px 0 18px;
}

.thctl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 0.9rem;
}
.thctl span{ color: var(--gray-500); }
.thctl select, .thctl input{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  min-width: 160px;
}
.thctl-grow input{ min-width: 240px; width: 280px; }
.th-reset{
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.threats-map{
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 640px;
  max-height: 900px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  overflow: hidden;
  padding: 10px;
}

.th-map-caption {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.5;
  font-style: italic;
}

.th-map-hint{
  position:absolute;
  top: 10px;
  left: 16px;
  font-size: 0.9rem;
  color: var(--gray-500);
  z-index: 2;
}

#thSvg{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display:block !important;
}

/* chart styling */
.th-gridline{ stroke: rgba(0,0,0,0.08); stroke-width:1; }
.th-axis{ stroke: rgba(0,0,0,0.35); stroke-width:1.5; }
.th-axislabel{ fill: rgba(0,0,0,0.65); font-size: 13px; }
.th-tick{ fill: rgba(0,0,0,0.55); font-size: 12px; }
.th-title{ fill: rgba(0,0,0,0.75); font-size: 15px; font-weight: 700; }

.th-point{
  opacity: 0.86;
  stroke: rgba(0,0,0,0.18);
  stroke-width: 1;
}
.th-point:hover{ opacity: 1; }

/* threat type colors */
.th-point.th-type-sabotage{ fill: #dc2626; }
.th-point.th-type-cyber{ fill: #2563eb; }
.th-point.th-type-border{ fill: #f59e0b; }
.th-point.th-type-verbal{ fill: #a855f7; }
.th-point.th-type-economic{ fill: #059669; }
.th-point.th-type-institutional{ fill: #0ea5e9; }
.th-point.th-type-unknown{ fill: #777; }

/* Legend - horizontal layout below scatter plot */
.th-legend-horizontal {
  margin: 16px 0;
  width: 100%;
}
.th-legend-box{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: flex-start;
}
.th-legend-title{ 
  font-weight: 800; 
  margin-bottom: 6px;
  width: 100%;
  font-size: 13px;
}
.th-legend-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* SHAPE section - full width (prima riga) */
.th-legend-section:first-of-type {
  width: 100%;
}
/* COLOR and SIZE sections - sulla stessa riga (seconda riga) */
.th-legend-section:nth-of-type(2),
.th-legend-section:nth-of-type(3) {
  flex: 1;
  min-width: 200px;
}
.th-legend-sub{ 
  font-weight: 700; 
  margin: 0; 
  opacity: 0.75;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Items inline - orizzontale */
.th-legend-section .th-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.th-legend-row{ 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  margin: 0;
  white-space: nowrap;
  font-size: 11.5px;
}



.th-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  display:inline-block;
  border: 1px solid rgba(0,0,0,0.15);
}
.th-dot.th-type-sabotage{ background:#dc2626; }
.th-dot.th-type-cyber{ background:#2563eb; }
.th-dot.th-type-border{ background:#f59e0b; }
.th-dot.th-type-verbal{ background:#a855f7; }
.th-dot.th-type-economic{ background:#059669; }
.th-dot.th-type-institutional{ background:#0ea5e9; }
.th-dot.th-type-unknown{ background:#777; }

.th-size{ display:inline-block; border-radius:50%; border: 1px solid rgba(0,0,0,0.18); background: rgba(0,0,0,0.06); }
.th-size.s1{ width:10px; height:10px; }
.th-size.s2{ width:14px; height:14px; }
.th-size.s3{ width:18px; height:18px; }

.th-shape{ display:inline-block; width: 12px; height: 12px; background: rgba(0,0,0,0.25); }
.th-shape.circle{ border-radius:50%; }
.th-shape.square{}
.th-shape.triangle{
  width:0; height:0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid rgba(0,0,0,0.28);
  background: transparent;
}
.th-shape.diamond{ transform: rotate(45deg); }
.th-shape.octagon{
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.th-shape.star{
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Map captions */
.th-map-caption {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
  color: var(--gray-600, #666);
  line-height: 1.5;
  font-style: italic;
}


/* list */
.threats-list{
  margin: 16px 0 60px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  overflow:hidden;
}
.threats-list-header{
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.threats-item{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.threats-item h3{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--black);
}
.th-date{ font-weight: 500; opacity: 0.7; }
.threats-item p{ margin: 0 0 10px; font-size: 14px; opacity: 0.92; }
.threats-meta{ display:flex; flex-wrap:wrap; gap: 8px 12px; font-size: 12px; opacity: 0.75; }

.th-sources{ margin-top: 10px; }
.th-sources-label{ font-size: 11px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 6px; }
.th-sources ul{ margin: 0; padding-left: 18px; }
.th-sources li{ margin: 4px 0; }

@media (max-width: 650px){
  .threats-map{ height: 55vh; min-height: 520px; }
  .thctl-grow input{ width: 100%; min-width: 220px; }
  
  /* Legend ultra-compatta su mobile */
  .th-legend-box {
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
  }
  
  .th-legend-title {
    font-size: 12px;
    margin-bottom: 4px;
  }
  
  .th-legend-section {
    width: 100% !important; /* Override desktop flex layout */
    gap: 6px;
    flex: none !important; /* Remove flex grow */
    min-width: 0 !important;
  }
  
  .th-legend-sub {
    font-size: 9.5px;
  }
  
  .th-legend-items {
    gap: 6px 10px;
  }
  
  .th-legend-row {
    gap: 5px;
    font-size: 10.5px;
  }
  
  /* Shapes e dots più piccoli */
  .th-shape {
    width: 9px !important;
    height: 9px !important;
  }
  
  .th-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  .th-size.s1 {
    width: 7px !important;
    height: 7px !important;
  }
  
  .th-size.s2 {
    width: 9px !important;
    height: 9px !important;
  }
  
  .th-size.s3 {
    width: 11px !important;
    height: 11px !important;
  }
  
  /* Caption più piccole su mobile */
  .th-map-caption {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* Keep site 2-column layout (news sidebar + content) on standalone threats */
body.threats-standalone #main-content{
  min-width: 0; /* allow SVG to size properly */
}

body.threats-standalone .threats-page{
  width: 100%;
}


/* Dark theme legend styling (only when dark theme is active) */
body.theme-dark .threats-page .th-legend-box,
html[data-theme="dark"] .threats-page .th-legend-box{
  background: rgba(17,24,39,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
}
body.theme-dark .threats-page .th-legend-title,
html[data-theme="dark"] .threats-page .th-legend-title{ color:#fff; }
body.theme-dark .threats-page .th-legend-sub,
html[data-theme="dark"] .threats-page .th-legend-sub{ color:rgba(255,255,255,0.70); }

body.theme-dark .threats-page .geo-map-legend,
html[data-theme="dark"] .threats-page .geo-map-legend{
  background: rgba(17,24,39,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
}
body.theme-dark .threats-page .geo-map-legend-title,
html[data-theme="dark"] .threats-page .geo-map-legend-title{ color:#fff; }
body.theme-dark .threats-page .geo-map-legend-sub,
html[data-theme="dark"] .threats-page .geo-map-legend-sub{ color:rgba(255,255,255,0.70); }