/**
 * Tenant Override: RamatHayal770
 * Chabad of Ramat HaChayal — tv2000.co.il editorial-newsroom skin.
 *
 * Visual identity: Israeli broadcast newsroom. Crisp white surfaces,
 * a fixed-top header punctuated by a 6px navy → purple → magenta → red
 * gradient stripe, and a quiet typographic palette built on Heebo with
 * Rubik as the secondary fallback. Hebrew RTL is the primary script —
 * letters carry weight, headlines stay tight, and red is reserved for
 * "live" / "urgent" affordances only.
 *
 * Loaded conditionally via CustomCssPath in appsettings.RamatHayal.json.
 *
 * Color palette (tv2000):
 *   Navy (primary):   #054671 / #0e4976 / #064873 / #194a7c   — chrome, headings, CTA text
 *   Purple:           #7f4fa0 / #804fa0 / #AE509F             — secondary nav, gradient mid-stop
 *   Magenta:          #c14483 / #ce3a6e                       — accent, highlights, emphasis
 *   Red (urgent):     #e9253f / #ed2339 / #c82a1d             — live badges, alert chips
 *   Cyan (focus):     #4adae8 / #1dabd4                       — focus rings, links on dark
 *   Surfaces:         #ffffff / #f8f8f8 / #f6f6f6 / #f2f2f2
 *   Text:             #000000 / #333333 / #656565 / #A1A1A1
 *
 * Layout & geometry:
 *   • Header height        : 78px (fixed-top, white)
 *   • Header stripe        : 6px linear-gradient(navy→purple→magenta→red)
 *   • Card radius          : 0 .. 9px (avatars only at 100%)
 *   • Baseline shadow      : 0 2px 3px 0 rgba(0,0,0,0.05)
 *   • Elevated shadow      : 0 4px 45px 0 rgba(46,104,208,0.10)
 *   • Donate CTA           : white surface + navy text (.trumot_btn-style)
 *
 * Every selector below is scoped under .tenant-ramathayal so the
 * default SimpleDonate skin renders pixel-identical when the tenant
 * body class is absent.
 */

/* Heebo + Rubik are loaded via <link> in _Layout.cshtml when
   TenantBodyClass == "tenant-ramathayal". Keeping them out of an
   @import here avoids the render-blocking parse-then-fetch chain. */

/* =========================================
   1. CSS CUSTOM PROPERTY OVERRIDES
   Full token replacement under the body class.
   Bootstrap --bs-* tokens are remapped so utility
   classes (bg-primary, text-success, …) inherit
   the tv2000 palette without per-component rules.
   ========================================= */

.tenant-ramathayal {
    /* ---- Primary: navy ---- */
    --color-primary:        #0e4976;
    --color-primary-50:     #e6edf4;
    --color-primary-100:    #c2d2e3;
    --color-primary-200:    #9bb4ce;
    --color-primary-300:    #6e91b6;
    --color-primary-400:    #4674a0;
    --color-primary-500:    #194a7c;
    --color-primary-600:    #0e4976;
    --color-primary-700:    #064873;
    --color-primary-800:    #054671;
    --color-primary-900:    #03304f;
    --color-primary-light:  #194a7c;
    --color-primary-dark:   #054671;
    --color-primary-bg:     #e6edf4;

    /* ---- Secondary: purple ---- */
    --color-secondary:      #804fa0;
    --color-secondary-light: #AE509F;
    --color-secondary-dark:  #7f4fa0;
    --color-secondary-bg:    #f0e8f5;

    --color-secondary-50:  #faf6fc;
    --color-secondary-100: #f0e8f5;
    --color-secondary-200: #d9c4e6;
    --color-secondary-300: #b894ce;
    --color-secondary-400: #9764b6;
    --color-secondary-500: #804fa0;
    --color-secondary-600: #7f4fa0;
    --color-secondary-700: #623c7c;
    --color-secondary-800: #452a58;
    --color-secondary-900: #281834;
    --color-secondary-950: #160d1c;

    /* ---- Accent: magenta ---- */
    --color-accent:         #c14483;
    --color-accent-light:   #ce3a6e;
    --color-accent-dark:    #a8366f;
    --color-accent-bg:      #fbeaf2;

    /* ---- Urgent: red (reserved for live / breaking) ---- */
    --color-urgent:         #e9253f;
    --color-urgent-light:   #ed2339;
    --color-urgent-dark:    #c82a1d;
    --color-urgent-bg:      #fde8eb;

    /* ---- Focus / interactive accent: cyan ---- */
    --color-focus:          #1dabd4;
    --color-focus-light:    #4adae8;
    --color-focus-bg:       rgba(74, 218, 232, 0.12);

    /* ---- Surfaces ---- */
    --color-background:     #ffffff;
    --color-surface:         #ffffff;
    --color-surface-alt:     #f8f8f8;
    --color-surface-muted:   #f6f6f6;
    --color-surface-soft:    #f2f2f2;
    --color-border:          #e6e6e6;
    --color-border-light:    #f0f0f0;
    --color-border-strong:   #d0d0d0;

    /* ---- Text ---- */
    --color-text:           #000000;
    --color-text-secondary: #333333;
    --color-text-muted:     #656565;
    --color-text-faint:     #A1A1A1;
    --color-text-on-dark:   #ffffff;

    /* ---- Shadows: low-key newsroom elevation ---- */
    --shadow-card:          0 2px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-card-elevated: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
    --shadow-primary:       0 2px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-primary-lg:    0 4px 45px 0 rgba(46, 104, 208, 0.10);
    --shadow-success:       0 2px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-success-lg:    0 4px 45px 0 rgba(46, 104, 208, 0.10);
    --shadow-accent:        0 2px 3px 0 rgba(0, 0, 0, 0.05);

    /* ---- Border radius: tight, editorial — never above 9px
       except for circular avatars where 100% / 50% applies ---- */
    --radius-none:   0;
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     8px;
    --radius-xl:     9px;
    --radius-2xl:    9px;
    --radius-3xl:    9px;
    --radius-card:   6px;
    --radius-button: 4px;
    --radius-input:  4px;
    --radius-badge:  4px;
    --radius-pill:   100%;

    /* ---- Typography tokens ----
       Heebo is primary (Hebrew + Latin both supported), Rubik is the
       structural fallback, then a system stack. Hebrew/RTL keeps the
       same family — no font swap on direction change. */
    --font-display: 'Heebo', 'Rubik', 'Arial', 'Helvetica Neue', sans-serif;
    --font-body:    'Heebo', 'Rubik', 'Arial', 'Helvetica Neue', sans-serif;
    --font-hebrew:  'Heebo', 'Rubik', 'Arial', sans-serif;

    /* ---- Header geometry ---- */
    --header-height:       78px;
    --header-stripe-height: 6px;
    --header-bg:           #ffffff;
    --header-bg-scrolled:  #ffffff;

    /* ---- Legacy variable compatibility ---- */
    --ir-primary:        #0e4976;
    --ir-primary-dark:   #054671;
    --ir-primary-light:  #194a7c;
    --ir-primary-bg:     #e6edf4;
    --ir-success:        #2ea84a;
    --ir-success-dark:   #207a36;
    --ir-success-light:  #4ac06a;
    --ir-success-bg:     #e6f5ea;

    /* ---- Bootstrap variable overrides ----
       Map Bootstrap's tokens onto the tv2000 palette so utility
       classes (bg-primary, bg-success, bg-info, etc.) and
       Bootstrap components render in navy / green / magenta /
       amber. --bs-success and --bs-warning intentionally use
       *distinct* RGB tuples (green vs amber) so the About-page
       parity-audit doesn't collapse the two utilities into a
       single color. --bs-info maps to magenta and --bs-danger
       to the urgent red — the only place red is at home. */
    --bs-primary:              #0e4976;
    --bs-primary-rgb:          14, 73, 118;
    --bs-primary-bg-subtle:    #e6edf4;
    --bs-primary-border-subtle: rgba(14, 73, 118, 0.28);
    --bs-primary-text-emphasis: #054671;

    --bs-success:              #2ea84a;
    --bs-success-rgb:          46, 168, 74;
    --bs-success-bg-subtle:    #e6f5ea;
    --bs-success-border-subtle: rgba(46, 168, 74, 0.28);
    --bs-success-text-emphasis: #207a36;

    --bs-info:                 #c14483;
    --bs-info-rgb:             193, 68, 131;
    --bs-info-bg-subtle:       #fbeaf2;
    --bs-info-border-subtle:   rgba(193, 68, 131, 0.28);
    --bs-info-text-emphasis:   #a8366f;

    --bs-warning:              #f0a020;
    --bs-warning-rgb:          240, 160, 32;
    --bs-warning-bg-subtle:    #fef3d8;
    --bs-warning-border-subtle: rgba(240, 160, 32, 0.30);
    --bs-warning-text-emphasis: #a86e00;

    --bs-danger:               #e9253f;
    --bs-danger-rgb:           233, 37, 63;
    --bs-danger-bg-subtle:     #fde8eb;
    --bs-danger-border-subtle: rgba(233, 37, 63, 0.30);
    --bs-danger-text-emphasis: #c82a1d;

    --bs-link-color:           #0e4976;
    --bs-link-color-rgb:       14, 73, 118;
    --bs-link-hover-color:     #c14483;
    --bs-link-hover-color-rgb: 193, 68, 131;

    /* Accordion: faint navy tint for active items */
    --bs-accordion-active-bg:              rgba(14, 73, 118, 0.05);
    --bs-accordion-active-color:           #0e4976;
    --bs-accordion-btn-focus-box-shadow:   0 0 0 0.2rem rgba(29, 171, 212, 0.30);
    --bs-accordion-btn-active-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e4976'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* =========================================
   2. GLOBAL BASE
   White canvas, near-black body text.
   ========================================= */

.tenant-ramathayal body {
    background-color: #ffffff;
    color: #333333;
    font-family: 'Heebo', 'Rubik', 'Arial', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   3. TYPOGRAPHY
   Heebo primary, Rubik fallback. Same family in
   RTL — Hebrew gets the same letterforms it would
   in any tv2000 article body.
   ========================================= */

.tenant-ramathayal h1,
.tenant-ramathayal h2,
.tenant-ramathayal h3,
.tenant-ramathayal h4,
.tenant-ramathayal h5,
.tenant-ramathayal h6,
.tenant-ramathayal .h1,
.tenant-ramathayal .h2,
.tenant-ramathayal .h3,
.tenant-ramathayal .h4,
.tenant-ramathayal .h5,
.tenant-ramathayal .h6 {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #000000;
}

/* Scoped heading color: deep ink on light surfaces.
   Wrapped in :where() so the entire selector contributes 0
   specificity — per-surface white overrides below win cleanly. */
:where(.tenant-ramathayal :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.hero *, .cta-section *, .site-footer *)) {
    color: #000000;
}

/* ---- Heading rules on dark surfaces ----
   Eighteen tuples (.hero|.cta-section|.site-footer) × (h1..h6)
   each set color:#ffffff so headings stay legible on the
   tenant's dark bands. Asserted by TenantHeadingColorTests.cs:23-49. */

.tenant-ramathayal .hero h1,
.tenant-ramathayal .hero h2,
.tenant-ramathayal .hero h3,
.tenant-ramathayal .hero h4,
.tenant-ramathayal .hero h5,
.tenant-ramathayal .hero h6,
.tenant-ramathayal .hero__title {
    color: #ffffff;
}

.tenant-ramathayal .cta-section h1,
.tenant-ramathayal .cta-section h2,
.tenant-ramathayal .cta-section h3,
.tenant-ramathayal .cta-section h4,
.tenant-ramathayal .cta-section h5,
.tenant-ramathayal .cta-section h6 {
    color: #ffffff;
}

.tenant-ramathayal .site-footer h1,
.tenant-ramathayal .site-footer h2,
.tenant-ramathayal .site-footer h3,
.tenant-ramathayal .site-footer h4,
.tenant-ramathayal .site-footer h5,
.tenant-ramathayal .site-footer h6 {
    color: #ffffff;
}

/* RTL keeps the same Heebo/Rubik stack — no swap. */
[dir="rtl"] .tenant-ramathayal h1,
[dir="rtl"] .tenant-ramathayal h2,
[dir="rtl"] .tenant-ramathayal h3,
[dir="rtl"] .tenant-ramathayal h4,
[dir="rtl"] .tenant-ramathayal h5,
[dir="rtl"] .tenant-ramathayal h6,
.tenant-ramathayal [dir="rtl"] h1,
.tenant-ramathayal [dir="rtl"] h2,
.tenant-ramathayal [dir="rtl"] h3,
.tenant-ramathayal [dir="rtl"] h4,
.tenant-ramathayal [dir="rtl"] h5,
.tenant-ramathayal [dir="rtl"] h6 {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}

.tenant-ramathayal p,
.tenant-ramathayal li,
.tenant-ramathayal label {
    color: #333333;
}

.tenant-ramathayal small,
.tenant-ramathayal .text-muted {
    color: #656565;
}

/* =========================================
   4. HEADER / NAVIGATION
   Fixed-top, white, 78px tall. Signature
   6px gradient stripe via ::after.
   ========================================= */

.tenant-ramathayal .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 78px;
    background: #ffffff;
    --header-bg: #ffffff;
    --header-bg-scrolled: #ffffff;
    border-bottom: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

/* The signature 6px navy → purple → magenta → red stripe
   sits just below the header. Four colour stops, hard-pinned
   percentages so the magenta lands on the right third. */
.tenant-ramathayal .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 6px;
    pointer-events: none;
    background-image: linear-gradient(
        90deg,
        #194a7c 0%,
        #804fa0 40.1%,
        #c14483 71.35%,
        #e9253f 100%
    );
}

.tenant-ramathayal .site-header--scrolled {
    background: #ffffff;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

/* Push body content below the fixed header + stripe (78 + 6). */
.tenant-ramathayal main,
.tenant-ramathayal .page-content {
    padding-top: calc(78px + 6px);
}

/* Logo: solid navy wordmark, no gradient — newsrooms are
   conservative typographically. */
.tenant-ramathayal .site-header__logo-text {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #0e4976;
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tenant-ramathayal .site-header__logo svg {
    min-height: 36px;
    height: 36px;
    width: auto;
}

.tenant-ramathayal .site-header__logo-img {
    min-height: 56px;
    height: 56px;
    width: auto;
}

.tenant-ramathayal .site-header__brand {
    gap: 0.75rem;
}

/* Desktop nav links */
.tenant-ramathayal .site-header__nav-link {
    color: #333333;
    font-weight: 500;
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
}

.tenant-ramathayal .site-header__nav-link:hover,
.tenant-ramathayal .site-header__nav-link--active {
    color: #0e4976;
}

.tenant-ramathayal .site-header__nav-link--active::after {
    background-color: #c14483;
}

/* Header donate CTA — .trumot_btn-style.
   tv2000's donate ribbon is a *white* button sitting on the
   white header chrome, with navy text and a thin navy outline.
   Red is intentionally *not* used here — it's reserved for
   live/urgent badges only. */
.tenant-ramathayal .site-header__cta,
.tenant-ramathayal .trumot_btn,
.tenant-ramathayal .trumot_btn-style {
    background: #ffffff;
    border: 1px solid #0e4976;
    color: #0e4976;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .site-header__cta:hover,
.tenant-ramathayal .trumot_btn:hover,
.tenant-ramathayal .trumot_btn-style:hover {
    background: #f8f8f8;
    border-color: #054671;
    color: #054671;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

.tenant-ramathayal .site-header__cta:focus-visible,
.tenant-ramathayal .trumot_btn:focus-visible,
.tenant-ramathayal .trumot_btn-style:focus-visible {
    outline: 2px solid #1dabd4;
    outline-offset: 2px;
}

/* Sign-in link */
.tenant-ramathayal .site-header__signin {
    color: #0e4976;
    border-color: rgba(14, 73, 118, 0.30);
}

.tenant-ramathayal .site-header__signin:hover {
    color: #c14483;
    border-color: rgba(193, 68, 131, 0.50);
    background: #fbeaf2;
}

/* Language / user dropdowns */
.tenant-ramathayal .site-header__lang-btn,
.tenant-ramathayal .site-header__user-btn {
    color: #333333;
}

.tenant-ramathayal .site-header__lang-btn:hover,
.tenant-ramathayal .site-header__user-btn:hover {
    color: #0e4976;
}

.tenant-ramathayal .site-header__lang-dropdown,
.tenant-ramathayal .site-header__user-dropdown {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
    background: #ffffff;
}

.tenant-ramathayal .site-header__lang-item:hover,
.tenant-ramathayal .site-header__user-item:hover {
    background: #f6f6f6;
    color: #0e4976;
}

/* Mobile nav */
.tenant-ramathayal .site-header__mobile-nav {
    background: #ffffff;
    border-top: 6px solid;
    border-image: linear-gradient(
        90deg,
        #194a7c 0%,
        #804fa0 40.1%,
        #c14483 71.35%,
        #e9253f 100%
    ) 1;
}

.tenant-ramathayal .site-header__mobile-nav-link {
    color: #333333;
}

.tenant-ramathayal .site-header__mobile-nav-link:hover {
    color: #0e4976;
    background: #f6f6f6;
}

.tenant-ramathayal .site-header__mobile-nav-title {
    color: #804fa0;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tenant-ramathayal .site-header__mobile-cta {
    background: #ffffff;
    border: 1px solid #0e4976;
    color: #0e4976;
    border-radius: 4px;
    font-weight: 700;
}

.tenant-ramathayal .site-header__hamburger-line {
    background-color: #0e4976;
}

/* =========================================
   5. HERO SECTION
   Navy gradient with a faint magenta wash on the
   warm corner — newsroom serious, not decorative.
   Headlines are large, white, and tight.
   ========================================= */

.tenant-ramathayal .hero {
    background:
        radial-gradient(ellipse 60% 50% at 80% 25%, rgba(193, 68, 131, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 55% at 15% 75%, rgba(128, 79, 160, 0.14) 0%, transparent 55%),
        linear-gradient(150deg, #054671 0%, #0e4976 38%, #194a7c 68%, #064873 100%);
    min-height: 72vh;
    color: #ffffff;
}

.tenant-ramathayal .hero--with-image::after {
    background: linear-gradient(
        150deg,
        rgba(5, 70, 113, 0.92) 0%,
        rgba(14, 73, 118, 0.78) 50%,
        rgba(25, 74, 124, 0.70) 100%
    );
}

.tenant-ramathayal .hero::before {
    opacity: 0 !important;
}

.tenant-ramathayal .hero__decorative::before,
.tenant-ramathayal .hero__decorative::after {
    opacity: 0 !important;
}

/* Tagline pill: cyan-tinted, tightly cornered */
.tenant-ramathayal .hero__tagline {
    background: rgba(74, 218, 232, 0.16);
    color: #4adae8;
    border: 1px solid rgba(74, 218, 232, 0.45);
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
}

/* Hero title */
.tenant-ramathayal .hero__title {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

[dir="rtl"] .tenant-ramathayal .hero__title,
.tenant-ramathayal [dir="rtl"] .hero__title {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-weight: 900;
}

.tenant-ramathayal .hero__subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-style: normal;
    line-height: 1.55;
}

[dir="rtl"] .tenant-ramathayal .hero__subtitle,
.tenant-ramathayal [dir="rtl"] .hero__subtitle {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-style: normal;
}

/* Hero stat values in cyan — newsroom data accent */
.tenant-ramathayal .hero__stat-value {
    color: #4adae8;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 800;
}

[dir="rtl"] .tenant-ramathayal .hero__stat-value,
.tenant-ramathayal [dir="rtl"] .hero__stat-value {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
}

.tenant-ramathayal .hero__stat-label {
    color: rgba(255, 255, 255, 0.62);
}

/* Hero CTA buttons — primary uses the .trumot_btn-style
   palette (white surface + navy text) so the donate
   affordance reads identically on hero and header. */
.tenant-ramathayal .hero__actions .btn--hero-primary {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #0e4976;
    border-radius: 4px;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.tenant-ramathayal .hero__actions .btn--hero-primary:hover {
    background: #f8f8f8;
    color: #054671;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
    transform: translateY(-1px);
}

.tenant-ramathayal .hero__actions .btn--hero-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.tenant-ramathayal .hero__actions .btn--hero-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Hero trust indicators */
.tenant-ramathayal .hero__trust-item {
    color: rgba(255, 255, 255, 0.68);
}

.tenant-ramathayal .hero__trust-separator {
    color: rgba(74, 218, 232, 0.45);
}

/* Legacy hero classes */
.tenant-ramathayal .hero-section {
    background: linear-gradient(150deg, #054671 0%, #0e4976 50%, #064873 100%);
    color: #ffffff;
}

/* =========================================
   6. BUTTONS
   Editorial: tight 4px corners, flat fills,
   thin borders. Hover lifts 1px with the
   newsroom shadow, never recolors aggressively.
   ========================================= */

/* -- Primary: navy, solid -- */
.tenant-ramathayal .btn--primary,
.tenant-ramathayal .btn.btn-primary {
    background: #0e4976;
    border: 1px solid #054671;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .btn--primary:hover,
.tenant-ramathayal .btn.btn-primary:hover,
.tenant-ramathayal .btn--primary:focus-visible {
    background: #054671;
    border-color: #054671;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
    transform: translateY(-1px);
}

.tenant-ramathayal .btn--primary:active,
.tenant-ramathayal .btn.btn-primary:active {
    background: #03304f;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    transform: translateY(0);
}

/* -- Secondary: purple -- */
.tenant-ramathayal .btn--secondary,
.tenant-ramathayal .btn.btn-secondary {
    background: #804fa0;
    border: 1px solid #7f4fa0;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .btn--secondary:hover,
.tenant-ramathayal .btn.btn-secondary:hover {
    background: #7f4fa0;
    border-color: #623c7c;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.14);
    transform: translateY(-1px);
}

.tenant-ramathayal .btn--secondary:active,
.tenant-ramathayal .btn.btn-secondary:active {
    background: #623c7c;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    transform: translateY(0);
}

/* -- Success: distinct green so utility classes (bg-success)
       don't collapse into the warning amber on the About page -- */
.tenant-ramathayal .btn--success,
.tenant-ramathayal .btn.btn-success {
    background: #2ea84a;
    border: 1px solid #207a36;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .btn--success:hover,
.tenant-ramathayal .btn.btn-success:hover {
    background: #207a36;
    border-color: #207a36;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.14);
    transform: translateY(-1px);
}

/* -- Donate / CTA: .trumot_btn-style — white bg, navy text --
   This is the brand's signature donate affordance. Red is
   *not* used here — red is reserved for live/urgent badges. */
.tenant-ramathayal .btn--donate,
.tenant-ramathayal .btn--cta,
.tenant-ramathayal .btn.btn-donate {
    background: #ffffff;
    border: 1px solid #0e4976;
    /* !important needed to win against Bootstrap's `.text-white` utility,
       which the shared markup applies for the default green-gradient skin. */
    color: #0e4976 !important;
    border-radius: 4px;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .btn--donate:hover,
.tenant-ramathayal .btn--cta:hover,
.tenant-ramathayal .btn.btn-donate:hover {
    background: #f8f8f8;
    border-color: #054671;
    color: #054671 !important;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
    transform: translateY(-1px);
}

.tenant-ramathayal .btn--donate:active,
.tenant-ramathayal .btn--cta:active,
.tenant-ramathayal .btn.btn-donate:active {
    background: #f2f2f2;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    transform: translateY(0);
}

/* -- Outline variants -- */
.tenant-ramathayal .btn--outline,
.tenant-ramathayal .btn--outline-primary {
    background: transparent;
    border: 1px solid #0e4976;
    color: #0e4976;
    border-radius: 4px;
}

.tenant-ramathayal .btn--outline:hover,
.tenant-ramathayal .btn--outline-primary:hover {
    background: #0e4976;
    color: #ffffff;
}

.tenant-ramathayal .btn--outline-light {
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
    border-radius: 4px;
}

.tenant-ramathayal .btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.tenant-ramathayal .btn--outline-danger {
    border: 1px solid #e9253f;
    color: #e9253f;
    border-radius: 4px;
}

.tenant-ramathayal .btn--outline-danger:hover {
    background: #e9253f;
    color: #ffffff;
}

/* -- Ghost variants -- */
.tenant-ramathayal .btn--ghost-primary {
    color: #0e4976;
    border-radius: 4px;
}

.tenant-ramathayal .btn--ghost-primary:hover {
    background: #f6f6f6;
    color: #054671;
}

/* -- Danger: the urgent red. Used only for destructive
       actions (delete, cancel, leave). -- */
.tenant-ramathayal .btn--danger,
.tenant-ramathayal .btn.btn-danger {
    background: #e9253f;
    border: 1px solid #c82a1d;
    color: #ffffff;
    border-radius: 4px;
}

.tenant-ramathayal .btn--danger:hover,
.tenant-ramathayal .btn.btn-danger:hover {
    background: #c82a1d;
    border-color: #c82a1d;
    transform: translateY(-1px);
}

/* Universal focus ring — cyan, satisfies axe-core. */
.tenant-ramathayal .btn:focus-visible,
.tenant-ramathayal .btn--primary:focus-visible,
.tenant-ramathayal .btn--secondary:focus-visible,
.tenant-ramathayal .btn--donate:focus-visible {
    outline: 2px solid #1dabd4;
    outline-offset: 2px;
}

/* =========================================
   7. CARDS
   Crisp white surface, hairline border, baseline
   shadow. Hover lifts to the elevated newsroom
   glow. Tight 6px corners — never pillowy.
   ========================================= */

.tenant-ramathayal .card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .card:hover {
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
    border-color: #d0d0d0;
}

.tenant-ramathayal .card__title {
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
    color: #0e4976;
}

[dir="rtl"] .tenant-ramathayal .card__title,
.tenant-ramathayal [dir="rtl"] .card__title {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
}

.tenant-ramathayal .card__title a {
    color: #0e4976;
}

.tenant-ramathayal .card__title a:hover {
    color: #c14483;
}

.tenant-ramathayal .card__text {
    color: #333333;
}

.tenant-ramathayal .card__meta {
    color: #656565;
}

/* Campaign cards */
.tenant-ramathayal .campaign-card,
.tenant-ramathayal .card--campaign {
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .campaign-card:hover,
.tenant-ramathayal .card--campaign:hover {
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
    border-color: #d0d0d0;
}

/* Badges. Default badge = navy fill, white text. */
.tenant-ramathayal .campaign-card .badge,
.tenant-ramathayal .card__badge {
    background: #0e4976;
    color: #ffffff;
    border-radius: 4px;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Urgent / live badge — *only* place red is at home.
   Reserved for breaking content (matches tv2000's
   "שידור חי" red strip). */
.tenant-ramathayal .card__badge--urgent,
.tenant-ramathayal .card__badge--live,
.tenant-ramathayal .badge--live,
.tenant-ramathayal .badge--urgent {
    background: #e9253f;
    color: #ffffff;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tenant-ramathayal .card__badge--new {
    background: #c14483;
    color: #ffffff;
}

.tenant-ramathayal .card__badge--featured {
    background: #804fa0;
    color: #ffffff;
}

.tenant-ramathayal .card__badge--success {
    background: #2ea84a;
    color: #ffffff;
}

/* Progress bar: navy → magenta */
.tenant-ramathayal .card__progress-bar {
    background: linear-gradient(90deg, #0e4976 0%, #c14483 100%);
}

/* Stat cards */
.tenant-ramathayal .card--stat {
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    border-left: none;
}

.tenant-ramathayal .card--stat-success {
    border-top: 3px solid #2ea84a;
}

.tenant-ramathayal .card--stat-accent {
    border-top: 3px solid #c14483;
}

/* Testimonial cards */
.tenant-ramathayal .card--testimonial {
    background: #f8f8f8;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

/* Impact cards */
.tenant-ramathayal .card--impact {
    border-top: 3px solid #0e4976;
    border-radius: 6px;
}

/* =========================================
   8. FORMS
   Cyan focus rings, tight 4px input corners.
   Disabled and helper text obey the muted scale.
   ========================================= */

.tenant-ramathayal .form-input,
.tenant-ramathayal .form-control,
.tenant-ramathayal .form-select,
.tenant-ramathayal .form-textarea {
    border: 1px solid #d0d0d0;
    background: #ffffff;
    color: #000000;
    border-radius: 4px;
    font-family: 'Heebo', 'Rubik', sans-serif;
}

.tenant-ramathayal .form-input:hover,
.tenant-ramathayal .form-control:hover,
.tenant-ramathayal .form-select:hover {
    border-color: #0e4976;
}

.tenant-ramathayal .form-input:focus,
.tenant-ramathayal .form-control:focus,
.tenant-ramathayal .form-select:focus,
.tenant-ramathayal .form-textarea:focus {
    border-color: #1dabd4;
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
    outline: none;
}

.tenant-ramathayal .form-label {
    color: #000000;
    font-weight: 600;
}

.tenant-ramathayal .form-helper {
    color: #656565;
}

.tenant-ramathayal .form-input::placeholder,
.tenant-ramathayal .form-control::placeholder,
.tenant-ramathayal .form-textarea::placeholder {
    color: #A1A1A1;
}

/* Checkboxes and radio buttons */
.tenant-ramathayal .form-check-input:checked {
    background-color: #0e4976;
    border-color: #0e4976;
}

.tenant-ramathayal .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
    border-color: #1dabd4;
}

/* Custom checkbox */
.tenant-ramathayal .form-checkbox__input:checked ~ .form-checkbox__box {
    background: #0e4976;
    border-color: #0e4976;
}

.tenant-ramathayal .form-checkbox__input:focus ~ .form-checkbox__box {
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
}

/* Custom radio */
.tenant-ramathayal .form-radio__input:checked ~ .form-radio__circle {
    border-color: #0e4976;
}

.tenant-ramathayal .form-radio__input:checked ~ .form-radio__circle::after {
    background: #0e4976;
}

.tenant-ramathayal .form-radio__input:focus ~ .form-radio__circle {
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
}

/* Donation amount selector */
.tenant-ramathayal .donation-amount {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #000000;
}

.tenant-ramathayal .donation-amount:hover {
    border-color: #0e4976;
    background: #f8f8f8;
}

.tenant-ramathayal .donation-amount--selected,
.tenant-ramathayal .donation-amount.selected {
    border-color: #0e4976;
    background: #e6edf4;
    color: #0e4976;
    box-shadow: 0 2px 3px 0 rgba(14, 73, 118, 0.18);
}

/* Input group addon */
.tenant-ramathayal .input-group__addon,
.tenant-ramathayal .input-group-text {
    background: #f6f6f6;
    border: 1px solid #d0d0d0;
    color: #0e4976;
    border-radius: 4px;
}

/* =========================================
   9. CAMPAIGN PAGE
   /campaigns/live carries the editorial mood
   straight through. Live tabs use the magenta
   accent; "live now" chips use red.
   ========================================= */

/* Campaign hero overlay */
.tenant-ramathayal .campaign-hero::after,
.tenant-ramathayal .campaign-hero-gradient {
    background: linear-gradient(
        150deg,
        rgba(5, 70, 113, 0.92) 0%,
        rgba(14, 73, 118, 0.78) 52%,
        rgba(25, 74, 124, 0.70) 100%
    );
}

/* Level / tier cards */
.tenant-ramathayal .level-card.active,
.tenant-ramathayal .level-card--selected {
    background: #fbeaf2;
    border: 1px solid #c14483;
    border-radius: 6px;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

/* Campaign matcher */
.tenant-ramathayal .matcher-icon .rounded-circle {
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
}

/* Progress bars */
.tenant-ramathayal .progress-bar.bg-gradient {
    background: linear-gradient(90deg, #0e4976 0%, #c14483 100%);
}

/* Nav pills */
.tenant-ramathayal .nav-pills .nav-link {
    border-radius: 4px;
    color: #333333;
    font-weight: 500;
}

.tenant-ramathayal .nav-pills .nav-link.active {
    background: #0e4976;
    color: #ffffff;
}

.tenant-ramathayal .nav-pills .nav-link:hover {
    color: #c14483;
}

/* Team section */
.tenant-ramathayal .team-section .bg-gradient-primary {
    background: linear-gradient(135deg, #0e4976 0%, #054671 100%);
}

/* Campaign tabs */
.tenant-ramathayal .campaign-tabs .nav-link {
    color: #333333;
    font-family: 'Heebo', 'Rubik', sans-serif;
}

.tenant-ramathayal .campaign-tabs .nav-link.active {
    color: #c14483;
    border-bottom-color: #c14483;
}

.tenant-ramathayal .campaign-tabs .nav-link:hover {
    color: #0e4976;
}

/* "Live now" status chip on /campaigns/live */
.tenant-ramathayal .campaign-status--live,
.tenant-ramathayal .campaign-card__live-chip {
    background: #e9253f;
    color: #ffffff;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* Member avatars stay circular. */
.tenant-ramathayal .member-avatar,
.tenant-ramathayal .member-avatar-small {
    background: linear-gradient(135deg, #0e4976 0%, #804fa0 100%);
    border-radius: 100%;
}

.tenant-ramathayal .matching-pool-summary {
    background: linear-gradient(135deg, #0e4976 0%, #c14483 100%);
    border-radius: 6px;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
    color: #ffffff;
}

.tenant-ramathayal .bg-gradient-success {
    background: linear-gradient(135deg, #2ea84a 0%, #207a36 100%);
}

/* =========================================
   10. DONATION FLOW (/donate/<slug>)
   White panels on a soft #f8f8f8 wash. Step
   indicators in navy/magenta. Submit uses the
   .trumot_btn-style pattern (white + navy).
   ========================================= */

.tenant-ramathayal .donation-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 50%, #ffffff 100%);
}

/* Step indicators */
.tenant-ramathayal .steps::before {
    background: #e6e6e6;
}

.tenant-ramathayal .steps__progress-line {
    background: linear-gradient(90deg, #0e4976 0%, #c14483 100%);
}

.tenant-ramathayal .steps__item--completed .steps__circle {
    background: #0e4976;
    border-color: #0e4976;
    color: #ffffff;
    border-radius: 100%;
}

.tenant-ramathayal .steps__item--current .steps__circle {
    background: #c14483;
    border-color: #c14483;
    color: #ffffff;
    border-radius: 100%;
    box-shadow: 0 0 0 4px rgba(193, 68, 131, 0.22);
}

.tenant-ramathayal .steps__item--pending .steps__circle {
    border-color: #d0d0d0;
    color: #A1A1A1;
    background: transparent;
    border-radius: 100%;
}

.tenant-ramathayal .steps__item--current .steps__label {
    color: #c14483;
    font-weight: 600;
}

.tenant-ramathayal .steps__item--completed .steps__label {
    color: #0e4976;
}

/* Enhanced donation amount cards */
.tenant-ramathayal .donation-amount-card {
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .donation-amount-card:hover {
    border-color: #0e4976;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

.tenant-ramathayal .donation-amount-card--selected {
    border-color: #0e4976;
    background: #e6edf4;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
}

.tenant-ramathayal .donation-amount-card--selected .donation-amount-card__value {
    color: #0e4976;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
}

/* Legacy amount buttons */
.tenant-ramathayal .amount-btn:hover,
.tenant-ramathayal .amount-card:hover {
    border-color: #0e4976;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.tenant-ramathayal .amount-btn.active,
.tenant-ramathayal .amount-card--selected {
    border-color: #0e4976;
    background: #e6edf4;
    color: #0e4976;
}

/* Donation step active indicator */
.tenant-ramathayal .donation-step__indicator--active {
    background: #c14483;
    box-shadow: 0 0 0 3px rgba(193, 68, 131, 0.22);
}

/* Frequency toggle */
.tenant-ramathayal .toggle-group {
    background: #f6f6f6;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
}

.tenant-ramathayal .toggle-group__option--active {
    background: #0e4976;
    color: #ffffff;
    border-radius: 4px;
}

.tenant-ramathayal .toggle-group__option--active[data-frequency="monthly"] {
    background: linear-gradient(135deg, #0e4976 0%, #194a7c 100%);
    border-color: #c14483;
}

.tenant-ramathayal .toggle-group__badge {
    background: #c14483;
    color: #ffffff;
    border-radius: 4px;
}

/* Payment methods */
.tenant-ramathayal .payment-method {
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
}

.tenant-ramathayal .payment-method--selected {
    border-color: #0e4976;
    background: #e6edf4;
}

.tenant-ramathayal .payment-method--selected .payment-method__radio::after {
    background: #0e4976;
}

.tenant-ramathayal .payment-method:hover {
    border-color: #0e4976;
}

/* Donate submit button — .trumot_btn-style pattern */
.tenant-ramathayal .donate-submit-area__button {
    background: #ffffff;
    border: 1px solid #0e4976;
    color: #0e4976;
    border-radius: 4px;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}

.tenant-ramathayal .donate-submit-area__button:hover {
    background: #f8f8f8;
    color: #054671;
    border-color: #054671;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
}

/* Order summary */
.tenant-ramathayal .order-summary {
    border: 1px solid #e6e6e6;
    border-top: 3px solid #0e4976;
    border-radius: 6px;
    background: #ffffff;
}

.tenant-ramathayal .order-summary__total-value {
    color: #c14483;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
}

/* Matching preview */
.tenant-ramathayal .matching-preview {
    border: 1px solid #e6e6e6;
    background: #f8f8f8;
    border-radius: 6px;
}

.tenant-ramathayal .matching-preview__multiplier {
    color: #c14483;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
}

.tenant-ramathayal .matching-preview__total-value {
    color: #0e4976;
    font-weight: 700;
}

/* Cube calculator */
.tenant-ramathayal .cube-calculator {
    background: linear-gradient(135deg, #0e4976 0%, #054671 100%);
    border-radius: 6px;
    color: #ffffff;
}

.tenant-ramathayal .cube-calculator__months-input:focus {
    border-color: #1dabd4;
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
}

.tenant-ramathayal .cube-card {
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
}

.tenant-ramathayal .cube-card:hover,
.tenant-ramathayal .cube-card.selected {
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

.tenant-ramathayal .cube-card.selected {
    border-color: #0e4976;
    background: #e6edf4;
}

/* Total donation display */
.tenant-ramathayal .total-donation-card,
.tenant-ramathayal .manual-total-card {
    background: linear-gradient(135deg, #0e4976 0%, #054671 100%);
    border-radius: 6px;
    color: #ffffff;
}

/* Override the child text colors so they remain readable on the dark gradient.
   Defaults (neutral-600, neutral-500, secondary green) all render too dark/low-contrast. */
.tenant-ramathayal .manual-total-card .manual-total-formula,
.tenant-ramathayal .total-donation-card .manual-total-formula {
    color: rgba(255, 255, 255, 0.92);
}

.tenant-ramathayal .manual-total-card .manual-total-result,
.tenant-ramathayal .total-donation-card .manual-total-result {
    color: #ffffff;
}

.tenant-ramathayal .manual-total-card .manual-total-label,
.tenant-ramathayal .total-donation-card .manual-total-label {
    color: rgba(255, 255, 255, 0.78);
}

/* Form panel */
.tenant-ramathayal .donation-form-panel {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #ffffff;
}

.tenant-ramathayal .donation-form-panel__icon {
    color: #c14483;
}

/* =========================================
   11. FOOTER
   Solid navy band, white headings, faint
   white-on-navy body copy. Magenta hover on
   links keeps the gradient palette visible.
   ========================================= */

.tenant-ramathayal .site-footer {
    background: #054671;
    color: #ffffff;
    border-top: 0;
    position: relative;
}

/* Top accent: same 4-stop stripe as the header. */
.tenant-ramathayal .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(
        90deg,
        #194a7c 0%,
        #804fa0 40.1%,
        #c14483 71.35%,
        #e9253f 100%
    );
}

/* Section headings */
.tenant-ramathayal .footer__nav-title,
.tenant-ramathayal .footer__heading {
    color: #ffffff;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[dir="rtl"] .tenant-ramathayal .footer__nav-title,
[dir="rtl"] .tenant-ramathayal .footer__heading,
.tenant-ramathayal [dir="rtl"] .footer__nav-title,
.tenant-ramathayal [dir="rtl"] .footer__heading {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
}

/* Description & contact */
.tenant-ramathayal .footer__description {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__contact-item {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__contact-item a {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__contact-item a:hover {
    color: #4adae8;
}

/* Nav links */
.tenant-ramathayal .footer__nav-link {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__nav-link:hover {
    color: #4adae8;
}

/* Newsletter */
.tenant-ramathayal .footer__newsletter-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border-radius: 4px 0 0 4px;
}

.tenant-ramathayal .footer__newsletter-input:focus {
    border-color: #1dabd4;
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.20);
}

.tenant-ramathayal .footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
}

.tenant-ramathayal .footer__newsletter-btn {
    background: #ffffff;
    color: #0e4976;
    font-weight: 700;
    border: 1px solid #ffffff;
    border-radius: 0 4px 4px 0;
}

.tenant-ramathayal .footer__newsletter-btn:hover {
    background: #f8f8f8;
}

/* Social links */
.tenant-ramathayal .footer__social-link {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.tenant-ramathayal .footer__social-link:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #4adae8;
    border-color: rgba(74, 218, 232, 0.45);
}

/* Bottom bar */
.tenant-ramathayal .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
}

.tenant-ramathayal .footer__copyright {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__copyright a {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__copyright a:hover {
    color: #4adae8;
}

.tenant-ramathayal .footer__legal-link {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .footer__legal-link:hover {
    color: #4adae8;
}

/* Back to top */
.tenant-ramathayal .back-to-top {
    background: #0e4976;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.tenant-ramathayal .back-to-top:hover {
    background: #054671;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.18);
}

/* =========================================
   12. IMPACT / STATS SECTION
   Light surface band; numerals in navy with the
   magenta accent for the variable line. Icons
   pick up the cyan focus colour for contrast.
   ========================================= */

.tenant-ramathayal .social-proof {
    background: #f8f8f8;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

.tenant-ramathayal .social-proof__number {
    color: #0e4976;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

[dir="rtl"] .tenant-ramathayal .social-proof__number,
.tenant-ramathayal [dir="rtl"] .social-proof__number {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
}

.tenant-ramathayal .social-proof__label {
    color: #656565;
}

.tenant-ramathayal .impact__icon,
.tenant-ramathayal .stat-icon {
    color: #1dabd4;
}

.tenant-ramathayal .impact__number {
    color: #0e4976;
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-weight: 800;
}

.tenant-ramathayal .impact__card {
    border-top: 3px solid #c14483;
    border-radius: 6px;
}

.tenant-ramathayal .impact__card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 45px 0 rgba(46, 104, 208, 0.10);
}

/* =========================================
   13. HOW IT WORKS
   Step circles match the editorial scale —
   navy → purple gradient, white glyphs.
   ========================================= */

.tenant-ramathayal .step-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0e4976 0%, #804fa0 100%);
    color: #ffffff;
    border-radius: 100%;
}

.tenant-ramathayal .step-icon i {
    font-size: 1.65rem;
    color: #ffffff;
}

/* =========================================
   14. ABOUT PAGE — three-tint card icons
   The "What We Do" trio uses Bootstrap
   bg-primary / bg-success / bg-warning utilities
   for its 60×60 icon wrappers. We pin each
   wrapper to a distinct tv2000 surface tint —
   navy / green / magenta — so the row reads as
   three separate ideas, not three echoes of one.
   bg-opacity-10 keeps this scoped to the icon
   wrapper without touching solid bg-primary
   surfaces elsewhere in the row.
   ========================================= */

.tenant-ramathayal .row[data-stagger] > .col-md-4:nth-child(1) > .card.h-100 .rounded-circle.bg-opacity-10 {
    background-color: #e6edf4 !important;
}

.tenant-ramathayal .row[data-stagger] > .col-md-4:nth-child(2) > .card.h-100 .rounded-circle.bg-opacity-10 {
    background-color: #e6f5ea !important;
}

.tenant-ramathayal .row[data-stagger] > .col-md-4:nth-child(3) > .card.h-100 .rounded-circle.bg-opacity-10 {
    background-color: #fbeaf2 !important;
}

/* About page section headings inherit the global
   ink-black; section dividers use the gradient
   stripe colour to anchor the page to the brand. */
.tenant-ramathayal .about-section__divider {
    height: 4px;
    background: linear-gradient(
        90deg,
        #194a7c 0%,
        #804fa0 40.1%,
        #c14483 71.35%,
        #e9253f 100%
    );
}

/* =========================================
   15. CTA SECTION
   Override the base navy band with the tenant's
   own --color-primary tokens so future palette
   tweaks track without an extra rule edit.
   White headings (asserted by the heading test).
   ========================================= */

.tenant-ramathayal .cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #ffffff;
}

/* Replace the inherited blue radial glow with a
   magenta wash to track the gradient. */
.tenant-ramathayal .cta-section::before {
    background: radial-gradient(circle, rgba(193, 68, 131, 0.14) 0%, transparent 65%);
}

.tenant-ramathayal .cta-section p,
.tenant-ramathayal .cta-section li {
    color: rgba(255, 255, 255, 0.92);
}

/* =========================================
   16. ADMIN PANEL
   Navy sidebar, magenta active indicator. Stays
   pixel-quiet — admin work is heads-down.
   ========================================= */

.tenant-ramathayal .admin-sidebar {
    background: linear-gradient(180deg, #054671 0%, #03304f 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.tenant-ramathayal .admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.72);
}

.tenant-ramathayal .admin-sidebar .nav-link:hover {
    color: #4adae8;
    background: rgba(74, 218, 232, 0.08);
}

.tenant-ramathayal .admin-sidebar .nav-link.active {
    background: rgba(193, 68, 131, 0.18);
    color: #ffffff;
    border-right: 3px solid #c14483;
}

.tenant-ramathayal .stat-card--primary .stat-card__icon {
    background: linear-gradient(135deg, #0e4976 0%, #054671 100%);
    color: #ffffff;
}

.tenant-ramathayal .admin-page-header {
    border-bottom: 2px solid #e6e6e6;
}

.tenant-ramathayal .admin-page-header h1,
.tenant-ramathayal .admin-page-header h2 {
    font-family: 'Heebo', 'Rubik', sans-serif;
    color: #0e4976;
}

.tenant-ramathayal .admin-table tbody tr:hover {
    background: #f6f6f6;
}

.tenant-ramathayal .admin-table th {
    background: #f8f8f8;
    color: #0e4976;
    border-bottom: 1px solid #e6e6e6;
    font-weight: 700;
}

/* =========================================
   17. LINKS & TEXT ACCENTS
   Navy default, magenta hover. Cyan reserved for
   focus rings and dark-surface link emphasis.
   ========================================= */

.tenant-ramathayal a:not(.btn):not(.nav-link):not(.site-header__nav-link):not(.footer__nav-link):not(.back-to-top) {
    color: #0e4976;
    text-decoration-color: rgba(193, 68, 131, 0.40);
    text-underline-offset: 2px;
}

.tenant-ramathayal a:not(.btn):not(.nav-link):not(.site-header__nav-link):not(.footer__nav-link):not(.back-to-top):hover {
    color: #c14483;
    text-decoration-color: #c14483;
}

.tenant-ramathayal a:focus-visible {
    outline: 2px solid #1dabd4;
    outline-offset: 2px;
    border-radius: 2px;
}

/* =========================================
   18. SCROLLBAR (Webkit)
   Navy thumb, light track. Quiet — the chrome
   shouldn't compete with newsroom content.
   ========================================= */

.tenant-ramathayal ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tenant-ramathayal ::-webkit-scrollbar-track {
    background: #f6f6f6;
}

.tenant-ramathayal ::-webkit-scrollbar-thumb {
    background: #0e4976;
    border-radius: 4px;
}

.tenant-ramathayal ::-webkit-scrollbar-thumb:hover {
    background: #c14483;
}

/* =========================================
   19. SELECTION COLOR
   Magenta highlight, white text — survives both
   light and dark surfaces.
   ========================================= */

.tenant-ramathayal ::selection {
    background: #c14483;
    color: #ffffff;
}

.tenant-ramathayal ::-moz-selection {
    background: #c14483;
    color: #ffffff;
}

/* =========================================
   20. BOOTSTRAP COMPONENT OVERRIDES
   Direct rules for components that ignore CSS
   custom properties at low specificity.
   ========================================= */

/* Accordion */
.tenant-ramathayal .accordion-button {
    background-color: #ffffff;
    color: #0e4976;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.tenant-ramathayal .accordion-button:not(.collapsed) {
    color: #0e4976;
    background-color: #f8f8f8;
    box-shadow: inset 4px 0 0 #c14483,
                inset 0 -1px 0 #e6e6e6;
}

[dir="rtl"] .tenant-ramathayal .accordion-button:not(.collapsed),
.tenant-ramathayal [dir="rtl"] .accordion-button:not(.collapsed) {
    box-shadow: inset -4px 0 0 #c14483,
                inset 0 -1px 0 #e6e6e6;
}

.tenant-ramathayal .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(74, 218, 232, 0.30);
    border-color: #1dabd4;
}

/* Badge bg-primary → navy */
.tenant-ramathayal .badge.bg-primary,
.tenant-ramathayal .badge.text-bg-primary {
    background-color: #0e4976 !important;
    color: #ffffff;
    border-radius: 4px;
}

/* Badge bg-success → green */
.tenant-ramathayal .badge.bg-success,
.tenant-ramathayal .badge.text-bg-success {
    background-color: #2ea84a !important;
    color: #ffffff;
    border-radius: 4px;
}

/* Badge bg-warning → amber */
.tenant-ramathayal .badge.bg-warning,
.tenant-ramathayal .badge.text-bg-warning {
    background-color: #f0a020 !important;
    color: #000000;
    border-radius: 4px;
}

/* Badge bg-info → magenta */
.tenant-ramathayal .badge.bg-info,
.tenant-ramathayal .badge.text-bg-info {
    background-color: #c14483 !important;
    color: #ffffff;
    border-radius: 4px;
}

/* Badge bg-danger → urgent red */
.tenant-ramathayal .badge.bg-danger,
.tenant-ramathayal .badge.text-bg-danger {
    background-color: #e9253f !important;
    color: #ffffff;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Color utility overrides */
.tenant-ramathayal .text-primary { color: #0e4976 !important; }
.tenant-ramathayal .text-success { color: #2ea84a !important; }
.tenant-ramathayal .text-warning { color: #f0a020 !important; }
.tenant-ramathayal .text-info    { color: #c14483 !important; }
.tenant-ramathayal .text-danger  { color: #e9253f !important; }

/* Background utility overrides — keep parity with the
   palette so utility-class mixers don't drift. */
.tenant-ramathayal .bg-primary { background-color: #0e4976 !important; color: #ffffff; }
.tenant-ramathayal .bg-success { background-color: #2ea84a !important; color: #ffffff; }
.tenant-ramathayal .bg-warning { background-color: #f0a020 !important; color: #000000; }
.tenant-ramathayal .bg-info    { background-color: #c14483 !important; color: #ffffff; }
.tenant-ramathayal .bg-danger  { background-color: #e9253f !important; color: #ffffff; }

/* Subtle backgrounds (Bootstrap 5.3+) */
.tenant-ramathayal .bg-primary-subtle { background-color: #e6edf4 !important; }
.tenant-ramathayal .bg-success-subtle { background-color: #e6f5ea !important; }
.tenant-ramathayal .bg-warning-subtle { background-color: #fef3d8 !important; }
.tenant-ramathayal .bg-info-subtle    { background-color: #fbeaf2 !important; }
.tenant-ramathayal .bg-danger-subtle  { background-color: #fde8eb !important; }

/* =========================================
   21. REFINEMENT LAYER
   Cascade-late tweaks that push the skin further
   from the SimpleDonate base in three areas:
   typography mood, hero proportions, accordion
   accent. Token values unchanged so
   appsettings.RamatHayal.json stays in sync.
   ========================================= */

/* Section dividers — newsroom rule lines */
.tenant-ramathayal hr,
.tenant-ramathayal .section-divider {
    border: none;
    border-top: 1px solid #e6e6e6;
    margin: 2rem 0;
}

/* Blockquote — magenta inline-start rule */
.tenant-ramathayal blockquote {
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-style: normal;
    color: #000000;
    border-inline-start: 3px solid #c14483;
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin: 1.5rem 0;
    background: #f8f8f8;
}

[dir="rtl"] .tenant-ramathayal blockquote,
.tenant-ramathayal [dir="rtl"] blockquote {
    font-family: 'Heebo', 'Rubik', 'Arial', sans-serif;
    font-style: normal;
    padding: 0.5rem 1.25rem 0.5rem 0;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .tenant-ramathayal .site-header {
        height: 64px;
    }

    .tenant-ramathayal .site-header::after {
        bottom: -6px;
    }

    .tenant-ramathayal main,
    .tenant-ramathayal .page-content {
        padding-top: calc(64px + 6px);
    }

    .tenant-ramathayal .site-header__brand {
        gap: 0.5rem;
    }

    .tenant-ramathayal .hero {
        min-height: 60vh;
    }

    .tenant-ramathayal .hero__title {
        letter-spacing: -0.005em;
    }
}

/* Article / page chrome — when an editorial article
   layout wraps everything in .article-body, soften
   measure and bump line-height for body comfort. */
.tenant-ramathayal .article-body {
    max-width: 72ch;
    margin: 0 auto;
    line-height: 1.65;
    color: #333333;
}

.tenant-ramathayal .article-body p {
    margin-bottom: 1.1em;
}

.tenant-ramathayal .article-body a {
    color: #0e4976;
    text-decoration-color: rgba(193, 68, 131, 0.40);
}

/* Tables — newsroom data tables, alternating rows. */
.tenant-ramathayal table {
    border-collapse: collapse;
    width: 100%;
}

.tenant-ramathayal table th {
    background: #f6f6f6;
    color: #0e4976;
    font-weight: 700;
    border-bottom: 2px solid #d0d0d0;
    text-align: start;
    padding: 0.5rem 0.75rem;
}

.tenant-ramathayal table td {
    border-bottom: 1px solid #e6e6e6;
    padding: 0.5rem 0.75rem;
    color: #333333;
}

.tenant-ramathayal table tbody tr:nth-child(even) td {
    background: #f8f8f8;
}

/* =========================================
   22. REDUCED MOTION FALLBACK
   Reveal scroll-animated content for users who
   prefer reduced motion (tenant scope).
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .tenant-ramathayal [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    .tenant-ramathayal .btn:hover,
    .tenant-ramathayal .card:hover {
        transform: none !important;
    }
}

/* =========================================
   22.5 SHARED-COMPONENT TENANT OVERRIDES
   These rules reproduce the visual treatment that previously
   leaked into shared CSS files (cube-selector.css,
   campaign-page.css, donation-cubes-row.css, site.css,
   responsive.css, components/footer.css). They are kept
   strictly under .tenant-ramathayal so SimpleDonate's
   default skin renders pixel-identical when the tenant
   body class is absent.
   ========================================= */

/* Campaign nav bar — solid navy ribbon with white outline pills.
   Reverses the default light/grey nav bar to match the editorial
   newsroom skin where the nav band reads as a coloured stripe. */
.tenant-ramathayal .campaign-nav-bar {
    background: var(--ir-primary, #0e4976);
    color: #fff;
}

.tenant-ramathayal .campaign-nav-title {
    color: #fff;
}

.tenant-ramathayal .campaign-nav-bar .nav-pills .nav-link,
.tenant-ramathayal .campaign-nav-bar .nav-pills .nav-link:not(.active) {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.tenant-ramathayal .campaign-nav-bar .nav-pills .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
}

.tenant-ramathayal .campaign-nav-bar .nav-pills .nav-link.active {
    color: var(--ir-primary, #0e4976);
    background: #fff;
    border-color: #fff;
}

/* Campaign hero slideshow — RamatHayal uses a tighter capped
   height so the nav/title sit closer to the fold. */
.tenant-ramathayal .hero-slideshow {
    height: clamp(360px, 55vh, 560px);
}

@media (max-width: 575.98px) {
    .tenant-ramathayal .hero-slideshow {
        height: 200px;
    }
}

/* Donation-cubes row — RamatHayal uses a 2-up grid on mobile
   and centred 4-up grid on desktop (no horizontal scroll). */
.tenant-ramathayal .dcr-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 1rem;
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-scroll-snap-type: none;
    align-items: stretch;
}

@media (max-width: 767.98px) {
    .tenant-ramathayal .dcr-track .cube-card {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 768px) {
    .tenant-ramathayal .dcr-track {
        grid-template-columns: repeat(4, 200px);
        justify-content: center;
    }
}

/* Campaign content area — newsroom skin uses a transparent
   surface so the parchment page background reads through. */
.tenant-ramathayal .campaign-content {
    background: transparent;
}

/* Mobile footer — RamatHayal compresses footer padding on small
   screens so the donate CTA sits closer to the bottom of the page. */
@media (max-width: 767.98px) {
    .tenant-ramathayal .site-footer {
        padding: 1.25rem 0 0.75rem;
        padding-top: 1.25rem;
    }

    .tenant-ramathayal .site-footer__grid {
        gap: var(--space-md);
    }

    .tenant-ramathayal .footer__brand,
    .tenant-ramathayal .footer__description,
    .tenant-ramathayal .footer__nav-title,
    .tenant-ramathayal .footer__newsletter-title {
        margin-bottom: var(--space-sm);
    }

    .tenant-ramathayal .footer__bottom {
        margin-top: 1rem;
        padding: var(--space-sm) 0;
    }
}

/* The shared design-system/responsive.css mobile breakpoint
   sets .site-footer padding-top to var(--space-10). RamatHayal
   shrinks that to var(--space-5) at the same breakpoint. */
@media (max-width: 768px) {
    .tenant-ramathayal .site-footer {
        padding-top: var(--space-5);
    }
}

/* =========================================
   23. DARK MODE
   The base design-system/dark-mode.css remaps tokens
   at :root:not(.light-mode) scope, leaving tenant
   overrides applied on body.tenant-ramathayal in
   light-mode values. Re-establish dark surfaces and
   re-tune the tv2000 palette for low-light contrast:
   the navy shifts brighter (lifts off the dark
   background), magenta and red soften slightly,
   cyan stays loud — that's the focus colour.
   Tokens only — component styles downstream pick
   these up automatically.

   Two parallel blocks: system preference and the
   manual html.dark-mode toggle.
   ========================================= */

@media (prefers-color-scheme: dark) {
    .tenant-ramathayal {
        /* Surfaces — deep navy-tinted neutrals */
        --color-background:       #0d1620;
        --color-surface:          #131e2c;
        --color-surface-alt:      #1a2638;
        --color-surface-muted:    #1a2638;
        --color-surface-soft:     #131e2c;

        /* Primary — brighter navy lifts off the dark bg */
        --color-primary:        #4674a0;
        --color-primary-light:  #6e91b6;
        --color-primary-dark:   #194a7c;
        --color-primary-bg:     rgba(25, 74, 124, 0.18);

        /* Secondary — softer purple */
        --color-secondary:      #AE509F;
        --color-secondary-light: #c47ab6;
        --color-secondary-dark:  #804fa0;
        --color-secondary-bg:    rgba(128, 79, 160, 0.18);

        /* Accent — magenta lifted */
        --color-accent:         #ce3a6e;
        --color-accent-light:   #de5e8a;
        --color-accent-dark:    #c14483;
        --color-accent-bg:      rgba(193, 68, 131, 0.18);

        /* Urgent red — softened to avoid eye-strain on dark */
        --color-urgent:         #ed2339;
        --color-urgent-light:   #f24a5d;
        --color-urgent-dark:    #c82a1d;
        --color-urgent-bg:      rgba(233, 37, 63, 0.20);

        /* Cyan focus — stays bright in dark too */
        --color-focus:          #4adae8;
        --color-focus-light:    #7ee5ef;
        --color-focus-bg:       rgba(74, 218, 232, 0.18);

        /* Text — high-contrast warm whites */
        --color-text:           #ffffff;
        --color-text-secondary: #d8e0ea;
        --color-text-muted:     #A1A1A1;
        --color-text-faint:     #656565;

        /* Borders — navy-tinted, low alpha */
        --color-border:         rgba(70, 116, 160, 0.30);
        --color-border-light:   rgba(70, 116, 160, 0.16);
        --color-border-strong:  rgba(70, 116, 160, 0.55);

        /* Bootstrap remaps for utility classes */
        --bs-primary:              #4674a0;
        --bs-primary-rgb:          70, 116, 160;
        --bs-primary-bg-subtle:    rgba(70, 116, 160, 0.18);
        --bs-primary-border-subtle: rgba(70, 116, 160, 0.35);
        --bs-primary-text-emphasis: #6e91b6;

        --bs-success:              #4ac06a;
        --bs-success-rgb:          74, 192, 106;
        --bs-success-bg-subtle:    rgba(74, 192, 106, 0.18);
        --bs-success-border-subtle: rgba(74, 192, 106, 0.35);
        --bs-success-text-emphasis: #6ed084;

        --bs-warning:              #f4be40;
        --bs-warning-rgb:          244, 190, 64;
        --bs-warning-bg-subtle:    rgba(244, 190, 64, 0.18);
        --bs-warning-border-subtle: rgba(244, 190, 64, 0.35);
        --bs-warning-text-emphasis: #f4be40;

        --bs-info:                 #ce3a6e;
        --bs-info-rgb:             206, 58, 110;
        --bs-info-bg-subtle:       rgba(206, 58, 110, 0.18);
        --bs-info-border-subtle:   rgba(206, 58, 110, 0.35);
        --bs-info-text-emphasis:   #de5e8a;

        --bs-danger:               #ed2339;
        --bs-danger-rgb:           237, 35, 57;
        --bs-danger-bg-subtle:     rgba(237, 35, 57, 0.20);
        --bs-danger-border-subtle: rgba(237, 35, 57, 0.40);
        --bs-danger-text-emphasis: #f24a5d;

        --bs-link-color:           #4adae8;
        --bs-link-color-rgb:       74, 218, 232;
        --bs-link-hover-color:     #ce3a6e;
        --bs-link-hover-color-rgb: 206, 58, 110;

        /* Header surface — translucent dark navy */
        --header-bg:           rgba(13, 22, 32, 0.92);
        --header-bg-scrolled:  rgba(13, 22, 32, 0.98);
    }

    .tenant-ramathayal body {
        background-color: #0d1620;
        color: #d8e0ea;
    }

    /* Heading scope: re-target the light-mode rule so
       headings don't render as #000 (black on dark). */
    :where(.tenant-ramathayal :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.hero *, .cta-section *, .site-footer *)) {
        color: #ffffff;
    }

    /* Card titles lift to the brighter navy. */
    .tenant-ramathayal .card__title,
    .tenant-ramathayal .card__title a {
        color: #6e91b6;
    }

    .tenant-ramathayal .card {
        background: #131e2c;
        border-color: rgba(70, 116, 160, 0.30);
    }

    .tenant-ramathayal .card__text {
        color: #d8e0ea;
    }

    .tenant-ramathayal .card__meta {
        color: #A1A1A1;
    }

    /* Header surface in dark: drop the white pane
       but keep the gradient stripe. */
    .tenant-ramathayal .site-header {
        background: rgba(13, 22, 32, 0.92);
        border-bottom-color: rgba(70, 116, 160, 0.30);
    }

    .tenant-ramathayal .site-header--scrolled {
        background: rgba(13, 22, 32, 0.98);
        border-bottom-color: rgba(70, 116, 160, 0.45);
    }

    .tenant-ramathayal .site-header__nav-link,
    .tenant-ramathayal .site-header__lang-btn,
    .tenant-ramathayal .site-header__user-btn {
        color: #d8e0ea;
    }

    .tenant-ramathayal .site-header__nav-link:hover,
    .tenant-ramathayal .site-header__nav-link--active {
        color: #4adae8;
    }

    .tenant-ramathayal .site-header__hamburger-line {
        background-color: #d8e0ea;
    }

    .tenant-ramathayal .site-header__mobile-nav {
        background: #131e2c;
    }

    .tenant-ramathayal .site-header__mobile-nav-link {
        color: #d8e0ea;
    }

    /* Donate CTA in dark: dark surface with navy border
       lifted to the brighter primary. */
    .tenant-ramathayal .site-header__cta,
    .tenant-ramathayal .trumot_btn,
    .tenant-ramathayal .trumot_btn-style {
        background: #131e2c;
        border-color: #4674a0;
        color: #d8e0ea;
    }

    .tenant-ramathayal .site-header__cta:hover,
    .tenant-ramathayal .trumot_btn:hover,
    .tenant-ramathayal .trumot_btn-style:hover {
        background: #1a2638;
        border-color: #6e91b6;
        color: #ffffff;
    }

    /* Forms */
    .tenant-ramathayal .form-input,
    .tenant-ramathayal .form-control,
    .tenant-ramathayal .form-select,
    .tenant-ramathayal .form-textarea {
        background: #131e2c;
        border-color: rgba(70, 116, 160, 0.35);
        color: #d8e0ea;
    }

    .tenant-ramathayal .form-input:focus,
    .tenant-ramathayal .form-control:focus,
    .tenant-ramathayal .form-select:focus,
    .tenant-ramathayal .form-textarea:focus {
        border-color: #4adae8;
        box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
    }

    .tenant-ramathayal .form-label {
        color: #d8e0ea;
    }

    .tenant-ramathayal .input-group__addon,
    .tenant-ramathayal .input-group-text {
        background: #1a2638;
        border-color: rgba(70, 116, 160, 0.35);
        color: #6e91b6;
    }

    /* Donation amount selectors */
    .tenant-ramathayal .donation-amount-card,
    .tenant-ramathayal .donation-amount {
        background: #131e2c;
        border-color: rgba(70, 116, 160, 0.35);
    }

    .tenant-ramathayal .donation-amount-card:hover,
    .tenant-ramathayal .donation-amount:hover {
        border-color: #4674a0;
        background: rgba(70, 116, 160, 0.10);
    }

    .tenant-ramathayal .donation-amount-card--selected {
        border-color: #4674a0;
        background: rgba(70, 116, 160, 0.18);
    }

    .tenant-ramathayal .donation-amount-card--selected .donation-amount-card__value {
        color: #6e91b6;
    }

    /* Social proof / impact strip flips to dark navy */
    .tenant-ramathayal .social-proof {
        background: linear-gradient(135deg, #0d1620 0%, #131e2c 100%);
        border-top-color: rgba(70, 116, 160, 0.30);
        border-bottom-color: rgba(70, 116, 160, 0.30);
    }

    .tenant-ramathayal .social-proof__number,
    .tenant-ramathayal .impact__number {
        color: #6e91b6;
    }

    .tenant-ramathayal .social-proof__label {
        color: #A1A1A1;
    }

    /* Donation section subtle dark wash */
    .tenant-ramathayal .donation-section {
        background: linear-gradient(180deg, #0d1620 0%, #131e2c 50%, #0d1620 100%);
    }

    /* Tables */
    .tenant-ramathayal table th {
        background: #1a2638;
        color: #6e91b6;
        border-bottom-color: rgba(70, 116, 160, 0.45);
    }

    .tenant-ramathayal table td {
        border-bottom-color: rgba(70, 116, 160, 0.20);
        color: #d8e0ea;
    }

    .tenant-ramathayal table tbody tr:nth-child(even) td {
        background: #131e2c;
    }

    /* Scrollbar */
    .tenant-ramathayal ::-webkit-scrollbar-track {
        background: #131e2c;
    }

    .tenant-ramathayal ::-webkit-scrollbar-thumb {
        background: #4674a0;
    }

    .tenant-ramathayal ::-webkit-scrollbar-thumb:hover {
        background: #ce3a6e;
    }
}

/* Manual dark-mode toggle (html.dark-mode) — same overrides */
html.dark-mode .tenant-ramathayal {
    --color-background:       #0d1620;
    --color-surface:          #131e2c;
    --color-surface-alt:      #1a2638;
    --color-surface-muted:    #1a2638;
    --color-surface-soft:     #131e2c;

    --color-primary:        #4674a0;
    --color-primary-light:  #6e91b6;
    --color-primary-dark:   #194a7c;
    --color-primary-bg:     rgba(25, 74, 124, 0.18);

    --color-secondary:      #AE509F;
    --color-secondary-light: #c47ab6;
    --color-secondary-dark:  #804fa0;
    --color-secondary-bg:    rgba(128, 79, 160, 0.18);

    --color-accent:         #ce3a6e;
    --color-accent-light:   #de5e8a;
    --color-accent-dark:    #c14483;
    --color-accent-bg:      rgba(193, 68, 131, 0.18);

    --color-urgent:         #ed2339;
    --color-urgent-light:   #f24a5d;
    --color-urgent-dark:    #c82a1d;
    --color-urgent-bg:      rgba(233, 37, 63, 0.20);

    --color-focus:          #4adae8;
    --color-focus-light:    #7ee5ef;
    --color-focus-bg:       rgba(74, 218, 232, 0.18);

    --color-text:           #ffffff;
    --color-text-secondary: #d8e0ea;
    --color-text-muted:     #A1A1A1;
    --color-text-faint:     #656565;

    --color-border:         rgba(70, 116, 160, 0.30);
    --color-border-light:   rgba(70, 116, 160, 0.16);
    --color-border-strong:  rgba(70, 116, 160, 0.55);

    --bs-primary:              #4674a0;
    --bs-primary-rgb:          70, 116, 160;
    --bs-primary-bg-subtle:    rgba(70, 116, 160, 0.18);
    --bs-primary-border-subtle: rgba(70, 116, 160, 0.35);
    --bs-primary-text-emphasis: #6e91b6;

    --bs-success:              #4ac06a;
    --bs-success-rgb:          74, 192, 106;
    --bs-success-bg-subtle:    rgba(74, 192, 106, 0.18);
    --bs-success-border-subtle: rgba(74, 192, 106, 0.35);
    --bs-success-text-emphasis: #6ed084;

    --bs-warning:              #f4be40;
    --bs-warning-rgb:          244, 190, 64;
    --bs-warning-bg-subtle:    rgba(244, 190, 64, 0.18);
    --bs-warning-border-subtle: rgba(244, 190, 64, 0.35);
    --bs-warning-text-emphasis: #f4be40;

    --bs-info:                 #ce3a6e;
    --bs-info-rgb:             206, 58, 110;
    --bs-info-bg-subtle:       rgba(206, 58, 110, 0.18);
    --bs-info-border-subtle:   rgba(206, 58, 110, 0.35);
    --bs-info-text-emphasis:   #de5e8a;

    --bs-danger:               #ed2339;
    --bs-danger-rgb:           237, 35, 57;
    --bs-danger-bg-subtle:     rgba(237, 35, 57, 0.20);
    --bs-danger-border-subtle: rgba(237, 35, 57, 0.40);
    --bs-danger-text-emphasis: #f24a5d;

    --bs-link-color:           #4adae8;
    --bs-link-color-rgb:       74, 218, 232;
    --bs-link-hover-color:     #ce3a6e;
    --bs-link-hover-color-rgb: 206, 58, 110;

    --header-bg:           rgba(13, 22, 32, 0.92);
    --header-bg-scrolled:  rgba(13, 22, 32, 0.98);
}

html.dark-mode .tenant-ramathayal body {
    background-color: #0d1620;
    color: #d8e0ea;
}

:where(html.dark-mode .tenant-ramathayal :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.hero *, .cta-section *, .site-footer *)) {
    color: #ffffff;
}

html.dark-mode .tenant-ramathayal .card {
    background: #131e2c;
    border-color: rgba(70, 116, 160, 0.30);
}

html.dark-mode .tenant-ramathayal .card__title,
html.dark-mode .tenant-ramathayal .card__title a {
    color: #6e91b6;
}

html.dark-mode .tenant-ramathayal .card__text {
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .card__meta {
    color: #A1A1A1;
}

html.dark-mode .tenant-ramathayal .site-header {
    background: rgba(13, 22, 32, 0.92);
    border-bottom-color: rgba(70, 116, 160, 0.30);
}

html.dark-mode .tenant-ramathayal .site-header--scrolled {
    background: rgba(13, 22, 32, 0.98);
    border-bottom-color: rgba(70, 116, 160, 0.45);
}

html.dark-mode .tenant-ramathayal .site-header__nav-link,
html.dark-mode .tenant-ramathayal .site-header__lang-btn,
html.dark-mode .tenant-ramathayal .site-header__user-btn {
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .site-header__nav-link:hover,
html.dark-mode .tenant-ramathayal .site-header__nav-link--active {
    color: #4adae8;
}

html.dark-mode .tenant-ramathayal .site-header__hamburger-line {
    background-color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .site-header__mobile-nav {
    background: #131e2c;
}

html.dark-mode .tenant-ramathayal .site-header__mobile-nav-link {
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .site-header__cta,
html.dark-mode .tenant-ramathayal .trumot_btn,
html.dark-mode .tenant-ramathayal .trumot_btn-style {
    background: #131e2c;
    border-color: #4674a0;
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .site-header__cta:hover,
html.dark-mode .tenant-ramathayal .trumot_btn:hover,
html.dark-mode .tenant-ramathayal .trumot_btn-style:hover {
    background: #1a2638;
    border-color: #6e91b6;
    color: #ffffff;
}

html.dark-mode .tenant-ramathayal .form-input,
html.dark-mode .tenant-ramathayal .form-control,
html.dark-mode .tenant-ramathayal .form-select,
html.dark-mode .tenant-ramathayal .form-textarea {
    background: #131e2c;
    border-color: rgba(70, 116, 160, 0.35);
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .form-input:focus,
html.dark-mode .tenant-ramathayal .form-control:focus,
html.dark-mode .tenant-ramathayal .form-select:focus,
html.dark-mode .tenant-ramathayal .form-textarea:focus {
    border-color: #4adae8;
    box-shadow: 0 0 0 3px rgba(74, 218, 232, 0.30);
}

html.dark-mode .tenant-ramathayal .form-label {
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal .input-group__addon,
html.dark-mode .tenant-ramathayal .input-group-text {
    background: #1a2638;
    border-color: rgba(70, 116, 160, 0.35);
    color: #6e91b6;
}

html.dark-mode .tenant-ramathayal .donation-amount-card,
html.dark-mode .tenant-ramathayal .donation-amount {
    background: #131e2c;
    border-color: rgba(70, 116, 160, 0.35);
}

html.dark-mode .tenant-ramathayal .donation-amount-card:hover,
html.dark-mode .tenant-ramathayal .donation-amount:hover {
    border-color: #4674a0;
    background: rgba(70, 116, 160, 0.10);
}

html.dark-mode .tenant-ramathayal .donation-amount-card--selected {
    border-color: #4674a0;
    background: rgba(70, 116, 160, 0.18);
}

html.dark-mode .tenant-ramathayal .donation-amount-card--selected .donation-amount-card__value {
    color: #6e91b6;
}

html.dark-mode .tenant-ramathayal .social-proof {
    background: linear-gradient(135deg, #0d1620 0%, #131e2c 100%);
    border-top-color: rgba(70, 116, 160, 0.30);
    border-bottom-color: rgba(70, 116, 160, 0.30);
}

html.dark-mode .tenant-ramathayal .social-proof__number,
html.dark-mode .tenant-ramathayal .impact__number {
    color: #6e91b6;
}

html.dark-mode .tenant-ramathayal .social-proof__label {
    color: #A1A1A1;
}

html.dark-mode .tenant-ramathayal .donation-section {
    background: linear-gradient(180deg, #0d1620 0%, #131e2c 50%, #0d1620 100%);
}

html.dark-mode .tenant-ramathayal table th {
    background: #1a2638;
    color: #6e91b6;
    border-bottom-color: rgba(70, 116, 160, 0.45);
}

html.dark-mode .tenant-ramathayal table td {
    border-bottom-color: rgba(70, 116, 160, 0.20);
    color: #d8e0ea;
}

html.dark-mode .tenant-ramathayal table tbody tr:nth-child(even) td {
    background: #131e2c;
}

html.dark-mode .tenant-ramathayal ::-webkit-scrollbar-track {
    background: #131e2c;
}

html.dark-mode .tenant-ramathayal ::-webkit-scrollbar-thumb {
    background: #4674a0;
}

html.dark-mode .tenant-ramathayal ::-webkit-scrollbar-thumb:hover {
    background: #ce3a6e;
}