/* ============================================================
   Thaleria — careers portal chrome
   Styles for the careers sub-bar and portal session UI that
   render under the marketing .tl-nav on /careers/* pages.
   Loaded alongside colors_and_type.css, components.css and
   site.css (the marketing TopNav/Footer live in site.css).
   ============================================================ */

.tl-cnav-main {
  /* Keeps the footer at the bottom on short portal pages */
  min-height: calc(100vh - 76px - 52px - 260px);
  padding-bottom: var(--space-16);
}

.tl-cnav-pending {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

/* --- Sub-bar ---------------------------------------------------- */
/* Sticky right under the marketing .tl-nav (76px). */
.tl-csubnav {
  position: sticky;
  top: 76px;
  /* Strictly between page content and the main nav: careers.css raises the
     filters card (and its skill picker) to 40, the marketing .tl-nav is 50.
     Equal z-indexes let DOM order win — that's the "some elements scroll
     over it" bug. */
  z-index: 45;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-sans);
}
.tl-csubnav__inner {
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.tl-csubnav__label {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.tl-cnav__divider {
  width: 1px;
  height: 24px;
  background: var(--neutral-300);
  flex-shrink: 0;
}

/* Tabs */
.tl-cnav__links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-cnav__link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tl-cnav__link:hover { background: var(--neutral-100); color: var(--fg-1); }
/* Active tab: deep orange rather than the marketing nav's orange-700 —
   the brighter accent reads washed-out as a standalone state on the
   light bar. */
.tl-cnav__link.is-active {
  color: var(--orange-900);
  font-weight: var(--weight-semibold);
}
.tl-cnav__link.is-active:hover { background: rgba(255, 165, 59, 0.10); color: var(--orange-900); }

/* Session cluster (right) */
.tl-cnav__session {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  min-height: 36px;
}
.tl-cnav__signin {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.tl-cnav__signin:hover { background: var(--neutral-100); }
/* Size override: sub-bar CTA is more compact than the 48px marketing button */
.tl-btn.tl-cnav__cta {
  height: 36px;
  min-width: 0;
  padding: 0 var(--space-5);
  font-size: 14px;
}

/* Account chip + dropdown */
.tl-cnav__account { position: relative; }
.tl-cnav__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.tl-cnav__chip:hover { border-color: var(--border-2); }
.tl-cnav__chip svg { color: var(--fg-3); }
.tl-cnav__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--orange-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.tl-cnav__chip-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.tl-cnav__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-fast);
}
.tl-cnav__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tl-cnav__menu form { margin: 0; }
.tl-cnav__menu-link {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.tl-cnav__menu-link:hover { background: var(--neutral-100); }

/* --- Sticky offsets on portal pages ------------------------------- */
/* careers.css computes sticky tops against the main nav alone (76px nav +
   24px gap = 100px). Portal pages add the 52px sub-bar, so sticky asides
   must clear both bars: 76 + 52 + 24 = 152px. Scoped under .tl-cnav-main
   for specificity: the page-level careers.css <link> loads after this file,
   so a bare class selector would lose the tie. */
.tl-cnav-main .tl-job-aside { top: 152px; }
.tl-cnav-main .tl-faq-cats__rail { top: 152px; }

/* --- Mobile ------------------------------------------------------ */
@media (max-width: 860px) {
  /* No burger in the sub-bar: tabs scroll horizontally and the session
     cluster compacts. The marketing burger above handles site links. */
  .tl-csubnav__inner { gap: var(--space-3); }
  /* The "Careers" label and its divider cost ~80px that the tabs and the
     session cluster both need — and the page the visitor is on already says
     Careers. Dropping them is what keeps the session control on screen at 375. */
  .tl-csubnav__label,
  .tl-csubnav__inner > .tl-cnav__divider { display: none; }
  /* The scroller below is on the <ul>, but the <nav> wrapping it is the flex
     item — and a flex item's default min-width: auto refuses to shrink past its
     content. Without this the tabs never scroll; the overflow lands on the
     session cluster instead, which doesn't shrink, and it gets clipped off
     the right edge. Today the tabs fit without scrolling; this is what keeps
     the failure contained to them if the tab set grows. */
  .tl-csubnav__inner > nav { min-width: 0; }
  .tl-csubnav__links {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-csubnav__links::-webkit-scrollbar { display: none; }
  .tl-cnav__chip-name { display: none; }
  /* Only one session control fits here, and it's Login rather than the register
     CTA: Keycloak's login page carries a "Create account" link, so signing up is
     one click from Login, whereas reaching Login from the register page costs a
     "Back to Login" detour. Login is also the right door for the returning
     visitors who are the majority on a job board. */
  .tl-cnav__cta { display: none; }
  .tl-cnav__signin {
    height: 36px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--fg-on-dark);
  }
  .tl-cnav__signin:hover { background: var(--navy-600); color: var(--fg-on-dark); }
}

/* --- Job-board switcher ------------------------------------------ */
/* Hero row + segmented pills */
.tl-careers-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
/* Let the text column shrink below its intrinsic (one-line headline) width —
   otherwise it claims the full row and the aside always wraps beneath it. */
.tl-careers-hero__row > :first-child {
  flex: 1 1 420px;
  min-width: 0;
}
/* Break the lede earlier so its measure roughly matches the wrapped
   headline's width (careers.css allows 720px site-wide). */
.tl-careers-hero__row .tl-careers-hero__lede { max-width: 560px; }
.tl-careers-hero__aside { flex-shrink: 0; padding-bottom: var(--space-2); }
.tl-boardseg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
}
/* One pill per board, so the row's width is content the CMS controls. On a phone
   three boards already reach the gutter and a fourth would run off-screen with
   nothing to scroll — the row can't wrap without breaking the pill-shaped
   container. So below the breakpoint it scrolls instead. The aside needs both
   declarations for that to work: shrink-to-fit isn't enough on its own, because
   a flex item's default min-width: auto refuses to go below its content. */
@media (max-width: 860px) {
  .tl-careers-hero__aside { flex-shrink: 1; min-width: 0; }
  .tl-boardseg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-boardseg::-webkit-scrollbar { display: none; }
}
.tl-boardseg__pill {
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tl-boardseg__pill:hover { background: var(--neutral-100); }
.tl-boardseg__pill.is-active {
  background: var(--navy-700);
  color: var(--fg-on-dark);
  font-weight: var(--weight-semibold);
}

/* --- Portal notice (post-deletion acknowledgement) -------------------
   Shell-loaded, so it's available on any /careers route that needs a
   one-off confirmation banner above the page content. */
.tl-cnav-notice {
  margin-top: var(--space-8);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  background: rgba(14, 159, 110, 0.08);
  border: 1px solid rgba(14, 159, 110, 0.30);
  color: var(--fg-1);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.tl-cnav-notice strong { font-weight: var(--weight-semibold); }