/* ==========================================================================
   CRS Egypt Careers — site chrome
   --------------------------------------------------------------------------
   Shared by every page: the navigation bar and the job listing on index.php.
   Loaded from include/header.php, before the page-specific stylesheets.

   WHY THE NAVIGATION NEEDED REDOING
   The theme's .ftco_navbar is positioned absolutely over the top of the hero,
   which worked when the hero was a stock banner with nothing in its top-left
   corner. The job masthead puts a breadcrumb there, so the CRS logo sat on top
   of "All openings / Finance Assistant" — two pieces of text in the same
   place. The bar is now a real bar: solid, in the document flow, sticky.

   No icon font, no style attribute, no third-party origin.
   ========================================================================== */

:root {
    --s-blue:   #00468b;
    --s-bold:   #0068d2;
    --s-navy:   #06305f;
    --s-ink:    #14161a;
    --s-ink-2:  #4a5260;
    --s-ink-3:  #6b7280;
    --s-line:   #e3e7ec;
    --s-line-2: #cfd4dc;
    --s-bg:     #f4f6f9;
    --s-panel:  #ffffff;
    --s-amber:  #a8460a;
    --s-green:  #5e7f24;
    --s-r:      12px;
    --s-lift:   0 1px 2px rgba(20,22,26,.05);
    --s-lift-2: 0 18px 44px -22px rgba(20,22,26,.28);
}

/* ==========================================================================
   1. Navigation
   ==========================================================================
   Own classes throughout (.crs-nav-*), not the theme's.

   The theme's .ftco_navbar / .ftco-navbar-light rules paint the bar a
   translucent grey and colour the active link teal with a teal underline -
   neither of which belongs to CRS - and they were winning over anything
   written at ordinary specificity. Rather than fight that with !important on
   every declaration, the markup no longer carries those two classes. The
   #ftco-navbar and #ftco-nav ids stay, so Bootstrap's collapse still works.
   ========================================================================== */
.crs-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--s-navy);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
    transform: none;
    opacity: 1;
}

.crs-nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    min-height: 72px;
    margin: 0 auto;
    padding: 12px 24px;
}

.crs-nav-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    color: #fff;
    text-decoration: none;
}
.crs-nav-brand:hover,
.crs-nav-brand:focus { color: #fff; text-decoration: none; }
.crs-nav-brand img {
    display: block;
    height: 42px;
    width: auto;
    /* images/crs-logo.png is the dark-blue lockup, which is invisible on the
       navy bar. Knocked to solid white here rather than shipping a second
       asset - the mark is a single flat colour, so nothing is lost. */
    filter: brightness(0) invert(1);
}

/* The logo alone says who, not what. One hairline and two words say both,
   and they disappear on a phone where the space is worth more. */
.crs-nav-wordmark {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.22);
}
.crs-nav-wordmark b {
    font-size: .9375rem;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}
.crs-nav-wordmark span {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a8ccf7;                    /* 7.4:1 on --s-navy */
}

.crs-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.crs-nav-links li { margin: 0; list-style: none; }

.crs-nav-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255,255,255,.82);      /* 10.2:1 on --s-navy */
    background: transparent;
    border-radius: 999px;
    transition: color .12s ease, background-color .12s ease;
}
.crs-nav-link:hover,
.crs-nav-link:focus {
    color: #fff;
    background: rgba(255,255,255,.12);
    text-decoration: none;
}
/* The current page is filled, not underlined in a second colour. */
.crs-nav-link.is-current,
.crs-nav-link.is-current:hover {
    color: var(--s-navy);              /* 12.8:1 on white */
    background: #fff;
    font-weight: 700;
}
.crs-nav-link:focus-visible {
    outline: 3px solid rgba(168,204,247,.8);
    outline-offset: 2px;
}

.crs-nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 0 16px;
    min-height: 42px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    cursor: pointer;
}
.crs-nav-toggle:hover { background: rgba(255,255,255,.2); }

/* --------------------------------------------------------------------------
   Collapse behaviour is stated here, not inherited.
   --------------------------------------------------------------------------
   Bootstrap supplies `.collapse:not(.show){display:none}` from css/style.css.
   Depending on that is the same bet that lost with /vendor/ - if style.css
   ever fails to serve, every phone gets a permanently open menu with no way
   to close it. Bootstrap still drives the toggle; these rules only guarantee
   a sane resting state at both widths if it does not.
   -------------------------------------------------------------------------- */
.crs-nav-menu,
.crs-nav .crs-nav-menu.collapse {
    display: flex;
    align-items: center;
    flex-basis: auto;
    margin-left: auto;
}

@media (max-width: 62rem) {
    .crs-nav-inner { flex-wrap: wrap; gap: 14px; padding: 10px 16px; min-height: 62px; }
    .crs-nav-wordmark { display: none; }
    .crs-nav-toggle { display: inline-flex; }
    .crs-nav .crs-nav-menu,
    .crs-nav .crs-nav-menu.collapse { flex: 1 0 100%; display: block; margin: 0; }
    /* (0,4,0), so it outranks the desktop rule above and style.css alike -
       but no id, which would also outrank the .show rule below and leave the
       phone menu stuck open. */
    .crs-nav .crs-nav-menu.collapse:not(.show) { display: none; }
    .crs-nav .crs-nav-menu.collapse.show,
    .crs-nav .crs-nav-menu.collapsing { display: block; }
    .crs-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 4px 0 8px;
    }
    .crs-nav-link { border-radius: 10px; padding: 0 16px; min-height: 46px; }
}

/* ==========================================================================
   2. Page hero — shared by index.php and job.php
   ==========================================================================
   The gradient and the particle overlay stay; the fixed 80vh height and the
   centred stock text do not. Each page fills it with its own content.
   ========================================================================== */
.hero-wrap.crs-job-hero-bg,
.crs-job-hero-bg {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    margin: 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;
}

/* ==========================================================================
   3. Listing hero (index.php)
   ========================================================================== */
.crs-listing-hero {
    position: relative;
    z-index: 2;
    padding: 56px 0 52px;
    color: #fff;
}
.crs-listing-hero .container { position: relative; }

.crs-listing-eyebrow {
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a8ccf7;                    /* 7.4:1 on the darkest stop */
}
.crs-listing-title {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #fff;
}
.crs-listing-lede {
    margin: 16px 0 0;
    max-width: 52ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
}

.crs-listing-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    padding: 9px 15px;
    font-size: .9375rem;
    font-weight: 700;
    color: #06305f;                    /* 12.8:1 on white */
    background: #fff;
    border-radius: 999px;
}
.crs-listing-count svg { width: 17px; height: 17px; color: var(--s-blue); }
.crs-listing-count.is-empty { color: #5c3000; background: #ffeacc; }

/* ==========================================================================
   4. Job list (index.php)
   ========================================================================== */
.crs-listing-section { padding: 40px 0 72px; background: var(--s-bg); }

.crs-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.crs-list-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--s-ink);
}
.crs-list-head p { margin: 0; font-size: .875rem; color: var(--s-ink-3); }

.crs-jobs { display: flex; flex-direction: column; gap: 12px; margin: 0; }

/* A row, not a card grid: these are scanned top to bottom against one
   another, and a grid of equal boxes makes ten identical squares. */
.crs-job-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 28px;
    align-items: center;
    padding: 20px 22px;
    background: var(--s-panel);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r);
    box-shadow: var(--s-lift);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.crs-job-card:hover {
    border-color: var(--s-line-2);
    box-shadow: 0 14px 32px -18px rgba(20,22,26,.35);
    transform: translateY(-1px);
}

.crs-job-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}
.crs-job-code {
    padding: 2px 8px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--s-bold);
    background: rgba(0,104,210,.08);
    border-radius: 5px;
}
.crs-job-tag {
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--s-ink-2);
    background: #eef1f5;
    border-radius: 999px;
}

.crs-job-title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: pretty;
}
.crs-job-title a { color: var(--s-ink); text-decoration: none; }
.crs-job-title a:hover { color: var(--s-blue); text-decoration: underline; }
/* The whole row is clickable without nesting anything inside the link. */
.crs-job-title a::after { content: ""; position: absolute; inset: 0; }
.crs-job-card { position: relative; }

.crs-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.crs-job-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .875rem;
    color: var(--s-ink-2);
}
.crs-job-meta svg { width: 16px; height: 16px; flex: none; color: var(--s-ink-3); }

.crs-job-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Days remaining. Amber inside the last week, so urgency is visible without
   the reader doing the date arithmetic. */
.crs-job-days {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--s-green);             /* 4.63:1 */
    background: rgba(94,127,36,.12);
    border-radius: 999px;
}
.crs-job-days svg { width: 14px; height: 14px; }
.crs-job-days.is-soon { color: #8a3a00; background: #ffeacc; }
.crs-job-days.is-last { color: #a81c14; background: #fde3e1; }

.crs-job-side .btn,
.crs-job-side a.btn {
    position: relative;
    z-index: 1;                        /* above the row-wide link overlay */
    min-height: 42px;
    padding: 0 20px;
    font-size: .9375rem;
}

.crs-job-date { font-size: .8125rem; color: var(--s-ink-3); white-space: nowrap; }

@media (max-width: 48rem) {
    .crs-job-card { grid-template-columns: 1fr; padding: 18px; }
    .crs-job-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .crs-listing-hero { padding: 36px 0 34px; }
    .crs-listing-section { padding: 28px 0 48px; }
}

/* ==========================================================================
   4b. Filters
   ==========================================================================
   Filled and driven by js/crs-jobs-filter.js. Rendered hidden in the markup
   and revealed by that script, so with scripting off nobody sees controls
   that cannot work.
   ========================================================================== */
.crs-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin: 0 0 14px;
    background: var(--s-panel);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r);
    box-shadow: var(--s-lift);
}
.crs-filters[hidden] { display: none; }

.crs-filter { display: flex; flex-direction: column; gap: 7px; flex: 0 1 15rem; min-width: 0; }
.crs-filter[hidden] { display: none; }
.crs-filter-search { flex: 1 1 20rem; }

.crs-filter label {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s-ink-3);
}

.crs-filter-field { position: relative; display: block; }
.crs-filter-glyph {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--s-ink-3);
    pointer-events: none;
}

.crs-filters input[type="search"],
.crs-filters select,
.crs-filters .crs-combo-btn {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--s-ink);
    background: var(--s-panel);
    border: 1px solid var(--s-line-2);
    border-radius: 9px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.crs-filters input[type="search"] { padding-left: 40px; }
.crs-filters input[type="search"]::placeholder { color: var(--s-ink-3); }

/* The combobox that replaces each native select — same shell, so the three
   controls line up. */
.crs-filters .crs-combo-btn {
    display: flex;
    align-items: center;
    padding-right: 40px;
    text-align: left;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}
.crs-filters .crs-combo-btn.is-placeholder { color: var(--s-ink-3); }
.crs-filters .crs-combo { width: 100%; }

.crs-filters select {
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}
.crs-filters select::-ms-expand { display: none; }

.crs-filters input[type="search"]:hover,
.crs-filters select:hover,
.crs-filters .crs-combo-btn:hover { border-color: var(--s-ink-3); }
.crs-filters input[type="search"]:focus,
.crs-filters select:focus,
.crs-filters .crs-combo-btn:focus,
.crs-filters .crs-combo.is-open .crs-combo-btn {
    outline: none;
    border-color: var(--s-bold);
    box-shadow: 0 0 0 3px rgba(0,104,210,.18);
}

.crs-filter-clear {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 18px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    color: var(--s-blue);
    background: transparent;
    border: 1px solid var(--s-line-2);
    border-radius: 9px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.crs-filter-clear:hover { background: #eef4fb; border-color: var(--s-blue); }
.crs-filter-clear[hidden] { display: none; }

.crs-filter-count {
    margin: 0 0 14px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--s-ink-2);
}
.crs-filter-count[hidden] { display: none; }

.crs-job-card[hidden] { display: none; }
.crs-empty[hidden] { display: none; }

@media (max-width: 48rem) {
    .crs-filters { padding: 14px; gap: 12px; }
    .crs-filter, .crs-filter-search { flex: 1 1 100%; }
    .crs-filter-clear { flex: 1 1 100%; }
}

/* ==========================================================================
   5. Empty and error states
   ========================================================================== */
.crs-empty {
    padding: 64px 24px;
    text-align: center;
    background: var(--s-panel);
    border: 1px dashed var(--s-line-2);
    border-radius: var(--s-r);
}
.crs-empty svg { width: 34px; height: 34px; margin-bottom: 14px; color: var(--s-ink-3); }
.crs-empty h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; color: var(--s-ink); }
.crs-empty p { margin: 0 auto; max-width: 40ch; font-size: .9375rem; color: var(--s-ink-3); }

.crs-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    font-size: .9375rem;
    line-height: 1.55;
    color: #5a1410;
    background: #fde3e1;
    border: 1px solid #f5b8b3;
    border-radius: var(--s-r);
}
.crs-notice svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: #a81c14; }
.crs-notice p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .crs-job-card:hover { transform: none; }
}

/* ==========================================================================
   Dark theme
   ==========================================================================
   Every colour in this file is a token, so the dark theme is a token swap and
   nothing else changes. Applied as data-theme="dark" on <html> by
   include/header.php before the first paint; js/crs-ui.js owns the toggle.

   The values are not the light ones inverted. Pure white on pure black is
   harsh at length, and CRS Blue is unreadable on a dark ground - so the ink
   tops out at #eceef1 and the accent moves to Bold Blue lightened.
   ========================================================================== */
[data-theme="dark"] {
    --s-blue:   #4d9bff;   /* 7.1:1 on --s-bg */
    --s-bold:   #7cb6ff;   /* 9.3:1 */
    --s-navy:   #0e1116;
    --s-ink:    #eceef1;   /* 15.8:1 */
    --s-ink-2:  #a8aeb8;   /*  7.4:1 */
    --s-ink-3:  #878e99;   /*  5.0:1 - the lightest used for text */
    --s-line:   rgba(255,255,255,.09);
    --s-line-2: rgba(255,255,255,.20);
    --s-bg:     #0c0e12;
    --s-panel:  #151920;
    --s-amber:  #f5a45c;
    --s-green:  #8fd14f;
    --s-lift:   0 1px 2px rgba(0,0,0,.5);
    --s-lift-2: 0 20px 48px -18px rgba(0,0,0,.8);
}
[data-theme="dark"] body { background: var(--s-bg); color: var(--s-ink); }

/* The bar is already dark; in dark mode it needs an edge instead of contrast. */
[data-theme="dark"] .crs-nav { background: #0e1116; box-shadow: inset 0 -1px 0 rgba(255,255,255,.10); }
[data-theme="dark"] .crs-nav-link.is-current,
[data-theme="dark"] .crs-nav-link.is-current:hover { color: #0e1116; background: #e6ecf5; }

/* The hero gradient has to darken with everything else, or it becomes the one
   bright rectangle on the page. */
[data-theme="dark"] .hero-wrap.crs-job-hero-bg,
[data-theme="dark"] .crs-job-hero-bg {
    background: linear-gradient(180deg, #0e1116 0%, #14243a 60%, #16304e 100%);
}
[data-theme="dark"] .crs-listing-count { color: #0e1116; background: #e6ecf5; }
[data-theme="dark"] .crs-listing-count svg { color: #16304e; }
[data-theme="dark"] .crs-listing-count.is-empty { color: #2a1400; background: #f5c98a; }

[data-theme="dark"] .crs-job-card { background: var(--s-panel); }
[data-theme="dark"] .crs-job-card:hover { box-shadow: 0 14px 32px -18px rgba(0,0,0,.9); }
[data-theme="dark"] .crs-job-code { color: var(--s-bold); background: rgba(77,155,255,.14); }
[data-theme="dark"] .crs-job-tag { color: var(--s-ink-2); background: rgba(255,255,255,.07); }
[data-theme="dark"] .crs-job-title a { color: var(--s-ink); }
[data-theme="dark"] .crs-job-title a:hover { color: var(--s-bold); }
[data-theme="dark"] .crs-job-days { color: #9ede63; background: rgba(143,209,79,.14); }
[data-theme="dark"] .crs-job-days.is-soon { color: #f7b978; background: rgba(245,164,92,.15); }
[data-theme="dark"] .crs-job-days.is-last { color: #ff9a90; background: rgba(255,124,112,.15); }

[data-theme="dark"] .crs-filters { background: var(--s-panel); }
[data-theme="dark"] .crs-filters input[type="search"],
[data-theme="dark"] .crs-filters select { color: var(--s-ink); background: #1c212a; }
[data-theme="dark"] .crs-filters select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23878e99' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .crs-filters .crs-combo-btn {
    color: var(--s-ink);
    background-color: #1c212a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23878e99' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .crs-filters .crs-combo-btn.is-placeholder { color: var(--s-ink-3); }
[data-theme="dark"] .crs-filter-clear { color: var(--s-bold); }
[data-theme="dark"] .crs-filter-clear:hover { background: rgba(77,155,255,.12); border-color: var(--s-bold); }

[data-theme="dark"] .crs-empty { background: var(--s-panel); }
[data-theme="dark"] .crs-empty h3 { color: var(--s-ink); }
[data-theme="dark"] .crs-notice { color: #ffd9d5; background: rgba(255,124,112,.13); border-color: rgba(255,124,112,.32); }
[data-theme="dark"] .crs-notice svg { color: #ff9a90; }

[data-theme="dark"] .ftco-footer,
[data-theme="dark"] .ftco-bg-dark { background: #0e1116 !important; }

/* ==========================================================================
   Theme toggle and back to top
   ==========================================================================
   Both are built by js/crs-ui.js, so no template carries them.
   ========================================================================== */
.crs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
.crs-theme-toggle:hover { color: #fff; background: rgba(255,255,255,.2); }
.crs-theme-toggle:focus-visible { outline: 3px solid rgba(168,204,247,.8); outline-offset: 2px; }
/* The mark shows what you would switch TO, which is the convention people
   already read correctly. */
.crs-theme-toggle .crs-theme-moon { display: block; }
.crs-theme-toggle .crs-theme-sun { display: none; }
[data-theme="dark"] .crs-theme-toggle .crs-theme-moon { display: none; }
[data-theme="dark"] .crs-theme-toggle .crs-theme-sun { display: block; }

.crs-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The toggle is the last thing in the bar. The links keep the auto margin, so
   the toggle sits hard right of them rather than taking the space itself. */
.crs-theme-toggle { margin-left: 18px; }

/* Narrow: the bar wraps and the menu drops to its own line, so order puts the
   toggle beside the Menu button rather than under it. */
@media (max-width: 62rem) {
    .crs-nav-brand    { order: 1; }
    .crs-theme-toggle { order: 2; margin-left: auto; }
    .crs-nav-toggle   { order: 3; margin-left: 0; }
    .crs-nav .crs-nav-menu,
    .crs-nav .crs-nav-menu.collapse { order: 4; }
}

.crs-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    background: var(--s-blue);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 12px 28px -10px rgba(6,24,47,.55);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s, background-color .12s ease;
}
.crs-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.crs-to-top:hover { background: #013a74; color: #fff; }
.crs-to-top:focus-visible { outline: 3px solid rgba(0,104,210,.55); outline-offset: 3px; }
[data-theme="dark"] .crs-to-top { color: #0e1116; background: var(--s-bold); }
[data-theme="dark"] .crs-to-top:hover { background: #a8ccf7; }

@media (max-width: 40rem) {
    .crs-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .crs-to-top { transition: opacity .01ms, visibility .01ms; transform: none; }
}