/* ====== BASIC RESETS & BASE STYLES ====== */

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

body {
  color: #343a40; /* Darker, more readable text */
  font-family: "Atkinson Hyperlegible", sans-serif;
  line-height: 1.5;
  font-size: 18px;
  margin: 0;
  padding: 0;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.content-wrapper p a,
.content-wrapper li a {
  color: #495057; /* Bootstrap-like blue */
  text-decoration: underline;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; /* Smooth transitions */
}

.content-wrapper p a:hover,
.content-wrapper li a:hover {
  background-color: rgb(249, 255, 161);
}

img {
  max-width: 100%;
}

/*
style for the menu
*/

.main-layout {
  display: flex; /* Enable Flexbox */
  flex-direction: row; /* Side-by-side (horizontal) layout */
  min-height: 100vh; /* So it can fill the viewport height if desired */
  margin: 0;
  padding: 0;
}

/* The TOC sidebar */
.sidebar-toc {
  /* Flex behavior: fix the width or let it shrink/widen as needed. */
  flex: 0 0 240px; /* fixed width of 240px */
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  background-color: #f9f9f9;

  /* Sticky: pinned to top, but only if there's space in the parent container */
  position: sticky;
  top: 0; /* Stick to the top of the viewport */
  align-self: flex-start; /* So it doesn't stretch if content is tall */

  /* Make it scrollable if it's taller than the viewport */
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;

  padding: 1rem;
}

/* The main content wrapper */
.content-wrapper {
  flex: 1; /* Take up remaining space */
  display: flex;
  flex-direction: column; /* If you have multiple sections stacked, e.g. cover, container, etc. */
}

/* Optional styling for the nav list in the sidebar */
.sidebar-toc nav ul {
  list-style-type: disc;
  margin: 0;
  padding: 0;
  padding-left: 1rem;
}
.sidebar-toc nav li {
  margin: 0.5em 0;
}
.sidebar-toc nav a {
  text-decoration: none;
  color: #333;
}
.sidebar-toc nav a:hover {
  color: #000;
}

/*********************************************************
  COVER PAGE STYLING
**********************************************************/
.cover-page {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem;
}

.cover-header {
  text-align: center;
  border: none;
  background-color: transparent;
  padding: 0;
  margin-bottom: 2rem;
}

.cover-header img {
  height: 60px;
  margin: 0;
}

.cover-content {
  text-align: center;
  margin-top: 2rem;
}

.cover-title {
  font-size: 3rem; /* large, bold, modern */
  font-weight: 700;
  margin-bottom: 1rem;
  color: #212529;
}

.cover-date {
  font-size: 1.2rem;
  color: #6c757d;
}

/* If you want truly no margins and a "full bleed" look in PDF/print:
     .cover-bottom-block {
       bottom: 0;
       border-radius: 0; 
       (or only top corners if you still want them)
     }
     ...but remember that actual printers/PDF viewers often impose margins.
  */

/* Make sure the following ensures the container starts on the next page: */
.cover-page ~ .container {
  margin-top: 0;
}

/* ====== HEADER ====== */
.site-header {
  text-align: center;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6; /* Lighter border */
  background-color: #fff;
}

.site-header img {
  height: 50px;
  margin: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

/* ====== CONTAINER / LAYOUT ====== */
.container {
  max-width: 960px; /* Wider container */
  margin: 4rem auto;
  padding: 0 3rem;
}

/* ====== TITLES & HEADINGS ====== */
h1.report-title {
  font-size: 2.5rem; /* Larger title */
  font-weight: 700;
  color: #495057; /* Darker title */
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.report-date {
  margin-bottom: 1.75rem;
  color: #6c757d; /* Lighter date color */
}

.report-date strong {
  font-weight: 600;
}

.main-content {
  margin: 4rem 0;
}

.content-wrapper blockquote {
  border-left: 4px solid #dee2e6;
  margin: 1.5rem 0;
  padding: 1rem 1rem;
  color: #6c757d;
  background-color: #f8f9fa;
  font-style: italic;
  font-size: 0.9em;
}

.content-wrapper blockquote p {
  margin: 0;
}

h2 {
  font-size: 1.75rem; /* Larger H2 */
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  color: #495057; /* Darker H2 color */
  border-bottom: 2px solid #dee2e6; /* Underline instead of background */
  padding-bottom: 0.75rem;
}

h3 {
  font-size: 1.3rem; /* Larger H3 */
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  color: #495057; /* Darker H3 color */
}

h4 {
  font-size: 1.15rem; /* Larger H4 */
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #495057; /* Darker H4 color */
}

h5 {
  font-size: 1rem; /* Larger H5 */
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #495057; /* Darker H5 color */
}

/* ====== LIST STYLES ====== */
ul,
ol {
  margin: 1rem 0 1rem 2rem;
}

li {
  margin-bottom: 0.5rem;
}

/* ====== FINDINGS OVERVIEW TABLE ====== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin-bottom: 1.5rem;
  /* Softer shadow or none */
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
  overflow: hidden;
  /*border-radius: 8px;*/
}

table thead {
  background-color: #f8f9fa; /* light gray-ish */
  color: #495057; /* darker gray text */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* subtle letter spacing for a modern feel */
}

table th,
table td {
  padding: 0.75rem 1rem;
  border: none;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

table th {
  font-weight: 600;
}

table tbody tr:hover {
  background-color: #f5f5f5; /* still keep a row hover */
}

/* Color-coded severity classes (if severities are shown) */
.severity-0 {
  background-color: #f9f9f9; /* very light gray */
  color: #333; /* dark gray text */
  font-weight: 600;
}

.severity-1 {
  background-color: #ececec; /* light gray */
  color: #333;
  font-weight: 600;
}

.severity-2 {
  background-color: #e0e0e0; /* medium-light gray */
  color: #333;
  font-weight: 600;
}

.severity-3 {
  background-color: #d5d5d5; /* medium gray */
  color: #333;
  font-weight: 600;
}

/* ====== DETAILED FINDINGS SECTION ====== */

.finding {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
}

.finding-header {
  margin-bottom: 1rem;
}

.finding-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}

.finding-meta {
  font-size: 1rem;
  color: #6c757d;
  display: flex;
  gap: 1.5rem;
}

.finding-meta span {
  display: inline-flex;
  align-items: center;
}

.finding-meta label {
  font-weight: 600;
  margin-right: 0.5rem;
}

/* ====== CODE BLOCKS ====== */
.highlight,
.codehilite {
  background-color: #272822; /* Monokai BG */
  color: #f8f8f2; /* Monokai FG */
  border-radius: 8px; /* Rounded corners for code blocks */
  padding: 1.25rem; /* More padding */
  overflow-x: auto;
  margin: 1.25rem 0;
  overflow-wrap: break-word;
}

.highlight pre,
.codehilite pre {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 10px;
  overflow-wrap: break-word;
}

pre {
  break-inside: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

pre[class*="language-"],
code[class*="language-"] {
  white-space: pre-wrap; /* Wrap text in all modern browsers */
  word-wrap: break-word; /* For older browsers (IE) */
  overflow-wrap: break-word; /* For modern browsers */
  /* (optional) remove horizontal scrolling if you prefer auto wrap */
  overflow-x: auto;
  font-size: 13px;
}

code:not(pre code) {
  font-size: 85%;
  background-color: rgba(175, 184, 193, 0.2);
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

/* ====== BACK LINK ====== */
.back-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-weight: 600;
  color: #007bff;
}

.back-link:hover {
  color: #0056b3;
}

/* ====== MOBILE RESPONSIVENESS ====== */

/* Hamburger menu button - hidden by default */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 40px;
  height: 40px;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #495057;
  margin: 5px auto;
  transition: all 0.3s;
}

/* Animate hamburger to X when active */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -5px);
}

/* Mobile-first approach - default styles work on mobile */
@media screen and (max-width: 1023px) {
  body {
    font-size: 16px;
  }

  /* Show hamburger button on mobile */
  .mobile-menu-toggle {
    display: block;
  }
  
  /* Reset flexbox layout */
  .main-layout {
    flex-direction: column;
  }
  
  /* Slide-out sidebar menu */
  .sidebar-toc {
    position: fixed;
    top: 0;
    right: -280px; /* Hidden off-screen to the right */
    width: 280px;
    height: 100vh;
    background-color: #f9f9f9;
    border-left: 1px solid #ccc;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  }
  
  /* Show sidebar when active */
  .sidebar-toc.active {
    right: 0;
  }
  
  /* Sidebar padding */
  .sidebar-toc nav {
    padding: 1rem;
    padding-top: 3rem; /* Space at top */
  }
  
  .sidebar-toc nav h2 {
    margin: 0 0 1rem 0;
    font-size: 16px;
  }
  
  /* Overlay background when menu is open */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  
  body.menu-open::before {
    opacity: 1;
    visibility: visible;
  }
  
  /* Container and content adjustments */
  .container {
    max-width: 100%;
    padding: 0 4rem;
    margin: 1rem auto;
  }
  
  .content-wrapper {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
  
  /* Fix cover page */
  .cover-page {
    padding: 1rem;
  }
  
  .cover-title {
    font-size: 2rem;
    word-break: break-word;
  }
  
  /* Scale down headings */
  h1.report-title {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Responsive findings table - convert to cards on mobile */
  .findings-overview-table-container {
    width: 100%;
  }
  
  /* Hide table headers on mobile */
  .findings-overview-table thead {
    display: none;
  }
  
  /* Convert table to card layout */
  .findings-overview-table {
    display: block;
    border: none;
    width: 100%;
  }
  
  .findings-overview-table tbody {
    display: block;
  }
  
  .findings-overview-table tr {
    display: block;
    margin-bottom: 1rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  
  .findings-overview-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    text-align: left;
  }
  
  /* Hide the ID field (first td) */
  .findings-overview-table td:nth-child(1) {
    display: none;
  }
  
  /* Hide the Component field (second td) */
  .findings-overview-table td:nth-child(2) {
    display: none;
  }
  
  /* Style the Name/Title field (third td) */
  .findings-overview-table td:nth-child(3) {
    font-weight: 500;
    padding: 0;
    font-size: 15px;
  }
  
  /* Make the link inside the third td cover the entire card */
  .findings-overview-table td:nth-child(3) a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
  }
  
  /* Stretch the link to cover the entire card using pseudo-element */
  .findings-overview-table td:nth-child(3) a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  
  /* Risk/Severity field styling as footer */
  .findings-overview-table td[class*="severity-"] {
    display: block;
    padding: 0.75rem;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    border-radius: 0;
    width: 100%;
  }
  
  /* Keep original severity colors for mobile footers */
  .findings-overview-table td.severity-0 {
    background-color: #f9f9f9;
    color: #333;
  }
  
  .findings-overview-table td.severity-1 {
    background-color: #ececec;
    color: #333;
  }
  
  .findings-overview-table td.severity-2 {
    background-color: #e0e0e0;
    color: #333;
  }
  
  .findings-overview-table td.severity-3 {
    background-color: #d5d5d5;
    color: #333;
  }
  
  /* Keep other table styles for non-findings tables */
  table:not(.findings-overview-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table:not(.findings-overview-table) th,
  table:not(.findings-overview-table) td {
    padding: 0.5rem;
    font-size: 12px;
    white-space: nowrap;
  }
  
  /* Stack finding metadata on mobile */
  .finding-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  /* Code blocks */
  pre[class*="language-"],
  code[class*="language-"] {
    font-size: 11px;
  }
  
  .highlight,
  .codehilite {
    padding: 0.75rem;
    margin: 1rem -0.5rem; /* Negative margin for full-width feel */
  }
  
  /* Images responsive */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Lists */
  ul, ol {
    margin-left: 1.25rem;
  }
  
  /* Blockquotes */
  .content-wrapper blockquote {
    margin: 1rem 0;
    padding: 0.75rem;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  .cover-title {
    font-size: 1.5rem;
  }
  
  h1.report-title {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  h3 {
    font-size: 1.15rem;
  }
  
  .container {
    padding: 0 2rem;
  }
  
  /* Findings table cards on small screens */
  .findings-overview-table td:nth-child(3) {
    font-size: 14px;
  }
  
  .findings-overview-table td:nth-child(3) a {
    padding: 0.75rem;
  }
  
  /* Risk/Severity footer smaller */
  .findings-overview-table td[class*="severity-"] {
    font-size: 12px;
    padding: 0.5rem;
  }
  
  /* Other tables */
  table:not(.findings-overview-table) th,
  table:not(.findings-overview-table) td {
    padding: 0.35rem;
    font-size: 11px;
  }
}

/* Print styles should not interfere with mobile */
@media screen {
  .no-print {
    /* Keep visible on screen, only hide for print */
  }
}

/* ====== IMAGE MODAL ====== */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}

.image-modal.active {
  display: flex;
}

.image-modal-content-wrapper {
  position: relative;
  display: inline-block;
  max-width: 90vw;
  max-height: 85vh;
}

.image-modal-content {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  animation: zoom 0.3s;
  cursor: default;
}

@keyframes zoom {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.image-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s;
  font-size: 24px;
  color: #333;
  line-height: 1;
  font-weight: normal;
}

.image-modal-close:hover,
.image-modal-close:focus {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Make images clickable */
.content-wrapper img,
.finding img,
figure.report-figure img {
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.content-wrapper img:hover,
.finding img:hover,
figure.report-figure img:hover {
  opacity: 0.9;
}

/* Responsive modal adjustments */
@media screen and (max-width: 768px) {
  .image-modal-content-wrapper {
    max-width: 95vw;
    max-height: 80vh;
  }

  .image-modal-content {
    max-height: 80vh;
  }

  .image-modal-close {
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}