/*
  templates.css: BFAU's extension of the Huruma template for its page shells (CLAUDE.md §11b, "Every
  page follows a template page"). The template's own classes do the drawing; this sheet only adds
  what the template leaves to the site:

  - the page banner of the inner-page shell (_InnerPage.cshtml): the template's page-title-area on the
    brand gradient instead of a demo photo, with the heading and breadcrumb;
  - one shared style for rich text on every public page ("prose"), taken from the template's article
    text (single-blog.html) and privacy-policy.html, with Arabic line height and justification;
  - the picture rules: a picture is never enlarged beyond its natural size, a small or portrait cover
    is a figure beside the text, listing cards crop to one ratio and show a placeholder without a
    picture;
  - the side-column widgets' pictures (the template draws them with inline background images, which
    the site never writes).

  Tokens only (StyleRules) and logical properties, so the RTL build needs nothing extra. Every class
  this sheet introduces starts with bfau- (PublicTemplateRules).
*/

/* ==== The page shells ==== */
.bfau-template-page {
  display: flow-root;
}

/* The template's page banner, on the brand gradient. Doubled class: the template's sheet loads later. */
.page-title-area.bfau-page-banner {
  block-size: auto;
  padding-block: 9.5rem 4rem;
  background-image: linear-gradient(135deg, var(--bfau-dark-section), var(--bfau-primary));
  background-attachment: scroll;
}

.page-title-area.bfau-page-banner::before {
  display: none;
}

/* A page with a wide cover photo (PublicShell.CoverKey): the photo fills the banner, a dark scrim
   keeps the (single) heading readable over it wherever the photo is light, and the banner's own
   min-block-size gives the image room instead of the title band cropping it. The photo never carries
   its own heading — that would draw the page's title a second time; see docs/modules/03-appearance.md
   and CLAUDE.md §11b. */
.page-title-area.bfau-page-banner.bfau-page-banner--photo {
  position: relative;
  overflow: hidden;
  min-block-size: 20rem;
  background-image: none;
}

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

.bfau-page-banner--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bfau-photo-scrim-top), var(--bfau-photo-scrim-bottom));
  z-index: 1;
}

.bfau-page-banner--photo .d-table {
  position: relative;
  z-index: 2;
}

.bfau-page-banner .page-title-content {
  margin-block-start: 0;
}

/* The template styles its banner heading as an h2; the page's own title is the page's h1. */
.bfau-page-banner .page-title-content h1 {
  margin: 0;
  /* Light text over the banner's photo scrim or its dark-to-brand gradient: on-photo. on-primary is
     near-black for a light brand colour (Beirut gold), which the preset sweep measured at 2.9:1. */
  color: var(--bfau-on-photo);
  font-size: clamp(1.6rem, 3.5vw, 2.625rem);
  line-height: 1.3;
  /* The template capitalises every word: a title is shown as staff wrote it. */
  text-transform: none;
}

.bfau-page-banner .page-title-content ul li,
.bfau-page-banner .page-title-content ul li a {
  color: var(--bfau-on-photo);
}

.bfau-page-banner .page-title-content ul li a:hover,
.bfau-page-banner .page-title-content ul li a:focus-visible {
  text-decoration: underline;
}

.bfau-page-lead {
  max-inline-size: 48rem;
  margin: 0.75rem auto 0;
  color: var(--bfau-on-photo);
  opacity: 0.9;
  font-size: 1.05rem;
}

/* ==== Prose: rich text on every public page ==== */
.bfau-prose {
  color: var(--bfau-text);
  font-size: 1.0625rem;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.bfau-prose p {
  margin-block: 0 1.1em;
}

.bfau-prose > :last-child,
.bfau-prose p:last-child {
  margin-block-end: 0;
}

.bfau-prose :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 1.6em 0.6em;
  color: var(--bfau-heading);
  line-height: 1.4;
  text-transform: none;
}

.bfau-prose > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

.bfau-prose h1,
.bfau-prose h2 {
  font-size: 1.75rem;
}

/* single-blog.html's article headings: 25px. */
.bfau-prose h3 {
  font-size: 1.5625rem;
}

.bfau-prose h4 {
  font-size: 1.25rem;
}

.bfau-prose :is(h5, h6) {
  font-size: 1.1rem;
}

.bfau-prose :is(ul, ol) {
  margin-block: 0 1.25em;
  padding-inline-start: 1.75rem;
}

.bfau-prose li {
  position: relative;
  margin-block-end: 0.5em;
}

/* The template's list marker (its side-column category lists): a small brand square. */
.bfau-prose ul {
  list-style: none;
}

.bfau-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.25rem;
  inset-block-start: 0.75em;
  inline-size: 7px;
  block-size: 7px;
  background: var(--bfau-primary);
}

.bfau-prose ol li::marker {
  color: var(--bfau-primary-text);
  font-weight: 700;
}

.bfau-prose a {
  color: var(--bfau-primary-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bfau-prose strong,
.bfau-prose b {
  color: var(--bfau-heading);
}

/* The template's blockquote, sized for long quotes rather than one line. */
.bfau-prose blockquote {
  margin-block: 1.75em;
  padding: 1.75rem 2rem !important;
  text-align: start;
}

.bfau-prose blockquote p {
  font-size: 1.2rem !important;
}

.bfau-prose blockquote::after {
  inset-inline-start: 0;
}

.bfau-prose table {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 1.5em;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95em;
}

.bfau-prose :is(th, td) {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--bfau-border);
  text-align: start;
  vertical-align: top;
}

.bfau-prose thead th {
  background: color-mix(in srgb, var(--bfau-primary) 10%, var(--bfau-surface));
  color: var(--bfau-heading);
}

.bfau-prose figure {
  margin-block: 1.75em;
}

.bfau-prose figcaption {
  margin-block-start: 0.5rem;
  color: var(--bfau-text-muted);
  font-size: 0.875em;
  text-align: center;
}

/* A picture in the text is never wider than the column, and never enlarged (no width is forced). */
.bfau-prose img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--bfau-radius);
}

.bfau-prose hr {
  margin-block: 2em;
  border-color: var(--bfau-border);
}

/* Arabic reads better with more room between lines, justified like printed Arabic text. */
.bfau-prose:lang(ar),
[lang="ar"] .bfau-prose {
  line-height: 2.05;
}

.bfau-prose:lang(ar) p,
[lang="ar"] .bfau-prose p {
  text-align: justify;
}

/* ==== The reading column and its side column (privacy-policy.html, about.html, single-blog.html) ==== */
.bfau-reading + .bfau-reading {
  margin-block-start: 2.5rem;
}

/* A section placed in the side column sits in the template's widget box. */
.widget-area .bfau-widget-section .bfau-section-heading {
  font-size: 1.25rem;
}

.widget-area .widget_categories ul li.bfau-current > a {
  color: var(--bfau-primary-text);
}

.widget-area .widget_categories ul li .bfau-count {
  float: inline-end;
  color: var(--bfau-text-muted);
  font-weight: 400;
}

/* The template's thumbnails are inline background images: here they are real pictures. */
.widget-area .widget_huruma_posts_thumb .item .thumb {
  float: inline-start;
  margin-inline: 0 15px;
  border-radius: var(--bfau-radius);
}

.bfau-thumb {
  inline-size: 80px;
  block-size: 80px;
  object-fit: cover;
}

.bfau-thumb-empty {
  display: grid;
  place-items: center;
  inline-size: 80px;
  block-size: 80px;
  background: color-mix(in srgb, var(--bfau-primary) 12%, var(--bfau-surface));
  color: var(--bfau-primary-text);
  font-size: 1.75rem;
}

.widget-area .widget_huruma_posts_thumb .item .info time {
  display: block;
  color: var(--bfau-text-muted);
  font-size: 0.8rem;
}

.widget-area .widget_huruma_posts_thumb .item .info .title {
  font-size: 1rem;
}

.widget-area .widget_huruma_posts_thumb .item .info .title a {
  color: var(--bfau-heading);
}

.bfau-attachment-size {
  color: var(--bfau-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
}

/* The article's previous and next links: the template's, with the titles. */
.post-navigation .navigation-links .nav-next {
  text-align: end;
}

.bfau-nav-title {
  display: block;
  color: var(--bfau-heading);
  font-weight: 600;
}

/* ==== Pictures ==== */

/* A cover wide enough for the column (PictureFit.IsCover). */
.bfau-cover {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--bfau-radius);
}

/* A small or portrait cover: a figure beside the meta line, at most its own size. */
.bfau-figure {
  /* The template frames a figure in the article text; a cover beside the meta line stands alone. */
  padding: 0;
  background: none;
  float: inline-end;
  max-inline-size: min(40%, 22rem);
  margin-block: 0 1rem;
  margin-inline: 1.5rem 0;
}

.bfau-figure img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--bfau-radius);
  box-shadow: var(--bfau-shadow-soft);
}

@media (max-width: 575.98px) {
  .bfau-figure {
    float: none;
    max-inline-size: 100%;
    margin-block-start: 1.25rem;
    margin-inline: 0;
    text-align: center;
  }

  .bfau-figure img {
    display: inline-block;
  }
}

/* Listing cards: one ratio, cropped, whatever the picture's shape. */
.bfau-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--bfau-radius);
  background: color-mix(in srgb, var(--bfau-primary) 10%, var(--bfau-surface));
}

.bfau-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Portraits (an author's photo) keep the face: crop from the bottom, not the middle. */
  object-position: center top;
}

/* No picture: a designed placeholder in the brand colours, never an empty box. */
.bfau-card-placeholder {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bfau-primary) 18%, var(--bfau-surface)), color-mix(in srgb, var(--bfau-dark-section) 22%, var(--bfau-surface)));
  color: var(--bfau-primary-text);
  font-size: 3rem;
}

/* The template's card text box sits over the picture's lower edge; keep the cards even in a row. */
.single-blog .content {
  min-block-size: 9rem;
}

.single-blog .content .bfau-card-summary {
  margin-block: 0.5rem 0;
  font-size: 0.95rem;
}

/* ==== The error page (error-404.html): a large number instead of the template's picture ==== */
.bfau-error-code {
  color: var(--bfau-primary-text);
  font-family: var(--bfau-font-heading);
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 700;
  line-height: 1;
}

.error-area.bfau-error {
  position: relative;
  block-size: auto;
  min-block-size: 100vh;
  padding-block: 9rem 5rem;
}

/* Desktop, light mode: the 404 page's own background is the near-white page background, and the
   transparent header (navbar-style-three) is styled for the dark banner every OTHER page puts under
   it — so the wordmark, menu links and language switcher were white on white. A band behind the header
   only, the same brand gradient the inner-page banner uses (bfau-page-banner), gives the header
   somewhere dark to sit without darkening the error content itself.

   The band's own height must stay comfortably under .error-area's padding-block-start (9rem = 144px,
   below): that padding is where .bfau-error-code starts, and its clamp()-sized box (up to 10rem = 160px
   tall) is always taller than the gap between the band's bottom edge and the padding, so ANY band taller
   than the padding lands partly behind the number — half on the gradient, half on the page background,
   with the primary-coloured digits unreadable on the half that matches their own colour. 130px covers
   Huruma's own transparent header (contact bar + nav row, ~100px) with room to spare, while staying
   under the 144px padding with a safety margin — the number is guaranteed entirely clear of the band
   regardless of viewport width. tests/Bfau.Web.Visual.Tests's AssertErrorCodeClearOfHeaderBandAsync
   asserts this holds (zero vertical overlap between the two boxes), not just "looks fine at 1280". */
.error-area.bfau-error::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 130px;
  background-image: linear-gradient(135deg, var(--bfau-dark-section), var(--bfau-primary));
  z-index: 0;
}

.error-area.bfau-error .d-table {
  position: relative;
  z-index: 1;
}

/* ==== Wrappers, and the parts the template leaves open ==== */

/* Section and page wrappers (a section type, a landing page, a shared region): each holds its own
   floats, so a figure beside the text never spills into the next section. */
.bfau-section-text,
.bfau-figures,
.bfau-d3-text,
.bfau-page-landing,
.bfau-site-region {
  display: flow-root;
}

/* A field that failed: the template's control with the danger colour. */
.bfau-has-error .form-control,
.bfau-has-error .form-select {
  border-color: var(--bfau-danger);
}

/* Two of the template's buttons side by side (upcoming / past; register / add to calendar). */
.bfau-switch-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

.bfau-widget-actions {
  display: grid;
  gap: 0.75rem;
}

/* Both buttons must share the same inline edges: the template's own .optional-btn carries a stray
   margin-inline-start (the horizontal button-pair layout it was designed for, huruma's ltr/style.css
   and its rtl mirror both set it) that, stacked full width in this grid, ate 10px off one side and
   shifted it out of line with .default-btn above it. inline-size makes the "full width" explicit
   rather than relying on the grid's default stretch. */
.bfau-widget-actions :is(.default-btn, .optional-btn) {
  justify-content: center;
  text-align: center;
  inline-size: 100%;
  margin-inline: 0;
}

/* Nothing to list yet: a quiet, centred note instead of an empty page. */
.bfau-listing-empty {
  padding-block: 3rem;
  color: var(--bfau-text-muted);
  text-align: center;
}

.bfau-listing-empty .bx {
  display: block;
  margin-block-end: 0.75rem;
  color: var(--bfau-primary-text);
  font-size: 3rem;
}

/* The events listing: the template's event rows, one under the other (events.html shows them in a carousel). */
.bfau-event-list .event-item + .event-item {
  margin-block-start: 1.5rem;
}

/* ============================================================================
   round4d: the template forces Title Case on real text.
   ============================================================================ */

/* The vendored CSS (lib/huruma/{ltr,rtl}/style.css and lib/huruma/css/meanmenu.min.css) sets
   text-transform: capitalize on the selectors below. Arabic has no case, so it never showed there,
   but on English and (worst) French text it silently rewrote what staff and the translations
   actually wrote: menu labels ("Les Familles De L'union", "Statuts De L'union", "Annuaire Des
   Professions", "À Propos"), buttons ("Lire La Suite", "Tout voir"), headings ("Pledge To This
   Cause"), and staff-typed content titles ("SAMPLE – Trial Cause For Review" from "Trial cause for
   review"). Every selector here is copied verbatim from the vendored files (never edited directly —
   CLAUDE.md §11b) and only neutralised (text-transform: none), so nothing about layout, colour or
   spacing changes; templates.css loads after both vendored sheets so these win at equal specificity.
   This is every selector in the vendored files that sets text-transform: capitalize — see
   tests/Bfau.Web.Visual.Tests/PublicPageVisualTests.cs's No_visible_text_is_forced_into_title_case
   and Phone_menu_text_is_not_forced_into_title_case, which fail without this block. */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
.default-btn,
.optional-btn,
.section-title span,
.huruma-nav .navbar .navbar-nav .nav-item a,
.huruma-nav .navbar .navbar-nav .nav-item .dropdown-menu li a,
.navbar-style-three .navbar .navbar-nav .nav-item a,
.navbar-style-three .navbar .navbar-nav .nav-item .dropdown-menu li a,
.feature-card .feature-btn,
.about-item span,
.about-item h3,
.solve-area-content span,
.blog-item .content .blog-btn-one,
.process-section .section-title span,
.process-section.center-process .section-title span,
.widget-area .widget .widget-title,
.faq-accordion-content .accordion .accordion-title,
.comments-area .comment-body .reply a,
.comments-area .comment-respond .form-submit input,
.single-footer-widget .footer-quick-links li a,
.subscribe-area .newsletter-form button,
/* meanmenu.min.css: the phone menu's own dropdown-submenu items (a demo-3 selector shape our markup
   never actually nests under — see the comment on the round4b desktop-menu overflow fix above for
   why .mean-nav copies keep their original classes — kept here anyway because it is genuinely in the
   vendored file's capitalize list and a future markup change could make it reachable). */
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  text-transform: none;
}

/* Kept, deliberately: text-transform: uppercase is a different rule from this defect (capitalize
   silently rewrites word casing to whatever the CSS decides; uppercase reads the same in EN/FR/AR, so
   it was never part of the Title Case bug, and BFAU's own text was never reported wrong under it).
   - .navbar-light .navbar-brand, .navbar-light .navbar-brand:hover (meanmenu.min.css): the ONE
     uppercase rule that is actually reachable on this site — .navbar-light is on the real <nav>
     (_Layout.cshtml), and .navbar-brand is the desktop wordmark (.bfau-public-wordmark). An all-caps
     logotype is a normal, deliberate brand treatment, not a mangled sentence, so it is left as-is.
   - .main-nav nav .navbar-nav .nav-item a, .mobile-nav .logo, and the five uppercase rules in
     lib/huruma/{ltr,rtl}/style.css (a revolution-slider caption, the side-widget post date, a contact
     card's heading, a comment's metadata, a footer contact heading) all key off classes
     (.main-nav, .mobile-nav, .contact-info-address, .footer-info-contact,
     .widget_huruma_posts_thumb) that do not exist anywhere in this site's markup — confirmed with a
     grep of every .cshtml file. Unreachable, so left alone rather than guessed at. */

/* Dark mode: the template's card text boxes keep a light background its dark sheet does not cover. */
html[data-bs-theme="dark"] .single-causes .causes-content,
html[data-bs-theme="dark"] .single-blog .content {
  background-color: var(--bfau-surface);
}

/* Dark mode: more of the same class of bug (vendored Huruma CSS pairs a hardcoded white background
   with a tokenised foreground — var(--bfau-heading) or var(--bfau-text) — that the vendor's own
   dark.css does not re-cover for these three, unlike most of the template it does handle: the gallery
   hover button (lib/huruma/ltr/style.css .single-gallery-box .gallery-btn), the desktop menu's
   dropdown children (.navbar-style-three .navbar .navbar-nav .nav-item .dropdown-menu li a) and the
   blog card's "read more" pill (.blog-item .content .blog-btn-one, whose vendored rule carries
   !important on both properties, matched here so ours still wins). Each becomes readable against a
   token surface that flips with the mode instead of staying pinned to white; in light mode
   var(--bfau-surface) IS #ffffff (tokens.css), so this is pixel-identical to Huruma there. */
html[data-bs-theme="dark"] .single-gallery-box .gallery-btn {
  background-color: var(--bfau-surface);
}

html[data-bs-theme="dark"] .navbar-style-three .navbar .navbar-nav .nav-item .dropdown-menu {
  background-color: var(--bfau-surface);
}

html[data-bs-theme="dark"] .navbar-style-three .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--bfau-heading);
}

html[data-bs-theme="dark"] .blog-item .content .blog-btn-one {
  background-color: var(--bfau-surface) !important;
  border-color: var(--bfau-surface) !important;
  color: var(--bfau-heading) !important;
}

/* The footer's about text (_SiteFooterAbout.cshtml, real or the placeholder shown until it is set):
   Huruma never styles this paragraph at all, so it fell back to the page's own body-text colour
   (var(--bfau-text), dark grey) on the dark footer band — 1.56:1. Every other piece of text in this
   same widget (h3, footer-info-contact, footer-quick-links) is styled by the vendor with its own light
   colour for exactly this reason; var(--bfau-on-primary) (white in both modes, tokens.css) matches the
   widget's own h3 and passes comfortably against --bfau-dark-section in both themes. */
.single-footer-widget .bfau-footer-about {
  color: var(--bfau-on-photo);
}

/* Dark mode, keyboard focus: the vendored bootstrap bundle carries a generic `a:focus { color:
   var(--bs-navbar-active-color) }` rule (from its navbar component, minified together with an
   unrelated selector) that reaches every anchor on the page, including .default-btn. In dark mode
   --bs-navbar-active-color happens to land on the same colour as --bfau-primary, which is also the
   button's own background — so a focused button's label becomes invisible on its own fill. Restore the
   button's own label colour, which already reads var(--bfau-on-primary) 4.86:1+ against the button's
   background in both modes. */
html[data-bs-theme="dark"] .default-btn:focus {
  color: var(--bfau-on-primary);
}

/* The template's button writes its label in a hard-coded white on the brand colour (BFAUCRM-146).
   Every preset whose brand colour can carry white text has been darkened until it does (4.5:1), and
   its "text on the brand colour" token is white, so this changes nothing for them. A preset whose
   identity IS a light colour (Beirut gold) chose dark text on the brand colour instead; white on its
   gold reads 2.3:1. The label therefore follows that token. Hovered, the template fills the button
   with the heading colour, so the label takes the page surface (white in light mode, as before; dark
   on the light heading colour of dark mode). */
.default-btn {
  color: var(--bfau-on-primary);
}

.default-btn:hover {
  color: var(--bfau-surface);
}

/* The search widget's button (huruma/single-blog.html, .widget-area .widget_search form button) has the
   same hard-coded white label on the brand colour: 1.9:1 on Beirut gold (BFAUCRM-193). Same rule as
   the button above: the label follows the on-brand token, and takes the page surface when hovered (the
   template fills the hovered button with the heading colour). */
.widget-area .widget_search form button {
  color: var(--bfau-on-primary);
}

.widget-area .widget_search form button:hover {
  color: var(--bfau-surface);
}

/* ============================================================================
   round4b: the desktop menu row, and the events list page. Kept in this one
   block so a change landing here alongside round4's own templates.css edits
   stays easy to tell apart. Nothing above this line is round4b's.
   ============================================================================ */

/* ==== The desktop menu never wraps a label ==== */

/* The template's own nav-item link never declares white-space, so once BFAU's real menu labels ("The
   Union's Families", "The Union's Statutes", "Professions Directory") are longer than the demo's short
   ones, the flex row shrinks each <a> below its label's natural width and the browser wraps the text
   onto a second line — and the trailing dropdown chevron (a separate inline element after the text)
   wraps down onto a line of its own under it. Keeping the label and its chevron on one line is the
   floor: it does nothing by itself to make the row narrower, so it only holds once the row actually
   fits (the margin/font tightening below, and public-shell.js's raised mobile-menu breakpoint). */
.navbar-style-three .navbar .navbar-nav .nav-item > a {
  white-space: nowrap;
}

/* Close the gap between what BFAU's real labels need and what the template's own desktop-menu spacing
   leaves at the xl container (1200-1399px wide, a fixed 1140px container — the narrowest bracket the
   raised mobile-menu breakpoint above still shows the inline menu at, see public-shell.js): measured
   with every label on one line, the menu needed about 85px more than the vendored 14px item margins +
   100px language-switcher gap left inside a 1140px container. Trimming both here (and nowhere narrower
   — the lg bracket's 960px container is the hamburger's now) closes that gap with room to spare. */
.navbar-style-three .navbar .navbar-nav .nav-item > a {
  margin-inline: 8px;
}

.navbar-style-three .navbar .others-options {
  margin-inline-start: 12px;
}

/* The language switcher's own dropdown-menu never sets its own inset (bootstrap.min.css's base
   .dropdown-menu rule does not, and the vendored override above only touches padding/opacity/etc.), so
   closed, it sits wherever the browser's default static placement inside its `position: relative`
   `.language-switcher` lands it (inset-inline-start: 0) — extending its fixed 250px width further along
   the row from there. Anchoring it to the far edge of its own toggle instead (inset-inline-end: 0,
   matching Bootstrap's own .dropdown-menu-end) is the correct fix for the item that opens it: a menu
   belongs under the control that opens it, not spilling further outward from it. */
.navbar-style-three .navbar .others-options .language-switcher .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Every OTHER dropdown-menu (a menu item with children, e.g. "About Us") is exactly the same shape,
   just further left in the row instead of at its very end: the vendored template keeps it display:
   block at all times — opacity/visibility do the showing and hiding, which is what lets it fade in on
   hover instead of popping — so its full ~250px box is real, laid-out width even while invisible. A
   dropdown that opens under an item somewhere in the MIDDLE of the row can still box out past the
   viewport's own right edge while closed, and the browser scrolls to it regardless of whether anyone
   can see it. Tightening the menu above to fit BFAU's real labels on one row moves every item's exact
   position, which is what newly exposed this: a dropdown that used to close comfortably inside the
   viewport now sits close enough to the edge to cross it. Clipping the OUTER row (which already spans
   the full viewport width, so nothing an open dropdown draws inside it was ever going to be visible
   past that edge anyway) to its own horizontal box is the general fix: it stops any closed dropdown's
   invisible overflow from ever reaching the page's own scrollable width, for this one and any other,
   without touching how an actually opened dropdown looks (overflow-y stays visible, so the vertical
   opening animation is untouched). */
.huruma-nav {
  overflow-x: clip;
  overflow-y: visible;
}

/* BFAUCRM-142: the LAST menu item, when it has children, anchors its dropdown to its own far edge. The
   template starts every dropdown at its item's near edge and runs it 250px along the row, which for the
   item at the very end of the row (a short menu, or a long one whose last entry has children) runs past
   the viewport; the outer row's overflow-x clip above then cuts it off, and a visitor sees a dropdown
   that is partly or wholly missing. Anchored to the far edge it grows back over the menu instead. */
.navbar-style-three .navbar .navbar-nav .nav-item:last-child > .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* The lg bracket (992-1199px, a 960px container — narrower again than the xl container above) needs
   more room still: cut the language switcher's own internal spacing too (it does not need the 100px
   the demo gave it once the eyebrow/globe icon sits right next to the menu at this width) and drop the
   link font one size further. Tried first: raising the mobile-menu breakpoint (public-shell.js) past
   this bracket instead of tightening it — abandoned because Bootstrap's own
   `.navbar-expand-md .navbar-collapse{display:flex!important}` (min-width: 768px) fights meanmenu's
   hide at any width above 768, AND the template's whole "phone chrome" media query (the responsive
   top bar, the reveal button's own styling, the logo swap) is keyed to the same 991px, so moving the
   hamburger's threshold without carrying that entire block with it left the reveal button built but
   invisible. Tightening the existing bracket is the smaller, self-contained change. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-style-three .navbar .navbar-nav .nav-item > a {
    font-size: 14px;
  }

  .navbar-style-three .navbar .others-options {
    margin-inline-start: 6px;
  }

  .navbar-style-three .navbar .others-options .language-switcher .dropdown-toggle span {
    display: none;
  }
}

/* ==== The events list (events.html) ==== */

/* The template's event-section is a photo band: a page sets its own background-image (vendor-huruma.py
   strips the demo's own picture to `none`), and a dark ::before overlay over it keeps the section's
   white heading readable over whatever photo is there. The public events list is a system page with no
   picture behind it, so the overlay just paints flat over the ordinary (white, or black in dark mode)
   page background — black at 70% opacity over white is #4d4d4d, exactly the flat grey ground reported.
   Every other listing page (causes, jobs, directory) has no photo-band treatment at all and simply sits
   on the page's own background with white cards on it; give the events list the same designed ground
   instead of a "missing photo": drop the photo-band overlay entirely. */
.event-section.bfau-events-section::before {
  display: none;
}

/* With the overlay gone, the eyebrow ("Events" / "الفعاليات") sits on the ordinary page background
   (var(--bfau-primary) blue, already the colour every other section-title eyebrow on a light page uses)
   instead of on the black overlay, where it read as blue on flat grey — barely readable, per the visual
   contrast guard's own reasoning: a painted ::before overlay is treated as an unknown background and
   skipped, so this exact collision could sit on a real page without the automated contrast scan ever
   seeing it. Removing the overlay is what lets that scan judge this eyebrow's contrast for real. */

/* The date column's watermark clock (.event-time .icon) is authored to hang entirely below the
   card (bottom: -110px, huge: font-size 100px) for the template's own carousel, where each slide has
   generous vertical room below it. The public events list stacks its cards directly on top of one
   another (bfau-event-list), so that same offset lands the icon across THIS card's own bottom edge,
   into the gap, and into the top of the next card — a decorative element from one card bleeding into
   its neighbour. Containing every card to its own box is the general fix (any decoration a card draws
   stays inside that card, whatever card list it is in), not a position tweak keyed to this one icon. */
.bfau-event-list .event-item {
  overflow: hidden;
}

/* The template draws a card's "view" link in the plain brand colour (Beirut gold on white 2.3:1); the text-safe
   brand colour reads on every preset. On hover the template turns it white over its own hover fill: untouched. */
.single-blog:not(:hover) .content .blog-btn {
  color: var(--bfau-primary-text);
}