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

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 20px 0 0 0;
  background-color: #1a1a1a;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("images/world_img.webp");
  filter: brightness(0.9) contrast(1.5) saturate(1.8);
  background-color: rgba(73, 73, 68, 0.141);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.standard-page {
  margin: 0;
  width: 100vw;
  padding: 5rem 0;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh; /* Ensures background covers full screen */
}

.master-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 92%;
  max-width: 900px;
  margin: 30px auto;
  padding: 0 25px;
  z-index: 10;
}

/* THE BANNER BODY */

.u-u-link {
  grid-column: 1 / -1;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  max-width: 900px;
  outline: none;
}

#u-u-notice {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin: 0;
  background: #fdf8f89d;
  backdrop-filter: blur(10px);
  border: 4px solid rgba(255, 255, 255, 0.8);
  /* border-left: 5px solid rgba(255, 255, 255, 0.8);
	border-top: 4px solid rgba(255, 255, 255, 0.8); */
  border-radius: 12px;
  text-align: center;
  color: #000000;
  font-weight: 700;
  letter-spacing: 1px;
  transition: 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* HOVER STATES (Matching the Translator exactly) */
.u-u-link:hover #u-u-notice {
  background: rgba(255, 255, 255, 0.5);
  border: 5px solid rgba(255, 255, 255, 0.8);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* TEXT STYLING */
#u-u-notice h4 {
  text-transform: uppercase;
  margin: 0 0 5px 0;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: #000000;
  line-height: 1;
}

#u-u-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: #000000;
  font-weight: 600;
}

#info-display-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 90%;
  max-width: 900px;
  margin: 30px auto;
  padding-bottom: 20px;
}

/* --- CONSOLIDATED STATUS SYSTEM --- */
.status-dot,
.status-dot-country {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Map all possible naming conventions to the same colors */
.safe,
.green,
.status-dot-country.safe,
.status-dot-country.green {
  background: #16d242;
}
.warning,
.amber,
.status-dot-country.warning,
.status-dot-country.amber {
  background: #f59e0b;
}
.danger,
.red,
.status-dot-country.danger,
.status-dot-country.red {
  background: #e40303;
}
.ice,
.status-dot-country.ice {
  background: rgba(0, 229, 255, 0.6);
}

/* 1. CLOSED STATE (The "Frosted Glass" Pod) */
.news-accordion {
  width: 100%;
  margin-bottom: 25px;
  border-radius: 14px;
  overflow: visible !important;
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease,
    box-shadow 0.5s ease;
}

/* 2. THE STATUS BORDER OVERRIDES  */

.news-accordion.status-border {
  border-left: 8px solid #ccc !important;
  border-top: 6px solid #ccc !important;
}

/* 3. OPEN STATE (The "Solid White Paper") */
.news-accordion[open] {
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
}

/* Transitions for titles inside open pods */
.news-accordion[open] .pod-title {
  color: #000000 !important;
  padding-bottom: 5px;
}

/* 1. HOVER - Only apply when the card is CLOSED */
.news-accordion:not([open]):hover {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* 2. OPEN STATE - Solid, Static, and No Hover */
.news-accordion[open] {
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  margin-top: 10px;
  margin-bottom: 35px;
}

/* Ensure no hover "wiggle" happens while the card is open */
.news-accordion[open]:hover {
  transform: none !important;
  background: #ffffff !important;
}

.news-accordion.status-amber {
  border-left-color: #f39c12 !important;
}
.news-accordion.status-red {
  border-left-color: #ff3b3b !important;
}
.news-accordion.status-green {
  border-left-color: #16d242 !important;
}
.news-accordion.status-ice {
  border-left-color: rgba(0, 229, 255, 0.8) !important;
}

.news-accordion.status-amber {
  border-top-color: #f39c12 !important;
}
.news-accordion.status-red {
  border-top-color: #ff3b3b !important;
}
.news-accordion.status-green {
  border-top-color: #16d242 !important;
}
.news-accordion.status-ice {
  border-top-color: rgba(0, 229, 255, 0.8) !important;
}

/* The Clickable Header */
.news-accordion summary {
  padding: 25px 30px;
  list-style: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s;
}

/* Target the clickable header of the accordion */
.news-accordion summary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  list-style: none;
}

/* Removes the default arrow in Safari/Chrome */
.news-accordion summary::-webkit-details-marker {
  display: none;
}

.news-accordion[open] summary {
  justify-content: center;
}

/* Mobile Specific Override */
@media (max-width: 768px) {
  .news-accordion summary {
    justify-content: center;
    font-size: 1.1rem;
    padding: 15px;
  }
}

.news-accordion summary::-webkit-details-marker {
  display: none;
}

.news-accordion h3 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}

/* --- THE EXPANDED STAGE --- */
.news-content-expanded {
  padding: 40px;
  background: #ffffff;
  color: black;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

/* Video Wrapper (16:9 Ratio) */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-article-view .article-lead {
  margin-top: 4dvh;
}

.news-content-expanded p {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: #000000 !important;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2.2rem !important;
  text-align: left;
}

.header-utility {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.news-content-expanded {
  pointer-events: auto !important;
  user-select: text !important;
}

.header-utility {
  pointer-events: none;
}

.header-utility * {
  pointer-events: auto;
}

.update-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 255, 136, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(0, 255, 136, 0.1);
}

.pulse-icon {
  width: 8px;
  height: 8px;
  background-color: #00ff88; /* Default Green */
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.pulse-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.top-utility-stack {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 450px;
  margin: 20px auto;
  gap: 15px;
}

.u-u-link {
  width: 100% !important;
  margin: 0 !important;
}

.status-badge-wrapper {
  display: inline-grid;
  grid-template-columns: 24px auto;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 24px;
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

#status-text {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.3s ease;
}

/* RED STATUS */
.status-badge-wrapper.status-red #status-text {
  color: #e40303 !important;
}
.status-badge-wrapper.status-red .status-dot-country {
  background: #e40303 !important;
  box-shadow: 0 0 10px rgba(228, 3, 3, 0.4);
}

/* AMBER STATUS */
.status-badge-wrapper.status-amber #status-text {
  color: #f59e0b !important;
}
.status-badge-wrapper.status-amber .status-dot-country {
  background: #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* GREEN STATUS */
.status-badge-wrapper.status-green #status-text {
  color: #16d242 !important;
}
.status-badge-wrapper.status-green .status-dot-country {
  background: #16d242 !important;
  box-shadow: 0 0 10px rgba(22, 210, 66, 0.4);
}

/* ICE STATUS */
.status-badge-wrapper.status-ice #status-text {
  color: #00b8d4 !important;
}
.status-badge-wrapper.status-ice .status-dot-country {
  background: rgba(0, 229, 255, 0.8) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* RED STATUS (Danger) */
.status-red .glass-card {
  border-left: 5px solid #ff3b3b;
}
.status-red .rainbow-line.mini-line {
  background: #ff3b3b;
}

/* AMBER STATUS (Warning) */
.status-amber .glass-card {
  border-left: 5px solid #f39c12;
}
.status-amber .rainbow-line.mini-line {
  background: #f39c12;
}

/* GREEN STATUS (Stable) */
.status-green .glass-card {
  border-left: 5px solid #2ecc71;
}
.status-green .rainbow-line.mini-line {
  background: #2ecc71;
}

.status-ice .glass-card {
  border-left: 5px solid rgba(0, 229, 255, 0.6);
}

.status-ice .rainbow-line.mini-line {
  background: rgba(0, 229, 255, 0.6);
}

.rainbow-line.mini-line {
  height: 6px;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 2px;
}

.news-content-expanded p a {
  color: #0894f1;
  text-decoration: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.news-content-expanded p a:hover {
  border-color: #3498db;
  text-decoration: underline !important;
}

/* Health & Travel Stylings */
.translation-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  margin: 15px 0;
}

.native-text {
  font-size: 1.3rem;
  color: #fff;
  font-style: italic;
}

/* Ensure all text inside the white paper is visible */
.news-article-view,
.news-article-view p,
.news-article-view h1,
.news-article-view h3,
.news-article-view span,
.news-article-view blockquote {
  color: #1a1a1a !important;
}

.article-headline {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}

.article-subhead {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-top: 30px;
  font-size: 1.4rem;
}

/* Fix the Identity Bar specifically */
.identity-status-bar {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  font-weight: bold;
}

.id-item span {
  color: #000000 !important;
}

.article-footer-note {
  color: #999 !important;
  font-size: 0.75rem;
  margin-top: 40px;
}

/* The YouTube-style Pill */
.badge-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.badge-type {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666 !important;
  text-transform: uppercase;
}

.update-badge {
  background: rgba(0, 0, 0, 0.05);
  color: #000000 !important;
  padding: 8px 15px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.news-accordion[open] summary h3 {
  color: #000000 !important;
}

/* THE TEXT INSIDE THE POD */
.news-accordion[open] .news-content-expanded {
  background: #ffffff !important;
  color: #000000 !important;
}

.news-accordion[open] .news-content-expanded p {
  color: #000000 !important;
  font-weight: 500;
}

/* --- THE NEW UNIQUE TARGET --- */

/* Closed (White text on the Blue Map) */
.pod-title {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
  color: #000000; /* Stays white while closed */
  transition: color 0.3s ease;
}

/* Open (Shiny Black on White Paper) */
.news-accordion[open] .pod-title {
  color: #000000 !important; /* Turns black the moment it opens */
}

/* Target any h3 or h4 that might be INSIDE the expanded text area */
.news-content-expanded h3,
.news-content-expanded h4,
.news-content-expanded strong {
  color: #000000 !important;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

/* --- CLEAN INLINE LINKS (No Boxes) --- */

.news-content-expanded p a,
.news-content-expanded li a {
  display: inline; /* Keeps it in the middle of the sentence */
  color: #036df8; /* High-contrast Blue */
  font-weight: 800; /* Heavy weight for visibility */
  text-decoration: none; /* No ugly underline */
  text-transform: uppercase; /* Keeps that "Data Entry" feel */
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
  cursor: pointer;
}

/* Subtle hover effect so the user knows it's interactive */
.news-content-expanded p a:hover {
  color: #3498db; /* Slightly lighter blue on hover */
  text-decoration: none; /* Still no underline */
}

/* --- THE QUOTATION BLOCK --- */

.article-quote {
  background: #fdfaf3; /* Soft, elegant beige background */
  border-left: 4px solid #0894f1; /* The same Electric Blue as your links */
  padding: 30px 40px; /* Generous breathing room */
  margin: 40px 0; /* Clear separation from paragraphs */
  border-radius: 4px; /* Subtle rounding */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02); /* Very faint inner border */
}

/* The Quote Text */
.article-quote {
  background: rgb(223, 223, 12);
  font-size: 1.3rem; /* Larger than paragraph text */
  font-weight: 700; /* Solid weight (No Italics) */
  color: #000000; /* Pure Shiny Black */
  line-height: 1.6;
  font-style: normal !important; /* Forces out the italics */
}

/* The Source Attribution Line */
.article-quote span {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 500;
  display: block;
  background: rgb(223, 223, 12);
  margin-top: 15px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The Link inside the Quote */
.article-quote a {
  color: #0894f1 !important; /* Syncs with the rest of your page */
  text-decoration: none !important;
  font-weight: 800;
  cursor: pointer;
}

.article-quote a:hover {
  text-decoration: underline !important;
}

/* --- RESOURCE SECTION --- */

.resource-container {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.resource-container .resource-card {
  display: block;
  padding: 10px 0 10px 20px;
  background: transparent !important;
  border-left: 5px solid #0894f1 !important;
  text-decoration: none !important;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

/* THE TITLE - Electric Blue */
/* Change this in your CSS */
.resource-container a.resource-card .resource-title {
  display: block;
  color: #0894f1 !important;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* THE DESCRIPTION - Clean Black */
.resource-container a.resource-card .resource-desc {
  display: block;
  font-size: 1rem;
  color: #000000 !important;
  line-height: 1.6;
  margin-bottom: 0; /* No extra space at the bottom of the card */
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  background: #ffffff !important; /* Flips to white on hover */
}

/* --- UNIVERSAL TABLE STYLING --- */

.news-content-expanded table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden; /* Keeps the rounded corners clean */
  border: 1px solid #eeeeee;
}

/* The Header Row */
.news-content-expanded table th {
  background-color: #0894f1; /* Your Electric Blue */
  color: #ffffff !important; /* White text on the blue header */
  text-align: left;
  padding: 15px 20px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

/* The Table Cells */
.news-content-expanded table td {
  padding: 12px 20px;
  border-bottom: 1px solid #eeeeee;
  color: #333333;
  line-height: 1.5;
}

/* Zebra Striping (Beige every second row) */
.news-content-expanded table tr:nth-child(even) {
  background-color: #fdfaf3; /* The Beige from your quotes */
}

/* Hover effect so rows "light up" */
.news-content-expanded table tr:hover {
  background-color: #f0f7ff; /* Very faint blue tint on hover */
}

/* Styling links if they appear inside a table cell */
.news-content-expanded table td a {
  color: #0894f1;
  font-weight: 700;
  text-decoration: none;
}

/* --- IDENTITY DOT STYLING --- */
.identity-status-bar {
  display: flex;
  gap: 20px;
  margin: 25px 0;
  align-items: center;
}

.id-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #666; /* Muted letter color */
}

.id-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.id-dot.status-green {
  background-color: #16d242;
  box-shadow: 0 0 8px rgba(22, 210, 66, 0.4);
}

.id-dot.status-red {
  background-color: #ff3b3b;
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.4);
}

.id-dot.status-amber {
  background-color: #f39c12;
  box-shadow: 0 0 8px rgba(243, 156, 18, 0.4);
}

.identity-status-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 5px 0 15px 0;
}

.identity-status-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  line-height: 1;
  margin: 0;
}

.area-label {
  min-width: 50px;
  font-size: 0.9rem;
  font-weight: 800;
  opacity: 0.8;
}

/* 1. THE CONTAINER (Clean & Simple) */
.table-scroll-container {
  width: 100%;
  overflow-x: auto;
  margin: 30px 0;
  border-radius: 8px;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

/* 1. THE TABLE GLOBAL FONT */
.briefing-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  /* This ensures it matches your headers and body exactly */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.2px; /* Makes modern fonts look tighter and more professional */
}

/* 2. THE HEADERS (Bold & Authoritative) */
.briefing-table th {
  background-color: #000000;
  color: #ffffff !important;
  text-align: left;
  padding: 18px 20px; /* Slightly taller for more "air" */
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 900; /* Max thickness for the black bar */
  letter-spacing: 1.5px; /* High tracking for that "Audit Report" feel */
}

/* 3. THE DATA CELLS  */
.briefing-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #eeeeee;
  font-size: 1.2rem;
  color: #000000;
  line-height: 1.6;
  font-weight: 700;
}

/* The container */
.table-scroll-container {
  position: relative;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 25px; /* Extra space for the bar and text */
}

/* Force the scrollbar to be visible in Webkit (Chrome/Safari/iOS) */
.table-scroll-container::-webkit-scrollbar {
  height: 6px;
  display: block !important; /* Forces existence */
}

.table-scroll-container::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, 0.15); /* Light grey track */
  border-radius: 10px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
  background: #888888; /* Solid grey thumb */
  border-radius: 10px;
}

/* The "Scroll Me" Label */
.scroll-indicator-text {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888888;
  text-align: left;
  margin-top: 5px; /* Pulls it into the padding area of the container */
  padding-bottom: 2rem;
  pointer-events: none;
}

/* 4. THE HIGHLIGHT ROW (The 7-9 Reports) */
.briefing-table .highlight-row td {
  color: #e40303 !important;
  font-weight: 900;
  font-size: 1.3rem; /* Makes the "False" data jump out physically */
}

.briefing-table .highlight-row td {
  color: #e40303 !important; /* Pride Flag Red */
  font-weight: 700;
  border-top: 2px solid #e40303;
  border-bottom: 3px solid #e40303;
}

/* Custom Accordion Border System */
.news-accordion.status-border {
  border-left: 6px solid #ccc;
  border-top: 6px solid #ccc;
  padding-left: 15px;
  margin-bottom: 25px;
  display: block;
}

/* Status-Specific Colors */
.news-accordion.status-border.status-amber {
  border-left-color: #f39c12; /* Amber */
  border-top-color: #f39c12;
}

.news-accordion.status-border.status-red {
  border-left-color: #e74c3c; /* Red */
}

.news-accordion.status-border.status-green {
  border-left-color: #2ecc71; /* Green */
}

.news-accordion.status-border summary {
  cursor: pointer;
  outline: none;
}

.video-version {
  background-color: #ff0000;
  color: #ffffff !important;
  padding: 8px 15px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.video-version:hover {
  color: #ffffff;
  transform: scale(1.05);
}

.yt-logo {
  background: #ff0000;
  color: white;
  width: 28px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem; /* Keeps the triangle small */
  font-family: sans-serif;
  padding-left: 2px; /* Centers the triangle optically */
}

.medical-btn {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #0047ab; /* Professional Medical Blue */
  border: 2px solid #0047ab;
  border-radius: 50px;
  padding: 10px 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 12px;
}

/* The Green Cross */
.medical-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  background: linear-gradient(90deg, transparent 38%, #00ff00 38%, #00ff00 62%, transparent 62%), linear-gradient(0deg, transparent 38%, #00ff00 38%, #00ff00 62%, transparent 62%);
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
}

/* Hover Effects */
.medical-btn:hover {
  background-color: #f0f7ff;
  border-color: #012ef5;
  color: #012ef5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.medical-btn:active {
  transform: translateY(0);
}

/* Justice Button Styling */
.justice-btn {
  background: #2c3e50; /* Deep Navy/Legal Blue */
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid #34495e;
  transition: all 0.2s ease;
}

.justice-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.justice-btn i {
  font-size: 0.8rem;
}

/* Legal Stats Grid */
.legal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 25px 0;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-label {
  font-size: 0.65rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}

.stat-value small {
  font-size: 0.7rem;
  color: #aaa;
  font-weight: 400;
}

/* Tablet Responsiveness for the Legal Grid */
@media (max-width: 768px) {
  .legal-stats-grid {
    grid-template-columns: 1fr; /* Stack on small mobile if needed */
    gap: 20px;
  }
}

.identity-status-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.identity-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* This is the secret sauce */
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 6px;
}

.area-label {
  font-weight: 800;
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  min-width: 60px; /* Keeps labels aligned */
}

.id-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: #000000;

  white-space: nowrap; /* Prevents "Bars" and its "Dot" from splitting */
}

.article-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
}

.article-header-row .main-title {
  margin: 0 !important;
  font-size: 1.6rem;
}

.article-header-row .badge-container {
  margin: 0 !important;
}

/* 2. Fix the Container */
.master-grid-container {
  width: 100%;
  max-width: 1400px;
  padding: 20px;
}

/* Lightbox Overlay Styles */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.lightbox-overlay:target {
  display: flex;
}

.lightbox-overlay img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: zoom-out;
}

/* Target the content specifically when the parent is [open] */
.news-accordion[open] .news-content-expanded {
  animation: reveal-content 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Article Image Container - Global Styling */
.article-image-container {
  max-width: 850px; /* Prevents images from overwhelming the text */
  margin: 2.5rem auto; /* Creates that clean empty line break top/bottom */
  padding: 0 1rem; /* Prevents touching screen edges on mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-main-img {
  width: 100%; /* Fills the container width */
  height: auto; /* Maintains aspect ratio */
  border-radius: 4px; /* Softens the look to match your glass-cards */
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4); /* Adds depth */
  display: block;
  object-fit: cover;
}

.image-caption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #666; /* Subtle text for the caption */
  font-style: italic;
  text-align: center;
  max-width: 90%; /* Keeps long captions from looking blocky */
}

.ai-warning-banner {
  width: 100%;
  background: rgba(255, 235, 59, 0.08);
  border: 1px solid rgba(255, 235, 59, 0.3);
  border-left: 4px solid #ffeb3b;
  padding: 12px 15px;
  margin-top: 15px;
  border-radius: 4px;
  box-sizing: border-box; /* Crucial for padding */
}

.banner-label {
  display: block; /* This is the "magic" line */
  color: #ffeb3b;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ai-warning-banner p {
  margin: 0;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.8;
  opacity: 0.9;
}
/* --- MOBILE & TABLET BACKGROUND --- */

@media only screen and (min-width: 481px) {
  .scroll-indicator-text {
    display: none;
  }
}

@media (max-width: 480px) {
  .article-header-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #info-display-area {
    width: 94%; /* Gives a small 3% gutter on each side */
    margin: 10px auto;
    padding: 0;
    gap: 0;
  }

  /* 2. THE ACCORDION BOX: Remove any heavy margins that eat up space */
  .news-accordion {
    margin: 10px auto !important;
    border-left-width: 4px !important;
  }

  /* 3. THE CLICKABLE HEADER: Adjust padding so the title isn't cramped */
  .news-accordion summary {
    padding: 18px 20px; /* Reduced from 25px 30px */
  }

  .news-accordion h3 {
    font-size: 1.1rem; /* Slightly smaller title to prevent awkward wrapping */
  }

  /* 4. THE INSIDE TEXT: The "Breathability" fix */
  .news-content-expanded {
    padding: 10px 10px; /* Reduced from 40px to give the text more horizontal room */
  }

  .news-content-expanded p {
    font-size: 1.05rem; /* Slightly smaller font for better line-breaks on mobile */
    margin-bottom: 1.5rem !important; /* Slightly less vertical gap between paragraphs */
    line-height: 1.5;
  }

  /* 5. TABLES & QUOTES: Ensure they don't bleed out */
  .article-quote {
    padding: 20px;
    margin: 20px 0;
  }

  .table-scroll-container {
    margin: 15px 0;
  }

  .top-utility-stack {
    margin: 0 auto !important;
  }

  .identity-status-bar {
    justify-content: flex-start;
    gap: 10px 15px; /* More vertical gap when wrapped */
  }

  .area-label {
    width: 100%; /* Forces the label (VIBE/CITY) onto its own line for clarity */
    margin-bottom: 2px;
  }
}