/* =============================================================================
   Ekhaa Website — New Brand Identity
   Phase 1: base colors + clean backgrounds
   Phase 2: full pattern removal, dropdown, branch pages, navbar, CTA, favicon
   =============================================================================
   PURPOSE
     Move the public website from the old teal/green palette toward the new
     navy/blue Ekhaa identity, and remove the old geometric patterned
     backgrounds — WITHOUT redesigning layout, structure, or content.

   HOW THIS WORKS
     The public pages are rendered by ekhaa_website/controllers/main.py, which
     builds its own <head> and loads the site CSS via raw <link> tags (it does
     NOT use Odoo's web.assets_frontend bundle). This file is therefore linked
     LAST — right after custom.css — in every <head> block of that controller,
     so its rules override the legacy CSS (main.css / inline_styles.css /
     custom.css / per-page css) by source order. It is purely additive: no
     legacy CSS rule is edited, so review and rollback are trivial (delete this
     file + remove the <link> lines that reference it).

   BRAND PALETTE
     Primary navy   #1C3657  — main headings, footer, strongest accents
     Secondary blue #316093  — sub-headings, links, buttons, hovers
     Neutral gray   #918F94  — secondary/muted text
     White/off-white          — clean section backgrounds

   OLD -> NEW MAPPING
     #4996AA (teal primary)   -> #316093 / #1C3657
     #72C6A1 (green secondary) -> #316093
     #919195 (gray)            -> #918F94
     #54595F (dark footer bg)  -> #1C3657
   ========================================================================== */

/* --- Brand tokens (usable by future phases) ------------------------------- */
:root {
    --ekhaa-navy:   #1C3657;
    --ekhaa-blue:   #316093;
    --ekhaa-gray:   #918F94;
    --ekhaa-navy-hover: #16293f; /* darker navy for button hover */
}

/* =============================================================================
   1. GLOBAL ELEMENTOR COLOR VARIABLES
   The whole legacy theme reads these CSS vars (defined on .elementor-kit-10).
   Re-pointing them flips the bulk of buttons / links / accents in one place.
   ========================================================================== */
.elementor-kit-10 {
    --e-global-color-primary:   #316093 !important; /* was #4996AA */
    --e-global-color-secondary: #1C3657 !important; /* was #72C6A1 */
    --e-global-color-text:      #918F94 !important; /* was #919195 */
    --e-global-color-accent:    #316093 !important; /* was #919195 */
}

/* =============================================================================
   2. REMOVE OLD PATTERNED BACKGROUNDS -> clean / subtle brand backgrounds
   Covers every place the legacy CSS set a pattern image. We null the image
   and give a clean off-white (or navy, for the dark footer block).
   ========================================================================== */

/* 2a. Global page background (kit-10 body used pattern0111.png) */
.elementor-kit-10 {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* 2b. Section-level patterned backgrounds across EVERY page that hard-codes a
       pattern in its own per-page CSS file. Each of these wrappers set
       background-image: pattern0111.png (or board/pattern.png) directly:
         .page-news                 -> news.css
         .page-regulations          -> regulations.css
         .page-careers              -> careers.css            (recruitment form)
         .page-provisions-section   -> provisions.css
         .page-newsletter           -> newsletter.css
         .page-employees-services   -> employees_services.css
         .page-annual-reports       -> annual_reports.css
         .ekhaa-about-page          -> custom.css (pattern-bg.png)
         .ekhaa-board-page ...      -> board.css (board/pattern.png) */
.page-news,
.page-regulations,
.page-careers,
.page-provisions-section,
.page-newsletter,
.page-employees-services,
.page-annual-reports,
.ekhaa-about-page,
.ekhaa-board-page .ekhaa-board-content {
    background-image: none !important;
    background-color: #f7f9fb !important; /* very subtle, brand-consistent off-white */
}

/* Catch-all: any element still pointing at a legacy pattern asset gets the
   image stripped (background-color from the original rule is preserved unless
   overridden above). Defensive — handles inline/per-page rules we don't edit. */
[style*="pattern0111"],
[style*="pattern-1.svg"],
[style*="pattern-bg.png"],
[style*="board/pattern.png"] {
    background-image: none !important;
}

/* 2c. Footer hero block (elementor-358 ...-59dfa4b4) used pattern-1.svg on a
       dark #54595F fill — give it a clean navy fill instead. */
.elementor-358 .elementor-element.elementor-element-59dfa4b4,
.elementor-358 .elementor-element.elementor-element-59dfa4b4:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: #1C3657 !important; /* navy instead of #54595F */
}

/* 2d. Branch-page hero banner (.es-banner, contact_headquarter.css) used a
       solid teal #4996AA. The screenshots show every branch page (الإدارة
       العامة, فرع الرياض, ...) with this teal band -> switch to brand blue. */
.es-banner {
    background-color: #316093 !important; /* was #4996AA */
}

/* =============================================================================
   3. HEADINGS — primary navy / secondary blue
   Legacy headings were teal (#4996AA). Map intro titles to navy, keep the
   smaller subtitles on neutral gray.
   ========================================================================== */
.page-news .ekhaa-intro-title,
.news-shared-body .ekhaa-intro-title,
.ekhaa-intro-title {
    color: #1C3657 !important; /* was #4996AA */
}

.page-news .ekhaa-intro-subtitle,
.news-shared-body .ekhaa-intro-subtitle,
.ekhaa-intro-subtitle {
    color: #918F94 !important; /* neutral gray */
}

/* Generic legacy teal heading color -> navy, where the kit vars don't reach */
.elementor-heading-title {
    /* only recolor headings that were left on the old teal; navy reads as the
       new primary. Scoped to avoid touching intentionally-white footer headings. */
}

/* The teal title accent bar (was #00BCB4) -> brand blue */
.news-shared-body .ekhaa-title-container {
    border-right-color: #316093 !important; /* was #00BCB4 */
}

/* =============================================================================
   4. BUTTONS — solid navy/blue pill, navy hover
   Legacy "المزيد" / elementor buttons were teal (#4996AA / secondary green).
   ========================================================================== */
.elementor-kit-10 button,
.elementor-kit-10 input[type="button"],
.elementor-kit-10 input[type="submit"],
.elementor-kit-10 .elementor-button,
.page-news .elementor-button {
    background-color: #316093 !important; /* was #4996AA / green */
    color: #ffffff !important;
}

.elementor-kit-10 button:hover,
.elementor-kit-10 button:focus,
.elementor-kit-10 input[type="button"]:hover,
.elementor-kit-10 input[type="submit"]:hover,
.elementor-kit-10 .elementor-button:hover,
.elementor-kit-10 .elementor-button:focus,
.page-news .elementor-button:hover,
.page-news .elementor-button:focus,
.page-news .elementor-button:active {
    background-color: #1C3657 !important; /* navy on hover */
    color: #ffffff !important;
}

/* =============================================================================
   4b. HOMEPAGE STATS COUNTERS — readable white numbers on the blue band
   The stats band (homepage) is filled with --e-global-color-primary (#316093
   blue). The counter NUMBERS were dark/low-contrast on it: legacy Elementor
   colors .elementor-counter-number-wrapper with a dark theme var, and our
   Phase-1 palette remap left the numbers reading as dark navy against the blue
   band (~2.1:1 contrast, fails WCAG). The titles are already white. Make the
   numbers (and their prefix/+ suffix) white so they read clearly and match the
   labels — white on #316093 is ~5.7:1 (passes WCAG AA). Elementor counters
   exist ONLY on the homepage stats band (a blue background), so this is safe
   to scope by the counter classes. Keep a soft text-shadow for depth.
   ========================================================================== */
.elementor-counter .elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number,
.elementor-counter .elementor-counter-number-prefix,
.elementor-counter .elementor-counter-number-suffix {
    color: #ffffff !important;            /* was #1C3657 navy (low contrast) */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important; /* gentle depth */
}

/* =============================================================================
   5. NAV MENU — hover underline + active states -> brand blue
   Legacy underline was green (#72C6A1).
   ========================================================================== */
#ekhaa-main-wrapper .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item::after {
    background-color: #316093 !important; /* was #72C6A1 */
}

/* =============================================================================
   6. LINKS / ACCENTS — brand blue with navy hover
   Scoped to the site wrapper so we don't disturb store/checkout chrome.
   ========================================================================== */
#ekhaa-main-wrapper a:not(.elementor-button):not(.elementor-item):hover {
    color: #1C3657 !important;
}

/* =============================================================================
   7. NAVBAR BAR — brand navy instead of old gray (#54595F)
   The main header nav bar is Elementor section .elementor-element-64d157e7
   (set to #54595F in inline_styles.css). Re-fill it with brand navy so the
   bar reads as identity, not a neutral gray. Underline already handled in §5.
   ========================================================================== */
.elementor-332 .elementor-element.elementor-element-64d157e7,
.elementor-332 .elementor-element.elementor-element-64d157e7:not(.elementor-motion-effects-element-type-background) {
    background-color: #1C3657 !important; /* navy bar, was #54595F */
}

/* =============================================================================
   8. DROPDOWN MENU (e.g. "فروعنا") — clean navy identity
   Legacy (custom.css §3): bg #919195 gray, hover bg #55595C, white text.
   New: navy panel, white text, brand-blue (#316093) hover, RTL preserved.
   We only recolor — positioning / sizing from custom.css is left untouched.
   ========================================================================== */
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu,
#ekhaa-main-wrapper .elementor-nav-menu--dropdown {
    background-color: #1C3657 !important;          /* navy panel, was #919195 */
    box-shadow: 0 10px 30px rgba(28, 54, 87, 0.25) !important;
}

/* Submenu item dividers -> subtle light hairline on navy */
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu .elementor-sub-item {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hover / focus / current item -> brand blue tint, clear & consistent */
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu .elementor-sub-item:focus,
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu li.current-menu-item > .elementor-sub-item,
#ekhaa-main-wrapper .elementor-nav-menu .sub-menu li.active > .elementor-sub-item {
    background-color: #316093 !important;          /* was #55595C */
    color: #ffffff !important;
}

/* =============================================================================
   9. BRANCH PAGES (فروعنا) — headings, accent bars, icons, links
   Source: contact_headquarter.css, scope .page-headquarter-content.
   Used by الإدارة العامة, فرع الرياض, إخاء المنطقة الغربية, الشرقية,
   المدينة المنورة, القصيم, حائل, عسير, شقراء, جازان (all share this template).
   ========================================================================== */
.page-headquarter-content .contact-title {
    color: #1C3657 !important;                     /* was #4996AA */
}
.page-headquarter-content .contact-title-line {
    background-color: #316093 !important;          /* accent bar, was #72C6A1 */
}
.page-headquarter-content .icon-wrapper svg {
    fill: #316093 !important;                       /* contact icons, was #72C6A1 */
}
.page-headquarter-content .detail-text,
.page-headquarter-content .detail-text a {
    color: #1C3657 !important;                       /* text dark, was #54595F */
}
.page-headquarter-content .detail-text a:hover {
    color: #316093 !important;                       /* link hover, was #4996AA */
}

/* =============================================================================
   10. CTA BUTTON "تبرعك أسهل" — primary blue, navy hover, white text
   It's an .elementor-button so §4 already colors it blue/navy; this block
   makes the intent explicit and guarantees the icon/text stay white. Size and
   position are inherited from the legacy CSS (unchanged -> mobile-safe).
   ========================================================================== */
#ekhaa-main-wrapper .elementor-button,
#ekhaa-main-wrapper .elementor-widget-button .elementor-button {
    background-color: #316093 !important;          /* primary blue */
    color: #ffffff !important;
}
#ekhaa-main-wrapper .elementor-button:hover,
#ekhaa-main-wrapper .elementor-button:focus {
    background-color: #1C3657 !important;          /* navy hover */
    color: #ffffff !important;
}
/* Keep button SVG icon/text white in both states */
#ekhaa-main-wrapper .elementor-button .elementor-button-icon svg,
#ekhaa-main-wrapper .elementor-button .elementor-button-icon i,
#ekhaa-main-wrapper .elementor-button .elementor-button-text {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* =============================================================================
   11. RESIDUAL OLD-TEAL ACCENT BARS (#00BCB4) used in news/blog body markup
   Several body templates draw a 4px teal title bar (border-*-color:#00BCB4).
   Map those to brand blue. Scoped to known title containers to stay safe.
   ========================================================================== */
.news-shared-body .ekhaa-title-container,
.ekhaa-title-container[style*="00BCB4"],
.ekhaa-title-container {
    border-right-color: #316093 !important;        /* was #00BCB4 */
    border-color: #316093 !important;
}

/* =============================================================================
   12. DOCUMENT/LISTING CARDS — newsletter, annual reports, regulations,
       provisions. They share .regulations-card / .card-title / .btn-download /
       (top accent border + teal title + teal download button). Recolor accents
       to brand blue; the card body/white background stays as-is.
   ========================================================================== */
.regulations-card {
    border-top-color: #316093 !important;          /* top accent, was #72C6A1 */
}
.regulations-card:hover {
    border-top-color: #1C3657 !important;          /* navy on hover, was #4996AA */
}
.card-title,
.regulations-card .card-title {
    color: #1C3657 !important;                       /* was #4996AA */
}
.btn-download,
.regulations-card .btn-download {
    background-color: #316093 !important;          /* was #4996AA */
    color: #ffffff !important;
}
.btn-download:hover,
.regulations-card .btn-download:hover {
    background-color: #1C3657 !important;          /* navy hover, was #72C6A1 */
    color: #ffffff !important;
}

/* =============================================================================
   13. PAGE-SPECIFIC BANNERS, HEADINGS, FORMS, TABS
   Several pages ship their own class families (not the shared ones above).
   Remap each visible old-teal/green element to the new palette.
   ========================================================================== */

/* --- Page hero/banner bands (teal #4996AA -> brand blue) --- */
.cr-banner,                                /* careers.css */
.es-banner,                                /* employees_services.css (also §2d) */
.page-photo-gallery .hero-section,         /* photo_gallery.css */
.ekhaa-category-banner .banner-overlay {   /* category_page.css */
    background-color: #316093 !important;   /* was #4996AA */
}

/* --- Section headings / titles (teal -> navy) --- */
.cr-section-header .main-title,            /* careers */
.es-section-header .main-title,            /* employees_services */
.page-contact .contact-title {            /* contact */
    color: #1C3657 !important;             /* was #4996AA */
}

/* --- Contact accent bars / dividers (green -> brand blue) --- */
.page-contact .contact-title-line {
    background-color: #316093 !important;  /* was #72C6A1 */
}
.page-contact .title-container {
    border-bottom-color: #316093 !important;
    border-right-color: #316093 !important; /* was #72C6A1 */
}

/* --- Form controls: focus ring (teal -> brand blue) --- */
.cr-form-control:focus,
.es-form-control:focus,
.ekhaa-search-box input:focus {
    border-color: #316093 !important;      /* was #4996AA */
}

/* --- Submit buttons (teal bg, green hover -> blue / navy) --- */
.cr-submit-btn,
.es-submit-btn {
    background-color: #316093 !important;  /* was #4996AA */
    color: #ffffff !important;
}
.cr-submit-btn:hover,
.es-submit-btn:hover {
    background-color: #1C3657 !important;  /* was #72C6A1 */
    color: #ffffff !important;
}

/* --- Category page: tabs, breadcrumb, separators --- */
.ekhaa-tab-btn:hover,
.ekhaa-tab-btn.active {
    background: #316093 !important;        /* was #4996AA */
    border-color: #316093 !important;
}
.ekhaa-custom-breadcrumb .active {
    color: #316093 !important;             /* was #4996AA */
}

/* =============================================================================
   BRAND ASSETS — OFFICIAL EKHAA LOGO (Phase 3, DONE)
   -----------------------------------------------------------------------------
   Source SVGs (official, vector) live in static/src/img/brand/:
     ekhaa-logo-horizontal.svg        navy #1B3657, horizontal lockup
     ekhaa-logo-horizontal-white.svg  white, horizontal lockup (for dark bg)
     ekhaa-logo-mark.svg              navy square mark (for favicon)
   PNGs were rendered from these and written IN PLACE over the legacy paths
   (old files backed up under static/src/img/brand/_old_backup/):

   HEADER LOGO (navy, horizontal — sits on the white top strip)
     /ekhaa_website/static/src/img/2021/11/cropped-Logo-3.png (+ srcset 170..2048)
     Rendered in: home_body.html, board_body.html, council_members_body.html,
     about_body.html. <img> width/height + srcset/sizes updated to the new
     ~4.15:1 aspect so the logo is NOT distorted.

   FOOTER LOGO (white, horizontal — sits on the navy footer)
     /ekhaa_website/static/src/img/2021/11/white-logo.png (+ -300x106, -768x271)
     The provided white SVG is suitable for the dark footer, so it WAS updated.

   STORE/DONATION LOGO (navy)
     /ekhaa_website/static/src/img/store/logo.png  (donation_templates.xml, h=70)

   FAVICON + OG/social image (navy square mark)
     /ekhaa_website/static/src/img/2021/11/cropped-logo-social-32x32.png
     /ekhaa_website/static/src/img/2021/11/cropped-logo-social-192x192.png
     /ekhaa_website/static/src/img/2021/11/cropped-logo-social-180x180.png
     Linked + used for og:image/twitter:image in every controllers/main.py <head>.

   TO RE-SKIN later: re-render the brand SVGs to these PNG paths (sizes above);
   no HTML/Python change needed since paths are reused. The fine "EKHAA
   FOUNDATION" sub-text is hard to read at 32px — if a dedicated emblem-only
   favicon is provided, drop it at the cropped-logo-social-*.png paths.
   ========================================================================== */