/**
 * @file
 * Page builder (Basic page "Page sections") components.
 *
 * Uses the site's design tokens (green #1B8354, greys, 12px radii) and only
 * logical CSS properties so every component works in Arabic (RTL) and
 * English (LTR) without overrides.
 */

/* ── Layout ────────────────────────────────────────────────────────────── */
.pb-sections {
  padding-block: 2.5rem 4rem;
}

.pb-sections__item + .pb-sections__item {
  margin-block-start: 3rem;
}

.pb-section__header {
  margin-block-end: 1.25rem;
}

.pb-section__header .SectionTitle {
  margin: 0;
  color: #161616;
}

.pb-section__header .SectionDesc {
  margin: 0.5rem 0 0;
  color: #384250;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 62rem;
}

.pb-section__action {
  margin: 1.25rem 0 0;
}

/* ── Rich text ─────────────────────────────────────────────────────────── */
.pb-prose {
  color: #1f2a37;
  font-size: 1.0625rem;
  line-height: 1.9;
  max-width: 62rem;
}

.pb-prose > :first-child,
.pb-prose .field > :first-child,
.pb-prose .text-formatted > :first-child {
  margin-block-start: 0;
}

.pb-prose > :last-child,
.pb-prose .text-formatted > :last-child {
  margin-block-end: 0;
}

.pb-prose p {
  margin-block: 0 1rem;
}

.pb-prose h2,
.pb-prose h3,
.pb-prose h4 {
  color: #161616;
  font-weight: 700;
  line-height: 1.5;
  margin-block: 1.75rem 0.75rem;
}

.pb-prose h2 { font-size: 1.5rem; }
.pb-prose h3 { font-size: 1.25rem; }
.pb-prose h4 { font-size: 1.125rem; }

.pb-prose ul,
.pb-prose ol {
  margin-block: 0 1rem;
  padding-inline-start: 1.5rem;
}

.pb-prose li {
  margin-block-end: 0.4rem;
}

.pb-prose ul li::marker {
  color: #1B8354;
}

.pb-prose ol li::marker {
  color: #1B8354;
  font-weight: 700;
}

.pb-prose a {
  color: #1B8354;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pb-prose a:hover {
  color: #145C3A;
}

.pb-prose blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: #f3fcf6;
  border-inline-start: 4px solid #1B8354;
  border-radius: 0.5rem;
  color: #1f2a37;
}

.pb-prose blockquote > :last-child {
  margin-block-end: 0;
}

/* ── Image with text ───────────────────────────────────────────────────── */
.pb-media__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}

.pb-media__title {
  margin-block-end: 0.75rem;
}

/* ── Icon cards ────────────────────────────────────────────────────────── */
.pb-card {
  border: 1px solid #E5E7EB;
}

.pb-card .FeaturedIcon i,
.pb-box .FeaturedIcon i {
  color: #1B8354;
  font-size: 1.5rem;
  line-height: 1;
}

.pb-card .CardTitle {
  margin-block-end: 0.5rem;
}

.pb-card__text {
  color: #384250;
  font-size: 0.95rem;
  line-height: 1.7;
}

.pb-card__text p {
  margin: 0 0 0.5rem;
}

.pb-card__text ul,
.pb-card__text ol {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.pb-steps .steps-list {
  max-width: 62rem;
}

/* The tick sits at the start of the line: right in Arabic, left in English. */
.pb-steps .steps-list .step {
  padding-inline-end: 0;
  padding-inline-start: 40px;
}

.pb-steps .steps-list .step::before {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* ── Lists (bullets, numbers, check marks) ─────────────────────────────── */
.pb-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: 1fr;
  counter-reset: pb-item;
}

.pb-list__items li {
  position: relative;
  padding-inline-start: 2rem;
  line-height: 1.7;
  color: #1F2A37;
  counter-increment: pb-item;
}

.pb-list__items li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #1B8354;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}

.pb-list__items--bullets li::before {
  content: "";
  top: 0.6rem;
  width: 0.55rem;
  height: 0.55rem;
  inset-inline-start: 0.45rem;
}

.pb-list__items--checks li::before {
  content: "\2713";
}

.pb-list__items--numbers li::before {
  content: counter(pb-item);
}

@media (min-width: 768px) {
  .pb-list__items--cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Boxes with a border ───────────────────────────────────────────────── */
.pb-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid #D2D6DB;
  border-radius: 1rem;
  background: #fff;
}

.pb-box--green {
  border: 2px solid #1B8354;
}

.pb-box--green-soft {
  border-color: #1B8354;
  background: #F3FCF6;
}

.pb-box--grey {
  background: #F9FAFB;
}

.pb-box__icon {
  flex: 0 0 auto;
}

.pb-box__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pb-box__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2A37;
}

/* ── Background colours ────────────────────────────────────────────────── */
.pb-bg {
  padding: 2.5rem;
  border-radius: 1rem;
}

.pb-bg--light-grey {
  background: #F3F4F6;
}

.pb-bg--light-green {
  background: #F3FCF6;
}

.pb-bg--green {
  background: #1B8354;
}

.pb-bg--dark {
  background: #1F2A37;
}

/* Dark backgrounds: light text, but cards and Q&A stay readable. */
.pb-bg--green,
.pb-bg--dark {
  color: #fff;
}

.pb-bg--green .SectionTitle,
.pb-bg--green .SectionDesc,
.pb-bg--green .pb-prose,
.pb-bg--green .pb-prose h2,
.pb-bg--green .pb-prose h3,
.pb-bg--green .pb-prose h4,
.pb-bg--green .pb-list__items li,
.pb-bg--green .steps-list .step,
.pb-bg--green .steps-list .step.completed,
.pb-bg--green .steps-list .step.current,
.pb-bg--dark .SectionTitle,
.pb-bg--dark .SectionDesc,
.pb-bg--dark .pb-prose,
.pb-bg--dark .pb-prose h2,
.pb-bg--dark .pb-prose h3,
.pb-bg--dark .pb-prose h4,
.pb-bg--dark .pb-list__items li,
.pb-bg--dark .steps-list .step,
.pb-bg--dark .steps-list .step.completed,
.pb-bg--dark .steps-list .step.current {
  color: #fff;
}

.pb-bg--green .pb-prose a,
.pb-bg--dark .pb-prose a {
  color: #fff;
  text-decoration: underline;
}

.pb-bg--green .pb-list__items li::before {
  background: #fff;
  color: #1B8354;
}

.pb-bg--green .steps-list .step::before {
  border-color: rgba(255, 255, 255, 0.6);
}

.pb-bg--green .steps-list .step.completed::before {
  background: #fff;
  border-color: #fff;
  color: #1B8354;
}

@media (max-width: 575.98px) {
  .pb-bg {
    padding: 1.5rem;
  }

  .pb-box {
    flex-direction: column;
  }
}

/* ── Questions and answers ─────────────────────────────────────────────── */
.pb-accordion__list {
  --bs-accordion-border-color: #E5E7EB;
  --bs-accordion-border-radius: 0.75rem;
  --bs-accordion-inner-border-radius: 0.75rem;
  --bs-accordion-active-bg: #f3fcf6;
  --bs-accordion-active-color: #145C3A;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25);
  max-width: 62rem;
}

.pb-accordion__list .accordion-item {
  margin-block-end: 0.75rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  overflow: hidden;
}

.pb-accordion__list .accordion-header {
  margin: 0;
}

.pb-accordion__list .accordion-button {
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: start;
  box-shadow: none;
}

/* ── Highlighted notice ────────────────────────────────────────────────── */
.pb-callout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 62rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid;
  border-inline-start-width: 5px;
  border-radius: 0.75rem;
}

.pb-callout__icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.pb-callout__body {
  flex: 1;
  min-width: 0;
}

.pb-callout__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #161616;
  margin-block-end: 0.35rem;
}

.pb-callout .pb-prose {
  font-size: 1rem;
  line-height: 1.8;
}

.pb-callout--info {
  background: #f3fcf6;
  border-color: #1B8354;
}
.pb-callout--info .pb-callout__icon { color: #1B8354; }

.pb-callout--important {
  background: #FFFBEB;
  border-color: #F59E0B;
}
.pb-callout--important .pb-callout__icon { color: #B45309; }

.pb-callout--warning {
  background: #FEF2F2;
  border-color: #D32F2F;
}
.pb-callout--warning .pb-callout__icon { color: #D32F2F; }

/* ── Downloads ─────────────────────────────────────────────────────────── */
.pb-files {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  max-width: 62rem;
  padding: 0;
}

.pb-file {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  color: #161616;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pb-file:hover,
.pb-file:focus-visible {
  border-color: #1B8354;
  box-shadow: 0 2px 8px rgba(27, 131, 84, 0.15);
  color: #161616;
}

.pb-file__icon {
  flex-shrink: 0;
  color: #1B8354;
  font-size: 1.75rem;
  line-height: 1;
}

.pb-file__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pb-file__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pb-file__meta {
  color: #6B7280;
  font-size: 0.875rem;
}

.pb-file__download {
  flex-shrink: 0;
  color: #6B7280;
  font-size: 1.125rem;
}

.pb-file:hover .pb-file__download {
  color: #1B8354;
}

/* ── Tabs (look comes from the existing .HorizontalTabList styles) ─────── */
.pb-tabs button.HorizontalTab {
  background: transparent;
  border: 0;
  font-family: inherit;
}

.pb-tabs button.HorizontalTab:focus-visible,
.pb-tabs__pane:focus-visible {
  outline: 2px solid #1B8354;
  outline-offset: 2px;
}

.pb-tabs__panes {
  padding-block-start: 2rem;
}

.pb-tabs__pane[hidden] {
  display: none;
}

@media (max-width: 575.98px) {
  .pb-callout,
  .pb-file {
    padding: 1rem;
  }

  .pb-sections {
    padding-block: 1.5rem 3rem;
  }

  .pb-sections__item + .pb-sections__item {
    margin-block-start: 2rem;
  }
}