/**
 * @file
 * A public careers page inside the site's own theme (PortalPage): the
 * design's container and the slim navigation above the content.
 *
 * Scoped by gdrfad_core/dds/scripts/scope-css.py; the container's own rule
 * is written scoped (it is the .gdrfad-dds-embedded element itself).
 */

/* No background of its own: the site's page shows through. The design's
 * surface-dim (base.css) stays the staff theme's page colour. */
.gdrfad-dds-embedded.careers-portal {
  display: flow-root;
  padding: var(--gap-gap-md) 0;
  background: none;
}

/* Side padding only where the screen has room: on a phone the site theme's
 * own gutters already frame the content. */
@media (min-width: 768px) /* scope-css: viewport */ {
  .gdrfad-dds-embedded.careers-portal {
    padding: var(--gap-gap-lg);
  }
}

:where(.gdrfad-dds) .careers-portal-nav,
.gdrfad-dds-embedded .careers-portal-nav {
  margin-block-end: var(--gap-gap-lg);
  border-block-end: 1px solid var(--surface-outline-variant);
}

:where(.gdrfad-dds) .careers-portal-nav__list,
.gdrfad-dds-embedded .careers-portal-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gap-gap-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .careers-portal-nav__item,
.gdrfad-dds-embedded .careers-portal-nav__item {
  margin: 0;
  padding: 0;
}

/* 48px tall: a comfortable touch target. The bottom border overlaps the
 * nav's own line, so the current page reads as a tab. */
:where(.gdrfad-dds) .careers-portal-nav__link,
.gdrfad-dds-embedded .careers-portal-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  margin-block-end: -1px;
  border-block-end: 3px solid transparent;
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-body);
  text-decoration: none;
}

:where(.gdrfad-dds) .careers-portal-nav__link:hover,
.gdrfad-dds-embedded .careers-portal-nav__link:hover {
  color: var(--primary-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.gdrfad-dds) .careers-portal-nav__link.is-current,
.gdrfad-dds-embedded .careers-portal-nav__link.is-current {
  border-block-end-color: var(--primary-primary);
  color: var(--primary-primary);
}

:where(.gdrfad-dds) .careers-portal-nav__link:focus-visible,
.gdrfad-dds-embedded .careers-portal-nav__link:focus-visible {
  outline: 2px solid var(--primary-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}