/* ===== Sermon Archive — Base ===== */
.sermon-filter{
  display:grid;
  gap:8px;
  margin:16px 0;
  padding:12px;
  border:1px solid #e2e2e2;
  background:#fafafa;
  border-radius:8px;
}
.sermon-filter .sf-row{ display:flex; flex-wrap:wrap; gap:12px; }
.sermon-filter label{ display:flex; flex-direction:column; font-size:14px; gap:4px; }
.sermon-filter input[type='text'],
.sermon-filter select,
.sermon-filter input[type='date']{
  min-width:180px; padding:6px 8px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}
.sermon-filter .sf-check{ flex-direction:row; align-items:center; gap:6px; margin-left:8px; }
.sermon-filter .sf-btn{ padding:8px 12px; border-radius:999px; border:1px solid #ccc; background:#fff; cursor:pointer; font-size:14px; }
.sermon-filter .sf-link{ align-self:center; text-decoration:none; margin-left:4px; font-size:14px; }

.sermon-archive-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.sermon-archive-table th, .sermon-archive-table td{ border:1px solid #ddd; padding:8px; vertical-align:top; }
.sermon-archive-table th{ background:#f6f7f7; text-align:left; }

/* Buttons */
.btn{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:13px; line-height:1; border:1px solid transparent; text-decoration:none; white-space:nowrap; }
.btn-watch{ background:#e7f1ff; border-color:#b6d3ff; color:#0a58ca; text-decoration:none; }
.btn-audio{ background:#e8ffee; border-color:#b9f0c8; color:#13733f; text-decoration:none; }

/* Pagination */
.sf-pagination{ display:flex; gap:8px; justify-content:flex-end; margin:12px 0; flex-wrap:wrap; }
.sf-pagination a, .sf-pagination span{ padding:6px 10px; border:1px solid #ddd; border-radius:6px; text-decoration:none; font-size:14px; }

/* Readability (desktop & up) */
.sermon-archive-table tr:nth-child(even) td{ background:#fcfcfc; }
.sermon-archive-table td:nth-child(1){ white-space:nowrap; } /* Date */
.sermon-archive-table td:nth-child(2){
  max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Sticky header when table scrolls (desktop) */
.sermon-archive-table thead th{ position:sticky; top:0; z-index:1; }

/* ===== Tablets (≤ 900px) ===== */
@media (max-width: 900px){
  .sermon-filter input[type='text'],
  .sermon-filter select,
  .sermon-filter input[type='date']{ min-width:160px; }
  .sermon-archive-table td:nth-child(2){ max-width:320px; }
}

/* ===== Phones (≤ 640px): TABLE → CARDS ===== */
@media (max-width: 640px){
  /* Stack filter rows and enlarge inputs for touch */
  .sermon-filter .sf-row{ flex-direction:column; align-items:stretch; }
  .sermon-filter label, .sermon-filter .sf-check{ width:100%; margin-left:0; }
  .sermon-filter input[type='text'],
  .sermon-filter select,
  .sermon-filter input[type='date']{
    width:100%; min-width:0; font-size:16px; padding:10px 12px;
  }
  .sermon-filter .sf-btn, .sermon-filter .sf-link{ font-size:16px; padding:10px 14px; }

  /* Turn each table row into a “card” */
  .sermon-archive-table,
  .sermon-archive-table thead,
  .sermon-archive-table tbody,
  .sermon-archive-table th,
  .sermon-archive-table td,
  .sermon-archive-table tr{
    display:block; width:100%;
  }

  /* Hide header row on mobile */
  .sermon-archive-table thead{ display:none; }

  /* Row as card */
  .sermon-archive-table tr{
    margin-bottom:1rem; border:1px solid #ddd; border-radius:8px; background:#fff; padding:8px;
  }

  /* Cells stack with labels */
  .sermon-archive-table td{
    border:none; padding:6px 8px; position:relative; padding-left:50%;
    text-align:left; white-space:normal;
  }
  .sermon-archive-table td::before{
    position:absolute; top:6px; left:8px; width:45%; white-space:nowrap; font-weight:600; color:#555;
    content:attr(data-label);
  }

  /* Larger tap targets */
  .btn{ padding:8px 12px; font-size:14px; }

  /* Center pagination on mobile */
  .sf-pagination{ justify-content:center; gap:6px; }
  .sf-pagination a, .sf-pagination span{ padding:10px 12px; font-size:15px; }
}

/* ===== Optional Dark Mode ===== */
@media (prefers-color-scheme: dark){
  .sermon-filter{ background:#1f1f1f; border-color:#2a2a2a; }
  .sermon-filter input[type='text'],
  .sermon-filter select,
  .sermon-filter input[type='date']{ background:#111; border-color:#333; color:#eaeaea; }
  .sermon-archive-table th{ background:#222; }
  .sermon-archive-table th, .sermon-archive-table td{ border-color:#2a2a2a; color:#eaeaea; }
  .sf-pagination a, .sf-pagination span{ border-color:#2a2a2a; }
}

/* === Filter toolbar layout (Advanced • Filter • Reset) === */
.sf-row:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Advanced Filters toggle styled as a pill */
.sf-advanced{ display:inline-block; }
.sf-advanced summary{
  list-style:none;
  cursor:pointer;
  padding:8px 14px;
  font-weight:600;
  user-select:none;
  white-space:nowrap;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:999px;  /* pill */
}
.sf-advanced summary::-webkit-details-marker{ display:none; }
.sf-advanced summary::after{
  content:"▸";
  margin-left:6px;
  font-size:.8em;
  transition:transform .2s ease;
}
.sf-advanced[open] summary::after{ transform:rotate(90deg); }

/* Expanded advanced area */
.sf-advanced-inner{
  margin-top:6px;
  padding:10px 14px;
  display:flex;
  gap:12px;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:8px;
}
.sf-advanced .sf-check{ margin:0; }

/* Match the Filter button to the pill height */
.sf-btn{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  white-space:nowrap;
}

/* Reset (button) aligned with buttons */
.sf-link{
  text-decoration:none;
  color:#b71c1c;
  font-weight:500;
  white-space:nowrap;
  align-self:center;
  border:1px solid #ddd;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
}

/* Mobile: stack toolbar items full width */
@media (max-width:640px){
  .sf-row:last-child{
    flex-direction:column;
    align-items:stretch;
  }
  .sf-advanced,
  .sf-btn,
  .sf-link{
    width:100%;
    text-align:center;
    margin:4px 0;
  }
  .sf-advanced-inner{
    flex-direction:column;
    gap:8px;
  }
  .sf-advanced summary{
    padding:12px 14px;
    font-size:16px;
  }
}

/* === Button spacing & wrap for Filter / Reset === */
.sermon-filter .sf-row {
  flex-wrap: wrap;              /* allow wrapping on narrow screens */
}

.sermon-filter .sf-row > button,
.sermon-filter .sf-row > input[type="submit"],
.sermon-filter .sf-row > input[type="reset"] {
  margin: 0 12px 12px 0;        /* right & bottom gap */
  padding: 8px 14px;
  line-height: 1.2;
  height: auto;
  flex: 0 0 auto;               /* prevent squishing */
  min-width: 110px;             /* better tap target */
}

.sermon-filter .sf-row > button:last-child,
.sermon-filter .sf-row > input[type="submit"]:last-child,
.sermon-filter .sf-row > input[type="reset"]:last-child {
  margin-right: 0;
}

@media (max-width: 480px) {
  .sermon-filter .sf-row > button,
  .sermon-filter .sf-row > input[type="submit"],
  .sermon-filter .sf-row > input[type="reset"] {
    flex: 1 1 calc(50% - 6px);
  }
}

/* === Large-screen spacing fix for Filter/Reset === */
@media (min-width: 768px) {
  .sermon-filter .sf-row {
    column-gap: 16px !important;  /* ensure separation even if theme zeroes it */
    row-gap: 12px !important;
  }
  .sermon-filter .sf-row > button,
  .sermon-filter .sf-row > input[type="submit"],
  .sermon-filter .sf-row > input[type="reset"] {
    margin: 0 !important;          /* rely on flex gap for clean spacing */
    flex: 0 0 auto;
    min-width: 120px;
  }
  /* Extra guard: if Reset immediately follows Submit, add explicit margin */
  .sermon-filter .sf-row > input[type="submit"] + input[type="reset"],
  .sermon-filter .sf-row > button + input[type="reset"],
  .sermon-filter .sf-row > input[type="submit"] + button {
    margin-left: 12px !important;
  }
}

/* === Permanent fix: isolate action buttons in their own grid row === */
.sermon-filter .sf-actions{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 16px;
  align-items: center;
  justify-content: start;
  margin-top: 6px;
}
/* Neutralize theme button margins/floats inside actions */
.sermon-filter .sf-actions .sf-btn,
.sermon-filter .sf-actions .sf-link,
.sermon-filter .sf-actions button,
.sermon-filter .sf-actions input[type="submit"],
.sermon-filter .sf-actions input[type="button"],
.sermon-filter .sf-actions .button{
  margin: 0 !important;
  float: none !important;
  min-width: 120px;
}
/* Prevent overlap even if a theme sets weird line-heights or transforms */
.sermon-filter .sf-actions *{
  line-height: 1.2;
  transform: none;
}

/* On very wide screens keep the gap consistent; on narrow, allow wrap naturally */
@media (max-width: 640px){
  .sermon-filter .sf-actions{
    grid-auto-flow: row;
    justify-content: stretch;
  }
  .sermon-filter .sf-actions .sf-btn,
  .sermon-filter .sf-actions .sf-link{
    width: 100%;
  }
}