/*
  content-public.css: website pages built from sections (the Content module, public site). Colours
  come from tokens only (StyleRules) and layout uses logical properties, so the RTL build needs
  nothing extra.
*/

/* ---- "Not yet translated" notice above a page shown in Arabic ---- */
.bfau-page-fallback {
  padding-block: 0.75rem;
  background: color-mix(in srgb, var(--bfau-primary) 10%, var(--bfau-surface));
  color: var(--bfau-heading);
  font-size: 0.95rem;
}

.bfau-page-fallback .bx {
  font-size: 1.25rem;
  color: var(--bfau-primary-text);
}

/* ---- Regions ---- */
.bfau-region-top,
.bfau-region-bottom {
  padding-block: 3rem;
}

.bfau-region-top {
  background: color-mix(in srgb, var(--bfau-primary) 4%, var(--bfau-surface));
}

.bfau-region-body {
  padding-block: 3.5rem;
}

.bfau-section + .bfau-section {
  margin-block-start: 2.5rem;
}

.bfau-section-heading {
  margin-block-end: 1rem;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--bfau-heading);
}

/* ---- Call to action ---- */
.bfau-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.25rem;
  border-radius: var(--bfau-radius-lg);
}

.bfau-cta-text {
  flex: 1 1 22rem;
}

.bfau-cta-light {
  background: var(--bfau-surface);
  border: 1px solid var(--bfau-border);
  box-shadow: var(--bfau-shadow);
}

.bfau-cta-brand {
  background-image: linear-gradient(135deg, var(--bfau-primary), var(--bfau-dark-section));
  color: var(--bfau-on-primary);
}

.bfau-cta-brand .bfau-section-heading,
.bfau-cta-brand .bfau-prose,
.bfau-cta-brand .bfau-prose a {
  color: var(--bfau-on-primary);
}

.bfau-cta-brand .default-btn {
  background-color: var(--bfau-on-primary);
  color: var(--bfau-primary);
}

/* ---- Highlighted note ---- */
.bfau-note {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--bfau-radius-lg);
  border-inline-start: 0.35rem solid var(--bfau-info);
  background: color-mix(in srgb, var(--bfau-info) 8%, var(--bfau-surface));
}

.bfau-note-important {
  border-inline-start-color: var(--bfau-warning);
  background: color-mix(in srgb, var(--bfau-warning) 10%, var(--bfau-surface));
}

.bfau-note-icon {
  flex-shrink: 0;
  font-size: 1.75rem;
  color: var(--bfau-info);
}

.bfau-note-important .bfau-note-icon {
  color: var(--bfau-warning);
}

.bfau-note-heading {
  margin-block-end: 0.5rem;
  font-size: 1.2rem;
}

/* ---- Landing pages: no title band. Without a banner at the top, keep clear of the floating menu ---- */
.bfau-page-spacer {
  block-size: 7rem;
  background-image: linear-gradient(135deg, var(--bfau-dark-section), var(--bfau-primary));
}

/* ---- Banner (a slide, when several follow one another) ---- */
.bfau-banner {
  position: relative;
  min-block-size: clamp(26rem, 70vh, 40rem);
  overflow: hidden;
  background: var(--bfau-dark-section);
}

.bfau-banner-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bfau-banner-overlay {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: inherit;
  padding-block: 8rem 4rem;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--bfau-dark-section) 80%, transparent), color-mix(in srgb, var(--bfau-dark-section) 20%, transparent));
}

[dir="rtl"] .bfau-banner-overlay {
  background-image: linear-gradient(270deg, color-mix(in srgb, var(--bfau-dark-section) 80%, transparent), color-mix(in srgb, var(--bfau-dark-section) 20%, transparent));
}

.bfau-banner-text {
  max-inline-size: 40rem;
  /* Over the photo's dark overlay: on-photo, never on-primary (near-black on a light brand colour). */
  color: var(--bfau-on-photo);
}

.bfau-banner-text h2 {
  margin-block-end: 1rem;
  text-transform: none;
  color: var(--bfau-on-photo);
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
}

.bfau-banner-text p {
  margin-block-end: 1.75rem;
  color: var(--bfau-on-photo);
  font-size: 1.15rem;
  opacity: 0.92;
}

.bfau-banners .carousel-indicators {
  margin-block-end: 1.5rem;
}

/* ---- Picture with text ---- */
.bfau-picture-image {
  display: block;
  inline-size: 100%;
  border-radius: var(--bfau-radius-lg);
  box-shadow: var(--bfau-shadow);
}

/* ---- Key figures ---- */
.bfau-figure {
  block-size: 100%;
  padding: 1.75rem 1rem;
  border-radius: var(--bfau-radius-lg);
  background: color-mix(in srgb, var(--bfau-primary) 7%, var(--bfau-surface));
  text-align: center;
}

.bfau-figure-number {
  font-family: var(--bfau-font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bfau-primary-text);
}

.bfau-figure-label {
  margin-block-start: 0.5rem;
  color: var(--bfau-heading);
}

/* ---- Shared regions ---- */
.bfau-announcement {
  padding-block: 0.55rem;
  background: var(--bfau-primary);
  color: var(--bfau-on-primary);
  font-size: 0.95rem;
}

.bfau-announcement a {
  color: var(--bfau-on-primary);
  font-weight: 600;
  text-decoration: underline;
}

.bfau-site-region-sidebar {
  margin-block-start: 2rem;
}

.bfau-site-region-footer {
  padding-block-end: 2.5rem;
  margin-block-end: 2.5rem;
  border-block-end: 1px dashed color-mix(in srgb, var(--bfau-on-photo) 25%, transparent);
}

.bfau-site-region-footer,
.bfau-site-region-footer .bfau-section-heading,
.bfau-site-region-footer .bfau-section-text,
.bfau-site-region-footer .bfau-section-text p,
.bfau-site-region-footer .bfau-prose,
.bfau-site-region-footer .bfau-prose a {
  /* On the dark footer band: the light on-photo colour, never the brand colour's own text colour
     (dark on Beirut gold) or the body text colour (dark grey). */
  color: var(--bfau-on-photo);
}

/* ---- An arrow that points "forward" in both directions ---- */
[dir="rtl"] .bfau-flip-rtl {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---- "Latest news" ---- */
.bfau-latest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-block-end: 1.25rem;
}

.bfau-latest-head .bfau-section-heading {
  margin: 0;
}

.bfau-latest-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bfau-primary-text);
  font-weight: 600;
}

/* ---- A grid of photos (a cause's gallery) ---- */
.bfau-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.bfau-gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: var(--bfau-radius);
  aspect-ratio: 1;
}

.bfau-gallery-grid img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.bfau-gallery-grid a:hover img,
.bfau-gallery-grid a:focus-visible img {
  transform: scale(1.05);
}

/* ==== Huruma demo 3 (docs/modules/05-content.md §11). The template's own classes do the drawing;
   these rules only supply what its stripped demo pictures used to (the photos behind the hero and
   the mission band), keep the demo's bands inside the page, and follow the language's direction. ==== */

/* ---- The hero: the banner's photo behind the darkened layer the template draws ---- */
.home-banner-three.bfau-d3-hero .home-item {
  block-size: min(800px, 100svh);
  min-block-size: 32rem;
}

.bfau-d3-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.home-banner-three .main-banner-content .bfau-d3-hero-title {
  margin: 0 0 1rem;
  color: var(--bfau-on-photo);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
  text-transform: none;
}

.home-banner-three .main-banner-content .banner-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bfau-d3-hero-dots {
  margin-block-end: 2.5rem;
}

.bfau-d3-hero-dots [data-bs-target] {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border: 1px solid var(--bfau-primary);
  border-radius: 50%;
  background-color: transparent;
}

.bfau-d3-hero-dots .active {
  background-color: var(--bfau-primary);
}

/* ---- Fame counters: without a picture the text takes the container's width ---- */
.bfau-fame .fame-area-content.bfau-fame-alone {
  max-inline-size: none;
  margin-inline: 0;
}

.bfau-fame .fame-image img {
  inline-size: 100%;
  border-radius: var(--bfau-radius-lg);
}

.bfau-fame .fame-area-content .single-fun-fact {
  text-align: start;
}

/* ---- Text and picture with text ---- */
.bfau-d3-text-body {
  max-inline-size: 52rem;
  margin-inline: auto;
}

.bfau-d3-picture-image {
  inline-size: 100%;
  border-radius: var(--bfau-radius-lg);
  box-shadow: var(--bfau-shadow);
}

/* ---- Call to action band ---- */
.bfau-d3-cta .bfau-d3-cta-text,
.bfau-d3-cta .bfau-d3-cta-text p {
  max-inline-size: 40rem;
  margin-inline: auto;
  color: var(--bfau-on-photo);
}

.bfau-d3-cta .donate-btn .flaticon-right {
  margin-inline-start: 0.25rem;
}

/* ---- Latest news as picture cards ---- */
.bfau-d3-news-image {
  aspect-ratio: 4 / 3;
  background: var(--bfau-dark-section);
}

.bfau-d3-news-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bfau-d3-news .blog-item .content {
  inset-inline: 0;
}

/* No picture: the template's own dark scrim (.blog-item .image::before, a positioned pseudo-element)
   paints ON TOP of the placeholder's gradient regardless of DOM order — a positioned box always
   paints after a non-positioned sibling in the same stacking context — which is what washed the
   designed gradient down to a flat grey. Only a real photo needs darkening for the white overlay text;
   the placeholder is already designed to sit under that text on its own. */
.bfau-d3-news .blog-item .image:not(:has(img))::before {
  content: none;
}

/* The icon stays in the card's own upper band, clear of the title/date/button the template anchors to
   the bottom (.blog-item .content, position: absolute; bottom: 0) — the h3 rule below caps the title
   at two lines, so the content box's worst-case height never reaches this far up, at any card width or
   language. */
.bfau-d3-news-image .bfau-card-placeholder {
  align-items: flex-start;
  padding-block-start: 1.25rem;
  font-size: 2rem;
}

/* With the photo scrim gone (above), the title needs its own legible surface instead — a solid panel
   behind the text, confined to the content box itself, so the rest of the placeholder (the icon, the
   gradient) still reads as the card's "picture" above it. Readable in both themes: --bfau-dark-section
   is the near-black dark-mode token as much as the navy light-mode one. */
.bfau-d3-news .blog-item .image:not(:has(img)) + .content {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bfau-dark-section) 92%, transparent) 0%,
    color-mix(in srgb, var(--bfau-dark-section) 80%, transparent) 65%,
    transparent 100%
  );
}

/* The title itself: capped at two lines so the content box's height is predictable regardless of how
   long a translated title runs — the guarantee the icon's clearance above relies on. */
.bfau-d3-news .blog-item .content h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bfau-d3-news-all {
  margin-block: 1rem 2rem;
}

/* ---- Feature boxes and process steps: Huruma's font icons in place of its demo pictures ---- */
.bfau-features .solve-item .icon i,
.bfau-process .process-item .icon i {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--bfau-primary-text);
}

.bfau-features .solve-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bfau-process .process-image img,
.bfau-places .map-img img {
  inline-size: 100%;
  border-radius: var(--bfau-radius-lg);
}

/* ---- Mission tabs: the band sizes to its text, over the photo when there is one ---- */
.mission-area.bfau-mission {
  block-size: auto;
  padding-block: 6rem;
  overflow: hidden;
}

.bfau-mission .bfau-mission-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bfau-mission .container {
  position: relative;
  z-index: 1;
}

.bfau-mission .mission-tab.mission-tab-three {
  inset-block-start: auto;
  margin-inline: auto 0;
}

.bfau-mission .mission-tab-three .bfau-prose,
.bfau-mission .mission-tab-three .bfau-prose p {
  color: var(--bfau-on-photo);
}

.bfau-mission .mission-list-tab .tabs li {
  margin-inline: 0 1.5rem;
}

.bfau-mission .mission-list-tab .tabs a:focus-visible {
  outline: 2px solid var(--bfau-primary);
  outline-offset: 4px;
}

/* ---- Where we work: the measure sits over its bar's end ---- */
.bfau-places .skill-bar .progress-number-mark {
  inset-inline-start: 0;
}

[dir="rtl"] .bfau-places .skill-bar .progress-number-mark {
  transform: translateX(50%);
}

.bfau-places .skill-bar .progress-content {
  background-color: var(--bfau-primary);
  transition: inline-size 1s ease;
}

/* ---- The gallery strip: photos side by side, scrolling sideways on a phone ---- */
.bfau-gallery-strip-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.bfau-gallery-strip .instagram-box {
  aspect-ratio: 1;
  scroll-snap-align: start;
}

.bfau-gallery-strip .instagram-box img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bfau-gallery-strip .section-title {
  margin-block-end: 2rem;
}

/* ---- The picture viewer ---- */
.bfau-lightbox {
  inline-size: 100vw;
  max-inline-size: 100vw;
  block-size: 100vh;
  max-block-size: 100vh;
  margin: 0;
  padding: 3.5rem 4rem;
  border: 0;
  background: color-mix(in srgb, var(--bfau-dark-section) 97%, transparent);
  color: var(--bfau-on-photo);
}

.bfau-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bfau-lightbox::backdrop {
  background: color-mix(in srgb, var(--bfau-dark-section) 60%, transparent);
}

.bfau-lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-block-size: 100%;
  margin: 0;
}

.bfau-lightbox-image {
  max-inline-size: 100%;
  max-block-size: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: var(--bfau-radius);
}

.bfau-lightbox-caption {
  text-align: center;
}

.bfau-lightbox button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: 50%;
  /* Light on the viewer's dark backdrop whatever the brand colour: on-photo, not on-primary. */
  background: color-mix(in srgb, var(--bfau-on-photo) 15%, transparent);
  color: var(--bfau-on-photo);
  font-size: 1.75rem;
}

.bfau-lightbox button:hover,
.bfau-lightbox button:focus-visible {
  background: var(--bfau-primary);
}

.bfau-lightbox-close {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.bfau-lightbox-previous {
  inset-inline-start: 0.75rem;
}

.bfau-lightbox-next {
  inset-inline-end: 0.75rem;
}

@media (max-width: 575.98px) {
  .bfau-lightbox {
    padding-inline: 1rem;
  }

  .bfau-lightbox-previous,
  .bfau-lightbox-next {
    inset-block-end: 1rem;
  }
}

/* The line above the hero's heading reads as a label, not a second heading. */
.home-banner-three.bfau-d3-hero .main-banner-content > span {
  display: block;
  margin-block-end: 0.75rem;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

/* Process steps without a picture: the steps side by side. */
.bfau-process-row .process-item {
  block-size: 100%;
}

/* The template capitalises every word of headings and buttons; staff text is shown as written. */
.bfau-page :is(h1, h2, h3, h4, h5, h6, .section-title span, .solve-area-content span, .fame-area-content span, .country-area-content span, .mission-tab span, .default-btn, .optional-btn, .donate-btn, .blog-btn-one, .process-btn) {
  text-transform: none;
}

/* Dark mode: the template's heading colour turns light, so the mission box and the news button take
   the dark-section colour instead. */
.bfau-mission .mission-tab.mission-tab-three {
  background-color: var(--bfau-dark-section);
}

/* The template forces this button's colour to the heading token (!important), so the token itself is
   re-bound here — light mode only. Unscoped, this used to win in dark mode too (four classes beat
   templates.css's dark-mode fix, which is only three classes plus the theme attribute) and rebound
   --bfau-heading to --bfau-dark-section's OWN dark-mode value: near-black, on the near-black surface
   that same dark-mode fix gives the button's background — "Read more" at a 1.18 contrast ratio,
   found only once a demo-3 news section was actually rendered under this guard. */
html[data-bs-theme="light"] .bfau-d3-news .blog-item .content .blog-btn-one {
  --bfau-heading: var(--bfau-dark-section);
}

/* ---- A preview link's bar: fixed at the bottom, so the menu bar (which floats over the top of the
   page) never hides it and the page itself is laid out exactly as it will be once published. ---- */
.bfau-preview-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1050;
  padding-block: 0.75rem;
  /* The heading colour on the page background: dark on light in light mode, light on dark in dark mode. */
  background: var(--bfau-heading);
  color: var(--bfau-body-bg);
  font-size: 0.95rem;
  box-shadow: 0 -0.25rem 1rem color-mix(in srgb, var(--bfau-heading) 30%, transparent);
}

.bfau-preview-bar .bx {
  font-size: 1.25rem;
  color: var(--bfau-primary-text);
}

/* ---- The video viewer: a banner's video in the picture viewer's dialog, at 16:9 ---- */
.bfau-video-frame {
  inline-size: min(100%, 70rem);
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--bfau-radius);
  background: var(--bfau-dark-section);
}

/* The template's play button beside the banner's text (index-3.html's banner-bar). On phones the
   template drops the bar; the button then sits under the buttons, where a thumb reaches it. */
@media (max-width: 991.98px) {
  .home-banner-three .banner-bar::before,
  .home-banner-three .banner-bar::after {
    display: none;
  }

  .home-banner-three .banner-bar .banner-video {
    position: static;
    margin-block-start: 2rem;
    text-align: start;
  }

  .home-banner-three .banner-bar .banner-video span {
    position: static;
    margin-inline-start: 0.75rem;
  }
}

/* ---- The "Video" section: one video from the library, an uploaded file or a link ---- */
.bfau-video-section,
.bfau-d3-video {
  padding-block: 3rem;
}

.bfau-video-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--bfau-radius);
  aspect-ratio: 16 / 9;
  background: var(--bfau-dark-section);
}

.bfau-video-box img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bfau-video-box .about-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bfau-video-native {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
}

.bfau-video-caption {
  margin-block-start: 1rem;
  text-align: center;
  color: var(--bfau-body);
}