/* ============================================================
   Collapsible explanations — Transworld Adventures
   Each safari / tour / concept shows only its name or topic.
   The explanation is tucked behind a dropdown arrow and
   appears on click. Collapsed by default to keep pages short
   and the visible headings large and readable.
   ============================================================ */

/* The clickable topic line ------------------------------------ */
.exp-summary {
  position: relative;
  cursor: pointer;
  padding-right: 44px;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease;
}
.exp-summary:hover { color: var(--gold, #d4a017); }
.exp-summary:focus-visible {
  outline: 2px solid var(--gold, #d4a017);
  outline-offset: 4px;
  border-radius: 8px;
}

/* The dropdown arrow ------------------------------------------- */
.exp-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(212, 160, 23, 0.16);
  color: #b8860b;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.3s ease, background 0.2s ease;
  flex: 0 0 auto;
}
.exp-summary:hover .exp-arrow { background: rgba(212, 160, 23, 0.30); }
.exp-summary.is-open .exp-arrow { transform: translateY(-50%) rotate(180deg); }

/* The hidden explanation -------------------------------------- */
.exp-panel { display: none; }
.exp-panel.is-open {
  display: block;
  animation: exp-fade 0.25s ease;
}
@keyframes exp-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Larger, more readable topic headings (the words left visible) */
.exp-summary { font-weight: 700; }

.learn-body  h3.exp-summary,
.tour-card-body h3.exp-summary,
.ride-body   h3.exp-summary { font-size: 24px; }

.day-body    h4.exp-summary,
.list-card   h4.exp-summary,
.panel       h3.exp-summary { font-size: 22px; }

.why-grid   .card h3.exp-summary,
.trust-grid .card h3.exp-summary,
.values-grid .card h4.exp-summary { font-size: 22px; }

article.content h2.exp-summary { font-size: clamp(22px, 3vw, 30px); }
article.content h2.exp-summary,
article.content h3.exp-summary { margin-bottom: 0; padding-top: 6px; }
article.content .exp-panel { margin-top: 12px; }

/* Image-banner safari cards: arrow sits in the top-right corner */
.feature-top.exp-summary { padding-right: 28px; }
.feature-top h3 { font-size: 28px; }
.feature-top .exp-arrow {
  top: 18px;
  right: 18px;
  transform: none;
  background: rgba(255, 255, 255, 0.92);
  color: #0f3d34;
}
.feature-top.exp-summary.is-open .exp-arrow { transform: rotate(180deg); }