/* ============================================================================
   CTS site chrome — header + footer, restyled to the Claude Design
   "cts-site.css" system (dark util bar, mega-menu nav, dark footer).
   Source project: claude.ai/design/p/019e1eba-09c8-759d-bba6-5364190349ea

   WHY THIS IS AN OVERRIDE SHEET AND NOT A REWRITE
   -----------------------------------------------
   Three pieces of existing machinery bind to the legacy header DOM:
     1. wwwroot/js/cts-header.js  — querySelector('.header'), measures
        '.header-area', adds .sticky-active, publishes --cts-header-h and the
        body padding-top offset.
     2. assets/css/style.css      — '.header.sticky-active .header-area'
        supplies the actual position:fixed pinning.
     3. assets/js/main.js         — meanmenu clones 'nav.tm-navigation' into
        '.tm-mobilenav' to build the entire mobile menu.
   Replacing the markup would break all three at once, on every page of the
   site. So _Navigation keeps its DOM contract (.header, .header-area,
   nav.tm-navigation > ul > li > ul) and this sheet restyles it.

   Loaded LAST in _Head so equal-specificity rules beat the theme. Everything
   is scoped under .cts-chrome (added to the .header and .footer elements) so
   these rules can never leak into page content.
   ============================================================================ */

.cts-chrome {
    --ch-blue: #1FA9E0;
    --ch-blue-6: #0E8FC4;
    --ch-blue-7: #0B76A3;
    --ch-blue-50: #EAF7FD;
    --ch-navy: #0B1220;
    --ch-ink: #0B1220;
    --ch-muted: #4A5563;
    --ch-muted-2: #6B7681;
    --ch-line: #E4E7EB;
    --ch-line-2: #EFF1F4;
    --ch-mist: #F7F9FB;
    --ch-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ch-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --ch-pad: 64px;
    font-family: var(--ch-sans);
}

/* ---------------------------------------------------------------- header -- */

.cts-chrome.header .header-area {
    background: #fff;
    border-bottom: 1px solid var(--ch-line);
}

/* --- utility bar --------------------------------------------------------- */
.cts-chrome .header-toparea {
    background: var(--ch-navy);
    color: #93A3B4;
    font-size: 12.5px;
    padding: 7px var(--ch-pad);
}
.cts-chrome .header-toparea .container { max-width: none; padding: 0; }
.cts-chrome .header-toparea .row { align-items: center; margin: 0; }
.cts-chrome .header-toparea [class*="col-"] { padding: 0; }
.cts-chrome .header-topinfo ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; }
.cts-chrome .header-topinfo li { font-size: 12.5px; color: #93A3B4; }
.cts-chrome .header-topinfo a,
.cts-chrome .header-topbutton a,
.cts-chrome .topbar-list a { color: #93A3B4; font-size: 12.5px; text-decoration: none; }
.cts-chrome .header-topinfo a:hover,
.cts-chrome .header-topbutton a:hover,
.cts-chrome .topbar-list a:hover { color: #fff; }
.cts-chrome .header-topbutton { text-align: right; font-size: 12.5px; color: #4A5563; }
.cts-chrome .header-topbutton strong { font-weight: 600; }
.cts-chrome .topbar-list { margin: 0 !important; justify-content: flex-end; gap: 18px; }
.cts-chrome .topbar-list li { font-size: 12.5px; }

/* --- nav row ------------------------------------------------------------- */
.cts-chrome .header-bottomarea { background: #fff; }
.cts-chrome .header-bottomarea .container { max-width: none; padding: 0; }
.cts-chrome .header-bottominner {
    padding: 11px var(--ch-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.cts-chrome .header-logo img { height: 46px !important; width: auto; }

/* --- primary nav --------------------------------------------------------- */
/* The theme sets '.header-bottominner .tm-navigation { flex-grow: 1 }', which
   makes the nav fill the gap so its links hug the logo with a void before the
   buttons. Cancel the grow: at natural width the parent's space-between then
   centres the nav between logo and CTAs, matching the design's .navrow. */
.cts-chrome nav.tm-navigation {
    display: flex; align-items: center;
    flex-grow: 0; text-align: left;
}
.cts-chrome .tm-navigation > ul {
    margin: 0; padding: 0; font-size: inherit;
    display: flex; align-items: center; gap: 2px;
}
.cts-chrome .tm-navigation > ul > li {
    display: block; position: relative; list-style: none; font-size: inherit;
}
.cts-chrome .tm-navigation > ul > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    font-family: var(--ch-sans);
    font-size: 14.5px; font-weight: 500; color: #3B4652;
    padding: 10px 13px; border-radius: 8px;
    text-decoration: none;
}
.cts-chrome .tm-navigation > ul > li > a:hover,
.cts-chrome .tm-navigation > ul > li:hover > a {
    color: var(--ch-ink); background: var(--ch-mist);
}
.cts-chrome .tm-navigation > ul > li.is-current > a {
    font-weight: 700; color: var(--ch-ink);
}
.cts-chrome .tm-navigation > ul > li.is-current > a::before {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: -12px;
    height: 2px; background: var(--ch-blue);
}

/* Replace the theme's Material-Design-Iconic caret with a plain chevron. */
.cts-chrome .tm-navigation .tm-navigation-dropdown > a::after {
    content: "";
    font-family: inherit; font-size: 0; padding: 0;
    width: 8px; height: 8px; flex: none;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* --- mega menu ----------------------------------------------------------- */
.cts-chrome .tm-navigation .tm-navigation-dropdown > ul {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: auto;
    width: 286px; padding: 8px;
    background: #fff;
    border: 1px solid var(--ch-line);
    border-top: 1px solid var(--ch-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(11, 18, 32, .13);
    opacity: 0; visibility: hidden; z-index: 5;
    transform: translateY(-4px) scaleY(1);
    transform-origin: top center;
    transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
    text-align: left;
}
.cts-chrome .tm-navigation .tm-navigation-dropdown:hover > ul,
.cts-chrome .tm-navigation .tm-navigation-dropdown:focus-within > ul {
    opacity: 1; visibility: visible; transform: none; z-index: 5;
}
.cts-chrome .tm-navigation .tm-navigation-dropdown > ul > li {
    display: block; padding: 0; position: static;
}
.cts-chrome .tm-navigation .tm-navigation-dropdown > ul > li > a {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-family: var(--ch-sans);
    font-size: 14px; font-weight: 600; color: #23303E; line-height: 1.35;
}
.cts-chrome .tm-navigation .tm-navigation-dropdown > ul > li > a:hover {
    background: var(--ch-blue-50); color: var(--ch-blue-7);
}
.cts-chrome .tm-navigation .tm-navigation-dropdown > ul > li > a span {
    display: block; font-size: 12.5px; font-weight: 400;
    color: var(--ch-muted-2); margin-top: 3px; line-height: 1.45;
}

/* --- header CTAs --------------------------------------------------------- */
.cts-chrome .header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.cts-chrome .header-cta .ch-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 18px; border-radius: 9px;
    font-family: var(--ch-sans); font-size: 13.5px; font-weight: 700; line-height: 1;
    border: 1px solid transparent; white-space: nowrap; text-decoration: none;
    cursor: pointer;
}
.cts-chrome .header-cta .ch-btn--s { background: #fff; color: var(--ch-ink); border-color: var(--ch-line); }
.cts-chrome .header-cta .ch-btn--s:hover { border-color: #9AA6B2; color: var(--ch-ink); }
.cts-chrome .header-cta .ch-btn--p { background: var(--ch-blue); color: #fff; }
.cts-chrome .header-cta .ch-btn--p:hover { background: var(--ch-blue-6); color: #fff; }

/* The theme's own .tm-button (Find Jobs) sat inside the <ul>; it now lives in
   .header-cta, but keep a rule in case a cached view still renders it there. */
.cts-chrome .tm-navigation .tm-button {
    background: var(--ch-blue); color: #fff; border-radius: 9px;
    height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 700;
    display: inline-flex; align-items: center; margin-left: 10px;
}
.cts-chrome .tm-navigation .tm-button:hover { background: var(--ch-blue-6); color: #fff; }

/* --- announcement banner (kept, restyled to sit above the util bar) ------ */
.cts-chrome .header-area > header {
    font-family: var(--ch-sans);
    font-size: 15px !important;
    padding: 8px var(--ch-pad) !important;
}
.cts-chrome .header-area > header p { margin: 4px 0 !important; }

/* --- search box: legacy, unused in the new chrome ------------------------ */
.cts-chrome .header-searchbox { display: none !important; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1240px) {
    .cts-chrome { --ch-pad: 28px; }
    .cts-chrome .tm-navigation > ul > li > a { padding: 10px 10px; font-size: 14px; }
}
@media (max-width: 1100px) {
    /* Below this the meanmenu mobile nav takes over (meanScreenWidth 991),
       but the desktop nav would overflow first — hide it early and show the
       CTA only. 991-1100px therefore has no visible nav, so surface the
       burger by widening meanmenu's own breakpoint is not possible without
       touching main.js; instead keep the desktop nav until 991 but let it
       shrink. */
    .cts-chrome .tm-navigation > ul > li > a { padding: 9px 8px; font-size: 13.5px; }
    .cts-chrome .header-cta .ch-btn--s { display: none; }
}
@media (max-width: 991px) {
    .cts-chrome nav.tm-navigation { display: none; }
    .cts-chrome .header-bottominner { padding: 10px var(--ch-pad); }
    .cts-chrome .header-logo img { height: 40px !important; }
    /* meanmenu drops its burger, absolutely positioned, at the right edge of
       .header-bottomarea. Reserve room so the CTA doesn't sit under it. */
    .cts-chrome .header-cta { margin-right: 56px; }
}
@media (max-width: 680px) {
    .cts-chrome { --ch-pad: 16px; }
    .cts-chrome .header-toparea { padding: 6px var(--ch-pad); }
    .cts-chrome .header-topinfo ul { gap: 12px; }
    .cts-chrome .header-cta .ch-btn { height: 38px; padding: 0 14px; font-size: 13px; }
}

/* --- mobile menu (meanmenu clone) ---------------------------------------- */
/* meanmenu deep-clones the nav, descriptions included. Hide them there — the
   mobile list is a plain list of links, not a mega menu. */
.mean-container .mean-nav ul li a span { display: none !important; }
.mean-container .mean-nav { font-family: var(--ch-sans); }
.mean-container .mean-nav ul li a { font-size: 14.5px; font-weight: 500; }

/* ---------------------------------------------------------------- footer -- */

.cts-chrome.footer {
    background: var(--ch-navy);
    color: #8B99A8;
    font-size: 13.5px;
    font-family: var(--ch-sans);
}
.cts-chrome.footer .footer-toparea { padding: 56px var(--ch-pad) 40px; }
.cts-chrome.footer .container { max-width: 1180px; }
.cts-chrome.footer h3,
.cts-chrome.footer h4,
.cts-chrome.footer .widget-title {
    font-family: var(--ch-mono);
    font-size: 10px; font-weight: 500; color: #fff;
    letter-spacing: .18em; text-transform: uppercase;
    margin-bottom: 16px;
}
/* #8B99A8 passed AA at 6.44:1 but reads faint at 13.5px on this ground; #9AA9B8
   is 7.79:1 and keeps the muted footer intent without straining. */
.cts-chrome.footer p,
.cts-chrome.footer li,
.cts-chrome.footer div { color: #9AA9B8; }
.cts-chrome.footer a { color: #C5CFD9; font-size: 13.5px; text-decoration: none; }
.cts-chrome.footer a:hover { color: #fff; text-decoration: none; }
.cts-chrome.footer ul { list-style: none; padding-left: 0; margin: 0; }
/* padding-block only — NEVER the shorthand. The contact widget relies on the
   theme's 'li { padding-left: 74px }' gutter with 'li b { position:absolute }'
   labels sitting in it; resetting padding-left drops the labels on top of the
   values. */
.cts-chrome.footer .single-widget ul li { padding-top: 5px; padding-bottom: 5px; line-height: 1.6; }
.cts-chrome.footer .widget-contact strong { color: #E2E8F0; font-weight: 600; }

/* Positions column — keep the thumbnails, tighten them to the new scale. */
.cts-chrome.footer .widget-recentpost img {
    width: 54px; height: 40px; object-fit: cover; border-radius: 6px;
}

/* Get Started / resume CTA */
.cts-chrome.footer .tm-button {
    background: var(--ch-blue); color: #fff; border: none; border-radius: 9px;
    height: 46px; padding: 0 20px; font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
}
.cts-chrome.footer .tm-button:hover { background: var(--ch-blue-6); color: #fff; }

/* Bottom bar */
.cts-chrome.footer .footer-bottomarea {
    border-top: 1px solid #1B2739;
    padding: 18px var(--ch-pad) 26px;
}
.cts-chrome.footer .footer-bottomarea .container {
    padding: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.cts-chrome.footer .footer-bottomarea p { margin: 0; }
/* Was #657585, which measured 3.96:1 on the #0B1220 footer — below the 4.5:1
   WCAG AA minimum for text this size, and visibly faint. #93A1B0 is 7.10:1 and
   still reads as secondary against the #C5CFD9 column links above it. */
.cts-chrome.footer .footer-copyright,
.cts-chrome.footer .footer-legal {
    font-size: 12.5px; color: #93A1B0;
}
.cts-chrome.footer .footer-legal {
    display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end;
}
.cts-chrome.footer .footer-legal a { font-size: 12.5px; color: #B3BFCB; }
.cts-chrome.footer .footer-legal a:hover { color: #fff; }
.cts-chrome.footer .footer-social { display: flex; gap: 12px; margin-top: 16px; }
.cts-chrome.footer .footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    display: inline-flex; align-items: center; justify-content: center; color: #C5CFD9;
}
.cts-chrome.footer .footer-social a:hover { background: rgba(255,255,255,.16); color: #fff; }

@media (max-width: 680px) {
    .cts-chrome.footer .footer-toparea { padding: 40px var(--ch-pad) 28px; }
    .cts-chrome.footer .footer-legal { justify-content: flex-start; }
}