/* XERF Section 2 – Tagline + Table (no image) */
/* Stand‑alone file to avoid touching Section 1 */

:root{
  --x2-brand:#8B4A4A;   /* maroon from comp */
  --x2-dark:#1C1C1C;
  --x2-text:#2A2A2A;
  --x2-soft:#FAF7F2;    /* warm tint from comp */
  --x2-colkey:#F1E3E3;  /* light brand for first column */
  --x2-max:1400px;
}

/* Section wrapper */
.x2-section{
  background:#fff;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 80px);
}

/* Centered container */
.x2-inner{
  max-width: var(--x2-max);
  margin-inline: auto;
}

/* Headline */
.x2-title{
  margin: 0 0 10px;
  text-align:center;
  font-weight:700;
  line-height:1.2;
  color: var(--x2-dark);
  font-size: clamp(28px, 4.5vw, 56px);
}
.x2-title .x2-highlight{ color: var(--x2-brand); }

/* Subline */
.x2-subline{
  margin:0 0 22px;
  text-align:center;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--x2-text);
  letter-spacing:.015em;
}

/* Table */
.x2-table{ margin: 0; }
.x2-table table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  border-radius:12px;
  overflow:hidden;
}
.x2-table thead th{
  background: var(--x2-brand);
  color:#fff;
  text-align:left;
  font-weight:700;
  padding:14px 16px;
  border:0;
}
.x2-table tbody td{
  padding:14px 16px;
  border-top:1px solid #eee;
  vertical-align:top;
  color: var(--x2-text);
  line-height:1.65;
}
.x2-table tbody tr:first-child td{ border-top:0; }

/* Key column — tinted background + fixed-ish width */
.x2-table tbody td:first-child,
.x2-table thead th:first-child{
  width: clamp(160px, 28%, 320px);
}
.x2-table tbody td:first-child{
  background: var(--x2-colkey);
  color:#6D3838;
  font-weight:600;
  border-right:1px solid #ead3d3;
}

/* Zebra for value column to echo warm tone */
.x2-table tbody tr:nth-child(even) td:last-child{
  background: var(--x2-soft);
}

/* Tablet optimization (783px - 1023px) */
@media (max-width: 1023px) and (min-width: 783px){
  /* Adjust column ratio for better readability on tablet */
  .x2-table tbody td:first-child,
  .x2-table thead th:first-child{
    width: 35%;
  }

  .x2-table thead th{
    padding: 16px 18px;
    font-size: 15px;
  }

  .x2-table tbody td{
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.7;
  }
}

/* Mobile: side-by-side card layout */
@media (max-width: 782px){
  .x2-section{ padding: clamp(28px, 5vw, 48px) 20px; }

  .x2-table thead{
    position:absolute;
    left:-9999px;
    width:1px;height:1px;overflow:hidden;
  }

  .x2-table table{
    border-radius:0; box-shadow:none;
  }

  /* Card-style rows with side-by-side layout */
  .x2-table tbody tr{
    display:flex;
    margin:0 0 16px;
    border:1px solid #e5e5e5;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    background: #fff;
  }

  .x2-table tbody tr:last-child{
    margin-bottom: 0;
  }

  .x2-table tbody td{
    border:0;
    padding:16px 18px;
    line-height: 1.75;
  }

  /* Left column - header/label */
  .x2-table tbody td:first-child{
    background: var(--x2-soft);
    color: var(--x2-text);
    font-weight:700;
    border-right:1px solid #e5e5e5;
    padding: 18px 16px;
    font-size: 14px;
    width: 35%;
    min-width: 120px;
    display: flex;
    align-items: center;
  }

  /* Right column - content */
  .x2-table tbody td:last-child{
    padding: 18px 16px;
    font-size: 14px;
    line-height: 1.8;
    background: #fff;
    width: 65%;
    flex: 1;
  }

  /* Zebra striping - warm tone for EVEN rows */
  .x2-table tbody tr:nth-child(even) td:last-child{
    background: #fafafa;
  }
}

/* ------------------- Overrides (alignment) ------------------- */
/* Left-align body copy under the “What is XERF” section while keeping headings centered. */
.xl-desc-text{ text-align:left !important; }

/* For Section 2 specifically: ensure generic paragraphs are left-aligned,
   but keep the one-line subline centered. */
.x2-section .wp-block-paragraph:not(.x2-subline),
.x2-section p:not(.x2-subline){
  text-align:left !important;
}