/* ==========================================================================
   CRS Egypt — job detail page (job.php)
   --------------------------------------------------------------------------
   The page chrome only: masthead, tab bar, "at a glance" facts, the sticky
   summary card and the multi-step scaffolding around the application form.
   The form controls themselves live in css/crs-form.css; the consent dialog,
   share buttons, language matrix and select2 skin live in css/crs-job-ui.css.

   RULES THIS FILE OBEYS
     · No style="..." anywhere in the markup — style-src-attr is 'none'.
     · No icon font. Every glyph is inline SVG or a data: URI.
     · No new markup hook that JavaScript depends on for submission. Field
       names, field ids, section ids and button ids are exactly as they were.

   Colours are CRS brand (25MK-1421830); contrast is noted where it matters.
   ========================================================================== */

:root {
    --j-blue:   #00468b;   /* CRS Blue      9.34:1 on white */
    --j-bold:   #0068d2;   /* Bold Blue     5.37:1 */
    --j-red:    #da291c;   /* Emergency Red 4.87:1 */
    --j-green:  #5e7f24;   /* Bold Green    4.63:1 */
    --j-amber:  #a8460a;

    --j-ink:    #14161a;
    --j-ink-2:  #4a5260;
    --j-ink-3:  #6b7280;

    --j-line:   #e3e7ec;
    --j-line-2: #cfd4dc;
    --j-bg:     #f4f6f9;
    --j-panel:  #ffffff;
    --j-wash:   #eef4fb;

    --j-r:      12px;
    --j-lift:   0 1px 2px rgba(20,22,26,.05);
    --j-lift-2: 0 18px 44px -22px rgba(20,22,26,.28);
}

/* ==========================================================================
   1. Masthead
   ==========================================================================
   The hero used to be a stock banner reading "CRS Egypt Careers" — the same
   on every posting, so the one thing a visitor arrived for (which job is
   this, when does it close, where do I apply) started below the fold. It now
   carries the posting itself.

   The outer .hero-wrap and #particle-canvas elements are kept because
   js/particles.js binds to them; their shared styling is in css/crs-site.css,
   which also puts the navigation bar above rather than on top of this.
   ========================================================================== */
.crs-job-hero-bg,
.hero-wrap.crs-job-hero-bg {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    background: linear-gradient(180deg, #06305f 0%, #00468b 62%, #01508f 100%);
}
.crs-job-hero-bg .overlay {
    position: absolute;
    inset: 0;
    background: none;
    opacity: .5;
    pointer-events: none;
}

.crs-masthead {
    position: relative;
    z-index: 2;
    padding: 44px 0 40px;
    color: #fff;
}

.crs-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    font-size: .8125rem;
    color: rgba(255,255,255,.85);
}
.crs-crumbs a { color: rgba(255,255,255,.92); text-decoration: none; }
.crs-masthead-cta a.btn,
.crs-aside-card a.btn { text-decoration: none; }
.crs-masthead-cta a.btn:hover,
.crs-aside-card a.btn:hover { text-decoration: none; }
.crs-crumbs a:hover { color: #fff; text-decoration: underline; }
.crs-crumbs span[aria-hidden] { opacity: .55; }

.crs-masthead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
}

.crs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 5px 11px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #e4efff;                    /* 9.8:1 on the panel behind it */
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
}

.crs-masthead-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: pretty;
}

.crs-masthead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.crs-masthead-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9375rem;
    color: rgba(255,255,255,.92);      /* 12.1:1 on the darkest stop */
}
.crs-masthead-meta svg { width: 17px; height: 17px; flex: none; opacity: .9; }

.crs-masthead-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 15rem;
}

/* Deadline. The translucent white panel sat at about 2:1 against the blue
   behind it, so the date underneath it was barely legible. Solid ink now, and
   amber once inside the last week - measured on its own background, not on
   the gradient. */
.crs-deadline-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: #0b2545;                    /* 12.4:1 on #ffffff */
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 10px;
}
.crs-deadline-pill svg { width: 18px; height: 18px; flex: none; color: #00468b; }
.crs-deadline-pill b { display: block; font-size: .9375rem; font-weight: 700; color: #00468b; }

/* #7a3200 on #ffeacc is 6.1:1; the bold line is #8a3a00 at 5.4:1. */
.crs-deadline-pill.is-soon {
    color: #5c3000;
    background: #ffeacc;
    border-color: #ffd79a;
}
.crs-deadline-pill.is-soon svg,
.crs-deadline-pill.is-soon b { color: #8a3a00; }

/* Closed: the same treatment in red rather than a dimmed grey nobody reads. */
.crs-deadline-pill.is-closed {
    color: #5a1410;
    background: #fde3e1;
    border-color: #f5b8b3;
}
.crs-deadline-pill.is-closed svg,
.crs-deadline-pill.is-closed b { color: #a81c14; }

/* On the masthead the primary action inverts: white panel, blue label.
     · rest   #00468b on #ffffff   9.34:1
     · hover  #012f60 on #dce9fa   9.9:1   - darker label AND darker panel, so
       the pair moves together instead of fading toward each other. */
.crs-masthead-cta .btn-invert,
.crs-masthead-cta a.btn-invert {
    color: var(--j-blue) !important;
    background: #ffffff;
    border: 2px solid #ffffff;
}
.crs-masthead-cta .btn-invert:hover,
.crs-masthead-cta a.btn-invert:hover,
.crs-masthead-cta a.btn-invert:focus {
    color: #012f60 !important;
    background: #dce9fa;
    border-color: #dce9fa;
    text-decoration: none;
}

/* The secondary action needs a visible edge of its own - without one it read
   as a caption rather than a button.
     · border #ffffff on the blue   ~8:1, far past the 3:1 a control needs
     · hover   #00468b on #ffffff   9.34:1 */
.crs-masthead-cta .btn-ghost,
.crs-masthead-cta a.btn-ghost {
    color: #ffffff !important;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.85);
}
.crs-masthead-cta .btn-ghost:hover,
.crs-masthead-cta a.btn-ghost:hover,
.crs-masthead-cta a.btn-ghost:focus {
    color: var(--j-blue) !important;
    background: #ffffff;
    border-color: #ffffff;
    text-decoration: none;
}
.crs-masthead-cta .btn:focus-visible {
    outline: 3px solid #a8ccf7;
    outline-offset: 3px;
}

@media (max-width: 62rem) {
    .crs-masthead { padding: 32px 0 30px; }
    .crs-masthead-grid { grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .crs-masthead-cta { min-width: 0; }
}

/* ==========================================================================
   2. Section canvas
   ========================================================================== */
.ftco-section.bg-light { background: var(--j-bg); }
.crs-job-section { padding: 44px 0 64px; }

.crs-panel {
    padding: 26px 30px;
    margin: 0 0 20px;
    background: var(--j-panel);
    border: 1px solid var(--j-line);
    border-radius: var(--j-r);
    box-shadow: var(--j-lift);
}
.crs-panel-title {
    margin: 0 0 4px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--j-ink);
}
.crs-panel-note {
    margin: 0 0 20px;
    font-size: .875rem;
    color: var(--j-ink-3);
}

/* ==========================================================================
   3. Tabs — Details / Apply
   ==========================================================================
   Bootstrap's .nav-tabs is a thin underline that reads as decoration. The
   same two tabs are now a segmented control, which is unmistakably a choice.
   Markup, ids and data-toggle are unchanged.

   Colour is forced. The theme's own #carTab rules paint the active tab's text
   white, which on a white pill is invisible - the Apply tab rendered as an
   empty box. The active tab is CRS Blue with white text now, so it is legible
   whichever rule wins, and the resting bar is white rather than the grey that
   left the inactive label at 3:1.
   ========================================================================== */
.tabbing .nav-tabs,
.tabbing-box .nav-tabs,
#carTab.nav-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    list-style: none;
    background: var(--j-panel);
    border: 1px solid var(--j-line);
    border-radius: 11px;
    box-shadow: var(--j-lift);
}
.tabbing .nav-tabs .nav-item { margin: 0; }

#carTab.nav-tabs .nav-link,
.tabbing .nav-tabs .nav-link {
    display: block;
    padding: 10px 28px;
    font-size: .9375rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    /* Stated explicitly rather than inherited from Bootstrap's a{} reset —
       vendor CSS not being served is exactly how the date pickers and the
       share icons broke on this site before. */
    text-decoration: none;
    color: var(--j-ink-2) !important;   /* 8.2:1 on white */
    background: transparent;
    border: 0;
    border-radius: 8px;
    opacity: 1;
    transition: color .12s ease, background-color .12s ease;
}
#carTab.nav-tabs .nav-link:hover,
.tabbing .nav-tabs .nav-link:hover,
.tabbing .nav-tabs .nav-link:focus {
    color: var(--j-ink) !important;
    background: #eef1f5;
    text-decoration: none;
}
/* White on CRS Blue — 9.34:1. */
#carTab.nav-tabs .nav-link.active,
#carTab.nav-tabs .nav-link.active.show,
#carTab.nav-tabs .nav-link.active:hover,
.tabbing .nav-tabs .nav-link.active,
.tabbing .nav-tabs .nav-link.active.show,
.tabbing .nav-tabs .nav-link.active:hover {
    color: #ffffff !important;
    background: var(--j-blue);
    box-shadow: none;
    text-decoration: none;
}
.tabbing .nav-tabs .nav-link:focus-visible {
    outline: 3px solid rgba(0,104,210,.45);
    outline-offset: 2px;
}
.tabbing .nav-tabs .nav-link:focus-visible {
    outline: 3px solid rgba(0,104,210,.45);
    outline-offset: 2px;
}

/* ==========================================================================
   4. At a glance
   ==========================================================================
   Ten facts were a bulleted list of "Label: value" lines, every one the same
   weight, so nothing could be found at a glance. A two-column definition grid
   puts the label above the value and lets the eye jump straight to the value.
   ========================================================================== */
.crs-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--j-line);
    border: 1px solid var(--j-line);
    border-radius: 10px;
    overflow: hidden;
}
.crs-fact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 17px;
    background: var(--j-panel);
}
.crs-fact dt {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--j-ink-3);
}
.crs-fact dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--j-ink);
    overflow-wrap: anywhere;
}
.crs-fact-wide { grid-column: 1 / -1; }

/* The deadline callout under the facts. */
/* A deadline is information, not an alarm. The theme paints this element red
   with white text; every value here is stated so it cannot.
     · #5c3000 on #fff6ec   9.6:1
     · #8a3a00 icon         5.6:1 */
.crs-callout {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 17px !important;
    margin: 20px 0 0 !important;
    font-size: .9375rem !important;
    font-style: normal !important;
    line-height: 1.55 !important;
    color: #5c3000 !important;
    background: #fff6ec !important;
    border: 1px solid #f0d3ae !important;
    border-left: 3px solid #d98324 !important;
    border-radius: 10px !important;
    quotes: none;
}
.crs-callout::before, .crs-callout::after { content: none !important; }
.crs-callout svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: #8a3a00; }
.crs-callout p { margin: 0; color: inherit !important; }
.crs-callout strong { font-weight: 700; color: inherit !important; }

/* ==========================================================================
   5. Sticky summary card (right column)
   ========================================================================== */
.crs-aside { position: sticky; top: 24px; }

.crs-aside-card {
    padding: 22px;
    margin: 0 0 18px;
    background: var(--j-panel);
    border: 1px solid var(--j-line);
    border-radius: var(--j-r);
    box-shadow: var(--j-lift);
}
.crs-aside-label {
    margin: 0 0 14px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--j-ink-3);
}

.crs-countdown {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 4px;
}
.crs-countdown b {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--j-blue);
}
.crs-countdown span { font-size: .9375rem; font-weight: 600; color: var(--j-ink-2); }
.crs-countdown.is-soon b { color: var(--j-amber); }
.crs-countdown.is-over b { color: var(--j-red); font-size: 1.5rem; }
.crs-aside-date { margin: 0 0 18px; font-size: .8125rem; color: var(--j-ink-3); }

.crs-aside-list { margin: 0; padding: 0; }
.crs-aside-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--j-line);
}
.crs-aside-list dt { font-size: .8125rem; color: var(--j-ink-3); }
.crs-aside-list dd {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--j-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.crs-aside-card .btn { width: 100%; }
.crs-aside-card .btn + .btn { margin-top: 9px; }

@media (max-width: 62rem) {
    .crs-aside { position: static; }
}

/* ==========================================================================
   6. The application form — steps
   ==========================================================================
   The form reveals itself in four stages, driven by the existing Continue
   buttons (#EducationSecBttn, #ExperienceSecBttn, #CRSExperienceSecBttn) and
   the existing show*() functions. Nothing here changes that mechanism; it
   adds the missing sense of place — which stage you are in, how many remain.
   ========================================================================== */
.crs-progress {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.crs-progress-step {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.crs-progress-step + .crs-progress-step::before {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    min-width: 12px;
    margin: 0 10px;
    background: var(--j-line-2);
    border-radius: 2px;
}
.crs-progress-step:last-child { flex: 0 0 auto; }

.crs-progress-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--j-ink-3);
    background: var(--j-panel);
    border: 2px solid var(--j-line-2);
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.crs-progress-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--j-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crs-progress-step.is-current .crs-progress-dot {
    color: #fff;
    background: var(--j-blue);
    border-color: var(--j-blue);
}
.crs-progress-step.is-current .crs-progress-label { color: var(--j-ink); }

.crs-progress-step.is-done .crs-progress-dot {
    color: #fff;
    background: var(--j-green);
    border-color: var(--j-green);
    font-size: 0;
}
.crs-progress-step.is-done .crs-progress-dot::after {
    content: "";
    width: 11px; height: 6px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: translateY(-1px) rotate(-45deg);
}
.crs-progress-step.is-done .crs-progress-label { color: var(--j-ink-2); }
.crs-progress-step.is-done + .crs-progress-step::before { background: var(--j-green); }

@media (max-width: 48rem) {
    .crs-progress-label { display: none; }
    .crs-progress-step + .crs-progress-step::before { margin: 0 6px; }
}

/* --- Step heading --------------------------------------------------------- */
.crs-step { margin: 0 0 8px; }

.crs-step-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 0 0 16px;
    margin: 26px 0 20px;
    border-bottom: 1px solid var(--j-line);
}
.crs-step:first-child .crs-step-head { margin-top: 0; }

/* Stages 2-4 appear with their fields, not before them. Removed by
   js/crs-form-ux.js when the matching Continue button is pressed. */
.crs-step-head--pending { display: none; }

.crs-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px; height: 30px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--j-blue);
    background: var(--j-wash);
    border-radius: 50%;
}
.crs-step-title {
    margin: 0 0 3px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--j-ink);
}
.crs-step-note {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--j-ink-3);
}

/* The Continue buttons end a stage, so they get room and a hairline above. */
#EducationSecBttn,
#ExperienceSecBttn,
#CRSExperienceSecBttn {
    margin-top: 10px;
}

/* ==========================================================================
   7. Consent block at the end of the form
   ========================================================================== */
.crs-consent-heading {
    display: block;
    margin: 0 0 10px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--j-blue);
}

/* ==========================================================================
   8. Share row
   ========================================================================== */
.crs-share-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}
.crs-share-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--j-ink);
}
.crs-share-head p { margin: 0; font-size: .8125rem; color: var(--j-ink-3); }

/* ==========================================================================
   9. Small screens
   ========================================================================== */
@media (max-width: 48rem) {
    .crs-job-section { padding: 28px 0 44px; }
    .crs-panel { padding: 20px 18px; }
    .tabbing .nav-tabs { display: flex; width: 100%; }
    .tabbing .nav-tabs .nav-item { flex: 1; }
    .tabbing .nav-tabs .nav-link { text-align: center; padding: 10px 12px; }
    .crs-masthead-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Dark theme — token swap only
   ========================================================================== */
[data-theme="dark"] {
    --j-blue:   #4d9bff;
    --j-bold:   #7cb6ff;
    --j-red:    #ff7c70;
    --j-green:  #8fd14f;
    --j-amber:  #f5a45c;
    --j-ink:    #eceef1;
    --j-ink-2:  #a8aeb8;
    --j-ink-3:  #878e99;
    --j-line:   rgba(255,255,255,.09);
    --j-line-2: rgba(255,255,255,.20);
    --j-bg:     #0c0e12;
    --j-panel:  #151920;
    --j-wash:   rgba(77,155,255,.14);
    --j-lift:   0 1px 2px rgba(0,0,0,.5);
    --j-lift-2: 0 20px 48px -18px rgba(0,0,0,.8);
}
[data-theme="dark"] .ftco-section.bg-light { background: var(--j-bg); }
[data-theme="dark"] .crs-panel { background: var(--j-panel); }
[data-theme="dark"] .crs-facts { background: var(--j-line-2); border-color: var(--j-line); }
[data-theme="dark"] .crs-fact { background: var(--j-panel); }
[data-theme="dark"] .crs-aside-card { background: var(--j-panel); }
[data-theme="dark"] .crs-step-num { color: var(--j-blue); background: var(--j-wash); }

/* The tab bar and the deadline note are stated in absolute colours in the
   light theme, so they have to be restated rather than re-derived. */
[data-theme="dark"] .tabbing .nav-tabs,
[data-theme="dark"] #carTab.nav-tabs { background: var(--j-panel); border-color: var(--j-line); }
[data-theme="dark"] #carTab.nav-tabs .nav-link,
[data-theme="dark"] .tabbing .nav-tabs .nav-link { color: var(--j-ink-2) !important; }
[data-theme="dark"] .tabbing .nav-tabs .nav-link:hover { color: var(--j-ink) !important; background: rgba(255,255,255,.07); }
[data-theme="dark"] #carTab.nav-tabs .nav-link.active,
[data-theme="dark"] .tabbing .nav-tabs .nav-link.active,
[data-theme="dark"] .tabbing .nav-tabs .nav-link.active.show {
    color: #0e1116 !important;
    background: var(--j-bold);
}

/* #ffd9a8 on #3a2506 is 9.1:1. */
[data-theme="dark"] .crs-callout {
    color: #ffd9a8 !important;
    background: #3a2506 !important;
    border-color: #6b4a12 !important;
    border-left-color: #f5a45c !important;
}
[data-theme="dark"] .crs-callout svg { color: #f5a45c; }

[data-theme="dark"] .crs-countdown b { color: var(--j-bold); }
[data-theme="dark"] .crs-countdown.is-soon b { color: #f7b978; }
[data-theme="dark"] .crs-countdown.is-over b { color: #ff9a90; }

/* The masthead pills invert: on a dark hero a white panel is the loud thing. */
[data-theme="dark"] .crs-deadline-pill { color: #dbe4ee; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
[data-theme="dark"] .crs-deadline-pill svg,
[data-theme="dark"] .crs-deadline-pill b { color: #a8ccf7; }
[data-theme="dark"] .crs-deadline-pill.is-soon { color: #ffd9a8; background: rgba(245,164,92,.16); border-color: rgba(245,164,92,.36); }
[data-theme="dark"] .crs-deadline-pill.is-soon svg,
[data-theme="dark"] .crs-deadline-pill.is-soon b { color: #f7b978; }
[data-theme="dark"] .crs-deadline-pill.is-closed { color: #ffd9d5; background: rgba(255,124,112,.16); border-color: rgba(255,124,112,.36); }
[data-theme="dark"] .crs-deadline-pill.is-closed svg,
[data-theme="dark"] .crs-deadline-pill.is-closed b { color: #ff9a90; }

[data-theme="dark"] .crs-masthead-cta .btn-invert,
[data-theme="dark"] .crs-masthead-cta a.btn-invert {
    color: #0e1116 !important;
    background: #a8ccf7;
    border-color: #a8ccf7;
}
[data-theme="dark"] .crs-masthead-cta a.btn-invert:hover {
    color: #0e1116 !important;
    background: #cde0f9;
    border-color: #cde0f9;
}
[data-theme="dark"] .crs-masthead-cta a.btn-ghost:hover {
    color: #0e1116 !important;
    background: #dbe4ee;
    border-color: #dbe4ee;
}

[data-theme="dark"] .doc,
[data-theme="dark"] .crs-fact-wide { background: inherit; }