/* ====== Overall container ====== */
.iiser-faq-wrapper {
  max-width: 1100px; /* Widened from 900px to 1100px */
  margin: 30px auto;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border: 1px solid #dcdcdc;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ====== Section headers ====== */
.faq-section-header {
  background: #004a99;
  color: #fff;
  padding: 16px 28px;
  font-size: 18px;    /* Larger header */
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid #003366;
}

/* ====== Each FAQ row ====== */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  margin: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

/* ====== Question line ====== */
.faq-question {
  padding: 18px 28px; /* Generous clickable area */
  font-size: 19px;    /* Increased from 17px */
  font-weight: 600;
  color: #2c3e50;     /* Dark blue-grey for professional look */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}

.faq-question:hover {
  background: #f4f8fc;
  color: #004a99;
}

/* ====== Open state ====== */
.faq-item[open] .faq-question {
  background: #eef6ff;
  color: #004a99;
  font-weight: 700;
  border-bottom: 1px solid #d0d7de;
}

/* ====== Answer box (High Emphasis) ====== */
.faq-answer {
  /* Wide padding for a clean look */
  padding: 26px 36px 30px 32px; 
  
  /* Font Upgrade */
  font-size: 18px;    /* Increased from 16px */
  line-height: 1.65;  /* Relaxed spacing for easy reading */
  
  /* Emphasis & Contrast */
  background: #fafafa; /* Very light grey to distinguish from question */
  color: #26821F;      /* Almost pure blue for maximum contrast */
  border-left: 5px solid #004a99; /* Thicker accent line */
}

/* Paragraph spacing */
.faq-answer p {
  margin-bottom: 18px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Lists inside answers */
.faq-answer ul, 
.faq-answer ol {
  margin: 12px 0 18px 24px;
}

.faq-answer li {
  margin-bottom: 10px;
}

/* Tables inside answers */
.faq-answer table {
  width: 80%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 16px; /* Larger table text */
}

.faq-answer th, 
.faq-answer td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  background: #fff; /* White cells stand out against grey answer bg */
}

.faq-answer th {
  background: #f1f1f1;
  font-weight: 700;
}

/* ====== Icons (Plus / Minus) ====== */
.faq-question::after {
  content: "+";
  font-size: 26px;
  font-weight: 300;
  color: #888;
  margin-left: 20px;
  line-height: 1;
}

.faq-item[open] .faq-question::after {
  content: "−";
  color: #004a99;
  font-weight: 700;
}

/* ====== Reset Defaults ====== */
details, summary {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
summary::-webkit-details-marker {
  display: none;
}
summary {
  list-style: none;
  outline: none;
}
/* 1. The Container: This becomes your only outer border */
.table-container {
    width: 80% !important;
    margin: 20px auto !important;
    overflow: hidden !important;       /* This clips the sharp table corners */
    border: 2px solid #444444 !important;   /* The only outer border */
    border-radius: 12px !important;    /* Adjust for desired roundness */
    display: block !important;
}

/* 2. The Table: Remove its own outer border to prevent "multiple corners" */
.table-container table {
    width: 100% !important;
    border-collapse: collapse !important; 
    border: none !important;             /* Remove the table's own border */
    margin: 0 !important;
}

/* 3. The Cells: Only use internal lines */
.table-container th, 
.table-container td {
    padding: 12px !important;
    border: 1px solid #ccc !important;   /* Light internal grid lines */
}

/* 4. Fix the "Double Line" at the edges */
/* Remove the border from the very top of headers (the container handles it) */
.table-container tr:first-child th {
    border-top: none !important;
}
/* Remove the border from the very bottom of the last row */
.table-container tr:last-child td {
    border-bottom: none !important;
}
/* Remove borders from the far left/right edges */
.table-container td:first-child, .table-container th:first-child {
    border-left: none !important;
}
.table-container td:last-child, .table-container th:last-child {
    border-right: none !important;
}