/* Hide Drupal system breadcrumb block (service pages use custom breadcrumb in template) */
nav[aria-labelledby="system-breadcrumb"] {
  display: none !important;
}

/* Prevent any CSS-generated separators on service page breadcrumb */
.service-breadcrumb li a::after,
.service-breadcrumb li a::before {
  display: none !important;
  content: none !important;
}

.field.field--name-field-paragraphs.field--type-entity-reference-revisions.field--label-above .field__label{
    display: none;
}

/* Hide all Drupal system messages globally */
.messages,
.messages--status,
.messages--warning,
.messages--error,
.messages__title,
.messages__list {
  display: none !important;
}

/* Keep Drupal radio groups inline: legend + options on one row. */
fieldset.form-type-radios,
fieldset.js-form-type-radios {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

fieldset.form-type-radios > legend,
fieldset.js-form-type-radios > legend {
  float: none;
  width: auto;
  margin: 0;
}

fieldset.form-type-radios > .fieldset-wrapper,
fieldset.js-form-type-radios > .fieldset-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}

fieldset.form-type-radios .form-item,
fieldset.js-form-type-radios .form-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

fieldset.form-type-radios .form-item label,
fieldset.js-form-type-radios .form-item label {
  margin: 0;
}

/* Media center vote form: force "انا + ذكر + انثى" on one line. */
.media-center-vote__form #edit-me--wrapper {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.875rem !important;
  white-space: nowrap !important;
}

.media-center-vote__form #edit-me--wrapper > legend {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.media-center-vote__form #edit-me--wrapper > .fieldset-wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
}

.media-center-vote__form #edit-me {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  white-space: nowrap !important;
}

.media-center-vote__form #edit-me .form-item,
.media-center-vote__form #edit-me .js-form-type-radio {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 0.375rem !important;
}

.media-center-vote__form #edit-me label {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ── Media Center Vote (shared across news, service, services) ──────────── */
.media-center-vote-separator {
  border-top: 2px solid #1B8354;
  margin-top: 0.5rem;
  padding-top: 0.25rem;
}

.media-center-vote {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.media-center-vote__close {
  display: none;
  border: 0;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1.2;
  color: #111827;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  padding: 0;
}

.media-center-vote__close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.media-center-vote__close-text {
  font-size: 1.4rem;
  font-weight: 400;
  color: #111827;
}

.media-center-vote__summary {
  margin: 0;
  font-size: 1.125rem;
}

.media-center-vote:not(.is-expanded) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.media-center-vote:not(.is-expanded) .media-center-vote__summary {
  display: block;
}

.media-center-vote:not(.is-expanded) .media-center-vote__close {
  display: none;
}

.media-center-vote.is-expanded {
  display: block;
  position: relative;
  padding-left: 150px;
  min-height: 120px;
}

.media-center-vote.is-expanded .media-center-vote__close {
  display: inline-flex;
  position: absolute;
  left: 0;
  top: 0.7rem;
  float: none;
  margin-top: 0;
}

.media-center-vote.is-expanded .media-center-vote__form {
  overflow: visible;
  padding-bottom: 4rem;
}

.media-center-vote.is-expanded .media-center-vote__summary {
  display: none;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful--wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  border: 0;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful--wrapper > legend {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  flex: 0 0 auto !important;
  margin: 0;
  padding: 0;
  white-space: nowrap !important;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful--wrapper > legend .fieldset-legend {
  white-space: nowrap !important;
  font-size: 1.25rem;
  line-height: 1.2;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful--wrapper .fieldset-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful .js-form-type-radio {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful .js-form-type-radio input[type="radio"] {
  position: absolute;
  opacity: 0.01;
  pointer-events: auto;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful .js-form-type-radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.32rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid #1B8354;
  background: #1B8354;
  color: #fff;
  cursor: pointer;
  line-height: 1.1;
  font-size: 1.2rem;
}

.media-center-vote__form #edit-did-you-find-this-content-helpful .js-form-type-radio input[type="radio"]:checked + label,
.media-center-vote__form #edit-did-you-find-this-content-helpful .js-form-type-radio label:hover {
  background: #14573A;
  border-color: #14573A;
}

.media-center-vote__form .form-actions {
  margin-top: 0.75rem;
  display: block;
  clear: none;
}

.media-center-vote__form .form-actions .button,
.media-center-vote__form .form-actions input[type="submit"] {
  float: none;
  border: 1px solid #1B8354;
  background: #1B8354;
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  line-height: 1.2;
  cursor: pointer;
}

.media-center-vote__form .form-actions .button:hover,
.media-center-vote__form .form-actions input[type="submit"]:hover {
  background: #14573A;
  border-color: #14573A;
  cursor: pointer;
}

.media-center-vote__form .form-actions .button.is-loading,
.media-center-vote__form .form-actions input[type="submit"].is-loading,
.media-center-vote__form .form-actions .button[disabled],
.media-center-vote__form .form-actions input[type="submit"][disabled] {
  opacity: 0.8;
  cursor: wait;
  pointer-events: none;
}

.media-center-vote__btn-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: voteSpinner 0.75s linear infinite;
  vertical-align: middle;
  margin-inline-start: 0.45rem;
}

@keyframes voteSpinner {
  to { transform: rotate(360deg); }
}

.media-center-vote.is-submitted {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  direction: ltr;
}

.media-center-vote.is-submitted .media-center-vote__summary {
  display: block;
  width: auto;
  text-align: left;
  order: 1;
  margin: 0;
}

.media-center-vote.is-submitted .media-center-vote__success-message {
  display: block;
  width: auto;
  text-align: right;
  order: 2;
  margin: 0;
  margin-left: auto;
}

.media-center-vote.is-expanded .media-center-vote__form .form-actions {
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  margin: 0;
}

html[lang="en"] .media-center-vote.is-expanded {
  padding-left: 0;
  padding-right: 150px;
}

html[lang="en"] .media-center-vote.is-expanded .media-center-vote__close {
  left: auto;
  right: 0;
}

html[lang="en"] .media-center-vote.is-expanded .media-center-vote__form .form-actions {
  left: auto;
  right: 0;
}

/* Footer columns: take full width on md & sm so each heading's underline spans the row. */
@media (max-width: 1023.98px) {
  .footer-columns .footer-column {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Page banner (breadcrumb + title + social): align to start on md & sm. */
@media (max-width: 1023.98px) {
  .pages-banner__row {
    align-items: flex-start !important;
  }
}

/* Homepage Photos & Videos gallery: full block on lg+, mobile section on md & sm. */
.photosbyfolder-mobile-section {
  display: none;
}

.photosbyfolder-mobile-albums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 1023.98px) {
  .photosbyfolder-block-section {
    display: none !important;
  }
  .photosbyfolder-mobile-section {
    display: block;
  }
}

/* On md & sm: in collapsed state, show question → summary → Yes/No buttons; hide everything else.
   In expanded state (after click), let the default desktop styles render the full form. */
@media (max-width: 991.98px) {
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__close,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__success-message,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__form .form-actions,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__form #edit-me--wrapper,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__form fieldset:not(#edit-did-you-find-this-content-helpful--wrapper),
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__close,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__success-message,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__form .form-actions,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__form #edit-me--wrapper,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__form fieldset:not(#edit-did-you-find-this-content-helpful--wrapper) {
    display: none !important;
  }

  /* Collapsed state: turn the vote container into a flex column and order children. */
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded),
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* Flatten the form wrappers so the fieldset-wrapper becomes a sibling of the summary. */
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__form,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__form > form,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper,
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__question-row,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__form,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__form > form,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__question-row {
    display: contents !important;
  }

  /* Order in collapsed state: 1 = question, 2 = summary, 3 = buttons */
  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper legend,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper legend {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
  }

  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .fieldset-legend,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .fieldset-legend {
    display: block !important;
    text-align: start !important;
    width: 100% !important;
    white-space: normal !important;
  }

  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) .media-center-vote__summary,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) .about-office-vote__summary {
    order: 2 !important;
    text-align: start !important;
    width: 100% !important;
  }

  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper .fieldset-wrapper,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper .fieldset-wrapper {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    text-align: start !important;
  }

  html body .media-center-vote-separator .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful,
  html body .about-office-vote-separator .about-office-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful {
    display: inline-flex !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Expanded state on mobile: stack everything vertically, no absolute positioning. */
  html body .media-center-vote-separator .media-center-vote.is-expanded,
  html body .about-office-vote-separator .about-office-vote.is-expanded {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__close,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__close {
    position: static !important;
    display: inline-flex !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Keep the question + Yes/No buttons in one row at the top. */
  html body .media-center-vote-separator .media-center-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper,
  html body .about-office-vote-separator .about-office-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__question-row,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__question-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper legend,
  html body .about-office-vote-separator .about-office-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper legend {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper .fieldset-wrapper,
  html body .about-office-vote-separator .about-office-vote.is-expanded #edit-did-you-find-this-content-helpful--wrapper .fieldset-wrapper {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 0.5rem !important;
  }

  /* Reason checkboxes / identity radios / submit: stacked block rows. */
  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form fieldset:not(#edit-did-you-find-this-content-helpful--wrapper),
  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form #edit-me--wrapper,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form fieldset:not(#edit-did-you-find-this-content-helpful--wrapper),
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form #edit-me--wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form fieldset legend,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form fieldset legend {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.35rem 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form .form-checkboxes,
  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form .js-webform-checkboxes,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form .form-checkboxes,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form .js-webform-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded #edit-me,
  html body .about-office-vote-separator .about-office-vote.is-expanded #edit-me {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  html body .media-center-vote-separator .media-center-vote.is-expanded .media-center-vote__form .form-actions,
  html body .about-office-vote-separator .about-office-vote.is-expanded .about-office-vote__form .form-actions {
    position: static !important;
    display: block !important;
    margin: 0.75rem 0 0 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .media-center-vote:not(.is-expanded) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  /* Flatten form → question, summary, buttons can reorder */
  .media-center-vote:not(.is-expanded) .media-center-vote__form,
  .media-center-vote:not(.is-expanded) .media-center-vote__form > form,
  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper {
    display: contents !important;
  }

  /* 1) Question */
  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper > legend {
    display: block !important;
    order: 1 !important;
    width: 100%;
    text-align: center;
  }

  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper > legend .fieldset-legend {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: normal !important;
  }

  /* 2) Summary */
  .media-center-vote:not(.is-expanded) .media-center-vote__summary {
    order: 2 !important;
    font-size: 0.9375rem;
  }

  /* 3) Buttons */
  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful--wrapper > .fieldset-wrapper {
    order: 3 !important;
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }

  .media-center-vote:not(.is-expanded) #edit-did-you-find-this-content-helpful .js-form-type-radio label {
    min-width: 52px;
    padding: 0.375rem 1.25rem;
    font-size: 1.125rem;
    border-radius: 0.375rem;
  }

  /* Hide gender field + submit in collapsed state */
  .media-center-vote:not(.is-expanded) #edit-me--wrapper,
  .media-center-vote:not(.is-expanded) .form-actions,
  .media-center-vote:not(.is-expanded) .media-center-vote__close {
    display: none !important;
  }
}

/* Match latest news page pager with existing pagination-wrapper visual style. */
.path-latest-news-section .pager__items {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.path-latest-news-section .pager__item {
  position: relative;
  display: flex;
  height: 2.5rem;
  min-width: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0.5rem;
  color: #161616;
}

.path-latest-news-section .pager__item.is-active {
  pointer-events: none;
}

.path-latest-news-section .pager__item.is-active::before {
  position: absolute;
  bottom: 0;
  left: 1px;
  height: 3px;
  width: calc(100% - 2px);
  border-radius: 9999px;
  content: "";
  background-color: var(--main-color-hoverd, #1b8354);
}

.path-latest-news-section .pager__item a {
  color: inherit;
}

/* Latest news: make the divider under main menu thin and clean. */
.path-latest-news-section .pages-banner {
  border-top: 1px solid #e5e7eb;
}

/* Header: add a subtle divider directly under the menu area. */
.header {
  border-bottom: 1px solid #d9e0e8;
}

header .main-menu {
  border-bottom: 1px solid #d9e0e8;
}

/* ── Service Tabs (CSS-only radio tabs) ─────────────────────────── */
.service-tabs__input {
  display: none !important;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Hide all panels by default */
.service-tabs__panel {
  display: none;
}

/* Show the correct panel when its radio is checked */
#tab-steps:checked  ~ #panel-steps,
#tab-terms:checked  ~ #panel-terms,
#tab-docs:checked   ~ #panel-docs {
  display: block;
}

/* Active label underline */
.service-tabs__nav {
  border-bottom: none;
}

.service-tabs__label {
  color: #6b7280;
}

.service-tabs__label::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: transparent;
  border-radius: 9999px;
}

#tab-steps:checked  ~ .service-tabs__nav label[for="tab-steps"],
#tab-terms:checked  ~ .service-tabs__nav label[for="tab-terms"],
#tab-docs:checked   ~ .service-tabs__nav label[for="tab-docs"] {
  color: #111827;
}

#tab-steps:checked  ~ .service-tabs__nav label[for="tab-steps"]::after,
#tab-terms:checked  ~ .service-tabs__nav label[for="tab-terms"]::after,
#tab-docs:checked   ~ .service-tabs__nav label[for="tab-docs"]::after {
  background: #1B8354;
}

/* ── Steps / Docs rendered HTML lists ──────────────────────────── */
.service-tabs__panel ul,
.service-tabs__panel ol {
  counter-reset: step-counter;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.25rem;
  margin: 0;
  padding-right: 0;
}

.service-tabs__panel ul li,
.service-tabs__panel ol li {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  color: #111827;
  font-size: 1rem;
  line-height: 1.5;
}

.service-tabs__panel ul li::before,
.service-tabs__panel ol li::before {
  counter-increment: step-counter;
  content: counter(step-counter) "-";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 600;
}

/* ── Service Tags (stats-chip) ───────────────────────────────────── */
.stats-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-color: #D1D5DB;
  background: #F9FAFB;
  color: #374151;
  transition: all 0.15s;
}
.stats-chip.active {
  background: #ECFDF3;
  border-color: #ABEFC6;
  color: #085D3A;
}

/* ── Who We Are body content ─────────────────────────────────── */
.who-we-are-body ol {
  list-style: decimal;
  padding-inline-start: 1.5rem;
  margin: 0.5rem 0;
}
.who-we-are-body ul {
  list-style: disc;
  padding-inline-start: 1.5rem;
  margin: 0.5rem 0;
}
.who-we-are-body li {
  margin-bottom: 0.25rem;
}
.who-we-are-body h2, .who-we-are-body h3, .who-we-are-body h4 {
  font-weight: 700;
  color: #1F2A37;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.who-we-are-body h2 { font-size: 1.25rem; }
.who-we-are-body h3 { font-size: 1.125rem; }
.who-we-are-body a {
  color: #2563EB;
  text-decoration: underline;
}

/* ── Hide Drupal system messages globally ───────────────────────── */
.messages--status,
.messages--warning,
.messages--error,
div[data-drupal-messages] .messages {
  display: none !important;
}

/* ── Service Comment Modal ──────────────────────────────────────── */
.service-comment-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.service-comment-modal.is-open {
  display: flex;
}

.service-comment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.service-comment-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  margin: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.service-comment-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.service-comment-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2a37;
  margin: 0;
}

.service-comment-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0.375rem;
  color: #374151;
  padding: 0;
}

.service-comment-modal__close:hover {
  background: #f3f4f6;
}

.service-comment-modal__body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

body.modal-open {
  overflow: hidden;
}

/* ── Service Comment Modal — Form Styling ───────────────────────── */
.service-comment-modal__body .form-item {
  margin-bottom: 1.25rem;
}

.service-comment-modal__body .form-item label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2a37;
  margin-bottom: 0.4rem;
  text-align: right;
}

.service-comment-modal__body .form-item label .form-required {
  color: #e02424;
  margin-right: 0.15rem;
}

.service-comment-modal__body input[type="text"],
.service-comment-modal__body input[type="email"],
.service-comment-modal__body input[type="tel"],
.service-comment-modal__body input[type="number"],
.service-comment-modal__body textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: #1f2a37;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  text-align: right;
  direction: rtl;
  box-sizing: border-box;
}

.service-comment-modal__body input[type="text"]:focus,
.service-comment-modal__body input[type="email"]:focus,
.service-comment-modal__body input[type="tel"]:focus,
.service-comment-modal__body input[type="number"]:focus,
.service-comment-modal__body textarea:focus {
  border-color: #1b8354;
  box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.1);
}

.service-comment-modal__body textarea {
  min-height: 100px;
  resize: vertical;
}

.service-comment-modal__body .form-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-start;
}

.service-comment-modal__body .form-actions .button,
.service-comment-modal__body .form-actions input[type="submit"],
.service-comment-modal__body .form-actions button[type="submit"] {
  background: #1b8354;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.625rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.service-comment-modal__body .form-actions .button:hover,
.service-comment-modal__body .form-actions input[type="submit"]:hover,
.service-comment-modal__body .form-actions button[type="submit"]:hover {
  background: #14573a;
}

.service-comment-modal__body .form-actions .button:disabled,
.service-comment-modal__body .form-actions input[type="submit"]:disabled,
.service-comment-modal__body .form-actions button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.service-comment-modal__body .captcha {
  margin-bottom: 1.25rem;
}

.service-comment-modal__body .form-item--error input,
.service-comment-modal__body .form-item--error textarea {
  border-color: #e02424;
}

.service-comment-modal__body .form-item--error-message {
  color: #e02424;
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

/* Hide captcha description text inside service comment modal */
.service-comment-modal__body .captcha .description,
.service-comment-modal__body .captcha ~ .description,
.service-comment-modal__body .form-item .description {
  display: none !important;
}

/* ── Login Page ───────────────────────────────────────────────────── */
#user-login-form {
  max-width: 420px;
  margin: 3rem auto;
  background: #fff;
  padding: 2rem 2.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

#user-login-form .form-item {
  margin-bottom: 1.25rem;
}

#user-login-form .form-item label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2a37;
  margin-bottom: 0.4rem;
}

#user-login-form .form-item label .form-required {
  color: #e02424;
}

#user-login-form input[type="text"],
#user-login-form input[type="password"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: #1f2a37;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

#user-login-form input[type="text"]:focus,
#user-login-form input[type="password"]:focus {
  border-color: #1b8354;
  box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.1);
}

#user-login-form .form-actions {
  margin-top: 1.5rem;
}

#user-login-form .form-actions input[type="submit"],
#user-login-form .form-actions .button {
  width: 100%;
  background: #1b8354;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.625rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

#user-login-form .form-actions input[type="submit"]:hover,
#user-login-form .form-actions .button:hover {
  background: #14573a;
}

/* Content body links - make URLs visible (blue + underline) */
.field--name-body a,
.open-data-policy-content a,
.service-tabs__panel a,
.news-description-content ol,
.news-description-content ul {
  padding-inline-start: 1.5rem;
  margin: 0.5rem 0;
}
.news-description-content ol {
  list-style: decimal;
}
.news-description-content ul {
  list-style: disc;
}
.news-description-content li {
  margin-bottom: 0.25rem;
}

.news-description-content img {
  max-width: 100%;
  height: auto;
}
/* News card images (home block and /latest-news-section): cropped to fill
   the box, anchored at the top so faces and headlines at the top of a photo
   stay in view. Real CSS, not Tailwind classes: object-top is not in the
   compiled style.css. */
.news-image-top {
  object-fit: cover;
  object-position: top center;
}
.news-description-content .text-align-center,
.news-description-content .align-center,
.news-description-content [style*="text-align: center"],
.news-description-content [style*="text-align:center"] {
  text-align: center !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.news-description-content .text-align-center img,
.news-description-content .align-center img,
.news-description-content [style*="text-align: center"] img,
.news-description-content [style*="text-align:center"] img {
  display: inline-block;
}
.news-description-content .text-align-left,
.news-description-content .align-left,
.news-description-content [style*="text-align: left"],
.news-description-content [style*="text-align:left"] {
  text-align: left !important;
}
.news-description-content .text-align-right,
.news-description-content .align-right,
.news-description-content [style*="text-align: right"],
.news-description-content [style*="text-align:right"] {
  text-align: right !important;
}

.news-description-content a,
.accordion-body a {
  color: #2563EB;
  text-decoration: underline;
}
.field--name-body a:hover,
.open-data-policy-content a:hover,
.service-tabs__panel a:hover,
.news-description-content a:hover,
.accordion-body a:hover {
  color: #1D4ED8;
}

/* Search results list: green links */
#searchResultsList > li > a {
  color: #1b8354;
}

/* Main nav (desktop): no dropdown chevron, keep each item on one line */
@media (min-width: 1280px) {
  .header__navbar-nav > ul > li > a.dropdown-toggle::before {
    content: none;
    display: none;
  }
  .header__navbar-nav > ul > li > a {
    white-space: nowrap;
  }
}

/* Main nav (desktop): dropdown as a fixed-width panel under its own item,
   one link per line. Mirrors the inline styles tested in the browser. */
@media (min-width: 1280px) {
  /* One width for every panel: it spans the header row, from under the logo
     across to the language switcher, whichever item opened it. The items and
     their list are static, so .header__navbar — the row that holds the logo,
     the menu and the switcher — is the panel's containing block, and left and
     right 0 stretch the panel across it. */
  .header__navbar-nav > ul > li.dropdown {
    position: static;
  }
  .header__navbar-nav > ul > li .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 24px;
  }
  .header__navbar-nav .dropdown-menu .dropdown-menu__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0;
  }
  /* A quarter of the panel, gaps included, so a menu of four columns fills the
     width exactly. A single-column menu keeps the same quarter, which is what
     stops its hover background from running the whole width of the panel.
     Direct child only: a grouped column holds a .dropdown-menu__list of its
     own, and without the > the quarter applied a second time inside it, so a
     link's hover background covered a quarter of its column instead of it. */
  .header__navbar-nav .dropdown-menu > .dropdown-menu__list > li {
    width: calc((100% - 96px) / 4);
  }
  /* Inside a column every link fills it, so the hover background does too. */
  .header__navbar-nav .dropdown-menu .dropdown-menu__list .dropdown-menu__list > li {
    width: 100%;
  }

  /* Grouped dropdown: one column per group, group title in green.
     The panel sizes to its columns — the 640px cap on the plain dropdown left
     the wider grouped content spilling outside the white panel. */
  .header__navbar-nav > ul > li .dropdown-menu--groups {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .header__navbar-nav .dropdown-menu .dropdown-menu__list--groups {
    flex-direction: row;
    align-items: flex-start;
    /* Wraps onto a second line: the panel is now as wide as the nav row, and
       the widest menu's columns add up to more than that. Row gap first, so
       wrapped columns keep 24px between the lines. */
    flex-wrap: wrap;
    gap: 24px 32px;
  }
  /* Four columns to a panel: each one takes a quarter of the width, minus its
     share of the 32px gaps between them. */
  .header__navbar-nav .dropdown-menu .dropdown-menu__list--groups > li {
    flex: 0 0 calc((100% - 96px) / 4);
    max-width: calc((100% - 96px) / 4);
  }
  /* A link too long for a quarter now wraps inside its own column instead of
     running across the one beside it. */
  .header__navbar-nav .dropdown-menu .dropdown-item {
    white-space: normal;
  }
  .header__navbar-nav .dropdown-menu .dropdown-group__title {
    color: #1b8354;
  }

  /* Every panel spans the nav list now, so no item needs an anchor of its own;
     the per-item rules that used to hold the later panels are gone. */
  .header__navbar {
    position: relative;
  }

  /* One line per link, full text — the panel widens instead of clipping.
     The trailing … is literal text from the template, not truncation. */
  .header__navbar-nav .dropdown-menu .dropdown-item {
    display: block;
    white-space: nowrap;
  }
}

/* Hero banner height. The markup used min-h-[500px], but this theme's compiled
   Tailwind has no min-h-* utilities at all, so that class never did anything. */
.hero__overlay {
  min-height: 492px;
  /* Content sits at the bottom of the hero, 40px clear of its edge. */
  align-items: flex-end;
  padding-bottom: 40px;
  /* Replaces the z-[99] in the markup, which this theme's Tailwind never
     generated — without it the motifs (z-index: 1) paint over the overlay. */
  z-index: 2;
}

/* Hero banner title: centred, 60/72, inside a wrapper that centres it. */
.hero__title-wrap {
  text-align: center;
  /* The gap below the heading belongs to the block, not to whichever line
     happens to come last, so the title and the sub title sit tight together. */
  margin-bottom: 40px;
}
/* The sub title takes the title's own look, so the two read as one heading. */
.hero__title,
.hero__subtitle {
  font-weight: 600;
  font-size: 60px;
  line-height: 72px;
  text-align: center;
  margin-bottom: 0;
  /* Capped and centred in its wrapper: without the auto margins the capped
     title would sit against the start edge instead of the middle. */
  max-width: 900px;
  margin-inline: auto;
}
/* One step down from the title. After the shared rule, so it wins on order:
   the two selectors carry the same weight. */
.hero__subtitle {
  font-size: 45px;
}
/* The part of the title after a "|": the same step down as the sub title,
   on its own line inside the h2. */
.hero__title-small {
  font-size: 45px;
  line-height: 56px;
}
@media (max-width: 767.9px) {
  .hero__title,
  .hero__subtitle {
    font-size: 32px;
    line-height: 40px;
  }
  .hero__title-small {
    font-size: 24px;
    line-height: 32px;
  }
}

/* Hero banner tabs: roomier pill, icon in a round mint disc. */
.banner-tab {
  padding: 16px;
  border-radius: 16px;
  justify-content: space-between;
  /* Equal width for every tab. The markup's basis-[220px] / max-w-[320px]
     were never generated by this theme's Tailwind, so tabs sized to their
     own text instead. */
  flex: 1 1 220px;
  min-width: 0;
  max-width: 410px;
  font-size: 20px;
  font-weight: 500;
  color: #1F2A37;
}
.banner-tab__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #F3FCF6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero banner: decorative motifs down the left edge, between the photo and
   the green overlay. */
.banner-motifs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 157px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.banner-motifs svg {
  display: block;
  width: 157px;
  height: 157px;
  opacity: 0.5;
}
@media (max-width: 767.9px) {
  .banner-motifs {
    width: 110px;
  }
  .banner-motifs svg {
    width: 110px;
  }
}

/* Home "نبذة عنا" section: light background with the decorative pattern
   tucked into the bottom-left corner, behind the text. */
.about-home {
  position: relative;
  overflow: hidden;
  background-color: #F9FAFB;
}
.about-home__pattern {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.about-home > .container {
  position: relative;
  z-index: 1;
}

/* الرؤية والرسالة section: white background (was #F3F4F6). */
.values-section {
  background-color: #ffffff;
}

/* ── أبرز الأرقام والإنجازات ─────────────────────────────────────────────── */
.figures-section {
  background-color: #F9FAFB;
  padding: 40px 0px;
}
.figures-section__header {
  text-align: center;
  margin-bottom: 32px;
}
.figures-section__header h3 {
  margin: 0;
}
.figures-grid {
  display: flex;
  gap: 24px;
}
/* The cards' own box inside the row: a grid, not flex. The big card has to
   stand beside two rows of three, and a flex item cannot span two rows.
   One 507px column for it, then three equal columns for the other six. */
.figures-grid__cards {
  display: grid;
  grid-template-columns: 507px repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  flex: 1 1 auto;
  /* min-height, not height: the rows grow past 344 when a card's text needs
     the room, which is preferred here over clipping it. */
  min-height: 344px;
}
.figure-card {
  background-color: #ffffff;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px #1018280D, 0px 1px 3px 0px #1018280D;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Spacing comes from the children's margins, not a flex gap. */
  gap: 0;
  text-align: center;
}
.figure-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #F3FCF6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 24px;
}
/* The icon sits in a box of its own inside the disc, and fills it. block:
   the box is a span, so width and height would not apply to it otherwise. */
.figure-card__icon-box {
  display: block;
  width: 28px;
  height: 28px;
}
.figure-card__icon img,
.figure-card__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.figure-card__number {
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  color: #111927;
  margin-bottom: 8px;
}
.figure-card__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #161616;
}

/* The last card stands alone on the leading side over a third of the width;
   the other six share the remaining two thirds, three per row. */
/* The big card takes the wide column and both rows, so its height is the
   height of the two rows of small cards beside it. */
.figures-grid .figure-card--highlight {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* Spacing comes from the children's margins, not a flex gap. */
  gap: 0;
  padding: 51px 16px;
}
.figures-grid .figure-card--highlight .figure-card__icon {
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
}
/* The big card carries a larger icon than the six small ones. */
.figures-grid .figure-card--highlight .figure-card__icon-box {
  width: 64px;
  height: 64px;
}
.figures-grid .figure-card--highlight .figure-card__icon svg {
  width: 64px;
  height: 64px;
}
.figures-grid .figure-card--highlight .figure-card__number {
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 8px;
}
.figures-grid .figure-card--highlight .figure-card__label {
  font-size: 20px;
  line-height: 30px;
}
/* Narrow screens: no room for a 507px column beside three others, so the cards
   stack two to a row and the big one takes a row to itself. The fixed height
   goes with it — the cards set their own now. */
@media (max-width: 1023.9px) {
  .figures-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    /* min-height, to match the desktop rule it undoes. */
    min-height: 0;
  }
  .figures-grid .figure-card--highlight {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
/* Phones: two cards to a row left each about 150px, too narrow for a figure
   and its caption, so they go one to a row. */
@media (max-width: 639.9px) {
  .figures-grid__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── أهم الأقسام ─────────────────────────────────────────────────────────── */
.key-sections {
  padding: 48px 0 64px;
}
.key-sections__head,
.key-sections__head .view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.key-sections__head {
  margin-bottom: 34px;
}
.key-sections__head .view-header h3 {
  margin: 0;
}
/* Same quiet outlined button as "عرض المزيد" in the news section. */
.key-sections__head .view-header a {
  flex-shrink: 0;
  background-color: transparent;
  border: 1px solid #D2D6DB;
  border-radius: 4px;
  padding: 8px 16px;
  transition: background-color 0.25s ease-in-out;
}
.key-sections__head .view-header a:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.key-sections__head .view-header a span {
  color: #161616;
  font-size: 16px;
  font-weight: 500;
}

.key-sections__swiper {
  padding-bottom: 4px;
}
.key-sections__swiper .swiper-slide {
  height: auto;
}
.key-card {
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px #1018280D, 0px 1px 3px 0px #1018280D;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.key-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #F3FCF6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 24px;
}
.key-card__icon img,
.key-card__icon svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* The home sliders' arrows (أهم الأقسام, آخر الأخبار): 32px discs 8px apart,
   as the design has them, with the chevron scaled down to match. */
.slider-nav { gap: 8px; height: 32px; }
.slider-nav .swiper-button-next,
.slider-nav .swiper-button-prev {
  width: 32px;
  height: 32px;
}
.slider-nav .swiper-navigation-icon {
  width: 7px;
  height: 12px;
}
/* The disabled arrow is a pale disc with a dark chevron. The templates'
   [.group&.swiper-button-disabled]:bg-white-300 is not in the compiled
   Tailwind, so it stayed green. */
.slider-nav .swiper-button-disabled {
  background-color: #F3F4F6;
  color: #161616;
}
/* Swiper turns its chevrons round for RTL only inside .swiper-rtl. The news
   arrows sit inside their slider, but أهم الأقسام's sit after it, so in
   Arabic previous would point left and next right. Turned round here the
   way swiper-bundle does it. */
html[dir=rtl] .key-sections .slider-nav .swiper-button-prev .swiper-navigation-icon {
  transform: none;
}
html[dir=rtl] .key-sections .slider-nav .swiper-button-next .swiper-navigation-icon {
  transform: rotate(180deg);
}
.key-card__title {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #161616;
}
.key-card__action {
  margin-top: auto;
}
.key-card__action a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Green from the start. It was transparent with white text, which on the
     card's white background left the button invisible until a hover brought
     the green in behind it. */
  background-color: #1B8354;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease-in-out;
}
.key-card__action a:hover,
.key-card__action a:focus-visible {
  background-color: #14573A;
}
/* key-arrow.png points left, which is the way the card's arrow reads in Arabic,
   so it is left alone there and turned for English. It replaced
   arrow-white.svg, which pointed the other way and whose rule was still here. */
.key-card__action a::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("../images/icons/key-arrow.png") no-repeat center / contain;
}
html[dir=ltr] .key-card__action a::after {
  transform: rotate(180deg);
}

/* ── تعرف على جزيرة دارين وتاروت ─────────────────────────────────────────── */
.discover-section {
  background-color: #ffffff;
  padding: 40px 0;
}
.discover-card__row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px;
}
.discover-card__title {
  margin: 0 0 40px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  color: #161616;
}
.discover-card__text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 26px;
  color: #1F2A37;
}
.discover-card__text p {
  margin: 0 0 8px;
}
.discover-card__text p:last-child {
  margin-bottom: 0;
}
.discover-card__subtitle {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #161616;
}
/* Tailwind's reset strips list markers, and the landmarks arrive as the
   editor's own <ul>, so the bullets are put back here. */
.discover-card__list ul {
  list-style: disc;
  padding-inline-start: 20px;
  margin: 0;
}
.discover-card__list li {
  display: list-item;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1F2A37;
}
.discover-card__list li:last-child {
  margin-bottom: 0;
}
/* The pillars on the plain map: each one a bold line naming the pillar and its
   zone, with its paragraph under it. The editor writes them as a heading and a
   paragraph, so they are styled here rather than sized as page headings. */
.discover-card__list h2,
.discover-card__list h3,
.discover-card__list h4 {
  margin: 0 0 8px;
  color: #161616;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.discover-card__list h2 + p,
.discover-card__list h3 + p,
.discover-card__list h4 + p {
  margin: 0 0 24px;
}
/* The cultural zone's two tracks (ترميم الأصول التراثية، الاحتفاء بثقافة
   الجزيرة) are h3s over their h4 items, so they read a step larger. */
.discover-card__list h3 {
  margin-top: 8px;
  font-size: 18px;
  line-height: 28px;
}
.discover-card__list h3 + p {
  margin-bottom: 16px;
}
.discover-card__list h4 + p {
  margin-bottom: 16px;
}
.discover-card__list p {
  margin: 0 0 24px;
  color: #384250;
  font-size: 16px;
  line-height: 26px;
}
.discover-card__list p:last-child {
  margin-bottom: 0;
}
/* One row at a time once the map switcher is on. The rule needs the class as
   well as [hidden]: the row is display:grid, which beats the browser's own
   [hidden] rule. */
.discover-card__row[hidden] {
  display: none;
}
/* The region buttons: the map's switch for keyboards and small screens. */
.discover-card__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.discover-card__region-button {
  padding: 8px 16px;
  border: 1px solid #D2D6DB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #161616;
  font-size: 14px;
  line-height: 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.discover-card__region-button:hover {
  border-color: #1B8354;
}
.discover-card__region-button[aria-pressed="true"] {
  border-color: #1B8354;
  background: #F3FCF6;
  color: #1B8354;
  font-weight: 500;
}
/* On a wide screen the map itself is the control, so the buttons stay out of
   the design until a keyboard reaches them. */
@media (min-width: 768px) {
  .discover-card__regions {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .discover-card__regions:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin-top: 24px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

.discover-card__media {
  line-height: 0;
  text-align: center;
}
.discover-card__media img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
@media (max-width: 767.9px) {
  .discover-card__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  /* Stacked, the map reads better above the copy. */
  .discover-card__media {
    order: -1;
  }
}

/* ── info_card carrying a webform: استطلاع الرأي ──────────────────────────── */
/* The plain cards keep the roomier header, so the tighter spacing here is
   scoped to the card that holds a form. */
.pwt-card--form .pwt-card__head {
  margin-bottom: 16px;
}
/* The header already supplies that 16px, so the form wrapper's own mt-4 would
   double it. */
.pwt-card--form .pwt-card-form {
  margin-top: 0;
}

.webform-submission-sttlaa-lr-y-form legend {
  float: none;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
}
/* The poll reads as a question rather than a form field, so it drops the
   required marker. */
.webform-submission-sttlaa-lr-y-form .js-form-required::before,
.webform-submission-sttlaa-lr-y-form .form-required::before,
.webform-submission-sttlaa-lr-y-form .form-required::after,
.webform-submission-sttlaa-lr-y-form .js-form-required::after {
  display: none;
  content: none;
}
.webform-submission-sttlaa-lr-y-form .fieldset-legend {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #161616;
}
/* Bootstrap's .form-check floats the input and pads the row instead of spacing
   it, so each option becomes a flex row and the 8px gap holds in both
   directions. */
.webform-submission-sttlaa-lr-y-form .js-webform-type-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}
.webform-submission-sttlaa-lr-y-form .js-webform-type-radio:last-child {
  margin-bottom: 0;
}
.webform-submission-sttlaa-lr-y-form input.form-radio {
  width: 24px;
  height: 24px;
  margin: 0;
  float: none;
  flex-shrink: 0;
}
.webform-submission-sttlaa-lr-y-form .form-check-label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #6C737F;
}

/* The info_card row (دليل التوظيف / استطلاع الرأي). The section used to carry
   bg-[#F3F4F6], but this theme's compiled Tailwind has no arbitrary-value
   utilities, so it was rendering with no background at all. */
.info-cards-section {
  background-color: #F9FAFB;
}

/* News card excerpt (محتوى الخبر). The card clamps it to two lines with the
   theme's own .line-clamp-2, so only type and spacing are set here. */
.news-card__text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #4D5761;
}
.news-card__text p {
  margin: 0;
}

/* آخر الأخبار: light background instead of white. */
.news-section {
  background-color: #F9FAFB;
}

/* Swiper draws the prev/next glyphs with ::after; they point the wrong way
   for this slider in RTL, so mirror them. */
html[dir=rtl] .key-sections__swiper-button-prev::after,
html[dir=rtl] .key-sections__swiper-button-next::after {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── صفحة "من نحن": كارتا الرؤية والرسالة ────────────────────────────────── */
/* The sizes are set here rather than with Tailwind bracket classes
   (text-[24px] and friends): style.css is a stale build that is no longer
   regenerated, so any class it does not already contain has no effect. */
.wwa-card {
  border: 1px solid #D2D6DB;
}
.wwa-card__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}
.wwa-card__text {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
}
/* Fixed 48x48 disc holding a 28x28 icon, shared by the "من نحن" and
   "عن المؤسسة" cards. Declared here with real pixel values instead of
   w-12/w-7/aspect-square so the sizes do not depend on which utilities
   happen to exist in the stale style.css build. */
.icon-disc {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #F3FCF6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-disc img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ── صفحة "عن المؤسسة": شبكة الكروت ──────────────────────────────────────── */
/* Written out here because 1200 and 1024 are not Tailwind breakpoints, and
   style.css is a stale build that cannot generate new ones. */
.about-office-grid {
  display: grid;
  gap: 24px;
  /* Tablet and below: one card per row. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .about-office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .about-office-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* المركز الإعلامي: three cards to a row from 1024px, where the shared grid
   above still shows two. Scoped to this page's path class, because عن المؤسسة
   shares the template and keeps its two-to-a-row below 1200px. */
@media (min-width: 1024px) {
  .path-media-center .about-office-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* صفحة "من نحن": الصورة تحت البريدكرامب بعرض الشاشة */
.wwa-hero-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  /* Cap the height so a tall source image does not push the page content
     far below the fold on wide screens. */
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}
/* The card rows below the intro. Replaces mb-10, which style.css never
   generated, so the rows had no bottom spacing at all. Fixed px rather than
   rem so the font-size control does not turn 40 into 42.5. */
.wwa-section-gap {
  margin-bottom: 40px;
}

/* سيكشن "قيم المؤسسة": 3 كروت في الصف */
/* Written out because style.css has no md:grid-cols-3 rule, so the three
   cards were stacking one per row at every width. */
.wwa-values-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .wwa-values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── شريط البريدكرامب المشترك ─────────────────────────────────────────────── */
/* Six page templates each carried an identical inline copy of this rule, and
   six more used the class without defining it - so pages like
   /corporate-identity rendered the strip with no background at all. Defined
   once here instead; the page-level copies can go. */
.about-office-hero {
  /* The mint the designs use on every section and detail page; the detail
     templates had been overriding the old grey-green one by one. */
  background: #F3FCF6;
  border-top: 1px solid #c4ccd6;
  border-bottom: 0;
  /* Fixed px, not rem: rem tracks the font-size accessibility control, which
     would turn 40 into 42.5 at font-level 1. */
  margin-bottom: 40px;
}
/* Page title inside the breadcrumb strip. Overrides the text-3xl/md:text-4xl
   on the h1: this rule is more specific and custom.css loads after style.css.
   Fixed px so the font-size accessibility control does not shift it. */
.about-office-hero h1 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

/* ── حقل البحث في الهيدر: خط التركيز ──────────────────────────────────────── */
/* Overrides the focus rules in style.css: a darker border, and the white
   ::after strip there is hidden so it cannot sit on top of this line. */
.search-input input:focus {
  border: 1px solid #384250;
}
.search-input input:focus-within + ::after {
  content: none;
}
/* inset-inline-end, not right: the line has to start from the middle and grow
   to both edges in Arabic and in English alike. */
.search-input .focus-border {
  position: absolute;
  bottom: 0;
  inset-inline-end: 50%;
  width: 0;
  height: 2px;
  background-color: #161616;
  border-radius: 11px;
  transition: width 0.4s ease, inset-inline-end 0.4s ease;
  pointer-events: none;
}
.search-input input:focus ~ .focus-border {
  width: 100%;
  inset-inline-end: 0;
}
/* Respect a reduced-motion preference: the line still appears, it just does
   not travel. */
@media (prefers-reduced-motion: reduce) {
  .search-input .focus-border { transition: none; }
}

/* ── زر السهم في كروت صفحات الأقسام ───────────────────────────────────────── */
/* The same button appears on every section page, so it is styled once here
   rather than repeated in each template. It keeps its #F3F4F6 and darkens a
   step on hover, which is the only way the button answers the pointer. */
.card-arrow-btn {
  transition: background-color 0.2s ease;
}
.card-arrow-btn:hover,
.card-arrow-btn:focus-visible {
  background-color: #E5E7EB;
}

/* ── الختم الرقمي في أعلى الصفحة ──────────────────────────────────────────── */
/* The bar runs the full width and its content is held by a .container inside
   it, so the padding here is vertical only. Overrides style.css, which is
   loaded before this file. */
.digital-stamp-body {
  padding: 1.5rem 0;
}
.digital-stamp-body .stamp-link-box {
  padding: 0.75rem;
}

/* ── قوائم النافبار: هوفر العناصر ─────────────────────────────────────────── */
/* Every link in a navbar dropdown, the nested ones from render_children()
   included. a. and not the bare class: the green group titles are
   div.dropdown-item and are headings, not destinations. (0,3,1) outranks
   bootstrap's .dropdown-item:hover. :focus-visible gives keyboard users the
   same cue. */
.header__navbar-nav a.dropdown-item:hover,
.header__navbar-nav a.dropdown-item:focus-visible {
  background-color: #F3F4F6;
  border-radius: 8px;
}

/* ── صف المشاركة في بانر الصفحات ──────────────────────────────────────────── */
.share-links {
  position: relative;
}
/* "Page link copied", for a moment after a share button is pressed. Absolute,
   so it floats under the button that was pressed instead of taking a place in
   the row and pushing the four icons along. JS sets its left. */
.share-links__said {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateX(-50%);
  background-color: #161616;
  color: #ffffff;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* The shown state does not depend on the transition running: the element is
   created and given this class in the same frame, and a transition that never
   starts would leave it invisible. It fades out on the way back only. */
.share-links__said.is-shown {
  opacity: 1 !important;
  transition: none;
}
.share-links__btn {
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.share-links__btn:hover,
.share-links__btn:focus-visible {
  background-color: #156A44;
}

/* ── زر تغيير اللغة في الهيدر ─────────────────────────────────────────────── */
/* Replaces the template's px-4 py-2. Matched on the aria-label so it reaches
   the switcher in both static-body.html.twig and region--header.html.twig;
   the attribute selector also outranks the two utility classes. */
a[aria-label="Language Selection"] { padding: 1.5rem 1rem; }

/* ── شريط الإتاحة في الهيدر ──────────────────────────────────────────────── */
/* Light grey with dark labels on every page, as on the home page and عن
   المؤسسة. It had been a list of path-* body classes, so each other section
   kept the green bar, where the icons (drawn dark in their SVGs) all but
   disappeared. Keyed to the bar itself instead: the only div carrying these
   classes is the bar, in region--header.html.twig and static-body.html.twig.
   div., not the bare class, so <a class="bg-green-hover py-2 px-4"> buttons in
   views keep their green, and the mobile settings <ul> is untouched. */
div.bg-green-hover.py-2 {
  background-color: #F3F4F6;
  color: #384250;
}
div.bg-green-hover.py-2 .text-white { color: #384250; }

/* ── تقويم flatpickr ─────────────────────────────────────────────────────── */
/* The calendar is appended to <body>, outside the page templates, so it is
   styled here rather than inside any one of them.
   Every selector below matches the specificity of the flatpickr.min.css rule
   it replaces. That sheet loads first, so an equal selector wins on order; a
   weaker one never does, however late it comes. */

/* Seven 48px columns: a 40px day plus 4px either side. */
.flatpickr-calendar {
  box-sizing: border-box;
  width: 368px;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  font-family: inherit;
}
/* The pointer triangle the design does not have. */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }

/* Header: month and year on the reading side, both arrows together on the
   far side. */
.flatpickr-months {
  position: relative;
  height: 40px;
  margin-bottom: 8px;
}
.flatpickr-months .flatpickr-month {
  height: 40px;
  overflow: visible;
  color: #161616;
  fill: #161616;
}
.flatpickr-current-month {
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0;
  font-size: 14px;
}

/* The month reads as plain text; the chevron belongs to the year. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #161616;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus { outline: none; }
/* The option list is drawn by the operating system; only colour carries. */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #fff;
  color: #161616;
  font-weight: 500;
}

.flatpickr-current-month .numInputWrapper {
  width: auto;
  border: 0;
}

/* The year as a list you can open. flatpickr-year-select.js puts a button and
   a listbox in front of flatpickr's number box and the box is hidden; if the
   script does not run, the box stays and still works by typing.
   A custom listbox rather than a <select>, because a native select's open list
   is drawn by the operating system and cannot be shortened or styled. The list
   follows the DGA dropdown: white panel, #D2D6DB border, 8px radius, soft
   shadow, 36px options, grey hover, the chosen year in green with a tick. */
.flatpickr-current-month { z-index: 3; }
.flatpickr-current-month .flatpickr-yearPicker + .numInputWrapper { display: none; }
.flatpickr-current-month .flatpickr-yearPicker { position: relative; }

.flatpickr-current-month .flatpickr-yearButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #161616;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.flatpickr-current-month .flatpickr-yearButton::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23161616' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  transition: transform 0.2s ease;
}
.flatpickr-current-month .flatpickr-yearButton[aria-expanded="true"]::after { transform: rotate(180deg); }
.flatpickr-current-month .flatpickr-yearButton:hover,
.flatpickr-current-month .flatpickr-yearButton[aria-expanded="true"] { background: #F3F4F6; }
.flatpickr-current-month .flatpickr-yearButton:focus-visible {
  outline: 2px solid #1B8354;
  outline-offset: 1px;
}

/* About five years in view; the rest scroll. Anchored to the button's end
   edge: the year sits at the card's outer edge in both languages, so a list
   anchored to its start hung ~20px outside the card. From the end it grows
   inward — leftwards in English, rightwards in Arabic, where the header row
   is direction: rtl. */
.flatpickr-current-month .flatpickr-yearList {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 104px;
  max-height: 196px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #D2D6DB;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  scrollbar-width: thin;
  scrollbar-color: #D2D6DB transparent;
}
.flatpickr-current-month .flatpickr-yearList[hidden] { display: none; }
.flatpickr-current-month .flatpickr-yearList:focus { outline: none; }
.flatpickr-current-month .flatpickr-yearList::-webkit-scrollbar { width: 6px; }
.flatpickr-current-month .flatpickr-yearList::-webkit-scrollbar-thumb { border-radius: 3px; background: #D2D6DB; }

.flatpickr-current-month .flatpickr-yearOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border-radius: 4px;
  color: #161616;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.flatpickr-current-month .flatpickr-yearOption.is-active { background: #F3F4F6; }
.flatpickr-current-month .flatpickr-yearOption[aria-selected="true"] {
  background: #F3FCF6;
  color: #1B8354;
  font-weight: 600;
}
.flatpickr-current-month .flatpickr-yearOption[aria-selected="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.5L5.75 10L11 4' stroke='%231B8354' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
.flatpickr-current-month .numInputWrapper:hover { background-color: transparent; }
.flatpickr-current-month input.cur-year {
  width: 4ch;
  padding: 0;
  color: #161616;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
/* The up and down spinners give way to the single chevron in the design. */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown { display: none; }

/* Plain line arrows instead of flatpickr's chevrons, side by side. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { opacity: 0.6; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { display: none; }
.flatpickr-months .flatpickr-prev-month {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16 10H4M4 10L9 5M4 10L9 15' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.flatpickr-months .flatpickr-next-month {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10H16M16 10L11 5M16 10L11 15' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The arrows lead the header, at the card's start edge; the month and year
   take the far edge. Physical sides under html[dir] rather than logical ones:
   the calendar is appended to <body> and does not reliably inherit the page's
   direction, so inset-inline-start put the month on the arrows in Arabic. */
/* English: arrows on the left, month and year on the right. */
.flatpickr-months .flatpickr-prev-month { right: auto; left: 0; }
.flatpickr-months .flatpickr-next-month { right: auto; left: 32px; }
.flatpickr-months .flatpickr-current-month { left: auto; right: 0; }
/* Arabic: arrows on the right, month and year on the left, read from the right. */
html[dir="rtl"] .flatpickr-months .flatpickr-prev-month { left: auto; right: 32px; }
html[dir="rtl"] .flatpickr-months .flatpickr-next-month { left: auto; right: 0; }
html[dir="rtl"] .flatpickr-months .flatpickr-current-month {
  direction: rtl;
  right: auto;
  left: 0;
}

/* Weekday row. */
.flatpickr-weekdays { height: 40px; margin-bottom: 4px; }
span.flatpickr-weekday {
  background: transparent;
  color: #6C737F;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

/* Arabic reads the week from the right. */
html[dir="rtl"] .flatpickr-calendar .flatpickr-weekdaycontainer,
html[dir="rtl"] .flatpickr-calendar .dayContainer { direction: rtl; }

.flatpickr-days { width: 336px; }
.dayContainer {
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  justify-content: flex-start;
}

/* Days: a 40px circle, 4px of air on every side. position and z-index make a
   stacking context, so the range band and circle below can sit behind the
   number without covering it. */
.flatpickr-day {
  position: relative;
  z-index: 0;
  flex: 0 0 40px;
  width: 40px;
  max-width: 40px;
  height: 40px;
  margin: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #161616;
  font-size: 14px;
  font-weight: 400;
  line-height: 38px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #F3F4F6;
  border-color: transparent;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #9DA4AE; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: #D2D6DB; background: transparent; }

/* Today: an outlined circle. */
.flatpickr-day.today {
  border-color: #1B8354;
  color: #1B8354;
  font-weight: 700;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: #F3F4F6;
  border-color: #1B8354;
  color: #1B8354;
}

/* Selected: a filled circle. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.today.selected {
  background: #1B8354;
  border-color: #1B8354;
  color: #fff;
  font-weight: 500;
}

/* Range: a pale band across the days in between, square-edged, bridging the
   4px gaps with a shadow either side. */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: #DFF6E7;
  border-color: transparent;
  border-radius: 0;
  color: #161616;
  box-shadow: -4px 0 0 #DFF6E7, 4px 0 0 #DFF6E7;
}

/* The two ends: a whole circle over half a band. The span itself goes clear;
   ::before draws the circle and ::after the half band, both behind the number.
   inset-inline follows the grid's direction, so the half band points to the
   rest of the range in Arabic and English alike. */
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50%;
  background: #1B8354;
}
.flatpickr-day.startRange:not(.endRange)::after,
.flatpickr-day.endRange:not(.startRange)::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: -2;
  width: calc(50% + 5px);
  background: #DFF6E7;
}
.flatpickr-day.startRange:not(.endRange)::after { inset-inline-end: -5px; }
.flatpickr-day.endRange:not(.startRange)::after { inset-inline-start: -5px; }

/* ── رابط العودة في صفحات التفاصيل ───────────────────────────────────────── */
/* Four detail templates carried an identical copy of this; it lives here so a
   fifth page picks it up by using the class. Both names are covered because
   the opportunity page names its own. */
.project-tracking__back,
.opportunity__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 24px;
  padding: 8px 16px;
  border-radius: 8px;
  color: #161616;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  transition: background-color 0.2s ease;
}
.project-tracking__back:hover,
.opportunity__back:hover {
  background-color: #F3F4F6;
}
.project-tracking__back-icon,
.opportunity__back-icon {
  width: 1.25rem;
  height: 0.75rem;
}

/* ── سهم البريدكرامب ───────────────────────────────────────────────────── */
/* A fixed 16px box, so every breadcrumb's arrow is the same size whatever the
   SVG's own dimensions; flex-shrink keeps it whole when the trail wraps. */
.breadcrumb-arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.breadcrumb-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Breadcrumb text: 400 / 14px / 20px. The trails come in two markups — a
   <nav aria-label="breadcrumb"> of links and spans, and a <ul> of <li>s beside
   the arrow — and carry font-medium or text-md, so these selectors are more
   specific than those utilities rather than editing each template. Fixed px:
   rem tracks the font-size accessibility control. */
nav[aria-label="breadcrumb"] > a,
nav[aria-label="breadcrumb"] > span,
ul:has(.breadcrumb-arrow) > li a,
ul:has(.breadcrumb-arrow) > li span {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
/* 8px under the trail, in place of the mb-3 (12px) the templates carry. */
nav[aria-label="breadcrumb"] {
  margin-bottom: 8px;
}
/* A crumb that links somewhere reads dark; one that does not — the current
   page, or a group with no page of its own — reads disabled. */
nav[aria-label="breadcrumb"] > a,
ul:has(.breadcrumb-arrow) > li a {
  color: #384250;
}
nav[aria-label="breadcrumb"] > span,
ul:has(.breadcrumb-arrow) > li > span,
ul:has(.breadcrumb-arrow) > li > div > span {
  color: #9DA4AE;
}

/* Swiper 12 lowered the pagination's default offset from 10px to 8px. The
   theme positions its pagination relative to that offset, so keep the 10px
   the design was built against. */
:root {
  --swiper-pagination-bottom: 10px;
}

/* Foundation logo (2026-10): the new logo is a PNG, which has no size of
   its own the way the old SVGs did, so the header and footer give it the
   heights the old ones rendered at: 56px in the header (it keeps its 207px
   cap, so a wider logo is never cropped) and 42px beside the AI-year logo
   in the footer. */
.header__logo img,
.header__navbar img.max-w-\[207px\] {
  max-height: 56px;
  width: auto;
}
.footer-logos-group img {
  height: 42px;
  width: auto;
}

/* Homepage poll: the confirmation card that replaces the form after voting
   (templates/webform/webform-confirmation--sttlaa-lr-y.html.twig). */
.pwt-poll-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.pwt-poll-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #ECFDF3;
  color: #1B8354;
}
.pwt-poll-confirm__text p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #384250;
}
.pwt-poll-confirm__text p + p {
  margin-top: 4px;
}
.pwt-poll-confirm__text strong {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #1F2A37;
}