/* ============================================
   Minimal Accordion – Cypress Style (SHADED & SLIM)
   Scoped to: table.ou-accordion--minimal
============================================ */

/* Base container */
table.ou-accordion--minimal {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1.5rem 0;
  table-layout: fixed;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 0;
}

/* Screen reader only caption */
table.ou-accordion--minimal thead { display: none; }
table.ou-accordion--minimal caption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Neutralize defaults ONLY for the top-level accordion rows */
table.ou-accordion--minimal > tbody > tr,
table.ou-accordion--minimal > tbody > tr > td {
  background: transparent !important;
  display: block;
  padding: 0;
  border: 0;
}

/* Divider lines for the accordion tabs */
table.ou-accordion--minimal > tbody > tr { 
  border-bottom: 1px solid #e5ebf2 !important; 
}

/* Ensure the last tab has the bottom line you requested */
table.ou-accordion--minimal > tbody > tr:last-child {
  border-bottom: 1px solid #e5ebf2 !important;
}

/* ============================================
   NESTED TABLE PROTECTION
============================================ */

table.ou-accordion--minimal .accordion-content-inner table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
  border: 1px solid #ccc !important;
}

table.ou-accordion--minimal .accordion-content-inner tr {
  display: table-row !important;
  border-bottom: 1px solid #ccc !important;
}

table.ou-accordion--minimal .accordion-content-inner td {
  display: table-cell !important;
  padding: 8px !important;
  border: 1px solid #ccc !important;
  background: inherit !important;
}

/* ============================================
   Accordion Header (Slim Design)
============================================ */

table.ou-accordion--minimal .accordion-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease;
}

table.ou-accordion--minimal tr.is-open .accordion-header {
  background-color: rgba(0, 73, 136, 0.12) !important;
  border-bottom: 1px solid #e5ebf2 !important;
}

table.ou-accordion--minimal .accordion-header:hover {
  background-color: rgba(0, 73, 136, 0.08) !important;
}

table.ou-accordion--minimal .accordion-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 400; 
  line-height: 1.25;
  color: #004988;
  flex: 1 1 auto;
}

table.ou-accordion--minimal .accordion-icon {
  margin-left: auto;
  font-size: 1.3rem; 
  line-height: 1;
  color: #004988;
  flex-shrink: 0;
  min-width: 1.3rem;
  text-align: center;
}

/* ============================================
   Content Area (FIXED FOR TOGGLING)
============================================ */

table.ou-accordion--minimal .accordion-content {
  overflow: hidden;
  max-height: 0;
  /* Do not use display: block !important here, let JS handle it */
  transition: max-height 0.3s ease;
}

table.ou-accordion--minimal .accordion-content-inner {
  /* This creates the extra padding you requested */
  padding: 2rem 1.25rem 1.5rem !important;
  color: #000;
}

/* ============================================
   Editor Visibility & Fixes
============================================ */
.mce-content-body table[data-snippet="ou-accordion-minimal"] {
    border: 2px dashed #ccc !important;
}

.mce-content-body table.ou-accordion--minimal td[data-name="content"] table {
    display: table !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
}

.mce-content-body table.ou-accordion--minimal td[data-name="content"] table tr {
    display: table-row !important;
}

.mce-content-body table.ou-accordion--minimal td[data-name="content"] table td {
    display: table-cell !important;
    border: 1px solid #ccc !important;
    padding: 5px !important;
}