/* ===================================================================
   KOBAR — design 03 "الخدمة أولًا", applied to the live site.

   Loaded LAST, after kobar-bs.css / theme.css / full-home.css, so it
   wins on equal specificity without those files being edited. That is
   deliberate: the site's markup vocabulary (.ram-*) is shared by 135
   public templates, so restyling the vocabulary re-skins every inner
   page, category and menu at once. Editing the markup instead would
   mean touching all of them.

   Two things this file is doing:
     1. Re-pointing the Material-3 token set at Kobar's own palette. The
        inherited one is Ramallah's — lime #9ec927 over brown #623c11 —
        and it is the single loudest reason the site reads as Ramallah's
        with a new name on it.
     2. Replacing the "rounded cards floating on tinted bands" rhythm
        with the four grounds from design 03, and the motion that goes
        with them.

   ⚠ Kobar's own logo lime (#9DBC30) is within a hair of Ramallah's
   primary (#9ec927). It is therefore an ACCENT here and never an action
   colour; primary actions are olive and ochre. Reintroducing lime as a
   button or link colour undoes most of this file.
   =================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root,
[data-bs-theme="light"] {
    /* Kobar: limestone ground, olive terraces, ochre, and the logo's sky. */
    --ram-primary: #3F6B24;
    --ram-primary-container: #2E5219;
    --ram-on-primary: #FFFFFF;
    --ram-secondary: #B9791A;
    --ram-on-secondary: #FFFFFF;
    --ram-tertiary: #2F7D9C;
    --ram-on-tertiary: #FFFFFF;

    --ram-surface: #FFFFFF;
    --ram-surface-container-lowest: #FFFFFF;
    --ram-surface-container-low: #F7F9F3;
    --ram-surface-container: #F3F6EE;
    --ram-surface-container-high: #E9EFE0;
    --ram-on-surface: #101408;
    --ram-on-surface-variant: #414733;
    --ram-outline: #6B7159;
    --ram-outline-variant: #D5DCC8;
    --ram-background: #FFFFFF;
    --ram-on-background: #101408;
    --ram-error: #8C2F26;

    --bs-primary-rgb: 63, 107, 36;
    --bs-secondary-rgb: 185, 121, 26;
    --bs-body-color-rgb: 16, 20, 8;
    --bs-link-color: var(--ram-primary);
    --bs-link-color-rgb: 63, 107, 36;
    --bs-link-hover-color: #2E5219;
    --bs-font-sans-serif: "Tajawal", "Rubik", system-ui, -apple-system, sans-serif;

    /* design 03's own additions */
    --k-bg: #FFFFFF;
    --k-surface: #F3F6EE;
    --k-surface-2: #E9EFE0;
    --k-line: #D5DCC8;
    --k-line-soft: #E7EBDD;
    --k-ink: #101408;
    --k-ink-soft: #414733;
    --k-ink-dim: #6B7159;
    --k-night: #16200F;

    /* the accent chord, cycled across card families */
    --a-olive: #3F6B24;
    --a-ochre: #B9791A;
    /* #B9791A is the brand ochre, tuned as a FILL. As small text on white
       it is 3.6:1 and as a fill under white text 3.6:1 too -- both under the
       4.5 body-text floor, which is why every eyebrow and kicker on the site
       failed. This is the same hue darkened to 5.8:1 both ways; use it
       wherever ochre carries TEXT, and keep --a-ochre for decoration. */
    --a-ochre-deep: #8F5A0D;
    --a-ochre-fill: #8F5A0D;   /* same colour, but never re-scoped: it sits
                                  UNDER white text, on light and dark alike */
    --a-sky:   #2F7D9C;
    --a-clay:  #A8452B;
    --a-moss:  #5F7F1E;
    --a-lime:  #9DBC30;   /* accent only — never an action colour */

    --k-ease: cubic-bezier(.22,1,.36,1);
}

body {
    font-family: "Tajawal", "Rubik", system-ui, -apple-system, sans-serif;
    background: var(--k-bg);
    color: var(--k-ink);
}
html[lang="en"] body { font-family: "Rubik", system-ui, -apple-system, sans-serif; }

/* ---------------------------------------- 1b. dark surfaces re-scope the ink */
/* The tokens in :root are the LIGHT theme: --ram-on-surface / --k-ink are the
   near-black #101408 meant to sit on white. The three dark grounds below used
   to set only their own `color`, which any descendant carrying a token-driven
   class threw away again -- .text-on-surface and .ram-h4 resolved back to
   #101408, and Bootstrap's .text-body-secondary fell through to its stock
   rgba(33,37,41,.75), because --bs-secondary-color was only ever redefined
   inside html.dark. On #16200F that is a contrast ratio of 1.1:1, i.e. the
   footer's copyright line, "دائرة الرقمنة ونظم المعلومات الجغرافية", the
   "روابط سريعة"/"البيانات والسياسات" headings and the awards band were black
   on green.
   Re-scoping the tokens on the dark containers themselves fixes every
   descendant at once, so a new token-driven class dropped into a dark block
   is legible by default instead of needing its own override. */
.ram-block.k-dark,
.ram-awardhero,
.ram-footer, .ram-foot {
    --ram-on-surface: #E7EDDC;
    --ram-on-surface-variant: #B9C4A8;
    --ram-on-background: #E7EDDC;
    /* The action colour is the same lever for every one of these: .ram-cardlink
       and .ram-chip--soft resolve var(--ram-accent, var(--ram-primary)),
       .ram-footer__brand / .ram-awardhero__tag / __sub take --ram-primary
       straight, and .ram-accent--primary just points --ram-accent back at it.
       #3F6B24 is 2.7:1 on #16200F. Lightening it here fixes all of them at
       once; --ram-on-primary flips with it so the components that use
       --ram-primary as a BACKGROUND keep a readable ink on top. */
    --ram-primary: #8FBE5C;
    --ram-on-primary: #10200A;
    --a-ochre-deep: #E2B463;         /* deep ochre is for LIGHT grounds; on
                                        #16200F it is 2.9:1, so eyebrows and
                                        kickers take the light ochre here */
    --ram-outline: #9FB08C;          /* .ram-footer__credit a rides on this */
    --ram-outline-variant: rgba(231, 237, 220, .22);
    --k-ink: #E7EDDC;
    --k-ink-soft: #B9C4A8;
    --k-ink-dim: #97A487;
    --bs-body-color: #E7EDDC;
    --bs-body-color-rgb: 231, 237, 220;
    --bs-secondary-color: rgba(231, 237, 220, .78);
    --bs-emphasis-color: #FFFFFF;
    --bs-heading-color: #E7EDDC;
}

/* The header bar is dark too, but a MID olive (#3F6B24), not the night green
   the block above is tuned for -- its secondary ink (#B9C4A8) only reaches
   3.4:1 here. These are the same roles pitched for this lighter ground:
   white for primary ink and icons (6.3:1), near-white for secondary (5.3:1),
   and a pale lime for the hover/active state, because --ram-primary is the
   bar's own background colour and reading it as text is invisible. */
.ram-header {
    --ram-on-surface: #FFFFFF;
    --ram-on-surface-variant: #E8EDE5;
    --ram-on-background: #FFFFFF;
    --ram-outline: #C9D4BE;
    --ram-outline-variant: rgba(255, 255, 255, .28);
    --k-ink: #FFFFFF;
    --k-ink-soft: #E8EDE5;
    --k-ink-dim: #C9D4BE;
    --ram-primary: #DCE9A8;
    --ram-on-primary: #16200F;
    --bs-body-color: #FFFFFF;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-secondary-color: #E8EDE5;
    --bs-emphasis-color: #FFFFFF;
    --bs-heading-color: #FFFFFF;
}
/* the search glyph was a 60%-opacity lime on the bar: 2.1:1 */
.ram-header .ram-search__icon { color: rgba(255, 255, 255, .82); }
.ram-header .ram-search:focus-within .ram-search__icon { color: #FFFFFF; }

/* ...but a dark ground can still host a LIGHT island -- the footer's contact
   accordion (.bg-light), the social buttons, the calendar's white nav slot and
   date chip, the outline button on the media block. Those keep a near-white
   background, so they need the light ink back or the re-scope above would hand
   them #E7EDDC on #F8F9FA and make them invisible instead. Same values as
   :root; restated here rather than inherited because the dark ancestor has
   already overwritten them further up the tree. */
:is(.ram-block.k-dark, .ram-awardhero, .ram-header, .ram-footer, .ram-foot)
:is(.bg-light, .bg-white, .bg-body, .bg-body-tertiary, .bg-body-secondary,
    .ram-btn--outline, .ram-slot, .ram-evdate, .ram-social-btn,
    .ram-themebar, .ram-dropdown, .dropdown-menu, .ram-search__input,
    .header-search-listbox) {
    --ram-on-surface: #101408;
    --ram-on-surface-variant: #414733;
    --ram-on-background: #101408;
    --ram-outline: #6B7159;
    --ram-outline-variant: #D5DCC8;
    --k-ink: #101408;
    --k-ink-soft: #414733;
    --k-ink-dim: #6B7159;
    --bs-body-color: #101408;
    --bs-body-color-rgb: 16, 20, 8;
    --bs-secondary-color: rgba(65, 71, 51, .92);
    --bs-emphasis-color: #101408;
    --bs-heading-color: #101408;
    --ram-primary: #3F6B24;
    --ram-on-primary: #FFFFFF;
}

/* Cards inside a dark block still carry their own accent from the chord
   (--a-olive / --a-sky / --a-clay ...), set per card, so re-scoping a token
   higher up cannot reach them. These three are where the chord is used as
   TEXT; lightening it against white in place keeps each card its own hue
   while lifting it off #16200F (olive goes 2.7:1 -> 5.9:1). Deliberately
   only `color`: .ram-awardhero__ribbon and the chips use the same chord as a
   BACKGROUND under white text, and must not move. */
:is(.ram-block.k-dark, .ram-awardhero, .ram-header, .ram-footer, .ram-foot)
:is(.ram-cardlink, .ram-chip--soft, .ram-evdate__year) {
    color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 62%, #FFFFFF);
}

/* .ram-flink hardcodes slate #64748b, inherited from the Ramallah theme where
   the footer was light. Point it at the token so it follows the dark ground. */
:is(.ram-footer, .ram-foot) .ram-flink { color: var(--ram-on-surface-variant); }

/* ------------------------------------------------- 2. drop Ramallah's motifs */
/* The tatreez divider is Ramallah's brand embroidery. The change of
   ground between sections is the transition here; nothing sits on the
   seam. */
.tatreez-divider,
.tatreez-divider--between { display: none !important; }

/* --------------------------------------------------------- 3. the grounds */
/* Was: rounded cards floating on violet/frost/soft tinted bands. Now four
   grounds that alternate, with two dark olive bands for the sections that
   are instruments rather than reading. */
.ram-block { position: relative; padding-block: clamp(44px, 6vw, 84px); }

.modern-surface,
.modern-surface--soft,
.modern-surface--frost,
.modern-surface--violet { background: var(--k-bg); }

/* alternate by position so the rhythm survives sections being added or
   reordered in the CMS */
.ram-block:nth-of-type(even) { background: var(--k-surface); }
.ram-block:nth-of-type(even)::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: repeating-linear-gradient(115deg,
        transparent 0 46px,
        color-mix(in srgb, var(--a-olive) 7%, transparent) 46px 47px,
        transparent 47px 96px,
        color-mix(in srgb, var(--a-ochre) 6%, transparent) 96px 97px,
        transparent 97px 168px);
}
.ram-block > .ram-wrap { position: relative; z-index: 1; }
.ram-block + .ram-block { border-top: 1px solid var(--k-line-soft); }

/* --------------------------------------------------- 4. section headings */
.ram-sec-title {
    position: relative; display: inline-block; padding-block-end: 10px;
    font-weight: 800; color: var(--k-ink);
}
.ram-sec-title::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
    height: 3px; width: 64px; border-radius: 99px;
    background: linear-gradient(90deg, var(--a-ochre), var(--a-olive));
}
.ram-eyebrow { color: var(--a-ochre-deep); font-weight: 700; letter-spacing: .02em; }
.ram-eyebrow__dot { background: var(--a-ochre) !important; }
.ram-sec-lede, .ram-sec-sublede { color: var(--k-ink-dim); }

/* ------------------------------------------------------------ 5. cards */
/* Squarer than the inherited bento, hairline instead of shadow at rest,
   and an accent that belongs to the card rather than the band. */
.ram-tilecard, .ram-tile, .ram-newsitem, .ram-newslead, .ram-evcard, .ram-calbox {
    border-radius: 12px;
    border: 1px solid var(--k-line);
    background: #fff;
    box-shadow: none;
    transition: transform .28s var(--k-ease), box-shadow .28s var(--k-ease), border-color .28s;
}
.ram-tilecard:hover, .ram-tile:hover, .ram-newsitem:hover, .ram-newslead:hover {
    transform: translateY(-4px);
    border-color: var(--accent, var(--a-olive));
    box-shadow: 0 20px 44px color-mix(in srgb, var(--accent, var(--a-olive)) 20%, transparent);
}
.ram-tilecard__media img, .ram-newsitem__media img, .ram-newslead__media img,
.ram-tile__img { transition: transform .6s var(--k-ease), filter .45s var(--k-ease); }
.ram-tilecard:hover .ram-tile__img,
.ram-tilecard:hover .ram-tilecard__media img,
.ram-newsitem:hover .ram-newsitem__media img,
.ram-newslead:hover .ram-newslead__media img { transform: scale(1.06); filter: saturate(1.12); }

/* accent chord across each family */
.ram-accent--primary   { --accent: var(--a-olive); }
.ram-accent--secondary { --accent: var(--a-ochre); }
.ram-accent--tertiary  { --accent: var(--a-sky); }
.ram-tilecard:nth-child(4n+1) { --accent: var(--a-moss); }
.ram-tilecard:nth-child(4n+2) { --accent: var(--a-sky); }
.ram-tilecard:nth-child(4n+3) { --accent: var(--a-ochre); }
.ram-tilecard:nth-child(4n+4) { --accent: var(--a-clay); }

.ram-tile__rail { background: var(--accent, var(--a-olive)); }
.ram-tile__icon, .ram-tilecard__icon {
    color: var(--accent, var(--a-olive));
    background: color-mix(in srgb, var(--accent, var(--a-olive)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, var(--a-olive)) 26%, transparent);
    transition: background .3s, color .3s, transform .35s var(--k-ease);
}
.ram-tilecard:hover .ram-tilecard__icon,
.ram-tile:hover .ram-tile__icon {
    background: var(--accent, var(--a-olive)); color: #fff; transform: rotate(-6deg) scale(1.06);
}

.ram-chip, .ram-chip--accent {
    background: color-mix(in srgb, var(--accent, var(--a-olive)) 14%, #fff);
    color: color-mix(in srgb, var(--accent, var(--a-olive)) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--accent, var(--a-olive)) 30%, transparent);
    border-radius: 999px; font-weight: 700;
}
.ram-kicker { color: var(--a-ochre-deep); font-weight: 700; }
.ram-card-meta, .ram-card-desc { color: var(--k-ink-dim); }
.ram-cardlink { color: var(--a-olive); font-weight: 700; }

/* -------------------------------------------------------- 6. quick bento */
/* one segmented bar rather than four cards adrift with gutters */
.quick-actions-bento .row,
.quick-actions-bento .ram-quickgrid {
    gap: 1px; background: var(--k-line);
    border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden;
}
.quick-actions-bento .ram-quicktile { background: #fff; border: 0; border-radius: 0; }

/* ------------------------------------------------------------ 7. buttons */
.btn-primary, .ram-btn--primary {
    background: var(--a-olive); border-color: var(--a-olive); color: #fff;
    border-radius: 9px; font-weight: 700;
}
.btn-primary:hover, .ram-btn--primary:hover {
    background: var(--ram-primary-container); border-color: var(--ram-primary-container);
    transform: translateY(-2px);
}
/* white on #B9791A is 3.6:1; the deep ochre takes it to 5.8:1 */
.btn-secondary, .ram-btn--secondary { background: var(--a-ochre-fill); border-color: var(--a-ochre-fill); color: #fff; }
.btn-secondary:hover, .ram-btn--secondary:hover { background: #A06714; border-color: #A06714; }
a { color: var(--a-olive); }
a:hover { color: var(--ram-primary-container); }

/* ------------------------------------------------ 8. ticker + dark bands */
.ram-ticker { background: var(--a-ochre); color: #fff; }
.ram-ticker a { color: #fff; }

/* the media portal and the events calendar go dark: photos glow, and the
   calendar reads as an instrument rather than a spreadsheet */
.ram-block.k-dark { background: var(--k-night); color: #E7EDDC; }
.ram-block.k-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
    background-image:
        repeating-linear-gradient(115deg, transparent 0 60px, rgba(157,188,48,.05) 60px 61px, transparent 61px 130px),
        radial-gradient(80% 60% at 80% 0%, rgba(185,121,26,.16), transparent 60%);
}
.k-dark .ram-sec-title { color: #F4F8EC; }
.k-dark .ram-sec-lede, .k-dark .ram-sec-sublede, .k-dark .ram-card-desc,
.k-dark .ram-card-meta { color: #AFBBA0; }
.k-dark .ram-sec-title::after { background: linear-gradient(90deg, #F3BC3E, var(--a-lime)); }
.k-dark .ram-tilecard, .k-dark .ram-tile, .k-dark .ram-calbox,
.k-dark .ram-evcard, .k-dark .ram-newsitem {
    background: rgba(255,255,255,.04); border-color: rgba(231,237,220,.16); color: #E7EDDC;
}
.k-dark .ram-h5, .k-dark .ram-h4, .k-dark .ram-card-name, .k-dark h3, .k-dark h4 { color: #F4F8EC; }

/* ---------------------------------------------------------- 9. calendar */
.ram-cal-cell, .ram-cal-off {
    border-radius: 9px; border: 1px solid var(--k-line-soft);
    transition: transform .22s var(--k-ease), background .22s, box-shadow .22s;
}
.ram-cal-cell:hover { transform: scale(1.12); box-shadow: 0 8px 20px rgba(16,20,8,.16); z-index: 2; }
.ram-cal-cell--today { position: relative; }
.ram-cal-cell--today::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit;
    border: 2px solid var(--a-lime); animation: kTodayPulse 2.6s ease-in-out infinite;
}
@keyframes kTodayPulse { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.09); opacity: .35 } }
.ram-cal-legend__dot--event { background: var(--a-ochre); }
.ram-cal-legend__dot--today { background: var(--a-lime); }
.k-dark .ram-cal-cell, .k-dark .ram-cal-off {
    background: rgba(255,255,255,.06); border-color: rgba(231,237,220,.18); color: #EDF2E2;
}
.k-dark .ram-cal-dows { color: #8F9C80; }

/* --------------------------------------------------------- 10. timeline */
.events-city-timeline__item { position: relative; padding-inline-start: 18px; }
.events-city-timeline__item::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
    border-radius: 99px; background: var(--accent, var(--a-olive)); opacity: .55;
    transition: opacity .25s;
}
.events-city-timeline__item:hover::before { opacity: 1; }
.events-city-timeline__item:nth-child(5n+1) { --accent: var(--a-olive); }
.events-city-timeline__item:nth-child(5n+2) { --accent: var(--a-sky); }
.events-city-timeline__item:nth-child(5n+3) { --accent: var(--a-ochre); }
.events-city-timeline__item:nth-child(5n+4) { --accent: var(--a-clay); }
.events-city-timeline__item:nth-child(5n+5) { --accent: var(--a-moss); }
.events-city-timeline__marker { background: var(--accent, var(--a-olive)); }

/* ----------------------------------------------------------- 11. awards */
.ram-awardhero { background: var(--k-night); color: #EDF2E2; border-radius: 16px; }
.ram-awardhero__medal { color: #F3BC3E; }
.ram-awardhero__ribbon { background: var(--a-ochre-fill); color: #fff; }

/* ------------------------------------------------- 12. header + footer */
.ram-header { background: var(--a-olive); color: #fff; }
.ram-header a, .ram-header__divider { color: #fff; border-color: rgba(255,255,255,.25); }
.ram-nav a:hover, .ram-nav a[aria-current] { color: #F3BC3E; }
.ram-footer, .ram-foot { background: var(--k-night); color: #C9D2BB; }
.ram-footer a:hover { color: #F3BC3E; }
/* ------------------------------------------------ text sitting on a photo */
/* These are the only places on the site where legibility depends on an image
   an editor uploads, so CSS cannot prove a contrast ratio for them. Two
   defences, because either alone fails on some photo:
     1. a scrim under the text -- the hero had NONE (its white heading was
        readable only because the current aerial shot happens to be dark), and
        the news lead's was just .1 alpha at the top, which is exactly where
        the date sits, so the date landed on a bright part of the eye photo;
     2. a text shadow, which holds the letterforms apart from whatever is
        behind them even where the scrim is thin.
   The scrims stay gradients rather than a flat wash so the photograph is still
   the thing you see. */
#hero-banner .hero-banner__inner { position: relative; z-index: 2; }
#hero-banner::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top,
        rgba(22, 32, 15, .78), rgba(22, 32, 15, .52) 45%, rgba(22, 32, 15, .30));
}
.ram-newslead__scrim {
    background: linear-gradient(to top,
        #2a1a10, rgba(42, 26, 16, .68) 50%, rgba(42, 26, 16, .38)) !important;
}
:is(.hero-cta-title, .hero-cta-lede, .hero-btn,
    .ram-newslead__time, .ram-newslead__title, .ram-newslead__desc, .ram-newslead__cta),
:is(.ram-newslead__time, .ram-newslead__cta) .material-symbols-outlined {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .62), 0 0 10px rgba(0, 0, 0, .38);
}

/* The empty-card placeholder glyph was rgba(74,64,56,.4) on the #F3F6EE card
   ground -- 2.05:1, under the 3:1 floor for a graphic. */
.ram-card__media-empty { color: rgba(74, 64, 56, .62); }
/* same glyph, other rule: the empty-listing state (.ram-empty) was 2.1:1 */
.ram-empty .material-symbols-outlined { color: rgba(74, 64, 56, .62); }

/* A soft chip is its accent on a 14% tint of the same accent -- 3.1:1 for
   ochre, 3.9:1 for sky. Pull the label toward ink; the tint stays put so the
   chip still reads as its colour. */
.ram-chip--soft { color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 72%, var(--k-ink)); }

/* ---------------------------------------------- feedback: alerts + toasts */
/* Bootstrap's stock alert palette is its own blue/red/green/yellow, which is
   the one piece of chrome on this site that never got retinted -- a submitted
   contact form answered in Bootstrap blue next to the olive buttons. 5.3
   exposes per-alert CSS vars, so each variant is a three-line retint rather
   than a rewrite of the component.
   Tints are the accent chord at ~12% over white, matching .ram-chip--soft. */
.alert {
    --bs-alert-border-radius: 14px;
    border-width: 1px;
    padding: .9rem 1.1rem;
    font-size: .95rem;
    line-height: 1.65;
}
.alert-success {
    --bs-alert-color: #2E5219;
    --bs-alert-bg: color-mix(in srgb, var(--a-olive) 12%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--a-olive) 34%, #fff);
}
.alert-danger, .alert-error {
    --bs-alert-color: #7A2A1E;
    --bs-alert-bg: color-mix(in srgb, var(--a-clay) 12%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--a-clay) 34%, #fff);
}
.alert-warning {
    --bs-alert-color: #7A4E0B;
    --bs-alert-bg: color-mix(in srgb, var(--a-ochre) 14%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--a-ochre) 36%, #fff);
}
.alert-info, .alert-primary, .alert-secondary {
    --bs-alert-color: #1E5468;
    --bs-alert-bg: color-mix(in srgb, var(--a-sky) 12%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--a-sky) 34%, #fff);
}
/* On the dark grounds the same tints would be invisible, so the alert keeps
   its hue but flips to a translucent fill over the dark surface. */
:is(.ram-block.k-dark, .ram-awardhero, .ram-header, .ram-footer, .ram-foot) .alert {
    --bs-alert-bg: rgba(255, 255, 255, .06);
    --bs-alert-color: #E7EDDC;
    --bs-alert-border-color: rgba(231, 237, 220, .22);
}

/* search results: the refine box. Flex rather than an input-group so the
   button keeps its own pill shape, and logical properties so it mirrors on the
   RTL pages without a second rule. */
.ram-searchform { display: flex; gap: .5rem; max-width: 44rem; }
.ram-searchform__input {
    flex: 1 1 auto; min-width: 0;
    border-radius: 50rem; padding: .7rem 1.15rem;
    border: 1px solid var(--k-line); background: #fff; color: var(--k-ink);
    font-family: inherit; font-size: .95rem;
}
.ram-searchform__input:focus {
    outline: none; border-color: var(--ram-primary);
    box-shadow: 0 0 0 .2rem rgba(63, 107, 36, .16);
}
.ram-searchform__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 480px) {
    .ram-searchform { flex-wrap: wrap; }
    .ram-searchform__btn { width: 100%; justify-content: center; }
}

/* donor acknowledgement: ochre, so it reads as a thank-you rather than as
   another muted utility line next to the copyright */
.ram-footer__donation { color: #E2B463; }
.ram-footer__donation .material-symbols-outlined { font-size: 1.05rem; }

/* ------------------------------------------------------ 13. inner pages */
/* Category and article templates share this vocabulary, so they pick the
   new look up here rather than being edited one by one. */
.ram-inner-head, .ram-pagehead {
    background: var(--k-surface); border-bottom: 1px solid var(--k-line);
}
.ram-inner-head h1, .ram-pagehead h1 { color: var(--k-ink); font-weight: 800; }
.ram-breadcrumb, .breadcrumb { color: var(--k-ink-dim); }
.ram-breadcrumb a, .breadcrumb a { color: var(--a-olive); }
.card, .ram-card {
    border-radius: 12px; border: 1px solid var(--k-line); box-shadow: none;
    transition: transform .28s var(--k-ease), box-shadow .28s var(--k-ease), border-color .28s;
}
.card:hover, .ram-card:hover {
    transform: translateY(-3px); border-color: var(--a-olive);
    box-shadow: 0 18px 38px rgba(63,107,36,.14);
}
.pagination .page-link { color: var(--a-olive); border-radius: 8px; }
.pagination .active .page-link { background: var(--a-olive); border-color: var(--a-olive); color: #fff; }
table.table thead th { background: var(--k-surface); color: var(--k-ink); font-weight: 700; }
table.table tbody tr:hover { background: var(--k-surface); }

/* --------------------------------------------------------- 14. a11y */
:focus-visible { outline: 3px solid var(--a-ochre); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ram-tilecard, .ram-tile, .ram-newsitem, .ram-newslead, .ram-cal-cell,
    .card, .ram-card, .btn-primary, .ram-btn--primary { transition: none; }
    .ram-tilecard:hover, .ram-tile:hover, .ram-newsitem:hover, .ram-newslead:hover,
    .card:hover, .ram-card:hover, .ram-cal-cell:hover { transform: none; }
    .ram-cal-cell--today::after { animation: none; }
}

/* ------------------------------------------------------- 15. dark mode */
/* kobar-bs.css's `html.dark { --ram-primary: #b3d94a; ... }` block is a
   compound element+class selector (specificity 0,1,1,0), which OUTRANKS this
   file's plain `:root { --ram-primary: ... }` (0,1,0,0) no matter that this
   file loads last — specificity beats source order. So switching the a11y
   panel to dark mode silently reverts the whole site to a lifted Ramallah
   lime (#b3d94a, "lifted: #9ec927") over a lifted Ramallah brown (#e0b481,
   "lifted: #623c11") — every page, not just this one. Match the same
   `html.dark` selector so this file's later position finally decides it, and
   derive the dark-safe tints from the same accent tokens everything else on
   the page already uses, rather than inventing new hex. */
html.dark {
    --ram-primary: color-mix(in srgb, var(--a-olive) 60%, #fff);
    --ram-primary-container: color-mix(in srgb, var(--a-olive) 45%, #000);
    --ram-on-primary: color-mix(in srgb, var(--a-olive) 85%, #000);
    --ram-secondary: color-mix(in srgb, var(--a-ochre) 65%, #fff);
    --ram-on-secondary: color-mix(in srgb, var(--a-ochre) 80%, #000);
    --ram-tertiary: color-mix(in srgb, var(--a-sky) 60%, #fff);
    --ram-on-tertiary: color-mix(in srgb, var(--a-sky) 80%, #000);
    --bs-link-hover-color: color-mix(in srgb, var(--a-olive) 70%, #fff);
}

/* ------------------------------------------------ 16. festive theme toggle */
/* The header's theme switcher (palette / snowflake / crescent buttons) is on
   every page, and its "pressed" states are literal Ramallah hex, not tokens:
   the default state washes the pressed icon in Ramallah lime at 15% opacity
   (rgba(158,201,39,...) = #9ec927), and the Christmas/Ramadan states repeat
   the same lime plus Ramallah's brown (#623c11) at equal specificity to
   kobar-bs.css's rule, so theme.css's later source position wins those two
   outright. All three are re-toned to the Kobar accent chord below. */
.ram-themebar .theme-btn[aria-pressed="true"],
.theme-btn[aria-pressed="true"] {
    background-color: color-mix(in srgb, var(--a-olive) 15%, transparent);
    color: var(--a-olive);
}
body[data-site-theme="christmas"] .theme-btn[aria-pressed="true"] {
    background-color: color-mix(in srgb, var(--a-olive) 12%, transparent);
    color: var(--a-olive);
}
body[data-site-theme="ramadan"] .theme-btn[aria-pressed="true"] {
    background-color: color-mix(in srgb, var(--a-ochre) 12%, transparent);
    color: var(--a-ochre-deep);
}
/* Pigtail/string ornaments on the Christmas/Ramadan header decorations were a
   straight lime-over-olive gradient (#4f5c2a -> #9ec927 -> #6a8916). Kobar's
   own olive chord reads the same at a glance without being Ramallah's hex. */
.festive-christmas-pigtail,
.festive-ramadan-string {
    background: linear-gradient(180deg, var(--green-deep), var(--a-olive) 55%, var(--a-moss)) !important;
}
/* The Ramadan header rule (Palestine flag stripe replaced by a moving
   lantern-gold bar) used the same literal lime three times; ochre suits a
   lantern motif better than lime ever did anyway. */
body[data-site-theme="ramadan"] .header-kufiya::after {
    background: linear-gradient(
        to left,
        #1e3a5f 0%,
        var(--a-ochre) 18%,
        #1e3a5f 36%,
        var(--a-ochre) 54%,
        #1e3a5f 72%,
        var(--a-ochre) 90%,
        #1e3a5f 100%
    ) !important;
}

/* =============================================================================
   15. Hero rework — design 03 "الخدمة أولًا": no frosted-glass panel. The copy
   sits directly on the photo over a two-layer scrim (a radial pool anchored to
   the text side, over a vertical wash), and the stats sit below the CTAs as a
   white "terrace lip" card. Same markup as before (.hero-cta-block etc.) —
   this file loads last, so equal-specificity overrides win without touching
   kobar-bs.css / theme.css / full-home.css.
   ============================================================================= */
.hero-banner__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(115% 85% at 100% 52%, rgba(20,26,12,.62) 0%, rgba(20,26,12,.16) 55%, rgba(20,26,12,0) 74%),
        linear-gradient(180deg, rgba(16,20,8,.62) 0%, rgba(16,20,8,.30) 30%, rgba(16,20,8,.40) 62%, rgba(16,20,8,.84) 100%);
}
/* mirrored for LTR so the pool still sits behind the text side */
html[dir="ltr"] .hero-banner__media::after {
    background:
        radial-gradient(115% 85% at 0% 52%, rgba(20,26,12,.62) 0%, rgba(20,26,12,.16) 55%, rgba(20,26,12,0) 74%),
        linear-gradient(180deg, rgba(16,20,8,.62) 0%, rgba(16,20,8,.30) 30%, rgba(16,20,8,.40) 62%, rgba(16,20,8,.84) 100%);
}
.hero-cta-block {
    max-width: 54rem; background: transparent; border: 0; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-cta-title, .hero-cta-lede {
    text-shadow: 0 1px 20px rgba(10,14,6,.72), 0 1px 3px rgba(10,14,6,.5);
}

.k-hero-stats {
    position: relative; z-index: 2; margin-top: clamp(24px, 4.5vw, 44px);
    background: #fff; border: 1px solid var(--k-line); border-radius: 12px; overflow: hidden;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    box-shadow: 0 18px 40px rgba(16,20,8,.18);
}
.k-hero-stats > div { padding: 16px 18px; border-inline-start: 1px solid var(--k-line-soft); }
.k-hero-stats > div:first-child { border-inline-start: 0; }
.k-hero-stats b {
    display: block; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1;
    color: var(--ram-primary-container); font-variant-numeric: tabular-nums;
}
.k-hero-stats span { display: block; margin-top: 8px; font-size: .8rem; color: var(--k-ink-soft); }

@media (max-width: 380px) {
    .k-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-hero-stats > div:nth-child(2n+1) { border-inline-start: 0; }
    .k-hero-stats > div:nth-child(n+3) { border-block-start: 1px solid var(--k-line-soft); }
}

/* =============================================================================
   16. Added homepage sections — council decisions, tenders & vacancies,
   council members, FAQ, the complaints form, and partners. Same premise as
   the rest of the page: a record is a row you can open, a status is a
   coloured pill, nothing here is decoration. "k-" prefix keeps these apart
   from the shared .ram-* vocabulary used across all 135 templates.
   ============================================================================= */
[data-tone="open"]     { --tone: var(--a-olive); }
[data-tone="live"]     { --tone: var(--a-sky); }
[data-tone="progress"] { --tone: var(--a-ochre); }
[data-tone="done"]     { --tone: var(--a-moss); }
[data-tone="closed"]   { --tone: #8A8F7E; }

.k-ico { width: 20px; height: 20px; flex: none; }
.k-listhint { margin: 0 0 14px; font-size: .82rem; color: var(--k-ink-dim); }

.k-rec-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden; background: var(--k-bg); }
.k-rec-row + .k-rec-row { border-top: 1px solid var(--k-line-soft); }
.k-rec-head {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: start;
    background: transparent; border: 0; font-family: inherit; color: inherit; cursor: pointer;
    padding: 16px 18px; position: relative; transition: background .22s;
}
.k-rec-head.k-rec-static { cursor: default; }
.k-rec-head::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
    background: var(--tone, var(--a-olive)); transform: scaleY(.35); transform-origin: center;
    transition: transform .3s var(--k-ease);
}
.k-rec-head:hover { background: var(--k-surface); }
.k-rec-head:hover::before, .k-rec-head[aria-expanded="true"]::before { transform: scaleY(1); }
.k-rec-ref {
    font-weight: 700; font-size: .82rem;
    /* the raw tone on its own 12% tint is 2.9-3.2:1; pulling the text toward
       ink keeps the hue and clears 4.5:1 on every tone in the chord */
    color: color-mix(in srgb, var(--tone, var(--a-olive)) 68%, var(--k-ink));
    background: color-mix(in srgb, var(--tone, var(--a-olive)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--tone, var(--a-olive)) 26%, transparent);
    padding: 5px 10px; border-radius: 8px; white-space: nowrap; flex: none;
    font-variant-numeric: tabular-nums;
}
.k-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.k-rec-title { font-weight: 700; font-size: .98rem; line-height: 1.5; }
.k-rec-date { font-size: .8rem; color: var(--k-ink-dim); }
.k-pill {
    flex: none; font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--tone, var(--a-olive)) 15%, #fff);
    color: color-mix(in srgb, var(--tone, var(--a-olive)) 70%, #000);
    border: 1px solid color-mix(in srgb, var(--tone, var(--a-olive)) 30%, transparent);
}
.k-rec-go {
    flex: none; font-size: .82rem; font-weight: 700; color: var(--a-olive); text-decoration: none;
    white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .2s;
}
.k-rec-go:hover { border-color: var(--a-olive); }
.k-rec-chev { color: var(--k-ink-dim); transition: transform .3s var(--k-ease); }
.k-rec-head[aria-expanded="true"] .k-rec-chev { transform: rotate(180deg); }
.k-rec-body { padding: 0 18px 18px calc(18px + 3px); }
.k-rec-body p { margin: 0; color: var(--k-ink-soft); font-size: .92rem; line-height: 1.9; max-width: 76ch; }
@media (max-width: 640px) {
    .k-rec-head { flex-wrap: wrap; gap: 10px; }
    .k-rec-main { flex-basis: 100%; order: 3; }
}

.k-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.k-tab {
    font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
    padding: 9px 20px; border-radius: 999px; border: 1px solid var(--k-line);
    background: var(--k-bg); color: var(--k-ink-soft);
    transition: background .2s, color .2s, border-color .2s, transform .2s var(--k-ease);
}
.k-tab:hover { transform: translateY(-2px); }
.k-tab[aria-selected="true"] { background: var(--a-olive); border-color: var(--a-olive); color: #fff; }

.k-member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .k-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .k-member-grid { grid-template-columns: minmax(0, 1fr); } }
.k-member-card {
    position: relative; background: var(--k-bg); border: 1px solid var(--k-line);
    border-radius: 12px; padding: 16px 18px; overflow: hidden;
    transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease), border-color .25s;
}
.k-member-card:nth-child(3n+1) { --accent: var(--a-olive); }
.k-member-card:nth-child(3n+2) { --accent: var(--a-sky); }
.k-member-card:nth-child(3n+3) { --accent: var(--a-ochre); }
.k-member-card:hover {
    transform: translateY(-3px); border-color: var(--accent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 18%, transparent);
}
.k-member-card h3 { margin: 0; font-size: .98rem; font-weight: 700; }
.k-member-card p { margin: 5px 0 0; font-size: .84rem; color: var(--k-ink-dim); }
.k-member-no {
    position: absolute; inset-block-start: 10px; inset-inline-end: 12px;
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    /* was 22% -- a 22% tint of the accent over white is 1.3:1, so the member
       numbers 1..9 were all but invisible on the white card. 85% keeps them
       reading as a soft accent numeral while clearing 3:1 for every colour
       in the chord (sky, the lightest, lands at 3.5:1). */
    color: color-mix(in srgb, var(--accent) 88%, var(--k-ink)); font-variant-numeric: tabular-nums;
}

.k-faq-list { border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden; background: var(--k-bg); }
.k-faq-item + .k-faq-item { border-top: 1px solid var(--k-line-soft); }
.k-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    text-align: start; background: transparent; border: 0; font-family: inherit; color: inherit;
    cursor: pointer; padding: 17px 20px; font-weight: 700; font-size: .97rem; line-height: 1.55;
    transition: background .22s;
}
.k-faq-q:hover { background: var(--k-surface); }
.k-faq-plus { flex: none; color: var(--a-ochre); transition: transform .3s var(--k-ease); }
.k-faq-q[aria-expanded="true"] .k-faq-plus { transform: rotate(45deg); }
.k-faq-a { padding: 0 20px 18px; }
.k-faq-a p { margin: 0; color: var(--k-ink-soft); font-size: .92rem; line-height: 1.95; max-width: 76ch; }

.k-contact-wrap {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 34px); align-items: start;
}
@media (max-width: 820px) { .k-contact-wrap { grid-template-columns: minmax(0, 1fr); } }
.k-report-form {
    background: var(--k-bg); border: 1px solid var(--k-line); border-radius: 14px;
    padding: clamp(16px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 14px;
}
.k-frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .k-frow { grid-template-columns: minmax(0, 1fr); } }
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field > span { font-size: .82rem; font-weight: 700; color: var(--k-ink-soft); }
.k-field select, .k-field textarea {
    font-family: inherit; font-size: .94rem; color: var(--k-ink); width: 100%;
    background: var(--k-bg); border: 1px solid var(--k-line); border-radius: 10px; padding: 11px 13px;
    transition: border-color .2s, box-shadow .2s;
}
.k-field select:focus, .k-field textarea:focus {
    outline: none; border-color: var(--a-ochre); box-shadow: 0 0 0 4px rgba(185,121,26,.13);
}
.k-field textarea { resize: vertical; min-height: 96px; line-height: 1.8; }
.k-ffoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.k-demo-note { font-size: .78rem; color: var(--k-ink-dim); }
.k-form-ok {
    margin: 0; padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: .9rem;
    background: color-mix(in srgb, var(--a-olive) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--a-olive) 30%, transparent);
    color: color-mix(in srgb, var(--a-olive) 80%, #000);
}
.k-contact-list { list-style: none; margin: 0; padding: 0; background: var(--k-bg); border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden; }
.k-contact-list li { display: flex; justify-content: space-between; gap: 14px; padding: 13px 17px; font-size: .9rem; }
.k-contact-list li + li { border-top: 1px solid var(--k-line-soft); }
.k-c-key { color: var(--k-ink-dim); flex: none; }
.k-c-val { font-weight: 700; text-align: end; }

.k-partner-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--k-line-soft); border: 1px solid var(--k-line-soft); border-radius: 12px; overflow: hidden;
}
@media (max-width: 940px) { .k-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .k-partner-grid { grid-template-columns: minmax(0, 1fr); } }
.k-partner-card { background: var(--k-bg); padding: 16px 18px; transition: background .25s, transform .25s var(--k-ease); }
.k-partner-card:nth-child(4n+1) { --accent: var(--a-sky); }
.k-partner-card:nth-child(4n+2) { --accent: var(--a-olive); }
.k-partner-card:nth-child(4n+3) { --accent: var(--a-ochre); }
.k-partner-card:nth-child(4n+4) { --accent: var(--a-clay); }
.k-partner-card:hover { background: var(--k-surface); transform: translateY(-3px); }
.k-partner-card h3 { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.6; }
.k-partner-card p { margin: 6px 0 0; font-size: .8rem; font-weight: 600;
    /* raw --accent here is 3.6:1 on the white card for ochre */
    color: color-mix(in srgb, var(--accent) 72%, var(--k-ink)); }

/* defensive: none of these six sections currently sit on a k-dark band, but
   if one is ever moved onto one, the components invert rather than floating
   as white cards on a dark ground. */
.k-dark .k-rec-list, .k-dark .k-faq-list, .k-dark .k-report-form, .k-dark .k-contact-list,
.k-dark .k-member-card, .k-dark .k-tab { background: rgba(255,255,255,.04); border-color: rgba(231,237,220,.16); color: #E7EDDC; }

@media (prefers-reduced-motion: reduce) {
    .k-rec-head, .k-rec-head::before, .k-rec-chev, .k-faq-q, .k-faq-plus, .k-tab,
    .k-member-card, .k-partner-card { transition: none; }
    .k-tab:hover, .k-member-card:hover, .k-partner-card:hover { transform: none; }
}