/*
 * Policies page template styles.
 * Dedicated CSS (not SASS) - linked directly from template-policies.php.
 * Uses the global CSS custom properties declared in header.php (:root).
 */

/* ------------------------------------------------------------------ */
/* Hero (mirrors the About template header)                            */
/* ------------------------------------------------------------------ */
#policies #hero {
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center left;
}

#policies #hero .hero-overlay {
  /* header height (90px) + padding * 2 (100px) */
  padding-top: 190px;
  padding-bottom: 100px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
}

#policies #hero h1 {
  margin-bottom: 0;
}

/* Account for the taller stacked header below 1280px */
@media (max-width: 1280px) {
  #policies #hero .hero-overlay {
    /* header (90px) + phone bar (50px) + padding * 2 (100px) */
    padding-top: 240px;
  }
}

@media (max-width: 767px) {
  #policies #hero {
    background-image: none;
    background-color: #efefef;
  }

  #policies #hero .hero-overlay {
    /* header (90px) + phone bar (50px) + padding (50px) */
    padding-top: 190px;
    padding-bottom: 50px;
  }
}

/* ------------------------------------------------------------------ */
/* Rich text content + CTA                                             */
/* ------------------------------------------------------------------ */
#policies #policies-content .content-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

#policies #policies-content .content-wrapper h2,
#policies #policies-content .content-wrapper h3,
#policies #policies-content .content-wrapper h4 {
  margin-top: 30px;
}

#policies #policies-content .content-wrapper h2:first-child,
#policies #policies-content .content-wrapper h3:first-child,
#policies #policies-content .content-wrapper h4:first-child {
  margin-top: 0;
}

/* The global reset strips list padding, so restore it for the rich text */
#policies #policies-content .content-wrapper ul,
#policies #policies-content .content-wrapper ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

#policies #policies-content .content-wrapper li {
  margin-bottom: 8px;
}

#policies #policies-content .content-wrapper a {
  text-decoration: underline;
}

#policies #policies-content .cta-wrapper {
  max-width: 900px;
  margin: 35px auto 0;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Accordion                                                           */
/* ------------------------------------------------------------------ */
#policies #policies-accordion {
  padding-top: 30px;
}

#policies .accordion {
  max-width: 900px;
  margin: 0 auto;
}

#policies .accordion-item {
  position: relative;
  border-bottom: 1px solid var(--lightGray);
}

/* Orange accent that slides in over the bottom border */
#policies .accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: var(--orange);
  transition: width 0.35s ease;
}

#policies .accordion-item:hover::after,
#policies .accordion-item.is-open::after {
  width: 100%;
}

#policies .accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

#policies .accordion-title {
  font-family: "avenir-next", "Figtree", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gray);
}

/* Small, thin plus / minus indicator */
#policies .accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

#policies .accordion-icon::before,
#policies .accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--lighterGray);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* horizontal bar */
#policies .accordion-icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

/* vertical bar (rotates out to form a minus when open) */
#policies .accordion-icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

#policies .accordion-item.is-open .accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Collapsible panel - max-height is driven by the inline JS */
#policies .accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#policies .accordion-panel-inner {
  padding: 0 0 28px;
}

#policies .accordion-panel-inner ul,
#policies .accordion-panel-inner ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

#policies .accordion-panel-inner li {
  margin-bottom: 8px;
}

#policies .accordion-panel-inner a {
  text-decoration: underline;
}

/* Per-item CTA - sits under the content, aligned left */
#policies .accordion-cta-wrapper {
  margin-top: 22px;
  text-align: left;
}

#policies .accordion-cta-wrapper .cta {
  text-decoration: none;
}

/* The panel is clipped (overflow: hidden) for the expand animation, so
   suppress the global scale-up hover that would otherwise get cut off */
#policies .accordion-cta-wrapper .cta:hover {
  transform: none;
}

@media (max-width: 499px) {
  #policies .accordion-trigger {
    padding: 18px 0;
    gap: 16px;
  }

  #policies .accordion-title {
    font-size: 1.05rem;
  }

  #policies .accordion-panel-inner {
    padding: 0 0 22px;
  }
}