/* JCKFRUT Wedding Platform — FAQ shortcode
   All visual values come from --wrmfaq-* custom properties set inline by
   PHP from the admin Styling tab. This file only defines structure/layout
   plus the collapse transitions, so a style change never needs a CSS
   deploy — it's just different variable values.
*/

.wrm-faq-wrap {
  max-width: var(--wrmfaq-container-max-width, 860px);
  margin: 0 auto;
  background: var(--wrmfaq-container-bg, transparent);
  padding: var(--wrmfaq-container-padding, 0);
  box-sizing: border-box;
}
.wrm-faq-wrap *, .wrm-faq-wrap *::before, .wrm-faq-wrap *::after { box-sizing: border-box; }

.wrm-faq-search-wrap { margin-bottom: 28px; display: flex; justify-content: var(--wrmfaq-search-align, center); }
.wrm-faq-search-inner { position: relative; width: min(var(--wrmfaq-search-width, 50vw), 100%); }
.wrm-faq-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  pointer-events: none;
  color: var(--wrmfaq-search-placeholder-color, #8a8580);
}
.wrm-faq-search-icon svg { width: 100%; height: 100%; display: block; }
.wrm-faq-search {
  width: 100%;
  padding: 13px 18px 13px 44px;
  font-size: var(--wrmfaq-search-font-size, 15px);
  background: var(--wrmfaq-search-bg, #eeebe6);
  color: var(--wrmfaq-search-color, #2d2a26);
  border: 1px solid var(--wrmfaq-search-border-color, transparent);
  border-radius: var(--wrmfaq-search-radius, 999px);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color var(--wrmfaq-transition-speed, .2s) ease;
}
/* Chrome/Safari render a native decoration + cancel button inside
   type="search" inputs that ignore normal box-model rules even with
   appearance:none on the input itself — these need their own reset. */
.wrm-faq-search::-webkit-search-decoration,
.wrm-faq-search::-webkit-search-cancel-button,
.wrm-faq-search::-webkit-search-results-button,
.wrm-faq-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.wrm-faq-search:hover { border-color: var(--wrmfaq-search-hover-border-color, #c9a84c); }
.wrm-faq-search:focus { border-color: var(--wrmfaq-accent-color, #c9a84c); }
.wrm-faq-search::placeholder { color: var(--wrmfaq-search-placeholder-color, #8a8580); }

.wrm-faq-sections { display: flex; flex-direction: column; gap: var(--wrmfaq-section-gap, 14px); }

.wrm-faq-section {
  border: var(--wrmfaq-section-border-width, 1px) solid var(--wrmfaq-section-border-color, #e2ddd3);
  border-radius: var(--wrmfaq-section-radius, 12px);
  overflow: hidden;
}

.wrm-faq-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--wrmfaq-section-bg, #f7f3ee);
  color: var(--wrmfaq-section-color, #2d2a26);
  font-family: var(--wrmfaq-section-font-family, inherit);
  font-size: var(--wrmfaq-section-font-size, 18px);
  font-weight: var(--wrmfaq-section-font-weight, 700);
  padding: var(--wrmfaq-section-padding, 16px 20px);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--wrmfaq-transition-speed, .2s) ease;
}
.wrm-faq-section-toggle:hover { background: var(--wrmfaq-section-hover-bg, #f0e9dd); color: var(--wrmfaq-section-hover-color, #2d2a26); }
.wrm-faq-section-toggle[aria-expanded="true"] {
  background: var(--wrmfaq-section-active-bg, var(--wrmfaq-section-hover-bg, #f0e9dd));
  color: var(--wrmfaq-section-active-color, var(--wrmfaq-section-color, #2d2a26));
}
.wrm-faq-section-toggle[aria-expanded="true"] .wrm-faq-chevron {
  color: var(--wrmfaq-section-active-icon-color, var(--wrmfaq-section-icon-color, #c9a84c));
}
.wrm-faq-section.is-open {
  border-color: var(--wrmfaq-section-active-border-color, var(--wrmfaq-section-border-color, #e2ddd3));
}

.wrm-faq-section-body { padding: var(--wrmfaq-item-gap, 8px); display: flex; flex-direction: column; gap: var(--wrmfaq-item-gap, 8px); }
.wrm-faq-section-body[hidden] { display: none; }

.wrm-faq-item { border-radius: var(--wrmfaq-question-radius, 8px); overflow: hidden; }

.wrm-faq-q-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--wrmfaq-question-bg, #fff);
  color: var(--wrmfaq-question-color, #2d2a26);
  font-family: var(--wrmfaq-question-font-family, inherit);
  font-size: var(--wrmfaq-question-font-size, 15px);
  font-weight: var(--wrmfaq-question-font-weight, 600);
  padding: var(--wrmfaq-question-padding, 14px 16px);
  border: 1px solid var(--wrmfaq-question-border-color, #eee9e0);
  border-radius: var(--wrmfaq-question-radius, 8px);
  cursor: pointer;
  text-align: left;
  transition: background var(--wrmfaq-transition-speed, .2s) ease;
}
.wrm-faq-q-toggle:hover { background: var(--wrmfaq-question-hover-bg, #fbf8f3); color: var(--wrmfaq-question-hover-color, #c9a84c); }
.wrm-faq-q-toggle[aria-expanded="true"] {
  background: var(--wrmfaq-question-active-bg, var(--wrmfaq-question-hover-bg, #fbf8f3));
  color: var(--wrmfaq-question-active-color, var(--wrmfaq-question-hover-color, #c9a84c));
  border-color: var(--wrmfaq-question-active-border-color, var(--wrmfaq-question-border-color, #eee9e0));
}
.wrm-faq-q-toggle[aria-expanded="true"] .wrm-faq-chevron {
  color: var(--wrmfaq-question-active-icon-color, var(--wrmfaq-question-icon-color, #8a8580));
}

.wrm-faq-a {
  padding: var(--wrmfaq-answer-padding, 0 16px 16px 16px);
  background: var(--wrmfaq-answer-bg, #fff);
  color: var(--wrmfaq-answer-color, #5a5650);
  font-family: var(--wrmfaq-answer-font-family, inherit);
  font-size: var(--wrmfaq-answer-font-size, 14px);
  line-height: var(--wrmfaq-answer-line-height, 1.7);
}
.wrm-faq-a[hidden] { display: none; }
.wrm-faq-a p { margin: 0 0 .9em; }
.wrm-faq-a p:last-child { margin-bottom: 0; }
.wrm-faq-a a { color: var(--wrmfaq-answer-link-color, #c9a84c); }

.wrm-faq-chevron {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--wrmfaq-transition-speed, .2s) ease;
  opacity: .7;
}
.wrm-faq-section-toggle .wrm-faq-chevron { color: var(--wrmfaq-section-icon-color, #c9a84c); }
.wrm-faq-q-toggle .wrm-faq-chevron { color: var(--wrmfaq-question-icon-color, #8a8580); }
.wrm-faq-section-toggle[aria-expanded="true"] .wrm-faq-chevron,
.wrm-faq-q-toggle[aria-expanded="true"] .wrm-faq-chevron { transform: rotate(225deg); }

.wrm-faq-item[hidden], .wrm-faq-section[hidden] { display: none; }

.wrm-faq-no-results {
  text-align: center;
  color: var(--wrmfaq-answer-color, #5a5650);
  padding: 30px 10px;
  font-size: var(--wrmfaq-question-font-size, 15px);
}
.wrm-faq-no-results[hidden] { display: none; }

mark.wrm-faq-highlight { background: var(--wrmfaq-accent-color, #c9a84c); color: #1a1a1a; border-radius: 3px; padding: 0 2px; }

/* Media attachments (images / video / PDFs / files) on an answer */
.wrm-faq-media { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wrm-faq-media-item { display: block; }
.wrm-faq-media-image img {
  max-width: 220px;
  max-height: 160px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}
.wrm-faq-media-video { max-width: 100%; border-radius: 8px; display: block; }
.wrm-faq-media-embed { width: 100%; max-width: 480px; }
.wrm-faq-media-embed iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: none; }
.wrm-faq-media-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--wrmfaq-question-border-color, #eee9e0);
  border-radius: 8px;
  color: var(--wrmfaq-answer-link-color, #c9a84c);
  font-size: 13px;
  text-decoration: none;
  transition: border-color var(--wrmfaq-transition-speed, .2s) ease;
}
.wrm-faq-media-file:hover { border-color: var(--wrmfaq-accent-color, #c9a84c); }
.wrm-faq-media-file svg { width: 16px; height: 16px; flex-shrink: 0; }