/*
 * Contrast corrections layered on top of the original theme.
 *
 * Scope is deliberately narrow: only surfaces where text is *visible at rest*
 * and measured below the 4.5:1 WCAG AA threshold. The service tiles are NOT
 * touched — their labels are hover-revealed, and the theme choreographs which
 * tiles are green vs white differently per breakpoint.
 *
 * #2a7d5c is the brand green one step deeper (~5.0:1 with white).
 */

/* Main navigation: links were #eee on #359c74 = 2.94:1. */
.navbar.navbar-inverse.navbar-fixed-top,
#firstNavBar .main-menu-long {
    background-color: #2a7d5c !important;
}

#firstNavBar .main-menu-long a,
#firstNavBar .main-menu-long a span {
    color: #fff !important;
}

/* News hero caption sits over a photo, so it goes a shade deeper still. */
.pnlImgcentered {
    background-color: #22664a !important;
}

/* News list date chip (14px white on green), on the homepage news panel.
   #pnlDateListNews is the date chip (white text) in both languages;
   #pnlTopicListNews is the headline (black text) in both languages. The
   theme swaps which one carries .pull-left vs .pull-right per direction
   (LTR mirroring: AR renders the date chip as .pull-left, EN renders it as
   .pull-right) — a selector keyed on .pull-left only fixed AR and, in EN,
   painted the green fix onto the black-text headline instead while leaving
   the actual EN date chip unfixed at the original #359c74 (2.94:1). The
   stable ID is direction-agnostic and correct in both languages. */
#pnlDateListNews.divlstListNews {
    background-color: #2a7d5c !important;
}

/* Video / social link panels carry white labels at 22px and under. */
.videowrapper,
.facebk {
    background-color: #2a7d5c !important;
}

/* A touch more weight so 14px Arabic holds its shape on the darker fill. */
.pnlImgcentered .topictxt {
    font-weight: 600 !important;
}

/*
 * /Services (and /en/Services) detail bands: each section's background is an
 * admin-configurable inline style (ColorBgService, DB-driven), overlaid with
 * fixed white text by the template. Four of the nine bands measured below
 * 4.5:1 (white text) at rest; the other five already clear it and are left
 * untouched. Same "one shade deeper" technique as the nav fix above, snapshot
 * against the colours live on the site today.
 */
#myDiv-bank_services { background-color: #468264 !important; } /* was #59a47e, 2.98:1 -> #468264, 4.55:1 */
#myDiv-ajel           { background-color: #d5403a !important; } /* was #dc423c, 4.30:1 -> #d5403a, 4.53:1 */
#myDiv-twajod         { background-color: #727873 !important; } /* was #858b86, 3.48:1 -> #727873, 4.53:1 */
#myDiv-pay_bills      { background-color: #8f732e !important; } /* was #c6a040, 2.47:1 -> #8f732e, 4.51:1 */

/*
 * Keyboard focus was invisible sitewide: the theme sets outline:none on
 * links/buttons/inputs with no replacement indicator (measured on nav links,
 * carousel controls, and the login form). :focus-visible only fires for
 * keyboard/programmatic focus, so mouse-click appearance is untouched.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2a7d5c !important;
    outline-offset: 2px !important;
}

/*
 * Mobile hamburger button measured 28x28 (WCAG 2.5.8 minimum is 44x44).
 * Expand the hit area only, via an invisible pseudo-element, so the visual
 * icon size is unchanged.
 */
.navbar-toggle-container {
    position: relative;
}
.navbar-toggle-container .hamburger::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/*
 * .btn.btn-default is the theme's global green submit button (measured on
 * /Client/Login and /CustomerSurveys/Index: white text on the un-deepened
 * brand green #359c74 at 12px, 3.4:1). Same rule renders it everywhere else
 * it's used, so this targets the class itself rather than duplicating a
 * per-page fix. Same "one shade deeper" treatment as the nav (#2a7d5c,
 * ~5.0:1 with white).
 */
.btn.btn-default {
    background-color: #2a7d5c !important;
    border-color: #2a7d5c !important;
}

/*
 * Same button, second defect: measured 91x34 (Login) / 90x34 (survey save) —
 * under the 44x44 minimum tap target. Same invisible-hitbox technique as the
 * hamburger above, so the visible button is not resized.
 */
.btn.btn-default {
    position: relative;
}
.btn.btn-default::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/*
 * Jobs page empty state: the hint line and CV call-to-action added under
 * "no vacancies available", so the open-application route is understandable
 * instead of reading as a contradiction. Uses the panel's existing white-on-
 * green treatment; the CTA inherits the deepened .btn.btn-default above.
 */
.pnlNotAvailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 22px;
}

.pnlNotAvailable .panelItemHead {
    margin: 0 0 10px;
}

.pnlNotAvailable .pnlNotAvailableHint {
    color: #fff;
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 18px;
    max-width: 46ch;
}

.pnlNotAvailable .pnlNotAvailableCta {
    margin: 0;
    display: inline-block;
}

/*
 * Jobs listing panels: .panelGreen renders the raw brand green (#359c74)
 * behind white .panelItemHead text — measured 3.41:1 on the "no vacancies"
 * empty state (live on /Jobs/Index). Same class/markup is reused for each
 * active job card (.adsPanelclass .panelGreen in Views/Jobs/Index.cshtml)
 * with an identical white-on-green heading, so it carries the same defect
 * whenever a vacancy is posted, even though no listings are live to measure
 * today. Scoped narrowly (not a bare `.panelGreen` rule) so the unrelated
 * `.panelGreen.hasad_panel` cards on /Hasad, which override the background
 * to transparent for a graphic, are left untouched.
 */
.panelGreen.pnlNotAvailable,
.adsPanelclass .panelGreen {
    background-color: #2a7d5c !important;
}

/*
 * .colorGreen: brand-green inline text emphasis (company name / a count),
 * always set on a white background. Measured 3.41:1 on /CustomerSurveys;
 * same class/usage on /Home/Privacy, /Document/AccountAjel and the survey
 * partial. Same deepened brand green as the rest of this file.
 */
.colorGreen {
    color: #2a7d5c !important;
}

/*
 * .backHeader: the red section-label chip reused across /Home/About,
 * /Jobs/JobsDetails and /Apps/Documents — fixed theme color, white text on
 * #f4030a measured 4.32:1 (just under 4.5:1). Darkened 5% to #e8030a
 * (4.72:1); at that distance the two reds are visually indistinguishable.
 */
.backHeader {
    background-color: #e8030a !important;
}

/*
 * Branches/Agents filter row (mobile): the state/city "dropbtn" pickers and
 * the DataTables-generated search input measured 290x34 — under the 44x44
 * minimum tap target. The search box is a real <input> (no ::before/::after
 * support), so it's grown directly; dropbtn and the DataTables pagination
 * arrows keep their visible size and get an invisible centered hit box,
 * the same technique as the hamburger fix above.
 */
.searchInput {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

.dropbtn,
.fltrcolomn-pageing a {
    position: relative;
}
.dropbtn::before,
.fltrcolomn-pageing a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/*
 * Jobs page empty state, measured at 390px: the panel keeps the theme's lighter
 * #359c74 while its text is white at 14-15px -> 3.41:1. Deepen just this panel
 * (same one-shade-deeper treatment used for the nav) and give its two buttons a
 * 44px touch height, which they missed at 34px.
 */
.pnlNotAvailable {
    background-color: #2a7d5c !important;
}

.pnlNotAvailable .pnlNotAvailableCta,
.blockHeaderBreanches .btn.btn-default {
    height: auto !important;
    min-height: 44px !important;
    line-height: 22px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* The panel itself is now #2a7d5c, and .btn.btn-default paints buttons the same
   colour — so the CTA sitting inside the panel became invisible. Invert it:
   white surface, deep-green label (6.8:1), which also reads as the primary
   action on that panel. */
.pnlNotAvailable .pnlNotAvailableCta {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #22664a !important;
    font-weight: 600 !important;
}

/*
 * Page header at narrow widths: the row is icon + title + action button, all
 * inline, which squeezed "الوظائف المتاحة" into a 107px column out of 360 and
 * broke it across two lines. Below 768px let the title own its line and drop
 * the action beneath it; the desktop arrangement is untouched.
 */
/* Up to the theme's own 991px breakpoint — which is where the layout switches
   and, critically, where Chrome's "Desktop site" mode lands (it forces a 980px
   layout viewport). At 980px the inline header squeezed "الوظائف المتاحة" onto
   two lines and the second line spilled out of the fixed-height bar and under
   the panel below. */
@media (max-width: 991px) {
    /* The theme fixes .headerBA at a single-row height; once the title wraps or
       the action button moves onto its own line the box must grow with it. */
    .headerBA {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 14px;
        overflow: visible;
    }
    .headerBA .header_page {
        flex: 1 1 auto;
        white-space: normal;
        font-size: 20px;
    }
    .headerBA .blockHeaderBreanches {
        flex: 0 0 100%;
        height: auto !important;
        float: none !important;
        padding-top: 0 !important;
        text-align: center;
    }
}