/* ==========================================================================
   FAQS  (/faqs/)
   ========================================================================== */

/* Full-width section: photo background with a 95% white overlay */
.page-section {
  position: relative;
  padding: 100px 20px;
  background: url("../../images/boatshedbremerton-backgrond2.jpg") center center / cover no-repeat;
}
.page-section::before { content: ""; position: absolute; inset: 0; background: var(--c-white); opacity: .95; }
.page-section > .inner { position: relative; }
@media (min-width: 1401px) { .page-section { background-attachment: fixed; } }

/* "line + text + line" divider heading */
.divider-title { display: flex; align-items: center; width: 100%; }
.divider-title::before, .divider-title::after {
  content: ""; display: block; flex-grow: 1;
  border-top: 1px solid var(--c-primary);
}
.divider-title h1, .divider-title h2 {
  flex-shrink: 0; margin: 0 10px; max-width: 95%;
  font-size: 3.5em; line-height: 1; color: var(--c-primary);
}

/* Bordered box hanging off the divider line; accordion centred at 80% */
.page-box {
  display: flex; flex-direction: column; gap: 20px; align-items: center;
  border: 1px solid var(--c-primary); border-top: 0;
  margin-top: -48px;
  padding: 75px 40px 50px;
}

/* Accordion (Elementor nested-accordion look-alike) */
.faq-accordion { width: 80%; max-width: 80%; }
.faq-accordion details { display: flex; flex-direction: column; position: relative; }
.faq-accordion details:not(:last-child) { margin-bottom: 20px; }
.faq-accordion summary {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 0 10px;
  padding: 0 3px 10px 3px;
  border-bottom: 1px solid var(--c-secondary);
  color: var(--c-secondary);
  cursor: pointer; list-style: none;
  transition: color .3s;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary .q {
  flex-grow: 1;
  font-family: var(--f-ui); font-weight: 600; font-size: 20px;
}
.faq-accordion summary .icon { display: flex; align-items: center; flex-shrink: 0; }
.faq-accordion summary .icon span { height: 20px; width: auto; }
.faq-accordion summary .icon svg { height: 20px; width: auto; fill: currentColor; }
.faq-accordion summary .icon .opened { display: none; }
.faq-accordion summary .icon .closed { display: flex; }
.faq-accordion details[open] > summary { margin-bottom: 10px; }
.faq-accordion details[open] > summary .icon .opened { display: flex; }
.faq-accordion details[open] > summary .icon .closed { display: none; }
.faq-accordion details:not([open]):hover > summary { color: var(--c-accent); }
.faq-accordion .answer { padding: 10px; }

@media (max-width: 1024px) {
  .page-section { padding: 50px 20px; }
  .page-box { padding: 50px 20px; }
}
@media (max-width: 767px) {
  .page-section { padding: 50px 10px; }
  .page-box { padding: 50px 10px; }
  .faq-accordion { width: 100%; max-width: 100%; }
}