/* --------- 404 --------- */

.not-found-section {
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}

.not-found-code {
  font-size: var(--wp--preset--font-size--huge);
  line-height: 1;
  color: var(--wp--preset--color--border);
  margin: 0;
}

.not-found-title {
  margin-top: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--20);
}

.not-found-text {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--contrast);
}

/* --------- Archive / Blog --------- */

.archive-header {
  background-color: var(--wp--preset--color--surface);
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

.archive-header h1 {
  font-size: var(--wp--preset--font-size--xxl);
}

.archive-section {
  padding-bottom: var(--wp--preset--spacing--60);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--40);
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--40);
  transition: background-color 0.2s ease;
}

.post-card:hover {
  background-color: var(--wp--preset--color--surface);
}

.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--wp--preset--color--primary);
}

.post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__title {
  font-size: var(--wp--preset--font-size--large);
  margin-bottom: 12px;
}

.post-card__title a {
  font-weight: 400;
}

.post-card__excerpt {
  flex: 1;
  margin-bottom: 20px;
  color: var(--wp--preset--color--contrast);
}

.link-arrow {
  text-decoration: none;
  font-family: var(--wp--preset--font-family--accent);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4em;
  font-weight: 400;
  position: relative;
  transition: color 0.2s ease;
  cursor: pointer;
  color: var(--wp--preset--color--secondary);
}

.link-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 11px;
  background-color: var(--wp--preset--color--secondary);
  transition: background-color 0.2s ease;
  width: 27px;
  height: 10px;
  mask: url(../img/arrow-right.svg) no-repeat center / contain;
  -webkit-mask: url(../img/arrow-right.svg) no-repeat center / contain;
}

.link-arrow:hover {
  color: var(--wp--preset--color--primary);
}

.link-arrow:hover::after {
  background-color: var(--wp--preset--color--primary);
}

.archive-no-posts {
  text-align: center;
  padding: var(--wp--preset--spacing--60) 0;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

.load-more-wrap {
  text-align: center;
  margin-top: var(--wp--preset--spacing--40);
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  color: var(--wp--preset--color--secondary);
  transition: color 0.2s ease;
  flex-direction: column;
}

.load-more-btn:hover {
  color: var(--wp--preset--color--primary);
}

.load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.load-more-status:not(:empty) {
  margin-top: var(--wp--preset--spacing--20);
  color: var(--color-error);
  font-size: var(--wp--preset--font-size--small);
}

.load-more-arrow {
  display: inline-block;
  width: 27px;
  height: 10px;
  background-color: var(--wp--preset--color--secondary);
  mask: url(../img/arrow-right.svg) no-repeat center / contain;
  -webkit-mask: url(../img/arrow-right.svg) no-repeat center / contain;
  transform: rotate(90deg);
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  padding-top: 20px;
}

.load-more-btn:hover .load-more-arrow {
  background-color: var(--wp--preset--color--primary);
}

@media (max-width: 1200px) {
  .post-card {
    padding: 15px;
  }
}

@media (max-width: 991px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* --------- Single Insight --------- */

.single-post-thumbnail {
  margin-bottom: var(--wp--preset--spacing--40);
}

.single-post-thumbnail img {
  width: 100%;
}

.single-post-title {
  font-size: var(--wp--preset--font-size--xxl);
  margin-bottom: var(--wp--preset--spacing--30);
}

.single-post-date {
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
  margin-bottom: var(--wp--preset--spacing--20);
  font-weight: 600;
}

.single-post-body {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* --------- Cards row (Home: Mission / Ethos / Join the Team) --------- */

.card-columns .wp-block-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.card-columns {
  gap: var(--wp--preset--spacing--40);
}

.card-columns .wp-block-heading {
  margin-top: var(--wp--preset--spacing--30);
  margin-bottom: 0;
}

.card-columns .wp-block-heading + p,
.card-columns p + p {
  margin-top: 8px;
}

/* --------- Text beside a photo --------- */

/* The photo fills the height of the text beside it, at least 250px, and is
   cropped rather than stretched. Only the column widths are block settings:
   the Image sidebar has no 100% height or cover without one. */
.text-image .wp-block-image {
  height: 100%;
  margin: 0;
}

.text-image .wp-block-image img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

@media screen and (min-width: 782px) {
  .text-image {
    column-gap: calc(var(--wp--preset--spacing--50) * 1.3);
  }
}

/* --------- Documents list --------- */

.documents-list {
  gap: 3px;
}

/* --------- Board members --------- */

/* Grey cards on white; background and padding are block settings,
   only the accent line and the type sizes live here. Future Projects cards
   (.future-card) share the heading look but have no accent line. */
.person,
.future-card {
  gap: 0;
}

.person {
  line-height: 1.4;
}

.person .wp-block-heading,
.future-card .wp-block-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--accent);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
}

.person .wp-block-heading {
  font-size: var(--wp--preset--font-size--large);
}

.person .wp-block-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 12px 0 16px;
  background-color: var(--wp--preset--color--secondary-light);
}

.future-card .wp-block-heading {
  margin-bottom: var(--wp--preset--spacing--20);
}

.person p {
  margin: 0;
}

/* --------- Rounded cards --------- */

.media-card,
.person,
.future-card {
  border-radius: 12px;
}

/* --------- DH in the Media --------- */

.media-card {
  gap: var(--wp--preset--spacing--20);
}

.media-card__meta {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.media-card__title {
  margin: 0;
}

.media-card__title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.media-card__title a:hover,
.media-card__title a:focus-visible {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}

/* --------- Contact Us --------- */

.donate-details {
  gap: 0;
  /* Reached through #donate from the floating button; keeps the heading of
     the block clear of the screen edge. */
  scroll-margin-top: var(--wp--preset--spacing--50);
}

.donate-details p {
  margin-top: 0;
}

.whatsapp-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 var(--wp--preset--spacing--40);
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--normal);
  letter-spacing: 0;
}

.whatsapp-button .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.whatsapp-button .wp-block-button__link:hover,
.whatsapp-button .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
}

.contact-social .social-links {
  gap: var(--wp--preset--spacing--30);
}

.contact-social .social-links__icon {
  width: 32px;
  height: 32px;
}

.contact-social .social-links__link--facebook {
  color: #1877f2;
}

.contact-social .social-links__link--instagram {
  color: #e1306c;
}

.contact-social .social-links__link:hover,
.contact-social .social-links__link:focus-visible {
  color: var(--wp--preset--color--primary);
}

/* --------- Sponsors --------- */

.sponsors {
  gap: var(--wp--preset--spacing--50);
}

.sponsors .wp-block-image img {
  width: auto;
  max-height: 80px;
  object-fit: contain;
}

/* --------- Home banner --------- */

/* Height follows the width so the paper dolls (about 18vw tall) fit whole with
   a gap above and below; the 240px floor keeps the strip on phones.
   Cover's own minimum height cannot say max(), so it is left unset. */
.home-banner {
  min-height: max(280px, 18vw);
}

/* Warms the pink paper dolls towards the terracotta of the logo. The flat
   tint over it is the block's own overlay colour. */
.home-banner figure {
  height: 100%;
  width: 100%;
}
.home-banner figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.home-banner .wp-block-column .wp-block-group{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  padding: 50px 20px;
}
.home-banner .wp-block-column .wp-block-group > * {
  max-width: max(300px, 17em);
}
/* The page's only H1, so it is bigger than the theme's H1 size. */
.home-banner h1 {

  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 400;

}

.home-banner p{
  margin-block-start: 0.6em;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--base);
  text-shadow: 0 2px 12px rgb(60 20 8 / 45%);
}

/* --------- Tiles in one row --------- */

/* The short list on Home ("Services are offered irrespective of"): five tiles
   side by side from tablet width, two across on phones, in the cool tint so the
   warm grey cards around them do not pile up. */
.wp-block-list.tiles-row {
  grid-template-columns: repeat(2, 1fr);
}

.tiles-row li {
  background-color: var(--wp--preset--color--surface-alt);
}

@media screen and (min-width: 782px) {
  .wp-block-list.tiles-row {
    grid-template-columns: repeat(5, 1fr);
  }
  .home-banner .wp-block-column .wp-block-group{
    padding: var(--wp--style--root--padding-left);
  }
}

/* --------- Page top photo --------- */

/* Full width under the header. The aspect ratio and focal point are block
   settings; the height cap is not — at full width a 2:1 photo would push
   everything below it off the first screen. */
.page-hero {
  --page-hero-height: min(60vh, 600px);
  margin: 0;
}

.page-hero--short {
  --page-hero-height: min(50vh, 480px);
}

@media screen and (min-width: 1600px) {
  .page-hero {
    --page-hero-height: min(70vh, clamp(600px, 37.5vw, 720px));
  }

  .page-hero--short {
    --page-hero-height: min(60vh, clamp(480px, 37.5vw - 120px, 600px));
  }
}

.page-hero img {
  width: 100%;
  max-height: var(--page-hero-height);
}

/* !important: the block's aspect ratio prints min-height: unset inline, and at
   2:1 a phone leaves the title under 190px. width: without it the height caps
   shrink the banner sideways through that same aspect ratio. */
.wp-block-cover.page-hero {
  width: 100%;
  min-height: 220px !important;
  max-height: var(--page-hero-height);
}

/* --------- Need Help: How to browse safely --------- */

/* Grey rows on white, like the Downloads list. */
.browse-safely {
  gap: 3px;
}

.browse-safely .wp-block-details {
  padding: 14px var(--wp--preset--spacing--40);
  border: 0;
  border-radius: 8px;
  background-color: var(--wp--preset--color--surface);
}

.browse-safely .wp-block-details > summary::after {
  background-color: var(--wp--preset--color--secondary);
}

.browse-safely .wp-block-details:last-of-type {
  border-bottom: 0;
}