/* ==========================================
   FORUM IDENTITY — the forum's pages only (/forum…, /en/forum…: body.theme-forum, decided by the server from the
   route table). Served inside /forum-theme.css, which appends the admin's values (Admin › هوية المنتدى) as a later
   `body.theme-forum { --forum-…: … }` rule, so every --forum-* value below is a DEFAULT the admin can override.
   Palette: Layla, FORUM-IDENTITY.md (event profile PDF). Keep the defaults equal to ForumIdentity.Colors (a test checks).
   Scope: the header stays the company's navy bar (only its accent turns red and the forum sub-brand is added); the
   footer stays the company's; the content (<main>) takes the forum palette.
   ========================================== */

.theme-forum {
  --forum-primary: #d21e33;
  --forum-primary-rgb: 210, 30, 51;
  --forum-primary-deep: #a11c34;
  --forum-primary-deep-rgb: 161, 28, 52;
  --forum-hero-start: #d51d33;
  --forum-hero-start-rgb: 213, 29, 51;
  --forum-gold: #bd932e;
  --forum-gold-rgb: 189, 147, 46;
  --forum-gold-ink: #8c6510;
  --forum-gold-ink-rgb: 140, 101, 16;
  --forum-link: #a11c34;
  --forum-link-rgb: 161, 28, 52;
  --forum-surface: #f1e8d2;
  --forum-surface-rgb: 241, 232, 210;
  --forum-ink: #252626;
  --forum-ink-rgb: 37, 38, 38;
  --forum-text: #4b4c4c;
  --forum-text-rgb: 75, 76, 76;
  --forum-on-primary: #ffffff;
  --forum-on-primary-rgb: 255, 255, 255;
}

/* ---- Content: the company tokens re-pointed to the forum palette ---- */
.theme-forum main {
  --accent: var(--forum-primary);
  --accent-rgb: var(--forum-primary-rgb);
  --accent-light: var(--forum-gold);
  --accent-lighter: var(--forum-gold);
  --accent-dark: var(--forum-primary-deep);
  --accent-ink: var(--forum-gold-ink);
  --navy-night: var(--forum-primary-deep);
  --navy-deep: var(--forum-primary-deep);
  --navy-mid: var(--forum-primary);
  --navy-brand: var(--forum-link);
  --navy: var(--forum-primary-deep);
  --navy-light: var(--forum-primary);
  --navy-lighter: var(--forum-link);
  --navy-dark: var(--forum-primary-deep);
  --cream: var(--forum-surface);
  --off-white: var(--forum-surface);
  --text-dark: var(--forum-ink);
  --text-body: var(--forum-text);
  --text-light: var(--forum-on-primary);
  --text-on-dark: var(--forum-on-primary);
  --text-on-dark-muted: var(--forum-on-primary);
  --shadow-accent: 0 12px 32px rgba(var(--forum-primary-rgb), 0.28);
  --shadow-card: 0 10px 30px rgba(var(--forum-gold-ink-rgb), 0.12);
}

/* Headings red on light sections (large text: 3:1 rule, checked on save). */
.theme-forum main .page-section:not(.is-dark) .block-title { color: var(--forum-primary); }

/* ---- Title band: red gradient + gold open ring (CSS only) instead of the navy band and orange triangles ---- */
.theme-forum .page-hero {
  background: linear-gradient(135deg, var(--forum-hero-start) 0%, var(--forum-primary-deep) 100%);
  color: var(--forum-on-primary);
}
.theme-forum .page-hero .hero-tri { display: none; }
.theme-forum .page-hero::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  width: 340px; height: 340px; inset-inline-end: -110px; top: -150px;
  border: 28px solid var(--forum-gold); border-radius: 50%; opacity: .95;
}
.theme-forum .breadcrumb a:hover { color: var(--forum-surface); }

/* ---- Unit tabs ---- */
.theme-forum .unit-tabs a:hover { color: var(--forum-gold-ink); }
.theme-forum .unit-tabs a.active { color: var(--forum-ink); border-bottom-color: var(--forum-primary); }

/* ---- Buttons: primary = red pill with light text; secondary = gold outline ---- */
.theme-forum :is(.btn-accent, .nav-cta, .form-submit-btn) {
  background: var(--forum-primary); color: var(--forum-on-primary); border-radius: var(--radius-full);
  box-shadow: 0 10px 28px rgba(var(--forum-primary-rgb), 0.28);
}
.theme-forum :is(.btn-accent, .nav-cta, .form-submit-btn):hover {
  background: var(--forum-primary-deep); color: var(--forum-on-primary);
  box-shadow: 0 12px 32px rgba(var(--forum-primary-rgb), 0.35);
}
.theme-forum main .btn { border-radius: var(--radius-full); }
.theme-forum main .btn-outline { color: var(--forum-gold-ink); border-color: var(--forum-gold); }
.theme-forum main .btn-outline:hover { background: var(--forum-gold); color: var(--forum-ink); }
.theme-forum main .btn-outline-light:hover { border-color: var(--forum-gold); }

/* ---- Pairs the re-pointing would break (Hassan, REVIEW-F9 🟠1/🟡2/🟡3). The company draws some text in --accent on a
   --navy-* surface and some --navy-deep text on an --accent fill; inside <main> both sides are now reds. Each spot gets a
   pair the contrast check measures (ForumIdentity.Pairs): ---- */
/* Text on the dark-red surfaces (event date box, CTA band, dark sections, title band): the light text colour
   (on-primary on primary-deep / link / primary). */
.theme-forum .event-date-day,
.theme-forum .event-date-month,
.theme-forum .cta-title .gold,
.theme-forum .is-dark .block-title .gold,
.theme-forum .section-title.on-dark .gold,
.theme-forum .is-dark .unit-num,
.theme-forum .is-dark .unit-link,
.theme-forum .detail-facts a,
.theme-forum .detail-facts svg { color: var(--forum-on-primary); }
.theme-forum .is-dark .item-icon { background: rgba(var(--forum-on-primary-rgb), 0.12); color: var(--forum-on-primary); }
.theme-forum main .section-badge.on-dark { background: rgba(var(--forum-on-primary-rgb), 0.12); border-color: rgba(var(--forum-on-primary-rgb), 0.3); color: var(--forum-on-primary); }
/* Small pills on an accent fill (event status, news category, people badge, video play, profile links on hover):
   gold fill with dark ink (ink on gold), never red on red. */
.theme-forum :is(.detail-badge, .news-category-badge, .entity-badge, .video-play),
.theme-forum .detail-profiles a:is(:hover, :focus-visible),
.theme-forum .is-dark .unit-chips a:hover { background: var(--forum-gold); color: var(--forum-ink); }
/* Section eyebrow: the company's orange tint becomes a gold tint, its text the link red (link on white / surface). */
.theme-forum main .section-badge:not(.on-dark) {
  background: rgba(var(--forum-gold-rgb), 0.10); border-color: rgba(var(--forum-gold-rgb), 0.35); color: var(--forum-link);
}
/* Card hover borders: gold instead of the company orange. */
.theme-forum :is(.item-card, .service-card, .unit-card):hover { border-color: rgba(var(--forum-gold-rgb), 0.6); }
/* A primary button on a red surface (CTA band, dark sections): white fill, red text (Layla §4); hover cream + deep red. */
.theme-forum :is(.cta-band, .is-dark) .btn-accent { background: var(--forum-on-primary); color: var(--forum-primary); box-shadow: none; }
.theme-forum :is(.cta-band, .is-dark) .btn-accent:hover { background: var(--forum-surface); color: var(--forum-primary-deep); }

/* Keyboard focus on the red buttons (Layla): a 3 px white ring with an offset (reads on red and dark surfaces) and a
   dark halo outside it (reads on white and cream). */
.theme-forum :is(.btn-accent, .nav-cta, .form-submit-btn):focus-visible {
  outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 8px var(--forum-ink);
}

/* ---- Header: the company bar, with a red accent and the forum sub-brand ---- */
.theme-forum #main-header { --accent: var(--forum-primary); --accent-rgb: var(--forum-primary-rgb); border-bottom-color: rgba(var(--forum-primary-rgb), 0.35); }

/* The sub-brand is one bounded image slot (the forum symbol, or the uploaded logo) — never text in the bar (the
   forum's name is the page's H1 and the image's alt). It may SHRINK (min-width: 0, image max-width: 100%) but never
   grow past its slot, so it can never push the menu or the language button over anything: when the bar is short of
   room the image gets smaller instead. */
.forum-subbrand {
  display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 110px; height: 40px;
  margin-inline-start: 24px; margin-inline-end: auto;
}
/* A fixed height (the width follows from the width/height attributes) so the bar never shifts while the image loads. */
.forum-subbrand img { display: block; flex: 0 1 auto; min-width: 0; width: auto; height: 40px; max-width: 100%; object-fit: contain; }
/* The free space is shared by the sub-brand and the menu, so the menu stays centred as on the company pages. */
.theme-forum .nav-container > .nav-links { margin-inline-end: auto; }

/* The full menu needs the whole bar: on forum pages it folds into the drawer up to 1200 px in both languages (the
   company pages already do so in English), leaving room for the slot. */
@media (max-width: 1200px) {
  .theme-forum header .nav-links { display: none; }
  .theme-forum .nav-actions .nav-cta { display: none; }
  .theme-forum .hamburger { display: flex; }
}
@media (max-width: 600px) {
  .theme-forum .logo-img { height: 32px; }
  .forum-subbrand { margin-inline-start: 16px; max-width: 64px; height: 28px; }
  .forum-subbrand img { height: 28px; }
}
@media (max-width: 380px) {
  .theme-forum .logo-img { height: 28px; }
  .forum-subbrand { margin-inline-start: 12px; max-width: 48px; height: 24px; }
  .forum-subbrand img { height: 24px; }
}

@media (max-width: 600px) {
  .theme-forum .page-hero::after { width: 200px; height: 200px; border-width: 18px; top: -110px; inset-inline-end: -90px; opacity: .45; }
}